Import from bucket for global items

apps/vite/src/routeTree.gen.ts

@@ -174,163 +174,94 @@ const ProfileSettingsIndexLazyRoute = ProfileSettingsIndexLazyImport.update({
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
     '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
     '/destination/query': {
-      id: '/destination/query'
-      path: '/destination/query'
-      fullPath: '/destination/query'
       preLoaderRoute: typeof DestinationQueryLazyImport
       parentRoute: typeof rootRoute
     }
     '/item/$itemId': {
-      id: '/item/$itemId'
-      path: '/item/$itemId'
-      fullPath: '/item/$itemId'
       preLoaderRoute: typeof ItemItemIdLazyImport
       parentRoute: typeof rootRoute
     }
     '/pack/$id': {
-      id: '/pack/$id'
-      path: '/pack/$id'
-      fullPath: '/pack/$id'
       preLoaderRoute: typeof PackIdLazyImport
       parentRoute: typeof rootRoute
     }
     '/pack/create': {
-      id: '/pack/create'
-      path: '/pack/create'
-      fullPath: '/pack/create'
       preLoaderRoute: typeof PackCreateLazyImport
       parentRoute: typeof rootRoute
     }
     '/profile/$id': {
-      id: '/profile/$id'
-      path: '/profile/$id'
-      fullPath: '/profile/$id'
       preLoaderRoute: typeof ProfileIdLazyImport
       parentRoute: typeof rootRoute
     }
     '/trip/$tripId': {
-      id: '/trip/$tripId'
-      path: '/trip/$tripId'
-      fullPath: '/trip/$tripId'
       preLoaderRoute: typeof TripTripIdLazyImport
       parentRoute: typeof rootRoute
     }
     '/trip/create': {
-      id: '/trip/create'
-      path: '/trip/create'
-      fullPath: '/trip/create'
       preLoaderRoute: typeof TripCreateLazyImport
       parentRoute: typeof rootRoute
     }
     '/about/': {
-      id: '/about/'
-      path: '/about'
-      fullPath: '/about'
       preLoaderRoute: typeof AboutIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/appearance/': {
-      id: '/appearance/'
-      path: '/appearance'
-      fullPath: '/appearance'
       preLoaderRoute: typeof AppearanceIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/dashboard/': {
-      id: '/dashboard/'
-      path: '/dashboard'
-      fullPath: '/dashboard'
       preLoaderRoute: typeof DashboardIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/feed/': {
-      id: '/feed/'
-      path: '/feed'
-      fullPath: '/feed'
       preLoaderRoute: typeof FeedIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/items/': {
-      id: '/items/'
-      path: '/items'
-      fullPath: '/items'
       preLoaderRoute: typeof ItemsIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/map/': {
-      id: '/map/'
-      path: '/map'
-      fullPath: '/map'
       preLoaderRoute: typeof MapIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/maps/': {
-      id: '/maps/'
-      path: '/maps'
-      fullPath: '/maps'
       preLoaderRoute: typeof MapsIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/packs/': {
-      id: '/packs/'
-      path: '/packs'
-      fullPath: '/packs'
       preLoaderRoute: typeof PacksIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/password-reset/': {
-      id: '/password-reset/'
-      path: '/password-reset'
-      fullPath: '/password-reset'
       preLoaderRoute: typeof PasswordResetIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/privacy/': {
-      id: '/privacy/'
-      path: '/privacy'
-      fullPath: '/privacy'
       preLoaderRoute: typeof PrivacyIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/profile/': {
-      id: '/profile/'
-      path: '/profile'
-      fullPath: '/profile'
       preLoaderRoute: typeof ProfileIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/register/': {
-      id: '/register/'
-      path: '/register'
-      fullPath: '/register'
       preLoaderRoute: typeof RegisterIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/sign-in/': {
-      id: '/sign-in/'
-      path: '/sign-in'
-      fullPath: '/sign-in'
       preLoaderRoute: typeof SignInIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/trips/': {
-      id: '/trips/'
-      path: '/trips'
-      fullPath: '/trips'
       preLoaderRoute: typeof TripsIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/profile/settings/': {
-      id: '/profile/settings/'
-      path: '/profile/settings'
-      fullPath: '/profile/settings'
       preLoaderRoute: typeof ProfileSettingsIndexLazyImport
       parentRoute: typeof rootRoute
     }
@@ -339,7 +270,7 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren({
+export const routeTree = rootRoute.addChildren([
   IndexRoute,
   DestinationQueryLazyRoute,
   ItemItemIdLazyRoute,
@@ -363,110 +294,6 @@ export const routeTree = rootRoute.addChildren({
   SignInIndexLazyRoute,
   TripsIndexLazyRoute,
   ProfileSettingsIndexLazyRoute,
-})
+])
 
 /* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
-  "routes": {
-    "__root__": {
-      "filePath": "__root.tsx",
-      "children": [
-        "/",
-        "/destination/query",
-        "/item/$itemId",
-        "/pack/$id",
-        "/pack/create",
-        "/profile/$id",
-        "/trip/$tripId",
-        "/trip/create",
-        "/about/",
-        "/appearance/",
-        "/dashboard/",
-        "/feed/",
-        "/items/",
-        "/map/",
-        "/maps/",
-        "/packs/",
-        "/password-reset/",
-        "/privacy/",
-        "/profile/",
-        "/register/",
-        "/sign-in/",
-        "/trips/",
-        "/profile/settings/"
-      ]
-    },
-    "/": {
-      "filePath": "index.tsx"
-    },
-    "/destination/query": {
-      "filePath": "destination/query.lazy.tsx"
-    },
-    "/item/$itemId": {
-      "filePath": "item/$itemId.lazy.tsx"
-    },
-    "/pack/$id": {
-      "filePath": "pack/$id.lazy.tsx"
-    },
-    "/pack/create": {
-      "filePath": "pack/create.lazy.tsx"
-    },
-    "/profile/$id": {
-      "filePath": "profile/$id.lazy.tsx"
-    },
-    "/trip/$tripId": {
-      "filePath": "trip/$tripId.lazy.tsx"
-    },
-    "/trip/create": {
-      "filePath": "trip/create.lazy.tsx"
-    },
-    "/about/": {
-      "filePath": "about/index.lazy.tsx"
-    },
-    "/appearance/": {
-      "filePath": "appearance/index.lazy.tsx"
-    },
-    "/dashboard/": {
-      "filePath": "dashboard/index.lazy.tsx"
-    },
-    "/feed/": {
-      "filePath": "feed/index.lazy.tsx"
-    },
-    "/items/": {
-      "filePath": "items/index.lazy.tsx"
-    },
-    "/map/": {
-      "filePath": "map/index.lazy.tsx"
-    },
-    "/maps/": {
-      "filePath": "maps/index.lazy.tsx"
-    },
-    "/packs/": {
-      "filePath": "packs/index.lazy.tsx"
-    },
-    "/password-reset/": {
-      "filePath": "password-reset/index.lazy.tsx"
-    },
-    "/privacy/": {
-      "filePath": "privacy/index.lazy.tsx"
-    },
-    "/profile/": {
-      "filePath": "profile/index.lazy.tsx"
-    },
-    "/register/": {
-      "filePath": "register/index.lazy.tsx"
-    },
-    "/sign-in/": {
-      "filePath": "sign-in/index.lazy.tsx"
-    },
-    "/trips/": {
-      "filePath": "trips/index.lazy.tsx"
-    },
-    "/profile/settings/": {
-      "filePath": "profile/settings/index.lazy.tsx"
-    }
-  }
-}
-ROUTE_MANIFEST_END */

packages/app/modules/item/components/ImportItemGlobal.tsx

@@ -8,7 +8,7 @@ export const ImportItemGlobal = () => {
   const ownerId = authUser?.id;
 
   if (!authUser) {
-    return null; // or some fallback
+    return null;
   }
 
   const { setIsModalOpen } = useModal();

packages/app/modules/item/hooks/useImportFromBucket.ts

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+import { queryTrpc } from 'app/trpc';
+import { useOfflineQueue } from 'app/hooks/offline';
+import { useItemsUpdater } from './useItemsUpdater';
+
+interface State {
+  items?: Array<{ id: string }>;
+}
+
+export const useImportFromBucket = () => {
+  const utils = queryTrpc.useContext();
+  const { mutateAsync } = queryTrpc.importFromBucket.useMutation();
+  const { isConnected, addOfflineRequest } = useOfflineQueue();
+  const updateItems = useItemsUpdater();
+
+  const handleImportFromBucket = useCallback(
+    async ({ directory, ownerId }, onSuccess) => {
+      if (isConnected) {
+        try {
+          const data = await mutateAsync({ directory, ownerId });
+          const newItems = Array.isArray(data) ? data : [];
+          updateItems((prevState: State = {}) => {
+            const prevItems = Array.isArray(prevState.items)
+              ? prevState.items
+              : [];
+            return {
+              ...prevState,
+              items: [...newItems, ...prevItems],
+            };
+          });
+
+          utils.getItemsGlobally.invalidate();
+          utils.getItemsGlobally.refetch();
+          onSuccess();
+        } catch (error) {
+          console.error('Error fetching items:', error);
+        }
+      } else {
+        addOfflineRequest('importFromBucket', { directory, ownerId });
+
+        updateItems((prevState: State = {}) => {
+          onSuccess();
+          const prevItems = Array.isArray(prevState.items)
+            ? prevState.items
+            : [];
+
+          return {
+            ...prevState,
+            items: [
+              {
+                directory,
+                ownerId,
+                global: true,
+              },
+              ...prevItems,
+            ],
+          };
+        });
+      }
+    },
+    [updateItems, isConnected, mutateAsync, utils, addOfflineRequest],
+  );
+
+  return { handleImportFromBucket };
+};