refactor(common): convert routing to TypeScript

Author: devin-ai-integration[bot]

src/elements/common/routing/index.js src/elements/common/routing/index.js.flowsrc/elements/common/routing/index.js renamed to src/elements/common/routing/index.js.flow

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

src/elements/common/routing/index.ts

@@ -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;
+}