Merge pull request #114 from autonomys/fix/loading-table

Improve loading table
autonomys · Dec 10, 2024 · 8491d02 · 8491d02
2 parents 6b97bc6 + 0c8ad7f
commit 8491d02
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 201 deletions.
diff --git a/frontend/gql/graphql.ts b/frontend/gql/graphql.ts
@@ -3242,7 +3242,7 @@ export const GetMyFilesDocument = gql`
     query GetMyFiles($oauthUserId: String!, $oauthProvider: String!, $limit: Int!, $offset: Int!) {
   metadata(
     distinct_on: root_cid
-    where: {root_metadata: {object_ownership: {_and: {oauth_user_id: {_eq: $oauthUserId}, oauth_provider: {_eq: $oauthProvider}, is_admin: {_eq: true}}}}}
+    where: {root_metadata: {object_ownership: {_and: {oauth_user_id: {_eq: $oauthUserId}, oauth_provider: {_eq: $oauthProvider}, is_admin: {_eq: true}, marked_as_deleted: {_is_null: true}}}}}
     limit: $limit
     offset: $offset
   ) {

diff --git a/frontend/src/components/Files/ObjectDeleteModal.tsx b/frontend/src/components/Files/ObjectDeleteModal.tsx
@@ -11,7 +11,6 @@ import { ApiService } from '../../services/api';
 import toast from 'react-hot-toast';
 import { Button } from '../common/Button';
 import { useGetMetadataByHeadCidQuery } from '../../../gql/graphql';
-import { useSession } from 'next-auth/react';
 import { mapObjectInformationFromQueryResult } from '../../services/gql/utils';
 
 export const ObjectDeleteModal = ({
@@ -23,24 +22,18 @@ export const ObjectDeleteModal = ({
 }) => {
   const isOpen = cid !== null;
   const [metadata, setMetadata] = useState<UploadedObjectMetadata | null>(null);
-  const session = useSession();
 
   useGetMetadataByHeadCidQuery({
     variables: {
       headCid: cid ?? '',
     },
-    skip: !cid || !session.data?.accessToken,
+    skip: !cid,
     onCompleted: (data) => {
       setMetadata(mapObjectInformationFromQueryResult(data));
     },
     onError: (error) => {
       console.error('error', error);
     },
-    context: {
-      headers: {
-        Authorization: `Bearer ${session.data?.accessToken}`,
-      },
-    },
   });
 
   const deleteObject = useCallback(() => {

diff --git a/frontend/src/components/Files/ObjectDownloadModal.tsx b/frontend/src/components/Files/ObjectDownloadModal.tsx
@@ -62,11 +62,6 @@ export const ObjectDownloadModal = ({
     onError: (error) => {
       console.error('error', error);
     },
-    context: {
-      headers: {
-        Authorization: `Bearer ${session.data?.accessToken}`,
-      },
-    },
   });
 
   const onDownload = useCallback(async () => {

diff --git a/frontend/src/components/Files/ObjectShareModal.tsx b/frontend/src/components/Files/ObjectShareModal.tsx
@@ -14,7 +14,6 @@ import { Link } from 'lucide-react';
 import { isValidUUID } from '../../utils/misc';
 import { useGetMetadataByHeadCidQuery } from '../../../gql/graphql';
 import { mapObjectInformationFromQueryResult } from '../../services/gql/utils';
-import { useSession } from 'next-auth/react';
 
 export const ObjectShareModal = ({
   cid,
@@ -26,25 +25,18 @@ export const ObjectShareModal = ({
   const isOpen = cid !== null;
   const [publicId, setPublicId] = useState<string | null>(null);
   const [metadata, setMetadata] = useState<UploadedObjectMetadata | null>(null);
-  const session = useSession();
 
   useGetMetadataByHeadCidQuery({
     variables: {
       headCid: cid ?? '',
     },
-    skip: !cid || !session.data?.accessToken,
+    skip: !cid,
     onCompleted: (data) => {
-      console.log('data', data);
       setMetadata(mapObjectInformationFromQueryResult(data));
     },
     onError: (error) => {
       console.error('error', error);
     },
-    context: {
-      headers: {
-        Authorization: `Bearer ${session.data?.accessToken}`,
-      },
-    },
   });
 
   const shareObject = useCallback(async () => {

diff --git a/frontend/src/components/Files/UploadingObjects.tsx b/frontend/src/components/Files/UploadingObjects.tsx
@@ -12,7 +12,6 @@ import {
 import { ObjectShareModal } from './ObjectShareModal';
 import { handleEscape } from '../../utils/eventHandler';
 import { useGetMetadataByHeadCidQuery } from '../../../gql/graphql';
-import { useSession } from 'next-auth/react';
 import { mapObjectInformationFromQueryResult } from '../../services/gql/utils';
 
 export const UploadingObjects = () => {
@@ -57,7 +56,6 @@ const UploadingObject = ({
     'uploading-objects',
     [],
   );
-  const session = useSession();
   const [shareCid, setShareCid] = useState<string | null>(null);
 
   const progress = useMemo(() => {
@@ -74,11 +72,6 @@ const UploadingObject = ({
     onError: (error) => {
       console.error('error', error);
     },
-    context: {
-      headers: {
-        Authorization: `Bearer ${session.data?.accessToken}`,
-      },
-    },
     pollInterval: 5_000,
   });
 

diff --git a/frontend/src/components/SearchBar/index.tsx b/frontend/src/components/SearchBar/index.tsx
@@ -41,12 +41,7 @@ export const SearchBar = ({ scope }: { scope: 'global' | 'user' }) => {
       oauthUserId: session.data?.underlyingUserId,
       oauthProvider: session.data?.underlyingProvider,
     },
-    skip: query.length < 3 || !session.data?.accessToken,
-    context: {
-      headers: {
-        Authorization: `Bearer ${session.data?.accessToken}`,
-      },
-    },
+    skip: query.length < 3,
     onCompleted: (
       data: SearchGlobalMetadataByCidOrNameQuery &
         SearchUserMetadataByCidOrNameQuery,

diff --git a/frontend/src/components/common/FileTable/index.tsx b/frontend/src/components/common/FileTable/index.tsx
@@ -2,15 +2,15 @@
 
 import { ObjectSummary } from '../../../models/UploadedObjectMetadata';
 import { Checkbox, Transition } from '@headlessui/react';
-import { Square, SquareCheck } from 'lucide-react';
+import { LoaderCircle, Square, SquareCheck } from 'lucide-react';
 import { FC, useCallback, useState } from 'react';
 import { ObjectShareModal } from '../../Files/ObjectShareModal';
 import { ObjectDeleteModal } from '../../Files/ObjectDeleteModal';
 import { ObjectDownloadModal } from '../../Files/ObjectDownloadModal';
 import { useUserStore } from '../../../states/user';
 import { Table } from '../Table';
 import { TableHead, TableHeadCell, TableHeadRow } from '../Table/TableHead';
-import { TableBody } from '../Table/TableBody';
+import { TableBody, TableBodyRow, TableBodyCell } from '../Table/TableBody';
 import { Button } from '../Button';
 import { TableFooter } from '../Table/TableFooter';
 import { TablePaginator } from '../TablePaginator';
@@ -25,13 +25,14 @@ export enum FileActionButtons {
 }
 
 export const FileTable: FC<{
-  files: ObjectSummary[];
+  files: ObjectSummary[] | null;
   pageSize: number;
   setPageSize: (pageSize: number) => void;
   currentPage: number;
   setCurrentPage: (currentPage: number) => void;
   totalItems: number;
   actionButtons: FileActionButtons[];
+  noFilesPlaceholder?: React.ReactNode;
 }> = ({
   files,
   pageSize,
@@ -40,6 +41,7 @@ export const FileTable: FC<{
   setCurrentPage,
   totalItems,
   actionButtons,
+  noFilesPlaceholder,
 }) => {
   const user = useUserStore(({ user }) => user);
   const [downloadingCID, setDownloadingCID] = useState<string | null>(null);
@@ -63,6 +65,10 @@ export const FileTable: FC<{
     );
   }, []);
 
+  if (files && files.length === 0 && noFilesPlaceholder) {
+    return noFilesPlaceholder;
+  }
+
   return (
     <div className='flex flex-col'>
       <ObjectShareModal cid={shareCID} closeModal={() => setShareCID(null)} />
@@ -82,7 +88,7 @@ export const FileTable: FC<{
                 onChange={() =>
                   selectedFiles.length > 0
                     ? setSelectedFiles([])
-                    : setSelectedFiles(files.map((f) => f.headCid))
+                    : setSelectedFiles(files ? files.map((f) => f.headCid) : [])
                 }
               >
                 {selectedFiles.length > 0 ? <SquareCheck /> : <Square />}
@@ -118,20 +124,30 @@ export const FileTable: FC<{
               </TableHeadRow>
             </TableHead>
             <TableBody>
-              {files.map((file) => (
-                <FileTableRow
-                  key={file.headCid}
-                  file={file}
-                  user={user!}
-                  selectedFiles={selectedFiles}
-                  toggleSelectFile={toggleSelectFile}
-                  actionButtons={actionButtons}
-                  onDownloadFile={setDownloadingCID}
-                  onShareFile={setShareCID}
-                  onDeleteFile={setDeleteCID}
-                  onRestoreFile={setRestoreCID}
-                />
-              ))}
+              {files ? (
+                files.map((file) => (
+                  <FileTableRow
+                    key={file.headCid}
+                    file={file}
+                    user={user!}
+                    selectedFiles={selectedFiles}
+                    toggleSelectFile={toggleSelectFile}
+                    actionButtons={actionButtons}
+                    onDownloadFile={setDownloadingCID}
+                    onShareFile={setShareCID}
+                    onDeleteFile={setDeleteCID}
+                    onRestoreFile={setRestoreCID}
+                  />
+                ))
+              ) : (
+                <TableBodyRow>
+                  <TableBodyCell colSpan={5}>
+                    <div className='flex h-10 w-full items-center justify-center'>
+                      <LoaderCircle className='h-4 w-4 animate-spin' />
+                    </div>
+                  </TableBodyCell>
+                </TableBodyRow>
+              )}
             </TableBody>
             <TableFooter>
               <tr className='w-full'>

diff --git a/frontend/src/views/GlobalFiles/index.tsx b/frontend/src/views/GlobalFiles/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { LoaderCircle } from 'lucide-react';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import {
   FileTable,
   FileActionButtons,
@@ -13,7 +12,6 @@ import { PaginatedResult } from '../../models/common';
 import { useGetGlobalFilesQuery } from '../../../gql/graphql';
 import { objectSummaryFromGlobalFilesQuery } from './utils';
 import { ObjectSummary } from '../../models/UploadedObjectMetadata';
-import { useSession } from 'next-auth/react';
 
 export const GlobalFiles = () => {
   const [pageSize, setPageSize] = useState(5);
@@ -37,26 +35,27 @@ export const GlobalFiles = () => {
     setPageSize(newPageSize);
   }, []);
 
-  const session = useSession();
-
-  useGetGlobalFilesQuery({
+  const { data, loading } = useGetGlobalFilesQuery({
     variables: {
       limit: pageSize,
       offset: currentPage * pageSize,
     },
-    onCompleted: (data) => {
+  });
+
+  useEffect(() => {
+    if (data) {
       updateResult({
         rows: objectSummaryFromGlobalFilesQuery(data),
         totalCount: data.metadata_aggregate?.aggregate?.count ?? 0,
       });
-    },
-    skip: !session.data?.accessToken,
-    context: {
-      headers: {
-        Authorization: `Bearer ${session.data?.accessToken}`,
-      },
-    },
-  });
+    }
+  }, [data, updateResult]);
+
+  useEffect(() => {
+    if (loading) {
+      setRootObjectMetadata(null);
+    }
+  }, [loading]);
 
   return (
     <div className='flex w-full'>
@@ -66,27 +65,18 @@ export const GlobalFiles = () => {
             <SearchBar scope='global' />
           </div>
         </div>
-        <div className=''>
+        <div>
           <UploadingObjects />
-          {rootObjectMetadata === null && (
-            <div className='flex min-h-[50vh] items-center justify-center'>
-              <LoaderCircle className='h-10 w-10 animate-spin' />
-            </div>
-          )}
-          {rootObjectMetadata && rootObjectMetadata.length > 0 && (
-            <FileTable
-              files={rootObjectMetadata}
-              pageSize={pageSize}
-              setPageSize={updatePageSize}
-              currentPage={currentPage}
-              setCurrentPage={updateCurrentPage}
-              totalItems={totalItems}
-              actionButtons={[FileActionButtons.DOWNLOAD]}
-            />
-          )}
-          {rootObjectMetadata && rootObjectMetadata.length === 0 && (
-            <NoUploadsPlaceholder />
-          )}
+          <FileTable
+            files={rootObjectMetadata}
+            pageSize={pageSize}
+            setPageSize={updatePageSize}
+            currentPage={currentPage}
+            setCurrentPage={updateCurrentPage}
+            totalItems={totalItems}
+            actionButtons={[FileActionButtons.DOWNLOAD]}
+            noFilesPlaceholder={<NoUploadsPlaceholder />}
+          />
         </div>
       </div>
     </div>