update: fetch metadata by cid to gql

autonomys · Nov 27, 2024 · 3ac777a · 3ac777a
1 parent f06437d
commit 3ac777a
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 64 deletions.
diff --git a/frontend/src/components/Files/ObjectDeleteModal.tsx b/frontend/src/components/Files/ObjectDeleteModal.tsx
@@ -5,11 +5,14 @@ import {
   Transition,
   TransitionChild,
 } from '@headlessui/react';
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import { UploadedObjectMetadata } from '../../models/UploadedObjectMetadata';
 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 = ({
   cid,
@@ -20,12 +23,25 @@ export const ObjectDeleteModal = ({
 }) => {
   const isOpen = cid !== null;
   const [metadata, setMetadata] = useState<UploadedObjectMetadata | null>(null);
+  const session = useSession();
 
-  useEffect(() => {
-    if (cid) {
-      ApiService.fetchUploadedObjectMetadata(cid).then(setMetadata);
-    }
-  }, [cid]);
+  useGetMetadataByHeadCidQuery({
+    variables: {
+      headCid: cid ?? '',
+    },
+    skip: !cid || !session.data?.accessToken,
+    onCompleted: (data) => {
+      setMetadata(mapObjectInformationFromQueryResult(data));
+    },
+    onError: (error) => {
+      console.error('error', error);
+    },
+    context: {
+      headers: {
+        Authorization: `Bearer ${session.data?.accessToken}`,
+      },
+    },
+  });
 
   const deleteObject = useCallback(() => {
     if (!metadata) {

diff --git a/frontend/src/components/Files/ObjectDownloadModal.tsx b/frontend/src/components/Files/ObjectDownloadModal.tsx
@@ -6,14 +6,16 @@ import {
   TransitionChild,
 } from '@headlessui/react';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { ApiService } from '../../services/api';
 import { OffchainMetadata } from '@autonomys/auto-dag-data';
 import { InvalidDecryptKey } from '../../utils/file';
 import { Button } from '../common/Button';
 import { shortenString } from '../../utils/misc';
 import { useEncryptionStore } from '../../states/encryption';
 import { fetchFile } from '../../services/download';
 import toast from 'react-hot-toast';
+import { useSession } from 'next-auth/react';
+import { useGetMetadataByHeadCidQuery } from '../../../gql/graphql';
+import { mapObjectInformationFromQueryResult } from '../../services/gql/utils';
 
 const toastId = 'object-download-modal';
 
@@ -38,19 +40,34 @@ export const ObjectDownloadModal = ({
       setPasswordConfirmed(false);
       setIsDownloading(false);
       setWrongPassword(false);
-    } else {
-      ApiService.fetchUploadedObjectMetadata(cid).then(({ metadata }) => {
-        setMetadata(metadata);
-        setPassword(undefined);
-        setPasswordConfirmed(false);
-        setIsDownloading(false);
-        if (defaultPassword && !wrongPassword) {
-          setPassword(defaultPassword);
-          setPasswordConfirmed(true);
-        }
-      });
     }
-  }, [cid, defaultPassword, wrongPassword]);
+  }, [cid]);
+
+  const session = useSession();
+  useGetMetadataByHeadCidQuery({
+    variables: {
+      headCid: cid ?? '',
+    },
+    skip: !cid || !session.data?.accessToken,
+    onCompleted: (data) => {
+      setMetadata(mapObjectInformationFromQueryResult(data).metadata);
+      setPassword(undefined);
+      setPasswordConfirmed(false);
+      setIsDownloading(false);
+      if (defaultPassword && !wrongPassword) {
+        setPassword(defaultPassword);
+        setPasswordConfirmed(true);
+      }
+    },
+    onError: (error) => {
+      console.error('error', error);
+    },
+    context: {
+      headers: {
+        Authorization: `Bearer ${session.data?.accessToken}`,
+      },
+    },
+  });
 
   const onDownload = useCallback(async () => {
     if (!metadata) return <DialogTitle>Fetching metadata...</DialogTitle>;

diff --git a/frontend/src/components/Files/ObjectShareModal.tsx b/frontend/src/components/Files/ObjectShareModal.tsx
@@ -12,6 +12,9 @@ import { ApiService } from '../../services/api';
 import { Button } from '../common/Button';
 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,
@@ -23,12 +26,26 @@ export const ObjectShareModal = ({
   const isOpen = cid !== null;
   const [publicId, setPublicId] = useState<string | null>(null);
   const [metadata, setMetadata] = useState<UploadedObjectMetadata | null>(null);
+  const session = useSession();
 
-  useEffect(() => {
-    if (cid) {
-      ApiService.fetchUploadedObjectMetadata(cid).then(setMetadata);
-    }
-  }, [cid]);
+  useGetMetadataByHeadCidQuery({
+    variables: {
+      headCid: cid ?? '',
+    },
+    skip: !cid || !session.data?.accessToken,
+    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 () => {
     if (!publicId) {

diff --git a/frontend/src/components/Files/UploadingObjects.tsx b/frontend/src/components/Files/UploadingObjects.tsx
@@ -4,13 +4,16 @@ import bytes from 'bytes';
 import { ApiService } from '@/services/api';
 import { FileIcon, FolderIcon, X } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useInterval, useLocalStorage } from 'usehooks-ts';
+import { useLocalStorage } from 'usehooks-ts';
 import {
   UploadedObjectMetadata,
   UploadStatus,
 } from '../../models/UploadedObjectMetadata';
 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 = () => {
   const [uploadingObjects] = useLocalStorage<string[]>('uploading-objects', []);
@@ -53,19 +56,30 @@ const UploadingObject = ({
     'uploading-objects',
     [],
   );
+  const session = useSession();
   const [shareCid, setShareCid] = useState<string | null>(null);
 
   const progress = useMemo(() => {
     return (uploadStatus.uploadedNodes / uploadStatus.totalNodes) * 100;
   }, [uploadStatus]);
 
-  useInterval(() => {
-    ApiService.fetchUploadedObjectMetadata(metadata.dataCid).then(
-      (metadata) => {
-        setUploadStatus(metadata.uploadStatus);
+  useGetMetadataByHeadCidQuery({
+    variables: {
+      headCid: metadata.dataCid ?? '',
+    },
+    onCompleted: (data) => {
+      setUploadStatus(mapObjectInformationFromQueryResult(data).uploadStatus);
+    },
+    onError: (error) => {
+      console.error('error', error);
+    },
+    context: {
+      headers: {
+        Authorization: `Bearer ${session.data?.accessToken}`,
       },
-    );
-  }, 5_000);
+    },
+    pollInterval: 5_000,
+  });
 
   useEffect(() => {
     if (uploadStatus.uploadedNodes === uploadStatus.totalNodes) {

diff --git a/frontend/src/components/SearchBar/index.tsx b/frontend/src/components/SearchBar/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { ApiService } from '@/services/api';
 import { Transition } from '@headlessui/react';
 import { SearchIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';

diff --git a/frontend/src/views/UserFiles/index.tsx b/frontend/src/views/UserFiles/index.tsx
@@ -13,9 +13,9 @@ import {
   FileTable,
 } from '../../components/common/FileTable';
 import { NoUploadsPlaceholder } from '../../components/Files/NoUploadsPlaceholder';
-import { GetMyFilesQuery, useGetMyFilesQuery } from '../../../gql/graphql';
+import { useGetMyFilesQuery } from '../../../gql/graphql';
 import { useSession } from 'next-auth/react';
-import { OwnerRole } from '@autonomys/auto-drive';
+import { objectSummaryFromUserFilesQuery } from './utils';
 
 export const UserFiles = () => {
   const [pageSize, setPageSize] = useState(5);
@@ -38,35 +38,6 @@ export const UserFiles = () => {
     setPageSize(newPageSize);
   }, []);
 
-  const parseQueryResultIntoFileSummaries = useCallback(
-    (e: GetMyFilesQuery): ObjectSummary[] => {
-      return e.metadata.map((m) => ({
-        headCid: m.root_metadata!.cid,
-        size: m.root_metadata?.size ?? 0,
-        owners: (m.root_metadata?.object_ownership ?? []).map((o) => ({
-          publicId: o.user?.public_id ?? '',
-          role: o.is_admin ? OwnerRole.ADMIN : OwnerRole.VIEWER,
-        })),
-        type: m.root_metadata?.type,
-        name: m.root_metadata?.name,
-        mimeType: m.root_metadata?.mimeType,
-        children: m.root_metadata?.children,
-        uploadStatus: {
-          uploadedNodes: m.root_metadata?.publishedNodes.aggregate?.count ?? 0,
-          archivedNodes: m.root_metadata?.archivedNodes.aggregate?.count ?? 0,
-          totalNodes: m.root_metadata?.totalNodes.aggregate?.count ?? 0,
-          minimumBlockDepth:
-            m.root_metadata?.minimumBlockDepth?.[0]?.transaction_result
-              ?.blockNumber ?? null,
-          maximumBlockDepth:
-            m.root_metadata?.maximumBlockDepth?.[0]?.transaction_result
-              ?.blockNumber ?? null,
-        },
-      }));
-    },
-    [],
-  );
-
   const session = useSession();
 
   const { loading } = useGetMyFilesQuery({
@@ -84,7 +55,7 @@ export const UserFiles = () => {
     },
     onCompleted(data) {
       updateResult({
-        rows: parseQueryResultIntoFileSummaries(data),
+        rows: objectSummaryFromUserFilesQuery(data),
         totalCount: data.metadata_aggregate.aggregate?.count ?? 0,
       });
     },