Feat/elitedb

package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-table": "^8.20.5",
     "axios": "^1.7.7",
     "chess.js": "^1.0.0-beta.8",

src/api/database.ts

@@ -1,6 +1,5 @@
-// import { apiAuthenticated } from '@/api/index.ts';
-import axios from 'axios';
+import { apiAuthenticated } from '@/api/index.ts';
 
 export const queryPosition = async (fen: string) => {
-  return await axios.get(`http://127.0.0.1:3001/pos?fen=${fen}`);
+  return await apiAuthenticated.get(`/api/v1/elitedb?fen=${fen}`);
 };

src/main.tsx

@@ -3,12 +3,17 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@/components/theme-provider.tsx';
 import App from './app.tsx';
 import '@/i18n.config.ts';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <App />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <App />
+      </ThemeProvider>
+    </QueryClientProvider>
   </StrictMode>,
 );
 

src/pages/analysis/panels/database/database.tsx

@@ -1,8 +1,9 @@
 import { useAnalysisStore } from '@/store/analysis.ts';
-import { HTMLProps, useEffect, useMemo, useRef, useState } from 'react';
+import { HTMLProps, useMemo, useRef } from 'react';
 import { queryPosition } from '@/api/database.ts';
 import { DrawShape } from 'chessground/draw';
 import { cn } from '@/lib/utils.ts';
+import { useQuery } from '@tanstack/react-query';
 
 type DatabaseMove = {
   san: string;
@@ -21,20 +22,16 @@ type RafinedDatabaseMove = DatabaseMove & {
 
 export const Database = () => {
   const { chess, chessGround } = useAnalysisStore();
-  const [databaseMoves, setDatabaseMoves] = useState<RafinedDatabaseMove[]>([]);
   const autoShapes = useRef<DrawShape | null>(null);
 
   const moves = useMemo(() => chess.moves({ verbose: true }), [chess.fen()]);
 
-  useEffect(() => {
-    const handleQueryPosition = async () => {
+  const handleQueryPosition = async () =>
+    new Promise<RafinedDatabaseMove[]>(async (resolve) => {
       try {
         const { data } = (await queryPosition(chess.fen())) as { data: DatabaseMove[] };
 
-        if (!data) {
-          setDatabaseMoves([]);
-          return;
-        }
+        if (!data) resolve([]);
 
         const moves = data
           .map((m: DatabaseMove) => {
@@ -50,15 +47,17 @@ export const Database = () => {
           })
           .sort((a, b) => (a.total < b.total ? 1 : -1));
 
-        setDatabaseMoves(moves);
+        resolve(moves);
       } catch (err) {
         console.error(err);
-        setDatabaseMoves([]);
+        resolve([]);
       }
-    };
+    });
 
-    handleQueryPosition();
-  }, [chess.fen()]);
+  const { isPending, data: databaseMoves } = useQuery({
+    queryKey: ['elitedb', chess.fen()],
+    queryFn: handleQueryPosition,
+  });
 
   const handleDisplayMoveArrow = (san: string) => {
     const move = moves.find((move) => move.san === san);
@@ -96,35 +95,49 @@ export const Database = () => {
           </tr>
         </thead>
         <tbody>
-          {databaseMoves.length === 0 && (
+          {databaseMoves?.length === 0 && !isPending && (
             <tr>
               <td className="p-1 pl-6 text-accent-foreground whitespace-nowrap w-1 font-light text-castled-gray text-xs">
                 No data available
               </td>
             </tr>
           )}
-          {databaseMoves.map((move) => (
-            <tr
-              key={move.san}
-              className="hover:bg-white/10 cursor-default"
-              onPointerEnter={() => handleDisplayMoveArrow(move.san)}
-              onPointerLeave={handleClearMoveArrow}
-            >
-              <td className="p-1 pl-6 text-accent-foreground whitespace-nowrap w-1 font-light text-castled-gray text-xs">
-                {move.san}
-              </td>
-              <td className="p-1 text-accent-foreground whitespace-nowrap w-1 font-light text-castled-gray text-xs">
-                {new Intl.NumberFormat().format(move.total)}
-              </td>
-              <td className="p-1 pr-6">
-                <div className="flex w-full overflow-hidden rounded-xl border">
-                  <MoveRepartition amount={move.whitePercent} className="bg-white text-background" />
-                  <MoveRepartition amount={move.drawPercent} className="bg-castled-accent text-background" />
-                  <MoveRepartition amount={move.blackPercent} className="bg-secondary text-foreground" />
-                </div>
-              </td>
-            </tr>
-          ))}
+          {isPending
+            ? new Array(10).fill(0).map((_, i) => (
+                <tr key={i} className="animate-pulse h-[26px]">
+                  <td className="p-1 pl-6 w-1">
+                    <div className=" h-4 bg-white/10 rounded-xl" />
+                  </td>
+                  <td className="p-1 w-1">
+                    <div className="h-4 bg-white/10 rounded-xl" />
+                  </td>
+                  <td className="p-1 pr-6 w-full">
+                    <div className="h-4 bg-white/10 rounded-xl" />
+                  </td>
+                </tr>
+              ))
+            : databaseMoves?.map((move) => (
+                <tr
+                  key={move.san}
+                  className="animate-fade-in hover:bg-white/10 cursor-default"
+                  onPointerEnter={() => handleDisplayMoveArrow(move.san)}
+                  onPointerLeave={handleClearMoveArrow}
+                >
+                  <td className="p-1 pl-6 text-accent-foreground whitespace-nowrap w-1 font-light text-castled-gray text-xs">
+                    {move.san}
+                  </td>
+                  <td className="p-1 text-accent-foreground whitespace-nowrap w-1 font-light text-castled-gray text-xs">
+                    {new Intl.NumberFormat().format(move.total)}
+                  </td>
+                  <td className="p-1 pr-6">
+                    <div className="flex w-full overflow-hidden rounded-xl border">
+                      <MoveRepartition amount={move.whitePercent} className="bg-white text-background" />
+                      <MoveRepartition amount={move.drawPercent} className="bg-castled-accent text-background" />
+                      <MoveRepartition amount={move.blackPercent} className="bg-secondary text-foreground" />
+                    </div>
+                  </td>
+                </tr>
+              ))}
         </tbody>
       </table>
     </div>

tailwind.config.js

@@ -83,10 +83,19 @@ export default {
             height: '0',
           },
         },
+        'fade-in': {
+          from: {
+            opacity: '0',
+          },
+          to: {
+            opacity: '1',
+          },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'fade-in': 'fade-in 0.2s ease-in',
       },
     },
     fontFamily: {