[WEB-67] [CMS] rename redux function

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,43 @@ export const newFolder = async (
   const response = await create_resp.json();
   return response.Response.NewID;
 };
+
+export const renameFileEntity = async (
+  fileEntityID: string,
+  fileEntityNewName: string
+): Promise<void> => {
+  const rename_resp = await fetch('/api/filesystem/rename', {
+    method: 'POST',
+    body: new URLSearchParams({
+      EntityID: fileEntityID,
+      NewName: fileEntityNewName,
+    }),
+  });
+
+  if (!rename_resp.ok) {
+    const message = `An error has occured: ${rename_resp.status}`;
+    throw new Error(message);
+  }
+  const response = await rename_resp.json();
+
+  console.log(response);
+  return;
+};
+
+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);
+  return;
+};

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

@@ -1,116 +1,146 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
-import { Modal, Typography, TextField, Box } from "@mui/material";
-import { useDispatch } from "react-redux";
+import React, { useEffect, 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";
+    addItemAction,
+    AddPayloadType,
+    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;
+    open: boolean;
+    modalState: { open: boolean; selectedFile: string; type: string };
+    setModalState: (flag: {
+        open: boolean;
+        selectedFile: string;
+        type: string;
+    }) => void;
 };
 
 const Container = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
-  width: 500px;
-  height: 200px;
-  background: white;
-  border-radius: 20px;
+    width: 500px;
+    height: 200px;
+    background: white;
+    border-radius: 20px;
 
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  grid-gap: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    grid-gap: 20px;
 `;
 
 export default function ConfirmationWindow({
-  open,
-  modalState,
-  setModalState,
+    open,
+    modalState,
+    setModalState,
 }: Props) {
-  const dispatch = useDispatch();
-  const [inputValue, setInputValue] = useState<string>("");
-  const folderState = getFolderState();
+    const dispatch = useDispatch();
+    const [inputValue, setInputValue] = useState<string>('');
+    const folderState = getFolderState();
 
-  useEffect(() => {
-    setInputValue("");
-  }, [modalState]);
+    useEffect(() => {
+        setInputValue('');
+    }, [modalState]);
 
-  const handleSubmit = () => {
-    switch (modalState.type) {
-      case "folder": {
-        const folderPayload: AddPayloadType = {
-          name: inputValue,
-          type: "Folder",
-          parentId: folderState.parentFolder,
-        };
-        dispatch(addItemAction(folderPayload));
-        break;
-      }
-      case "file": {
-        const filePayload: AddPayloadType = {
-          name: inputValue,
-          type: "File",
-          parentId: folderState.parentFolder,
-        };
-        dispatch(addItemAction(filePayload));
-        break;
-      }
-    }
+    const handleSubmit = () => {
+        switch (modalState.type) {
+            case 'folder': {
+                const folderPayload: AddPayloadType = {
+                    name: inputValue,
+                    type: 'Folder',
+                    parentId: folderState.parentFolder,
+                };
+                dispatch(addItemAction(folderPayload));
+                break;
+            }
+            case 'file': {
+                const filePayload: AddPayloadType = {
+                    name: inputValue,
+                    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: "",
-    });
-  };
+        setModalState({
+            open: false,
+            selectedFile: '',
+            type: '',
+        });
+    };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setInputValue(value);
-  };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setInputValue(value);
+    };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleSubmit();
-    }
-  }
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
 
-  return (
-    <Modal
-      open={open}
-      onClose={() => {
-        setModalState({
-          open: false,
-          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>
-    </Modal>
-  );
+    return (
+        <Modal
+            open={open}
+            onClose={() => {
+                setModalState({
+                    open: false,
+                    selectedFile: '',
+                    type: '',
+                });
+            }}
+        >
+            {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>
+    );
 }