Merge pull request #89 from sasjs/remove-deleted-file

fix: remove deleted file from directory tree in sidebar of drive

web/src/containers/Drive/index.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useLocation } from 'react-router-dom'
+import axios from 'axios'
 
 import CssBaseline from '@mui/material/CssBaseline'
 import Box from '@mui/material/Box'
@@ -6,13 +8,93 @@ import Box from '@mui/material/Box'
 import SideBar from './sideBar'
 import Main from './main'
 
+export interface TreeNode {
+  name: string
+  relativePath: string
+  absolutePath: string
+  children: Array<TreeNode>
+}
+
 const Drive = () => {
+  const location = useLocation()
+  const baseUrl = window.location.origin
+
   const [selectedFilePath, setSelectedFilePath] = useState('')
+  const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
+
+  const setFilePathOnMount = useCallback(() => {
+    const queryParams = new URLSearchParams(location.search)
+    setSelectedFilePath(queryParams.get('filePath') ?? '')
+  }, [location.search])
+
+  useEffect(() => {
+    axios
+      .get(`/SASjsApi/drive/fileTree`)
+      .then((res: any) => {
+        if (res.data && res.data?.status === 'success') {
+          setDirectoryData(res.data.tree)
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+    setFilePathOnMount()
+  }, [setFilePathOnMount])
+
+  const handleSelect = (node: TreeNode) => {
+    if (node.children.length) return
+
+    if (!node.name.includes('.')) return
+
+    window.history.pushState(
+      '',
+      '',
+      `${baseUrl}/#/SASjsDrive?filePath=${node.relativePath}`
+    )
+    setSelectedFilePath(node.relativePath)
+  }
+
+  const removeFileFromTree = (path: string) => {
+    if (directoryData) {
+      const newTree = JSON.parse(JSON.stringify(directoryData)) as TreeNode
+      findAndRemoveNode(newTree, newTree, path)
+      setDirectoryData(newTree)
+    }
+  }
+
+  const findAndRemoveNode = (
+    node: TreeNode,
+    parentNode: TreeNode,
+    path: string
+  ) => {
+    if (node.relativePath === path) {
+      removeNodeFromParent(parentNode, path)
+      return true
+    }
+    if (Array.isArray(node.children)) {
+      for (let i = 0; i < node.children.length; i++) {
+        if (findAndRemoveNode(node.children[i], node, path)) return
+      }
+    }
+  }
+
+  const removeNodeFromParent = (parent: TreeNode, path: string) => {
+    const index = parent.children.findIndex(
+      (node) => node.relativePath === path
+    )
+    if (index !== -1) {
+      parent.children.splice(index, 1)
+    }
+  }
+
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SideBar setSelectedFilePath={setSelectedFilePath} />
-      <Main selectedFilePath={selectedFilePath} />
+      <SideBar directoryData={directoryData} handleSelect={handleSelect} />
+      <Main
+        selectedFilePath={selectedFilePath}
+        removeFileFromTree={removeFileFromTree}
+      />
     </Box>
   )
 }

web/src/containers/Drive/main.tsx

@@ -11,7 +11,12 @@ import Button from '@mui/material/Button'
 import Toolbar from '@mui/material/Toolbar'
 import CircularProgress from '@mui/material/CircularProgress'
 
-const Main = (props: any) => {
+type Props = {
+  selectedFilePath: string
+  removeFileFromTree: (path: string) => void
+}
+
+const Main = (props: Props) => {
   const baseUrl = window.location.origin
 
   const [isLoading, setIsLoading] = useState(false)
@@ -45,6 +50,7 @@ const Main = (props: any) => {
       .delete(`/SASjsApi/drive/file?_filePath=${filePath}`)
       .then((res) => {
         setFileContent('')
+        props.removeFileFromTree(filePath)
         window.history.pushState('', '', `${baseUrl}/#/SASjsDrive`)
       })
       .catch((err) => {

web/src/containers/Drive/sideBar.tsx

@@ -1,6 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import axios from 'axios'
-import { useLocation } from 'react-router-dom'
+import React from 'react'
 
 import { makeStyles } from '@mui/styles'
 
@@ -16,12 +14,7 @@ import TreeItem from '@mui/lab/TreeItem'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
-interface TreeNode {
-  name: string
-  relativePath: string
-  absolutePath: string
-  children: Array<TreeNode>
-}
+import { TreeNode } from '.'
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -36,46 +29,14 @@ const useStyles = makeStyles(() => ({
 
 const drawerWidth = 240
 
-const SideBar = (props: any) => {
-  const location = useLocation()
-  const baseUrl = window.location.origin
+type Props = {
+  directoryData: TreeNode | null
+  handleSelect: (node: TreeNode) => void
+}
+
+const SideBar = ({ directoryData, handleSelect }: Props) => {
   const classes = useStyles()
 
-  const { setSelectedFilePath } = props
-  const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
-
-  const setFilePathOnMount = useCallback(() => {
-    const queryParams = new URLSearchParams(location.search)
-    setSelectedFilePath(queryParams.get('filePath'))
-  }, [location.search, setSelectedFilePath])
-
-  useEffect(() => {
-    axios
-      .get(`/SASjsApi/drive/fileTree`)
-      .then((res: any) => {
-        if (res.data && res.data?.status === 'success') {
-          setDirectoryData(res.data.tree)
-        }
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-    setFilePathOnMount()
-  }, [setFilePathOnMount])
-
-  const handleSelect = (node: TreeNode) => {
-    if (node.children.length) return
-
-    if (!node.name.includes('.')) return
-
-    window.history.pushState(
-      '',
-      '',
-      `${baseUrl}/#/SASjsDrive?filePath=${node.relativePath}`
-    )
-    setSelectedFilePath(node.relativePath)
-  }
-
   const renderTree = (nodes: TreeNode) => (
     <TreeItem
       classes={{ root: classes.root }}
@@ -107,12 +68,15 @@ const SideBar = (props: any) => {
     >
       <Toolbar />
       <Box sx={{ overflow: 'auto' }}>
-        <TreeView
-          defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpandIcon={<ChevronRightIcon />}
-        >
-          {directoryData && renderTree(directoryData)}
-        </TreeView>
+        {directoryData && (
+          <TreeView
+            defaultCollapseIcon={<ExpandMoreIcon />}
+            defaultExpandIcon={<ChevronRightIcon />}
+            defaultExpanded={[directoryData.relativePath]}
+          >
+            {renderTree(directoryData)}
+          </TreeView>
+        )}
       </Box>
     </Drawer>
   )