feat(sidebar): refetch user media on file upload

fisirc · Nov 23, 2024 · 9f9a66a · 9f9a66a
1 parent 1a25b67
commit 9f9a66a
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 26 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@mantine/core": "7.11.2",
+    "@mantine/form": "^7.14.1",
     "@mantine/hooks": "^7.11.2",
     "@mantinex/mantine-logo": "^1.0.1",
     "@react-three/drei": "^9.116.3",

diff --git a/app/src/components/Empty/Empty.tsx b/app/src/components/Empty/Empty.tsx
@@ -1,6 +1,6 @@
 const Empty = () => {
   return (
-    <p className="fz-sm c-dimmed ta-center">
+    <p className="fz-xs c-dimmed ta-center p-sm">
       No se encontraron resultados
     </p>
   );

diff --git a/app/src/components/ErrorMsg/ErrorMsg.tsx b/app/src/components/ErrorMsg/ErrorMsg.tsx
@@ -1,9 +1,9 @@
 const Error = () => {
   return (
-    <div className="stack jc-center ai-center">
+    <div className="stack jc-center ai-center p-sm">
       <div className="ta-center">
         <p>Error</p>
-        <p className="fz-sm c-dimmed">
+        <p className="fz-xs c-dimmed">
           Hubo un error al cargar los datos
         </p>
       </div>

diff --git a/app/src/components/FileEditor/FileEditor.tsx b/app/src/components/FileEditor/FileEditor.tsx
@@ -0,0 +1,17 @@
+import { TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+
+const FileEditor = () => {
+  const form = useForm();
+
+  return (
+    <form>
+      <div className="stack gap-sm">
+        <TextInput
+          label="Título"
+          placeholder="Título de la obra"
+        />
+      </div>
+    </form>  
+  )
+};
diff --git a/app/src/components/FileEditor/index.tsx b/app/src/components/FileEditor/index.tsx
diff --git a/app/src/components/Loading/Loading.tsx b/app/src/components/Loading/Loading.tsx
@@ -2,7 +2,7 @@ import { Loader } from '@mantine/core';
 
 const LoadingModal = () => {
   return (
-    <div className="group jc-center ai-center">
+    <div className="group jc-center ai-center p-sm">
       <Loader color="black" size="sm" />
     </div>
   );

diff --git a/app/src/main.css b/app/src/main.css
@@ -44,7 +44,28 @@ body {}
 .fz-lg { font-size: var(--mantine-font-size-lg); }
 .fz-xl { font-size: var(--mantine-font-size-xl); }
 
-.debug,
+.debug {
+  border: 1px dotted red;
+}
+
 .debug * {
   background-color: rgba(255, 0, 0, 0.1);
-}
+}
+
+.gap-xxs { gap: var(--mantine-spacing-xxs); }
+.gap-xs { gap: var(--mantine-spacing-xs); }
+.gap-sm { gap: var(--mantine-spacing-sm); }
+.gap-md { gap: var(--mantine-spacing-md); }
+.gap-lg { gap: var(--mantine-spacing-lg); }
+.gap-xl { gap: var(--mantine-spacing-xl); }
+.gap-xxl { gap: var(--mantine-spacing-xxl); }
+.gap-xxxl { gap: var(--mantine-spacing-xxxl); }
+
+.p-xxs { padding: var(--mantine-spacing-xxs); }
+.p-xs { padding: var(--mantine-spacing-xs); }
+.p-sm { padding: var(--mantine-spacing-sm); }
+.p-md { padding: var(--mantine-spacing-md); }
+.p-lg { padding: var(--mantine-spacing-lg); }
+.p-xl { padding: var(--mantine-spacing-xl); }
+.p-xxl { padding: var(--mantine-spacing-xxl); }
+.p-xxxl { padding: var(--mantine-spacing-xxxl); }
diff --git a/app/src/pages/Editor/components/ContentSidebar.tsx b/app/src/pages/Editor/components/ContentSidebar.tsx
@@ -19,12 +19,13 @@ import api from '@/services/api';
 import QueryBoiler from '@/components/QueryBoiler/QueryBoiler';
 import axios from 'axios';
 import ContentSidebarElement from './ContentSidebarElement';
+import Empty from '@/components/Empty';
 
 interface UploadImagePayload {
-  "stiller-name":   string;
-  "stiller-type":   number;
-  "stiller-file":   File;
-  "stiller-hashed": number;
+  "name":   string;
+  "type":   number;
+  "file":   File;
+  "hashed": number;
 };
 
 export const EditorSidebar = () => {
@@ -73,23 +74,35 @@ export const EditorSidebar = () => {
  */
 
 
-const ContentMasonry = () => {
+const ContentMasonry = ({ filterInput }: { filterInput: string }) => {
   const userMediaQuery = useQuery({
     queryKey: ['user/media'],
     queryFn: async () => {
-      const res = await axios.get('/file');
-      const data: UserContentFileElement[] = res.data;
+      const res = await fetch('https://pandadiestro.xyz/services/stiller/file', {
+        method: 'GET',
+        headers: {
+          'token': localStorage.getItem('metagallery-token'),
+        } as any,
+      });
+      const data: UserContentFileElement[] = await res.json();
       return data;
     }, 
   });
 
-  // console.log(userMediaQuery.data);
   if (!userMediaQuery.data) return <QueryBoiler query={userMediaQuery} />
 
+  const filteredData = userMediaQuery.data.filter((file) => {
+    return file.title?.toLowerCase().includes(filterInput.toLowerCase());
+  });
+
+  console.log(filteredData);
+
+  if (!filteredData.length) return <Empty />
+
   return (
     <Masonry columnsCount={2} gutter="12px">  
       {
-        userMediaQuery.data.map((file) => (
+        filteredData.map((file) => (
           <ContentSidebarElement key={file.id} element={file} />
         ))
       }
@@ -99,24 +112,44 @@ const ContentMasonry = () => {
 
 // Sidebar content extracted for reusability
 const SidebarContent = () => {
+  const [filterInput, setFilterInput] = useState('');
   const queryClient = useQueryClient();
 
   const uploadFileMutation = useMutation({
-    mutationFn: (data: UploadImagePayload) => api.postForm('/file/new', data),
+    mutationFn: (data: UploadImagePayload) => {
+      const formData = new FormData();
+      formData.append('stiller-name', data.name);
+      formData.append('stiller-type', data.type.toString());
+      formData.append('stiller-file', data.file);
+      formData.append('stiller-hashed', data.hashed.toString());
+      const res = fetch('https://pandadiestro.xyz/services/stiller/file/new', {
+        method: 'POST',
+        headers: {
+          'token': localStorage.getItem('metagallery-token'),
+        } as any,
+        body: formData,
+      });
+      return res;
+    },
     onSuccess: () => {
+      console.log('File uploaded');
       queryClient.invalidateQueries({ queryKey: ['user/media'] });
+    },
+    onError: (error) => {
+      console.error('Error uploading file', error);
     }
   });
 
   const handleFileUpload = (payload: File[]) => {
     payload.forEach((file) => {
       const reader = new FileReader();
       reader.onloadend = () => {
+        console.log('Uploading file', file.name);
         uploadFileMutation.mutate({
-          "stiller-name": file.name,
-          "stiller-type": 1,
-          "stiller-file": file,
-          "stiller-hashed": 0,
+          "name": file.name,
+          "type": 1,
+          "file": file,
+          "hashed": 0,
         })
       };
       reader.readAsDataURL(file);
@@ -131,6 +164,8 @@ const SidebarContent = () => {
           placeholder="¿Qué estás buscando?"
           size="xs"
           leftSection={<IconSearch {...secondaryIconProps} />}
+          value={filterInput}
+          onChange={(e) => setFilterInput(e.currentTarget.value)}
         />
       </Group>
       <ScrollArea
@@ -139,7 +174,7 @@ const SidebarContent = () => {
         p={8}
         style={{ borderRadius: 'var(--mantine-radius-md)' }}
       >
-        <ContentMasonry />
+        <ContentMasonry filterInput={filterInput} />
       </ScrollArea>
       <FileButton
         onChange={handleFileUpload}

diff --git a/app/src/pages/Editor/components/ContentSidebarElement.tsx b/app/src/pages/Editor/components/ContentSidebarElement.tsx
@@ -48,10 +48,18 @@ const ContentSidebarElement = ({ element }: { element: UserContentFileElement })
         }}
       >
         <Card.Section>
-          <Image ref={imageRef} m={0} src={element.url} alt={element.title} style={{ height: '100%', display: 'block' }} />
+          <Image
+            ref={imageRef}
+            src={element.url}
+            alt={element.title}
+            style={{
+              height: '100%',
+              display: 'block'
+            }}
+          />
         </Card.Section>
-        <Text size="xs" fw={700} mt={8}>{element.title}</Text>
-        <Text size="xs" mt={4}>{element.description}</Text>
+        <Text size="xs" fw={700} mt={8}>{element.title || 'Sin título'}</Text>
+        <Text size="xs" mt={4}>{element.description || 'Sin descripción'}</Text>
         {
           (opened || hovered) && (
             <div style={{ position: 'absolute', top: '2px', right: '2px' }}>