Move route utils to packages/routes

Signed-off-by: Émile Ré <nemile.re@gmail.com>

packages/routes/src/appRoute.tsx

@@ -0,0 +1,30 @@
+import { ComponentType, Suspense } from "react";
+import { RouteObject } from "react-router";
+
+export type AppRoute = Omit<RouteObject, "children"> & {
+  children?: AppRoute[];
+  Fallback?: ComponentType;
+}
+
+export function routeFromAppRoute(appRoute: AppRoute): RouteObject {
+  const { Component, Fallback, children, ...rest } = appRoute;
+  let route = { ...rest } as RouteObject;
+
+  if (Component && Fallback) {
+    const OriginalComponent = Component as ComponentType;
+
+    route = {
+      ...route,
+      Component: () => (
+        <Suspense fallback={<Fallback />}>
+          <OriginalComponent />
+        </Suspense>
+      ),
+    };
+  }
+
+  return {
+    ...route,
+    children: children?.map(routeFromAppRoute),
+  } as RouteObject;
+}

packages/routes/src/index.ts

@@ -0,0 +1,2 @@
+export { routeFromAppRoute, type AppRoute } from "./appRoute";
+export { withQueryRef, loaderFromQueryLoader } from "./relay";

packages/routes/src/relay.tsx

@@ -0,0 +1,35 @@
+import { ComponentType } from "react";
+import { EnvironmentProviderOptions, PreloadedQuery } from "react-relay";
+import { LoaderFunction, LoaderFunctionArgs, useLoaderData } from "react-router";
+import { OperationType } from "relay-runtime";
+import { useCleanup } from "@probo/hooks";
+
+export function withQueryRef<
+  TQuery extends OperationType,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions
+>(
+  Component: ComponentType<{ queryRef: PreloadedQuery<TQuery, TEnvironmentProviderOptions> }>,
+) {
+  return () => {
+    const { queryRef, dispose } = useLoaderData();
+
+    useCleanup(dispose, 1000);
+
+    return <Component queryRef={queryRef} />
+  }
+}
+
+export function loaderFromQueryLoader<
+  TQuery extends OperationType,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions
+>(
+  queryLoader: (params: Record<string, string>) => PreloadedQuery<TQuery, TEnvironmentProviderOptions>
+): LoaderFunction {
+  return ({ params }: LoaderFunctionArgs) => {
+    const query = queryLoader(params as Record<string, string>);
+    return {
+      queryRef: query,
+      dispose: query.dispose,
+    };
+  }
+}