refactor: moved queries to their own file

src/mainview/routes/store/tab/games.tsx

@@ -1,95 +1,23 @@
-import { StoreGameCard } from '@/mainview/components/store/GamesSection';
-import { FocusContext, getCurrentFocusKey, setFocus, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
+import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
 import { createFileRoute, useSearch } from '@tanstack/react-router';
-import { Gamepad, Gamepad2, HardDrive, Save } from 'lucide-react';
-import { JSX, useContext, useEffect, useRef, useState } from 'react';
+import { Gamepad2 } from 'lucide-react';
+import { useEffect } from 'react';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { StoreContext } from '@/mainview/scripts/contexts';
-import { basename, dirname, extname } from 'pathe';
-import { rommApi } from '@/mainview/scripts/clientApi';
-import { FrontEndGameType, RPC_URL } from '@/shared/constants';
-import CardElement from '@/mainview/components/CardElement';
-import { FOCUS_KEYS } from '@/mainview/scripts/types';
 import FrontEndGameCard from '@/mainview/components/FrontEndGameCard';
 import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
-import { useIntersectionObserver } from 'usehooks-ts';
-
-const staleTime = 24 * 60 * 60 * 1000;
+import LoadMoreButton from '@/mainview/components/LoadMoreButton';
+import queries from '@/mainview/scripts/queries';
 
 export const Route = createFileRoute('/store/tab/games')({
-  component: RouteComponent,
-  async loader (ctx)
-  {
-
-    /*const gamesManifest = await ctx.context.queryClient.fetchQuery({
-      queryKey: ['store-games-manifest'], queryFn: async () =>
-      {
-        const store = await fetch('https://api.github.com/repos/dragoonDorise/EmuDeck/git/trees/50261b66d69c1758efa28c6d7c54e45259a0c9c5?recursive=true').then(r => r.json());
-
-        return store.tree.filter((e: any) =>
-        {
-          if (e.type === 'blob' && e.path !== "featured.json")
-          {
-            return true;
-          }
-          return false;
-        }) as [];
-      }, staleTime
-    });
-
-    return { gamesManifest };*/
-  },
+  component: RouteComponent
 });
 
-function LoadMoreButton (data: { isFetching: boolean; lastId?: string; } & FocusParams & InteractParams)
-{
-  const handleAction = (e?: Event) =>
-  {
-    data.onAction?.(e);
-    if (data.lastId && focused)
-      setFocus(FOCUS_KEYS.GAME_CARD(data.lastId));
-  };
-
-  const { ref, focusKey, focused } = useFocusable({
-    focusKey: 'load-more-btn',
-    onFocus: (_l, _p, details) => data.onFocus?.(focusKey, ref.current, details),
-    onEnterPress: handleAction
-  });
-
-  const { ref: intersct } = useIntersectionObserver({
-    onChange: (isIntersecting, entry) =>
-    {
-      if (isIntersecting)
-      {
-        handleAction();
-      }
-    }
-  });
-
-  return <div ref={(r) =>
-  {
-    ref.current = r;
-    intersct(r);
-  }} className='flex bg-base-100 game-card focusable focusable-accent focusable-hover text-2xl justify-center items-center cursor-pointer' onClick={handleAction} id='load-more-btn'>{data.isFetching ? <span className="loading loading-spinner loading-xl"></span> : "Load More"}</div>;
-}
-
 function RouteComponent ()
 {
   const { focus } = useSearch({ from: '/store/tab' });
   const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "main-area", preferredChildFocusKey: focus });
 
-  const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery<{ data: FrontEndGameType[], nextPage: number; }>({
-    initialPageParam: 0,
-    queryKey: ['store-games'],
-    getNextPageParam: (lastPage, pages) => lastPage.nextPage,
-    queryFn: async (data) =>
-    {
-      const pageParam = data.pageParam as number;
-      const { data: games, error } = await rommApi.api.romm.games.get({ query: { source: 'store', offset: pageParam * 10, limit: 10 } });
-      if (error) throw error;
-      return { data: games.games, nextPage: pageParam + 1 };
-    }
-  });
+  const { data, fetchNextPage, isFetchingNextPage, isFetching } = useInfiniteQuery(queries.store.storeGamesInfiniteQuery);
 
   useEffect(() =>
   {
@@ -115,17 +43,21 @@ function RouteComponent ()
             Games
           </h2>
         </div>
-        <div className="grid grid-cols-[repeat(auto-fill,18rem)] auto-rows-[minmax(18rem,min-content)] py-2 md:px-4 gap-4 justify-center-safe">
+        <div className="grid grid-cols-[repeat(auto-fill,18rem)] auto-rows-[21rem] py-2 md:px-4 gap-4 justify-center-safe">
           {data?.pages.flatMap((page) => (
             page.data.map((g, i) => <FrontEndGameCard onFocus={handleFocus} key={g.id.id} game={g} index={i} />))
-          )}
+          ) ?? Array.from({ length: 20 }).map((_, i) => <div key={i} className="flex flex-col gap-4">
+            <div className="skeleton grow w-full"></div>
+            <div className="skeleton h-4 w-[80%]"></div>
+            <div className="skeleton h-4 w-[40%]"></div>
+          </div>)}
           <LoadMoreButton
             lastId={data?.pages.at(-1)?.data.at(-1)?.id.id}
             onFocus={handleFocus}
-            isFetching={isFetchingNextPage}
+            isFetching={isFetchingNextPage || isFetching}
             onAction={() =>
             {
-              if (isFetchingNextPage)
+              if (isFetchingNextPage || isFetching)
                 return;
               fetchNextPage();
             }} />