feat(sidebar): refetch user media on file upload (wip)

app/package.json

@@ -24,6 +24,8 @@
     "@react-three/fiber": "^8.17.10",
     "@react-three/rapier": "^1.5.0",
     "@tabler/icons-react": "3.17.0",
+    "@tanstack/react-query": "^5.61.0",
+    "axios": "^1.7.7",
     "debounce": "^2.2.0",
     "ecctrl": "^1.0.91",
     "konva": "^9.3.16",

app/src/components/Empty/Empty.tsx

@@ -0,0 +1,9 @@
+const Empty = () => {
+  return (
+    <p className="fz-sm c-dimmed ta-center">
+      No se encontraron resultados
+    </p>
+  );
+};
+
+export default Empty;

app/src/components/Empty/index.tsx

@@ -0,0 +1,3 @@
+import Empty from './Empty';
+
+export default Empty;

app/src/components/ErrorMsg/ErrorMsg.tsx

@@ -0,0 +1,14 @@
+const Error = () => {
+  return (
+    <div className="stack jc-center ai-center">
+      <div className="ta-center">
+        <p>Error</p>
+        <p className="fz-sm c-dimmed">
+          Hubo un error al cargar los datos
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Error;

app/src/components/ErrorMsg/index.tsx

@@ -0,0 +1,3 @@
+import ErrorMsg from './ErrorMsg';
+
+export default ErrorMsg;

app/src/components/Loading/Loading.tsx

@@ -0,0 +1,11 @@
+import { Loader } from '@mantine/core';
+
+const LoadingModal = () => {
+  return (
+    <div className="group jc-center ai-center">
+      <Loader color="black" size="sm" />
+    </div>
+  );
+};
+
+export default LoadingModal;

app/src/components/Loading/index.tsx

@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;

app/src/components/QueryBoiler/QueryBoiler.tsx

@@ -0,0 +1,15 @@
+import { UseQueryResult } from "@tanstack/react-query";
+import Loading from "../Loading";
+import Empty from "../Empty";
+import ErrorMsg from "../ErrorMsg";
+
+const QueryBoiler = ({ query }: {
+  query: UseQueryResult,
+}) => {
+  if (query.isLoading) return <Loading />;
+  if (query.isError) return <ErrorMsg />;
+  if (query.data === null) return <Empty />;
+  return null;
+};
+
+export default QueryBoiler;

app/src/components/UserButton/index.tsx

@@ -30,7 +30,10 @@ export const UserButton = () => {
     {
       icon: IconLogout,
       label: 'Cerrar sesión',
-      onClick: () => localStorage.removeItem('metagallery-token'),
+      onClick: () => {
+        localStorage.removeItem('metagallery-token');
+        setLocation('/');
+      },
     },
   ];
 

app/src/main.css

@@ -3,3 +3,48 @@
 :root[data-mantine-color-scheme='light'] {}
 
 body {}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.group {
+  display: flex;
+}
+
+.jc-space-between { justify-content: space-between; }
+.jc-center { justify-content: center; }
+.jc-start { justify-content: start; }
+.jc-end { justify-content: end; }
+
+.ai-center { align-items: center; }
+.ai-start { align-items: start; }
+.ai-end { align-items: end; }
+.ai-stretch { align-items: stretch; }
+
+.as-center { align-self: center; }
+
+.ta-center { text-align: center; }
+
+.flex-1 { flex: 1; }
+
+.c-dimmed { color: var(--mantine-color-dark-3); }
+.c-error { color: var(--mantine-color-error); }
+.c-white { color: var(--mantine-color-white); }
+
+.fz-xs { font-size: var(--mantine-font-size-xs); }
+.fz-sm { font-size: var(--mantine-font-size-sm); }
+.fz-md { font-size: var(--mantine-font-size-md); }
+.fz-lg { font-size: var(--mantine-font-size-lg); }
+.fz-xl { font-size: var(--mantine-font-size-xl); }
+
+.debug,
+.debug * {
+  background-color: rgba(255, 0, 0, 0.1);
+}

app/src/main.tsx

@@ -6,14 +6,19 @@ import App from './App';
 import '@mantine/core/styles.css';
 import './main.css';
 import { MetagalleryProvider } from './providers/MetagalleryProvider';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <MantineProvider
-    theme={theme}
-    defaultColorScheme="light"
-  >
-    <MetagalleryProvider>
-      <App />
-    </MetagalleryProvider>
-  </MantineProvider>
+  <QueryClientProvider client={queryClient}>
+    <MantineProvider
+      theme={theme}
+      defaultColorScheme="light"
+    >
+      <MetagalleryProvider>
+        <App />
+      </MetagalleryProvider>
+    </MantineProvider>
+  </QueryClientProvider>
 );