From 9dca552e82b566f92eba99c3f61dc5e8da3e8063 Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Tue, 19 Apr 2022 00:40:37 +0500
Subject: [PATCH] fix(drive):when page is refreshed or reloaded show expand
 file tree according to filePath in url

---
 web/src/containers/Drive/index.tsx   |  6 +++++-
 web/src/containers/Drive/sideBar.tsx | 21 ++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/web/src/containers/Drive/index.tsx b/web/src/containers/Drive/index.tsx
index 8382831..854cb9b 100644
--- a/web/src/containers/Drive/index.tsx
+++ b/web/src/containers/Drive/index.tsx
@@ -90,7 +90,11 @@ const Drive = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SideBar directoryData={directoryData} handleSelect={handleSelect} />
+      <SideBar
+        selectedFilePath={selectedFilePath}
+        directoryData={directoryData}
+        handleSelect={handleSelect}
+      />
       <Main
         selectedFilePath={selectedFilePath}
         removeFileFromTree={removeFileFromTree}
diff --git a/web/src/containers/Drive/sideBar.tsx b/web/src/containers/Drive/sideBar.tsx
index 6040bf2..b0aab5b 100644
--- a/web/src/containers/Drive/sideBar.tsx
+++ b/web/src/containers/Drive/sideBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { makeStyles } from '@mui/styles'
 
@@ -30,13 +30,27 @@ const useStyles = makeStyles(() => ({
 const drawerWidth = 240
 
 type Props = {
+  selectedFilePath: string
   directoryData: TreeNode | null
   handleSelect: (node: TreeNode) => void
 }
 
-const SideBar = ({ directoryData, handleSelect }: Props) => {
+const SideBar = ({ selectedFilePath, directoryData, handleSelect }: Props) => {
   const classes = useStyles()
 
+  const defaultExpanded = useMemo(() => {
+    const splittedPath = selectedFilePath.split('/')
+    const arr = ['']
+    let nodeId = ''
+    splittedPath.forEach((path) => {
+      if (path !== '') {
+        nodeId += '/' + path
+        arr.push(nodeId)
+      }
+    })
+    return arr
+  }, [selectedFilePath])
+
   const renderTree = (nodes: TreeNode) => (
     <TreeItem
       classes={{ root: classes.root }}
@@ -72,7 +86,8 @@ const SideBar = ({ directoryData, handleSelect }: Props) => {
           <TreeView
             defaultCollapseIcon={<ExpandMoreIcon />}
             defaultExpandIcon={<ChevronRightIcon />}
-            defaultExpanded={[directoryData.relativePath]}
+            defaultExpanded={defaultExpanded}
+            selected={defaultExpanded.slice(-1)}
           >
             {renderTree(directoryData)}
           </TreeView>