Merge pull request #152 from autonomys/fix-navigation

Fix navigation after multi-chain

frontend/src/app/[chain]/drive/fs/[cid]/page.tsx

@@ -1,11 +1,11 @@
-import { FileCard } from '../../../../../components/common/FileCard';
 import { createGQLClientByNetwork } from '../../../../../services/gql';
 import {
   GetMetadataByHeadCidDocument,
   GetMetadataByHeadCidQuery,
 } from '../../../../../../gql/graphql';
 import { mapObjectInformationFromQueryResult } from '../../../../../services/gql/utils';
 import { NetworkId } from '../../../../../constants/networks';
+import { FS } from '../../../../../views/FileSystem';
 
 export const dynamic = 'force-dynamic';
 
@@ -22,15 +22,6 @@ export default async function Page({
   });
 
   const metadata = mapObjectInformationFromQueryResult(data);
-  if (metadata.metadata.type === 'file') {
-    throw new Error('File type not supported');
-  }
 
-  return (
-    <div className='grid grid-cols-4 gap-4'>
-      {metadata.metadata.children.map((metadata) => {
-        return <FileCard key={metadata.cid} metadata={metadata} />;
-      })}
-    </div>
-  );
+  return <FS metadata={metadata} />;
 }

frontend/src/app/onboarding/page.tsx

@@ -6,14 +6,15 @@ import Image from 'next/image';
 import { Disclaimer } from '../../components/common/Disclaimer';
 import { CheckIcon } from 'lucide-react';
 import { AuthService } from '../../services/auth/auth';
+import { getDrivePath } from '../../views/UserFiles';
 
 export default function OnboardingPage() {
   const [accepted, setAccepted] = useState(false);
 
   const onboardUser = useCallback(async () => {
     AuthService.onboardUser()
       .then(() => {
-        window.location.assign('/drive');
+        window.location.assign(getDrivePath());
       })
       .catch((error) => {
         console.error(error);

frontend/src/components/Files/Metadata.tsx

@@ -2,8 +2,11 @@ import { ObjectSummary } from '../../models/UploadedObjectMetadata';
 import bytes from 'bytes';
 import { getTypeFromMetadata } from '../../utils/file';
 import { InternalLink } from '../common/InternalLink';
+import { useNetwork } from '../../contexts/network';
+import { getObjectDetailsPath } from '../../views/ObjectDetails';
 
 export const Metadata = ({ object }: { object: ObjectSummary }) => {
+  const { network } = useNetwork();
   return (
     <div className='rounded-lg border border-[#202124] border-opacity-20 bg-white p-4 text-xs'>
       <div className='mb-4 flex flex-col'>
@@ -60,7 +63,7 @@ export const Metadata = ({ object }: { object: ObjectSummary }) => {
         </div>
       </div>
       <div className='flex justify-end'>
-        <InternalLink href={`/drive/metadata/${object.headCid}`}>
+        <InternalLink href={getObjectDetailsPath(network.id, object.headCid)}>
           <span className='mt-4 font-semibold text-primary hover:cursor-pointer'>
             See more
           </span>

frontend/src/components/Files/ObjectShareModal.tsx

@@ -14,6 +14,7 @@ import { Link } from 'lucide-react';
 import { isValidUUID } from '../../utils/misc';
 import { useGetMetadataByHeadCidQuery } from '../../../gql/graphql';
 import { mapObjectInformationFromQueryResult } from '../../services/gql/utils';
+import { getObjectDetailsPath } from '../../views/ObjectDetails';
 
 export const ObjectShareModal = ({
   cid,
@@ -67,11 +68,18 @@ export const ObjectShareModal = ({
   }, [metadata]);
 
   const copyLink = useCallback(() => {
+    if (!metadata?.metadata.dataCid) {
+      return;
+    }
+
     navigator.clipboard.writeText(
-      `${window.location.origin}/drive/metadata/${metadata?.metadata.dataCid}`,
+      `${window.location.origin}/${getObjectDetailsPath(
+        network.network.id,
+        metadata?.metadata.dataCid,
+      )}`,
     );
     toast.success('Link copied to clipboard');
-  }, [metadata?.metadata.dataCid]);
+  }, [metadata?.metadata.dataCid, network.network]);
 
   const invalidPublicId = useMemo(() => {
     return !isValidUUID(publicId);

frontend/src/components/NodeExplorer/index.tsx

@@ -4,6 +4,8 @@ import type { IPLDNodeData } from '@autonomys/auto-dag-data';
 import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
 import { FC, useState } from 'react';
 import { InternalLink } from '../common/InternalLink';
+import { getFSPath } from '../../views/FileSystem';
+import { useNetwork } from '../../contexts/network';
 
 interface NodeExplorerProps {
   cid: string;
@@ -18,6 +20,7 @@ export const NodeExplorer: FC<NodeExplorerProps> = ({
 }) => {
   const [isMetadataOpen, setIsMetadataOpen] = useState(true);
   const [isLinksOpen, setIsLinksOpen] = useState(true);
+  const { network } = useNetwork();
 
   const toggleMetadata = () => setIsMetadataOpen(!isMetadataOpen);
   const toggleLinks = () => setIsLinksOpen(!isLinksOpen);
@@ -68,7 +71,7 @@ export const NodeExplorer: FC<NodeExplorerProps> = ({
             {links.map((link, index) => (
               <li key={index}>
                 <InternalLink
-                  href={`/drive/fs/${link}`}
+                  href={getFSPath(network.id, link)}
                   className='break-all text-blue-600 hover:text-blue-800 hover:underline'
                 >
                   {link}

frontend/src/components/SearchBar/index.tsx

@@ -16,6 +16,8 @@ import {
   SearchGlobalMetadataByCidOrNameQuery,
   SearchUserMetadataByCidOrNameQuery,
 } from '../../../gql/graphql';
+import { getSearchResultPath } from '../../views/SearchResult';
+import { useNetwork } from '../../contexts/network';
 
 export const SearchBar = ({ scope }: { scope: 'global' | 'user' }) => {
   const [query, setQuery] = useState('');
@@ -28,6 +30,7 @@ export const SearchBar = ({ scope }: { scope: 'global' | 'user' }) => {
     ObjectSearchResult[] | null
   >(null);
   const router = useRouter();
+  const { network } = useNetwork();
 
   const gqlQuery =
     scope === 'global'
@@ -89,10 +92,10 @@ export const SearchBar = ({ scope }: { scope: 'global' | 'user' }) => {
   const handleSelectItem = useCallback(
     (cid: string) => {
       setIsOpen(false);
-      router.push(`/drive/search/${cid}`);
+      router.push(getSearchResultPath(network.id, cid));
       inputRef.current?.focus();
     },
-    [router],
+    [network, router],
   );
 
   const handleKeyDown = useCallback(
@@ -102,10 +105,10 @@ export const SearchBar = ({ scope }: { scope: 'global' | 'user' }) => {
         recommendations &&
         recommendations.length > 0
       ) {
-        router.push(`/drive/search/${encodeURIComponent(query)}`);
+        router.push(getSearchResultPath(network.id, query));
       }
     },
-    [recommendations, query, router],
+    [recommendations, query, router, network],
   );
 
   const searchBarResult = useMemo(() => {

frontend/src/components/common/FileCard.tsx

@@ -16,6 +16,8 @@ import { ObjectDownloadModal } from '../Files/ObjectDownloadModal';
 import { handleClick, handleEnterOrSpace } from '../../utils/eventHandler';
 import { shortenString } from '../../utils/misc';
 import { BaseMetadata } from '../../models/UploadedObjectMetadata';
+import { useNetwork } from '../../contexts/network';
+import { getFSPath } from '../../views/FileSystem';
 
 interface FileCardProps {
   icon?: React.ReactNode;
@@ -28,14 +30,15 @@ export const FileCard = ({
 }: FileCardProps) => {
   const router = useRouter();
   const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
+  const { network } = useNetwork();
 
   const download = useCallback(() => {
     setIsDownloadModalOpen(true);
   }, []);
 
   const navigate = useCallback(() => {
-    router.push(`/drive/fs/${cid}`);
-  }, [cid, router]);
+    router.push(getFSPath(network.id, cid));
+  }, [cid, router, network]);
 
   const objectIcon = useMemo(() => {
     if (icon) return icon;

frontend/src/components/common/FileTable/FileTableRow.tsx

@@ -23,6 +23,8 @@ import { handleEnterOrSpace } from '../../../utils/eventHandler';
 import { SquareArrowOutUpRight } from 'lucide-react';
 import { InternalLink } from '../InternalLink';
 import { OwnerBadge } from './OwnerBadge';
+import { getObjectDetailsPath } from '../../../views/ObjectDetails';
+import { useNetwork } from '../../../contexts/network';
 
 export const FileTableRow = ({
   file,
@@ -46,6 +48,7 @@ export const FileTableRow = ({
   onRestoreFile: (cid: string) => void;
 }) => {
   const [isRowExpanded, setIsRowExpanded] = useState(false);
+  const { network } = useNetwork();
 
   const owner = file.owners.find((o) => o.role === OwnerRole.ADMIN);
 
@@ -163,7 +166,9 @@ export const FileTableRow = ({
                       ? shortenString(file.name, 30)
                       : `No name (${file.headCid.slice(0, 12)})`}
                   </span>
-                  <InternalLink href={`/drive/metadata/${file.headCid}`}>
+                  <InternalLink
+                    href={getObjectDetailsPath(network.id, file.headCid)}
+                  >
                     <SquareArrowOutUpRight className='ml-2 h-4 w-4 transition-all duration-200 hover:scale-105' />
                   </InternalLink>
                 </PopoverButton>

frontend/src/views/FileSystem/index.tsx

@@ -0,0 +1,24 @@
+import { FC, PropsWithoutRef } from 'react';
+import { FileCard } from '../../components/common/FileCard';
+import { UploadedObjectMetadata } from '../../models/UploadedObjectMetadata';
+import { NetworkId } from '../../constants/networks';
+
+export const FS: FC<PropsWithoutRef<{ metadata: UploadedObjectMetadata }>> = ({
+  metadata,
+}) => {
+  if (metadata.metadata.type === 'file') {
+    throw new Error('File type not supported');
+  }
+
+  return (
+    <div className='grid grid-cols-4 gap-4'>
+      {metadata.metadata.children.map((metadata) => {
+        return <FileCard key={metadata.cid} metadata={metadata} />;
+      })}
+    </div>
+  );
+};
+
+export const getFSPath = (networkId: NetworkId, cid: string) => {
+  return `/${networkId}/drive/fs/${cid}`;
+};

frontend/src/views/ObjectDetails/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { UploadedObjectInformation } from '../../components/UploadedObjectInformation';
+import { NetworkId } from '../../constants/networks';
 import { UploadedObjectMetadata } from '../../models/UploadedObjectMetadata';
 
 export const ObjectDetails = ({
@@ -9,3 +10,7 @@ export const ObjectDetails = ({
 }) => {
   return <UploadedObjectInformation object={metadata} />;
 };
+
+export const getObjectDetailsPath = (networkId: NetworkId, cid: string) => {
+  return `/${networkId}/drive/metadata/${cid}`;
+};

frontend/src/views/SearchResult/index.tsx

@@ -1,5 +1,6 @@
 import { BaseMetadata } from '../../models/UploadedObjectMetadata';
 import { FileCard } from '../../components/common/FileCard';
+import { NetworkId } from '../../constants/networks';
 
 export const SearchResult = ({ objects }: { objects: BaseMetadata[] }) => {
   return (
@@ -24,3 +25,7 @@ export const SearchResult = ({ objects }: { objects: BaseMetadata[] }) => {
     </div>
   );
 };
+
+export const getSearchResultPath = (networkId: NetworkId, query: string) => {
+  return `/${networkId}/drive/search/${encodeURIComponent(query)}`;
+};

frontend/src/views/UserFiles/index.tsx

@@ -14,6 +14,7 @@ import { NoUploadsPlaceholder } from '../../components/Files/NoUploadsPlaceholde
 import { useGetMyFilesQuery } from '../../../gql/graphql';
 import { useSession } from 'next-auth/react';
 import { objectSummaryFromSharedFilesQuery } from '../SharedFiles/utils';
+import { NetworkId, defaultNetworkId } from '../../constants/networks';
 
 export const UserFiles = () => {
   const [pageSize, setPageSize] = useState(5);
@@ -93,3 +94,7 @@ export const UserFiles = () => {
     </div>
   );
 };
+
+export const getDrivePath = (networkId: NetworkId = defaultNetworkId) => {
+  return `/${networkId}/drive`;
+};