refactor(common): convert routing to TypeScript

src/elements/common/routing/index.ts

@@ -0,0 +1 @@
+export { default as withRouterAndRef } from './withRouterAndRef';

src/elements/common/routing/withRouterAndRef.js → src/elements/common/routing/withRouterAndRef.js.flow

@@ -5,7 +5,7 @@ import { Route } from 'react-router-dom';
 // Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
 // functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
 export default function withRouterAndRef(Wrapped: React.ComponentType<any>) {
-    const WithRouterAndRef = React.forwardRef<Object, React.Ref<any>>((props, ref) => (
+    const WithRouterAndRef = React.forwardRef((props: any, ref: React.Ref<any>) => (
         <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
     ));
     const name = Wrapped.displayName || Wrapped.name || 'Component';

src/elements/common/routing/withRouterAndRef.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Route } from 'react-router-dom';
+
+// Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
+// functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
+export default function withRouterAndRef(Wrapped: React.ComponentType<Record<string, unknown>>) {
+    const WithRouterAndRef = React.forwardRef((props: Record<string, unknown>, ref: React.Ref<unknown>) => (
+        <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
+    ));
+    const name = Wrapped.displayName || Wrapped.name || 'Component';
+    WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
+    return WithRouterAndRef;
+}