From 06d7c91fc34620a954df1fd1c682eff370f79ca6 Mon Sep 17 00:00:00 2001 From: Sabir Hassan Date: Wed, 20 Jul 2022 23:53:42 +0500 Subject: [PATCH] fix: remove drive component --- web/src/App.tsx | 2 - web/src/components/header.tsx | 6 - web/src/containers/Drive/index.tsx | 106 ---------------- web/src/containers/Drive/main.tsx | 173 --------------------------- web/src/containers/Drive/sideBar.tsx | 100 ---------------- 5 files changed, 387 deletions(-) delete mode 100644 web/src/containers/Drive/index.tsx delete mode 100644 web/src/containers/Drive/main.tsx delete mode 100644 web/src/containers/Drive/sideBar.tsx diff --git a/web/src/App.tsx b/web/src/App.tsx index 4ac2351..39c11cf 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -6,7 +6,6 @@ import { theme } from './theme' import Login from './components/login' import Header from './components/header' import Home from './components/home' -import Drive from './containers/Drive' import Studio from './containers/Studio' import Settings from './containers/Settings' @@ -36,7 +35,6 @@ function App() {
} /> - } /> } /> } /> } /> diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx index d80d01a..96c6bc0 100644 --- a/web/src/components/header.tsx +++ b/web/src/components/header.tsx @@ -83,12 +83,6 @@ const Header = (props: any) => { onChange={handleTabChange} > - -} - -const Drive = () => { - const location = useLocation() - const baseUrl = window.location.origin - - const [selectedFilePath, setSelectedFilePath] = useState('') - const [directoryData, setDirectoryData] = useState(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 ( - - - -
- - ) -} - -export default Drive diff --git a/web/src/containers/Drive/main.tsx b/web/src/containers/Drive/main.tsx deleted file mode 100644 index e3b48c5..0000000 --- a/web/src/containers/Drive/main.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import React, { useState, useEffect } from 'react' -import { Link } from 'react-router-dom' -import axios from 'axios' - -import Editor from 'react-monaco-editor' - -import Box from '@mui/material/Box' -import Paper from '@mui/material/Paper' -import Stack from '@mui/material/Stack' -import Button from '@mui/material/Button' -import Toolbar from '@mui/material/Toolbar' -import CircularProgress from '@mui/material/CircularProgress' - -type Props = { - selectedFilePath: string - removeFileFromTree: (path: string) => void -} - -const Main = (props: Props) => { - const baseUrl = window.location.origin - - const [isLoading, setIsLoading] = useState(false) - const [fileContentBeforeEdit, setFileContentBeforeEdit] = useState('') - const [fileContent, setFileContent] = useState('') - const [editMode, setEditMode] = useState(false) - - useEffect(() => { - if (props.selectedFilePath) { - setIsLoading(true) - axios - .get(`/SASjsApi/drive/file?_filePath=${props.selectedFilePath}`) - .then((res: any) => { - setFileContent(res.data) - }) - .catch((err) => { - console.log(err) - }) - .finally(() => { - setIsLoading(false) - }) - } - }, [props.selectedFilePath]) - - const handleDeleteBtnClick = () => { - setIsLoading(true) - - const filePath = props.selectedFilePath - - axios - .delete(`/SASjsApi/drive/file?_filePath=${filePath}`) - .then((res) => { - setFileContent('') - props.removeFileFromTree(filePath) - window.history.pushState('', '', `${baseUrl}/#/SASjsDrive`) - }) - .catch((err) => { - console.log(err) - }) - .finally(() => { - setIsLoading(false) - }) - } - - const handleEditSaveBtnClick = () => { - if (!editMode) { - setFileContentBeforeEdit(fileContent) - setEditMode(true) - } else { - setIsLoading(true) - - const formData = new FormData() - - const stringBlob = new Blob([fileContent], { type: 'text/plain' }) - formData.append('file', stringBlob, 'filename.sas') - formData.append('filePath', props.selectedFilePath) - - axios - .patch(`/SASjsApi/drive/file`, formData) - .then((res) => { - setEditMode(false) - }) - .catch((err) => { - console.log(err) - }) - .finally(() => { - setIsLoading(false) - }) - } - } - - const handleCancelExecuteBtnClick = () => { - if (editMode) { - setFileContent(fileContentBeforeEdit) - setEditMode(false) - } else { - window.open( - `${baseUrl}/SASjsApi/stp/execute?_program=${props.selectedFilePath}` - ) - } - } - - return ( - - - - {isLoading && ( - - )} - {!isLoading && props?.selectedFilePath && !editMode && ( - {fileContent} - )} - {!isLoading && props?.selectedFilePath && editMode && ( - { - if (val) setFileContent(val) - }} - /> - )} - - - - - - {props?.selectedFilePath && ( - - )} - - - ) -} - -export default Main diff --git a/web/src/containers/Drive/sideBar.tsx b/web/src/containers/Drive/sideBar.tsx deleted file mode 100644 index b0aab5b..0000000 --- a/web/src/containers/Drive/sideBar.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, { useMemo } from 'react' - -import { makeStyles } from '@mui/styles' - -import Box from '@mui/material/Box' -import Drawer from '@mui/material/Drawer' -import Toolbar from '@mui/material/Toolbar' -import ListItem from '@mui/material/ListItem' -import ListItemText from '@mui/material/ListItemText' - -import TreeView from '@mui/lab/TreeView' -import TreeItem from '@mui/lab/TreeItem' - -import ExpandMoreIcon from '@mui/icons-material/ExpandMore' -import ChevronRightIcon from '@mui/icons-material/ChevronRight' - -import { TreeNode } from '.' - -const useStyles = makeStyles(() => ({ - root: { - '& .MuiTreeItem-content': { - width: 'auto' - } - }, - listItem: { - padding: 0 - } -})) - -const drawerWidth = 240 - -type Props = { - selectedFilePath: string - directoryData: TreeNode | null - handleSelect: (node: TreeNode) => void -} - -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) => ( - handleSelect(nodes)} - > - - - } - > - {Array.isArray(nodes.children) - ? nodes.children.map((node) => renderTree(node)) - : null} - - ) - - return ( - - - - {directoryData && ( - } - defaultExpandIcon={} - defaultExpanded={defaultExpanded} - selected={defaultExpanded.slice(-1)} - > - {renderTree(directoryData)} - - )} - - - ) -} - -export default SideBar