FIX Set correct proptypes for react components

client/src/components/FormBuilder/FormBuilder.js

@@ -412,8 +412,8 @@ const basePropTypes = {
   validate: PropTypes.func,
   values: PropTypes.object,
   submitting: PropTypes.bool,
-  baseFormComponent: PropTypes.func.isRequired,
-  baseFieldComponent: PropTypes.func.isRequired,
+  baseFormComponent: PropTypes.elementType.isRequired,
+  baseFieldComponent: PropTypes.elementType.isRequired,
   getCustomFields: PropTypes.func,
   responseRequestedSchema: PropTypes.arrayOf(PropTypes.oneOf([
     'schema', 'state', 'errors', 'auto',

client/src/components/PopoverOptionSet/PopoverOptionSet.js

@@ -235,14 +235,14 @@ PopoverOptionSet.propTypes = {
   // Default search handler assumes button content to be plain text and performs
   // a simple string.contains check.
   onSearch: PropTypes.func,
-  container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  container: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   isOpen: PropTypes.bool.isRequired,
   placement: PropTypes.string,
-  target: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]).isRequired,
+  target: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
   toggle: PropTypes.func.isRequired,
   searchPlaceholder: PropTypes.string,
   disableSearch: PropTypes.bool,
-  ButtonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  ButtonComponent: PropTypes.elementType,
   // Various classNames that can be configured:
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   searchClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),

client/src/components/PopoverOptionSet/README.md

@@ -73,7 +73,7 @@ buttons: PropTypes.arrayOf(PropTypes.shape({
 onSearch: PropTypes.func,
 
 // The container to render the popover within. See the ReactStrap documentation for popovers
-container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+container: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
 
 // Whether the popover is open. See the ReactStrap documentation for popovers
 // A component that controls this prop with state is available (see below)
@@ -84,7 +84,7 @@ placement: PropTypes.string,
 
 // The ID of the DOMElement used to toggle this popoever. See the ReactStrap documentation for popover
 // A component that provides this prop is available (see below)
-target: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]).isRequired,
+target: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
 
 // A function that toggles this visibility of the popover. See the ReactStrap documentation for popover
 // This is NOT required for Reactstrap but IS required for this component as accessibility helpers are provided to close
@@ -98,7 +98,7 @@ searchPlaceholder: PropTypes.string,
 disableSearch: PropTypes.bool,
 
 // The component to use for each button - defaults to a Reactstrap button component
-ButtonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ButtonComponent: PropTypes.elementType,
 
 // Various classNames that can be configured
 // NOTE that styles are applied to the defaults for these props. If you are not intending to add your own styles then 

client/src/components/Preview/Preview.js

@@ -156,7 +156,7 @@ Preview.propTypes = {
   itemId: PropTypes.number,
   onBack: PropTypes.func,
   moreActions: PropTypes.arrayOf(PropTypes.element),
-  ViewModeComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  ViewModeComponent: PropTypes.elementType,
 };
 
 Preview.defaultProps = {

client/src/components/ResizeAware/ResizeAware.js

@@ -105,7 +105,7 @@ export default class ResizeAware extends Component {
 }
 
 ResizeAware.propTypes = {
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   onResize: PropTypes.func
 };
 

client/src/containers/Form/Form.js

@@ -15,7 +15,7 @@ const InjectableForm = (props) => {
 };
 
 InjectableForm.propTypes = {
-  formComponent: PropTypes.func.isRequired,
+  formComponent: PropTypes.elementType.isRequired,
 };
 
 const InjectedForm = inject(

client/src/containers/FormBuilderLoader/FormBuilderLoader.js

@@ -446,7 +446,7 @@ FormBuilderLoader.propTypes = Object.assign({}, basePropTypes, {
   submitting: PropTypes.bool,
   onFetchingSchema: PropTypes.func,
   onReduxFormInit: PropTypes.func,
-  loadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  loadingComponent: PropTypes.elementType.isRequired,
 });
 
 FormBuilderLoader.defaultProps = {

client/src/containers/InsertLinkModal/fileSchemaModalHandler.js

@@ -58,7 +58,7 @@ class FileSchemaHandler extends Component {
 
 FileSchemaHandler.propTypes = {
   fileAttributes: PropTypes.object,
-  Component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  Component: PropTypes.elementType,
   schemaUrl: PropTypes.string,
   actions: PropTypes.object,
 };

client/src/lib/withRouter.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+
+// Essentially a polyfill for the old withRouter hoc that came with react-router-dom
+// This should really be replaced by using the hooks directly instead of as props but
+// refactoring for that would take way longer than just adding this polyfill
+export default function withRouter(ComponentToWrap) {
+  function ComponentWithRouterProp(props) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const params = useParams();
+    return (
+      <ComponentToWrap
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        router={{ location, navigate, params }}
+      />
+    );
+  }
+  return ComponentWithRouterProp;
+}