feat: Keep state in dataroom view between document and dataroom view #783 (#968)

Author: Nithin-532

components/datarooms/folders/view-tree.tsx

@@ -30,15 +30,34 @@ type DataroomFolderWithDocuments = DataroomFolder & {
   }[];
 };
 
+type FolderPath = Set<string> | null
+
+function findFolderPath(folder: DataroomFolderWithDocuments, folderId: string, currentPath: Set<string> = new Set<string>()):FolderPath {
+  if (folder.id === folderId) {
+    return currentPath.add(folder.id);
+  }
+
+  for (const child of folder.childFolders) {
+    const path = findFolderPath(child, folderId, currentPath.add(folder.id));
+    if (path) {
+      return path;
+    }
+  }
+
+  return null;
+}
+
 const FolderComponent = memo(
   ({
     folder,
     folderId,
     setFolderId,
+    folderPath
   }: {
     folder: DataroomFolderWithDocuments;
     folderId: string | null;
     setFolderId: React.Dispatch<React.SetStateAction<string | null>>;
+    folderPath: Set<string> | null;
   }) => {
     const router = useRouter();
 
@@ -64,13 +83,14 @@ const FolderComponent = memo(
             folder={childFolder}
             folderId={folderId}
             setFolderId={setFolderId}
+            folderPath={folderPath}
           />
         )),
       [folder.childFolders, folderId, setFolderId],
     );
 
     const isActive = folder.id === folderId;
-    const isChildActive = folder.childFolders.some(
+    const isChildActive = folderPath?.has(folder.id) || folder.childFolders.some(
       (childFolder) => childFolder.id === folderId,
     );
 
@@ -116,6 +136,21 @@ const SidebarFolders = ({
     return [];
   }, [folders, documents]);
 
+  const folderPath = useMemo(() => {
+    if (!folderId) {
+      return null;
+    }
+
+    for (let i = 0; i < nestedFolders.length; i++) {
+      const path = findFolderPath(nestedFolders[i], folderId);
+      if (path) {
+        return path;
+      }
+    }
+
+    return null;
+  }, [folders, documents, folderId])
+
   return (
     <FileTree>
       {nestedFolders.map((folder) => (
@@ -124,6 +159,7 @@ const SidebarFolders = ({
           folder={folder}
           folderId={folderId}
           setFolderId={setFolderId}
+          folderPath={folderPath}
         />
       ))}
     </FileTree>

components/view/DataroomViewer.tsx

@@ -76,6 +76,8 @@ export default function DataroomViewer({
   setDocumentData,
   setDataroomVerified,
   isPreview,
+  folderId,
+  setFolderId
 }: {
   brand: Partial<DataroomBrand>;
   viewId?: string;
@@ -89,8 +91,9 @@ export default function DataroomViewer({
   setDocumentData: React.Dispatch<React.SetStateAction<TDocumentData | null>>;
   setDataroomVerified: React.Dispatch<React.SetStateAction<boolean>>;
   isPreview?: boolean;
+  folderId: string | null;
+  setFolderId: React.Dispatch<React.SetStateAction<string | null>>;
 }) {
-  const [folderId, setFolderId] = useState<string | null>(null);
   const { documents, folders } = dataroom as {
     documents: DataroomDocument[];
     folders: DataroomFolder[];

components/view/dataroom/dataroom-view.tsx

@@ -110,6 +110,7 @@ export default function DataroomView({
   const plausible = usePlausible();
   const analytics = useAnalytics();
   const router = useRouter();
+  const [folderId, setFolderId] = useState<string | null>(null);
 
   const didMount = useRef<boolean>(false);
   const [submitted, setSubmitted] = useState<boolean>(false);
@@ -442,6 +443,8 @@ export default function DataroomView({
           setDocumentData={setDocumentData}
           setViewType={setViewType}
           setDataroomVerified={setDataroomVerified}
+          folderId={folderId}
+          setFolderId={setFolderId}
         />
       </div>
     );