[WEB-26] Create delete function for removing files and folders

frontend/src/packages/dashboard/Dashboard.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import styled from "styled-components";
-import { Breadcrumbs, Link } from "@mui/material";
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
+import { Breadcrumbs, Link } from '@mui/material';
 
 // local imports
-import SideBar from "src/packages/dashboard/components/SideBar/SideBar";
-import Renderer from "./components/FileRenderer/Renderer";
+import SideBar from 'src/packages/dashboard/components/SideBar/SideBar';
+import Renderer from './components/FileRenderer/Renderer';
 import {
   initAction,
   traverseBackFolder,
   traverseIntoFolder,
-} from "./state/folders/actions";
-import ConfirmationWindow from "./components/ConfirmationModal/ConfirmationWindow";
-import Directory from "./components/Directory";
-import { getFolderState } from "./api/helpers";
+} from './state/folders/actions';
+import ConfirmationWindow from './components/ConfirmationModal/ConfirmationWindow';
+import Directory from './components/Directory';
+import { getFolderState } from './api/helpers';
 
 const Container = styled.div`
   display: flex;
@@ -30,12 +30,15 @@ const FlexWrapper = styled.div`
 export default function Dashboard() {
   const [isOpen, setOpen] = useState(true);
 
-  const [modalState, setModalState] = useState<{ open: boolean; type: string }>(
-    {
-      open: false,
-      type: "",
-    }
-  );
+  const [modalState, setModalState] = useState<{
+    open: boolean;
+    selectedFile: string;
+    type: string;
+  }>({
+    open: false,
+    selectedFile: '',
+    type: '',
+  });
 
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const parentFolder = getFolderState().parentFolder;
@@ -54,7 +57,7 @@ export default function Dashboard() {
         isOpen={isOpen}
         setOpen={setOpen}
       />
-      <FlexWrapper style={{ left: isOpen ? "0px" : "-250px" }}>
+      <FlexWrapper style={{ left: isOpen ? '0px' : '-250px' }}>
         <Directory />
         <Renderer
           selectedFile={selectedFile}

frontend/src/packages/dashboard/api/index.ts

@@ -1,12 +1,12 @@
-import { toFileOrFolder } from "./helpers";
-import { JSONFileFormat } from "./types";
+import { toFileOrFolder } from './helpers';
+import { JSONFileFormat } from './types';
 
-const DEFAULT_OWNER_GROUP = "1";
+const DEFAULT_OWNER_GROUP = '1';
 
 // Given a file ID (if no ID is provided root is assumed), returns
 // a FileFormat of that file from the backend
 export async function getFolder(id?: string) {
-  const ending = id === undefined ? "" : `?EntityID=${id}`;
+  const ending = id === undefined ? '' : `?EntityID=${id}`;
   const folder_resp = await fetch(`/api/filesystem/info${ending}`);
 
   if (!folder_resp.ok) {
@@ -44,13 +44,13 @@ export const newFile = async (
 ): Promise<string> => {
   // This isn't attached to the parent folder yet,
   // TODO: patch once auth is finished
-  const create_resp = await fetch("/api/filesystem/create", {
-    method: "POST",
+  const create_resp = await fetch('/api/filesystem/create', {
+    method: 'POST',
     body: new URLSearchParams({
       LogicalName: name,
       Parent: parentID.toString(),
       OwnerGroup: DEFAULT_OWNER_GROUP,
-      IsDocument: "true",
+      IsDocument: 'true',
     }),
   });
 
@@ -70,13 +70,13 @@ export const newFolder = async (
   parentID: string
 ): Promise<string> => {
   // TODO: patch once auth is finished
-  const create_resp = await fetch("/api/filesystem/create", {
-    method: "POST",
+  const create_resp = await fetch('/api/filesystem/create', {
+    method: 'POST',
     body: new URLSearchParams({
       LogicalName: name,
       Parent: parentID.toString(),
       OwnerGroup: DEFAULT_OWNER_GROUP,
-      IsDocument: "false",
+      IsDocument: 'false',
     }),
   });
 
@@ -87,3 +87,22 @@ export const newFolder = async (
   const response = await create_resp.json();
   return response.Response.NewID;
 };
+
+export const deleteFileEntity = async (fileEntityID: string): Promise<void> => {
+  const delete_resp = await fetch('/api/filesystem/delete', {
+    method: 'POST',
+    body: new URLSearchParams({
+      EntityID: fileEntityID,
+    }),
+  });
+
+  if (!delete_resp.ok) {
+    const message = `An error has occured: ${delete_resp.status}`;
+    throw new Error(message);
+  }
+  const response = await delete_resp.json();
+
+  console.log(response);
+  console.log(JSON.stringify(response));
+  return;
+};

frontend/src/packages/dashboard/components/ConfirmationModal/ConfirmationWindow.tsx

@@ -1,20 +1,26 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import { Modal, Typography, TextField, Box } from "@mui/material";
-import { useDispatch } from "react-redux";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Modal, Typography, TextField, Box } from '@mui/material';
+import { useDispatch } from 'react-redux';
 
 // local imports
-import Button from "../../../../cse-ui-kit/buttons/Button";
+import Button from '../../../../cse-ui-kit/buttons/Button';
 import {
   addItemAction,
   AddPayloadType,
-} from "src/packages/dashboard/state/folders/actions";
-import { getFolderState } from "../../api/helpers";
+  deleteFileEntityAction,
+  DeletePayloadType,
+} from 'src/packages/dashboard/state/folders/actions';
+import { getFolderState } from '../../api/helpers';
 
 type Props = {
   open: boolean;
-  modalState: { open: boolean; type: string };
-  setModalState: (flag: { open: boolean; type: string }) => void;
+  modalState: { open: boolean; selectedFile: string; type: string };
+  setModalState: (flag: {
+    open: boolean;
+    selectedFile: string;
+    type: string;
+  }) => void;
 };
 
 const Container = styled.div`
@@ -41,34 +47,42 @@ export default function ConfirmationWindow({
   setModalState,
 }: Props) {
   const dispatch = useDispatch();
-  const [inputValue, setInputValue] = useState<string>("");
+  const [inputValue, setInputValue] = useState<string>('');
   const folderState = getFolderState();
 
   const handleSubmit = () => {
     switch (modalState.type) {
-      case "folder": {
+      case 'folder': {
         const folderPayload: AddPayloadType = {
           name: inputValue,
-          type: "Folder",
+          type: 'Folder',
           parentId: folderState.parentFolder,
         };
         dispatch(addItemAction(folderPayload));
         break;
       }
-      case "file": {
+      case 'file': {
         const filePayload: AddPayloadType = {
           name: inputValue,
-          type: "File",
+          type: 'File',
           parentId: folderState.parentFolder,
         };
         dispatch(addItemAction(filePayload));
         break;
       }
+      case 'delete': {
+        const folderPayload: DeletePayloadType = {
+          id: modalState.selectedFile,
+        };
+        dispatch(deleteFileEntityAction(folderPayload));
+        break;
+      }
     }
 
     setModalState({
       open: false,
-      type: "",
+      selectedFile: '',
+      type: '',
     });
   };
 
@@ -81,32 +95,46 @@ export default function ConfirmationWindow({
     if (e.key === 'Enter') {
       handleSubmit();
     }
-  }
+  };
 
   return (
     <Modal
       open={open}
       onClose={() => {
         setModalState({
           open: false,
-          type: "",
+          selectedFile: '',
+          type: '',
         });
       }}
     >
-      <Container data-anchor="ConfirmationWindow">
-        <Typography variant="h5">Choose your {modalState.type} name</Typography>
-        <Box display="flex" alignItems="center">
-          <TextField
-            value={inputValue}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            sx={{ marginRight: "10px" }}
-          />
-          <Button background="#73EEDC" onClick={handleSubmit}>
-            submit
-          </Button>
-        </Box>
-      </Container>
+      {modalState.type !== 'delete' ? (
+        <Container data-anchor="ConfirmationWindow">
+          <Typography variant="h5">
+            Choose your {modalState.type} name
+          </Typography>
+          <Box display="flex" alignItems="center">
+            <TextField
+              value={inputValue}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              sx={{ marginRight: '10px' }}
+            />
+            <Button background="#73EEDC" onClick={handleSubmit}>
+              submit
+            </Button>
+          </Box>
+        </Container>
+      ) : (
+        <Container data-anchor="ConfirmationWindow">
+          <Typography variant="h5">Are you sure you want to delete?</Typography>
+          <Box display="flex" alignItems="center">
+            <Button background="#73EEDC" onClick={handleSubmit}>
+              continue
+            </Button>
+          </Box>
+        </Container>
+      )}
     </Modal>
   );
 }

frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx

@@ -1,13 +1,15 @@
-import React from "react";
-import styled from "styled-components";
-import { useDispatch } from "react-redux";
-import { traverseIntoFolder } from "src/packages/dashboard/state/folders/actions";
-import Renamable from "./Renamable";
-import FolderIcon from "@mui/icons-material/Folder";
+import React from 'react';
+import styled from 'styled-components';
+import { useDispatch } from 'react-redux';
+import { traverseIntoFolder } from 'src/packages/dashboard/state/folders/actions';
+import Renamable from './Renamable';
+import FolderIcon from '@mui/icons-material/Folder';
 
 interface Props {
   name: string;
   id: string;
+  selectedFile: string | null;
+  setSelectedFile: (id: string) => void;
 }
 
 const IconContainer = styled.div`
@@ -16,6 +18,7 @@ const IconContainer = styled.div`
   align-items: center;
   margin: 20px;
   text-align: center;
+  cursor: pointer;
 `;
 
 interface HighlightProps {
@@ -35,9 +38,20 @@ const Folder = styled.div<HighlightProps>`
   `}
 `;
 
-export default function FolderContainer({ name, id }: Props) {
+export default function FolderContainer({
+  name,
+  id,
+  selectedFile,
+  setSelectedFile,
+}: Props) {
   const dispatch = useDispatch();
+
   const handleClick = () => {
+    console.log(id);
+    setSelectedFile(id);
+  };
+
+  const handleDoubleClick = () => {
     console.log(id);
     dispatch(traverseIntoFolder(id));
   };
@@ -46,12 +60,13 @@ export default function FolderContainer({ name, id }: Props) {
     <IconContainer>
       <FolderIcon
         onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
         sx={{
-          color: "#e3e3e3",
-          fontSize: "100px",
+          color: selectedFile == id ? '#f590a1' : '#e3e3e3',
+          fontSize: '100px',
         }}
       />
-      {/* <Folder active={false}/> */}
+      {/* <Folder active={false} /> */}
       <Renamable name={name} id={id} />
     </IconContainer>
   );

frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "src/redux-state/reducers";
-import { folderSelectors } from "../../state/folders/index";
-import FileContainer from "./FileContainer";
-import FolderContainer from "./FolderContainer";
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from 'src/redux-state/reducers';
+import { folderSelectors } from '../../state/folders/index';
+import FileContainer from './FileContainer';
+import FolderContainer from './FolderContainer';
 
 type Props = {
   selectedFile: string | null;
@@ -20,9 +20,17 @@ export default function Renderer({ selectedFile, setSelectedFile }: Props) {
   const renderItems = () =>
     folderItems.map((item, index) => {
       switch (item.type) {
-        case "Folder":
-          return <FolderContainer key={index} id={item.id} name={item.name} />;
-        case "File":
+        case 'Folder':
+          return (
+            <FolderContainer
+              key={index}
+              id={item.id}
+              name={item.name}
+              selectedFile={selectedFile}
+              setSelectedFile={setSelectedFile}
+            />
+          );
+        case 'File':
           return (
             <FileContainer
               key={index}
@@ -39,7 +47,7 @@ export default function Renderer({ selectedFile, setSelectedFile }: Props) {
   return (
     <div
       style={{
-        display: "flex",
+        display: 'flex',
       }}
     >
       {renderItems()}