From aa737d08985bcec2e7e360854af37107b0a38a68 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Sat, 15 Apr 2023 10:30:39 +1000 Subject: [PATCH 01/11] began implementation of deleteFileEntity reducer --- frontend/src/packages/dashboard/api/index.ts | 39 ++++++++--- .../dashboard/components/SideBar/SideBar.tsx | 68 ++++++++++++------- .../dashboard/state/folders/actions.ts | 31 +++++---- .../packages/dashboard/state/folders/index.ts | 27 +++++--- .../dashboard/state/folders/reducers.ts | 22 +++++- .../packages/dashboard/state/folders/sagas.ts | 32 ++++++--- 6 files changed, 151 insertions(+), 68 deletions(-) diff --git a/frontend/src/packages/dashboard/api/index.ts b/frontend/src/packages/dashboard/api/index.ts index 7e093dd7..a1c04bb1 100644 --- a/frontend/src/packages/dashboard/api/index.ts +++ b/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 => { // 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 => { // 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 => { +// 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; +// }; diff --git a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx index 55f74ca1..3190e5c5 100644 --- a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx +++ b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx @@ -1,9 +1,15 @@ -import React from "react"; -import styled from "styled-components"; -import Button from "@mui/material/Button"; -import { useNavigate } from "react-router-dom"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import MenuIcon from "@mui/icons-material/Menu"; +import React from 'react'; +import { useDispatch } from 'react-redux'; +import { + // deleteFileEntityAction, + DeletePayloadType, +} from '../../state/folders/actions'; + +import styled from 'styled-components'; +import Button from '@mui/material/Button'; +import { useNavigate } from 'react-router-dom'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import MenuIcon from '@mui/icons-material/Menu'; import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; @@ -65,7 +71,7 @@ const ButtonGroup = styled.div` const ButtonIcon = styled.div` margin: 0 1rem 0; display: flex; - align-items: center + align-items: center; `; const ButtonText = styled.p` @@ -116,21 +122,33 @@ export default function SideBar({ const handleNewFile = () => { setModalState({ open: true, - type: "file", + type: 'file', }); // sets modal to be open }; const handleNewFolder = () => { setModalState({ open: true, - type: "folder", + type: 'folder', }); }; + // // temporary delete file entity button + // const dispatch = useDispatch(); + // console.log('deleteFileEntity loop'); + // const handleDeleteFile = () => { + // if (selectedFile !== null) { + // const folderPayload: DeletePayloadType = { + // id: selectedFile, + // }; + // dispatch(deleteFileEntityAction(folderPayload)); + // } + // }; + const navigate = useNavigate(); const handleEdit = () => { if (selectedFile !== null) { - navigate("/editor/" + selectedFile, { replace: false }), [navigate]; + navigate('/editor/' + selectedFile, { replace: false }), [navigate]; } }; @@ -140,7 +158,7 @@ export default function SideBar({ }; return ( - + setOpen(!isOpen)}> {isOpen ? : } @@ -162,11 +180,9 @@ export default function SideBar({ data-anchor="NewPageButton" > - + - - New page - + New page - + + + New folder + + + + - - New folder - + Delete File Temp - + - - Edit - + Edit {/* Feature diff --git a/frontend/src/packages/dashboard/state/folders/actions.ts b/frontend/src/packages/dashboard/state/folders/actions.ts index a4012cba..ef7b503e 100644 --- a/frontend/src/packages/dashboard/state/folders/actions.ts +++ b/frontend/src/packages/dashboard/state/folders/actions.ts @@ -1,5 +1,5 @@ -import { createAction } from "@reduxjs/toolkit"; -import { FileEntity, Folder, File } from "./types"; +import { createAction } from '@reduxjs/toolkit'; +import { FileEntity, Folder, File } from './types'; /** * Payload Types @@ -16,6 +16,10 @@ export type AddPayloadType = { parentId: string; }; +export type DeletePayloadType = { + id: string; +}; + export type SetDirPayloadType = { parentFolder: string; folderName: string; @@ -24,36 +28,39 @@ export type SetDirPayloadType = { /** * Init Actions */ -export const initAction = createAction("folders/init"); +export const initAction = createAction('folders/init'); // this one sets all children of current folder -export const initItemsAction = createAction("folders/initItems"); +export const initItemsAction = createAction('folders/initItems'); /** * Directory Traversal actions */ export const traverseIntoFolder = createAction( - "folders/traverseIntoFolder" + 'folders/traverseIntoFolder' ); export const traverseBackFolder = createAction( - "folders/traverseBackFolder" + 'folders/traverseBackFolder' ); export const setDirectory = createAction( - "folders/setDirectory" + 'folders/setDirectory' ); /** * CRUD actions */ -export const addItemAction = createAction("folders/addItem"); +export const addItemAction = createAction('folders/addItem'); export const addFolderItemAction = createAction( - "folders/addFolderItem" + 'folders/addFolderItem' ); -export const addFileItemAction = createAction("folders/addFileItem"); +export const addFileItemAction = createAction('folders/addFileItem'); // FileEntity = Folder | File export const renameFileEntityAction = createAction( - "folders/renameFileEntity" + 'folders/renameFileEntity' ); -// TODO removeFolderItemAction +// TODO deleteFolderItemAction // TODO removeFileItemAction +// export const deleteFileEntityAction = createAction( +// 'folders/deleteFileEntity' +// ); diff --git a/frontend/src/packages/dashboard/state/folders/index.ts b/frontend/src/packages/dashboard/state/folders/index.ts index 2c4ea1bb..2d0b4448 100644 --- a/frontend/src/packages/dashboard/state/folders/index.ts +++ b/frontend/src/packages/dashboard/state/folders/index.ts @@ -1,5 +1,5 @@ -import { createReducer } from "@reduxjs/toolkit"; -import { initialState } from "./initial-state"; +import { createReducer } from '@reduxjs/toolkit'; +import { initialState } from './initial-state'; import * as reducerFns from './reducers'; import * as folderSelectors from './selectors'; import * as foldersActions from './actions'; @@ -7,17 +7,22 @@ import * as foldersSagas from './sagas'; const reducer = createReducer(initialState, (builder) => { // addCase(action, reducer); - builder.addCase(foldersActions.addFolderItemAction, reducerFns.addFolderItems); + builder.addCase( + foldersActions.addFolderItemAction, + reducerFns.addFolderItems + ); builder.addCase(foldersActions.addFileItemAction, reducerFns.addFileItems); - builder.addCase(foldersActions.renameFileEntityAction, reducerFns.renameFileEntity); + // builder.addCase( + // foldersActions.deleteFileEntityAction, + // reducerFns.deleteFileEntityItems + // ); + builder.addCase( + foldersActions.renameFileEntityAction, + reducerFns.renameFileEntity + ); // init reducers builder.addCase(foldersActions.initItemsAction, reducerFns.setItems); builder.addCase(foldersActions.setDirectory, reducerFns.setDirectory); -}) +}); -export { - reducer, - foldersActions, - folderSelectors, - foldersSagas -}; \ No newline at end of file +export { reducer, foldersActions, folderSelectors, foldersSagas }; diff --git a/frontend/src/packages/dashboard/state/folders/reducers.ts b/frontend/src/packages/dashboard/state/folders/reducers.ts index 020b6f1b..14364441 100644 --- a/frontend/src/packages/dashboard/state/folders/reducers.ts +++ b/frontend/src/packages/dashboard/state/folders/reducers.ts @@ -1,6 +1,10 @@ -import { PayloadAction } from "@reduxjs/toolkit"; -import { RenamePayloadType, SetDirPayloadType } from "./actions"; -import { sliceState, FileEntity, Folder, File, PathObject } from "./types"; +import { PayloadAction } from '@reduxjs/toolkit'; +import { + DeletePayloadType, + RenamePayloadType, + SetDirPayloadType, +} from './actions'; +import { sliceState, FileEntity, Folder, File, PathObject } from './types'; /** * payload takes in: @@ -36,6 +40,18 @@ export function addFileItems(state: sliceState, action: PayloadAction) { }; } +// export function deleteFileEntityItems( +// state: sliceState, +// action: PayloadAction +// ) { +// const { id } = action.payload; + +// return { +// ...state, +// items: [...state.items].filter((item) => item.id !== id), +// }; +// } + export function renameFileEntity( state: sliceState, action: PayloadAction diff --git a/frontend/src/packages/dashboard/state/folders/sagas.ts b/frontend/src/packages/dashboard/state/folders/sagas.ts index 17d9c053..2bedc3f1 100644 --- a/frontend/src/packages/dashboard/state/folders/sagas.ts +++ b/frontend/src/packages/dashboard/state/folders/sagas.ts @@ -1,9 +1,9 @@ -import { call, put, takeEvery, takeLatest, select } from "redux-saga/effects"; +import { call, put, takeEvery, takeLatest, select } from 'redux-saga/effects'; // local -import * as API from "../../api/index"; -import * as actions from "./actions"; -import { Folder, File, FileEntity, sliceState } from "./types"; -import { getFolderState } from "./selectors"; +import * as API from '../../api/index'; +import * as actions from './actions'; +import { Folder, File, FileEntity, sliceState } from './types'; +import { getFolderState } from './selectors'; function* initSaga() { try { @@ -20,7 +20,7 @@ function* initSaga() { function* addItemSaga({ payload }: { payload: actions.AddPayloadType }) { switch (payload.type) { - case "Folder": { + case 'Folder': { const newID: string = yield call( API.newFolder, payload.name, @@ -36,7 +36,7 @@ function* addItemSaga({ payload }: { payload: actions.AddPayloadType }) { yield put(actions.addFolderItemAction(folderPayload)); break; } - case "File": { + case 'File': { const newID: string = yield call( API.newFile, payload.name, @@ -55,13 +55,26 @@ function* addItemSaga({ payload }: { payload: actions.AddPayloadType }) { } } +// function* deleteFileEntitySaga({ +// payload, +// }: { +// payload: actions.DeletePayloadType; +// }) { +// yield call(API.deleteFileEntity, payload.id); +// // now put results to redux store +// const deleteFileEntityPayload: actions.DeletePayloadType = { +// id: payload.id, +// }; +// yield put(actions.deleteFileEntityAction(deleteFileEntityPayload)); +// } + function* renameFileEntitySaga({ payload: renamePayload, }: { payload: actions.RenamePayloadType; }) { // todo call backend rename filename/foldername API call - yield call(console.log, "saga rename fired"); + yield call(console.log, 'saga rename fired'); } /** @@ -92,7 +105,7 @@ function* traverseBackFolderSaga({ payload: id }: { payload: string }) { ); const dirPayload: actions.SetDirPayloadType = { parentFolder: parentOfParentFolder.id, - folderName: "", + folderName: '', }; // change path @@ -106,6 +119,7 @@ export function* rootFoldersSaga() { // runs in parallel yield takeEvery(actions.initAction, initSaga); yield takeEvery(actions.addItemAction, addItemSaga); + // yield takeEvery(actions.deleteFileEntityAction, deleteFileEntitySaga); yield takeEvery(actions.renameFileEntityAction, renameFileEntitySaga); yield takeLatest(actions.traverseIntoFolder, traverseIntoFolderSaga); yield takeLatest(actions.traverseBackFolder, traverseBackFolderSaga); From b8650b8d280b1aa72dce3198663b27e1831cb694 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Sat, 15 Apr 2023 11:19:54 +1000 Subject: [PATCH 02/11] started attempting to fix infinite loop issue when calling delete action --- frontend/src/packages/dashboard/api/index.ts | 32 +++++++++---------- .../dashboard/components/SideBar/SideBar.tsx | 26 +++++++-------- .../dashboard/state/folders/actions.ts | 6 ++-- .../packages/dashboard/state/folders/index.ts | 8 ++--- .../dashboard/state/folders/reducers.ts | 23 ++++++------- .../packages/dashboard/state/folders/sagas.ts | 26 +++++++-------- 6 files changed, 61 insertions(+), 60 deletions(-) diff --git a/frontend/src/packages/dashboard/api/index.ts b/frontend/src/packages/dashboard/api/index.ts index a1c04bb1..ffdd9713 100644 --- a/frontend/src/packages/dashboard/api/index.ts +++ b/frontend/src/packages/dashboard/api/index.ts @@ -88,21 +88,21 @@ export const newFolder = async ( return response.Response.NewID; }; -// export const deleteFileEntity = async (fileEntityID: string): Promise => { -// const delete_resp = await fetch('/api/filesystem/delete', { -// method: 'POST', -// body: new URLSearchParams({ -// EntityID: fileEntityID, -// }), -// }); +export const deleteFileEntity = async (fileEntityID: string): Promise => { + 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(); + 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; -// }; + console.log(response); + console.log(JSON.stringify(response)); + return; +}; diff --git a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx index 3190e5c5..a76b1c7d 100644 --- a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx +++ b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch } from 'react-redux'; import { - // deleteFileEntityAction, + deleteFileEntityAction, DeletePayloadType, } from '../../state/folders/actions'; @@ -133,17 +133,17 @@ export default function SideBar({ }); }; - // // temporary delete file entity button - // const dispatch = useDispatch(); - // console.log('deleteFileEntity loop'); - // const handleDeleteFile = () => { - // if (selectedFile !== null) { - // const folderPayload: DeletePayloadType = { - // id: selectedFile, - // }; - // dispatch(deleteFileEntityAction(folderPayload)); - // } - // }; + // temporary delete file entity button + const dispatch = useDispatch(); + console.log('deleteFileEntity loop 1'); + const handleDeleteFile = () => { + if (selectedFile !== null) { + const folderPayload: DeletePayloadType = { + id: selectedFile, + }; + dispatch(deleteFileEntityAction(folderPayload)); + } + }; const navigate = useNavigate(); const handleEdit = () => { @@ -196,7 +196,7 @@ export default function SideBar({ diff --git a/frontend/src/packages/dashboard/state/folders/actions.ts b/frontend/src/packages/dashboard/state/folders/actions.ts index ef7b503e..845e691b 100644 --- a/frontend/src/packages/dashboard/state/folders/actions.ts +++ b/frontend/src/packages/dashboard/state/folders/actions.ts @@ -61,6 +61,6 @@ export const renameFileEntityAction = createAction( // TODO deleteFolderItemAction // TODO removeFileItemAction -// export const deleteFileEntityAction = createAction( -// 'folders/deleteFileEntity' -// ); +export const deleteFileEntityAction = createAction( + 'folders/deleteFileEntity' +); diff --git a/frontend/src/packages/dashboard/state/folders/index.ts b/frontend/src/packages/dashboard/state/folders/index.ts index 2d0b4448..d6e7e31f 100644 --- a/frontend/src/packages/dashboard/state/folders/index.ts +++ b/frontend/src/packages/dashboard/state/folders/index.ts @@ -12,10 +12,10 @@ const reducer = createReducer(initialState, (builder) => { reducerFns.addFolderItems ); builder.addCase(foldersActions.addFileItemAction, reducerFns.addFileItems); - // builder.addCase( - // foldersActions.deleteFileEntityAction, - // reducerFns.deleteFileEntityItems - // ); + builder.addCase( + foldersActions.deleteFileEntityAction, + reducerFns.deleteFileEntityItems + ); builder.addCase( foldersActions.renameFileEntityAction, reducerFns.renameFileEntity diff --git a/frontend/src/packages/dashboard/state/folders/reducers.ts b/frontend/src/packages/dashboard/state/folders/reducers.ts index 14364441..2ab4609a 100644 --- a/frontend/src/packages/dashboard/state/folders/reducers.ts +++ b/frontend/src/packages/dashboard/state/folders/reducers.ts @@ -40,17 +40,18 @@ export function addFileItems(state: sliceState, action: PayloadAction) { }; } -// export function deleteFileEntityItems( -// state: sliceState, -// action: PayloadAction -// ) { -// const { id } = action.payload; - -// return { -// ...state, -// items: [...state.items].filter((item) => item.id !== id), -// }; -// } +export function deleteFileEntityItems( + state: sliceState, + action: PayloadAction +) { + const { id } = action.payload; + return { + ...state, + items: [...state.items] + .map((item) => ({ ...item })) + .filter((item) => item.id !== id), + }; +} export function renameFileEntity( state: sliceState, diff --git a/frontend/src/packages/dashboard/state/folders/sagas.ts b/frontend/src/packages/dashboard/state/folders/sagas.ts index 2bedc3f1..4ff2b6e6 100644 --- a/frontend/src/packages/dashboard/state/folders/sagas.ts +++ b/frontend/src/packages/dashboard/state/folders/sagas.ts @@ -55,18 +55,18 @@ function* addItemSaga({ payload }: { payload: actions.AddPayloadType }) { } } -// function* deleteFileEntitySaga({ -// payload, -// }: { -// payload: actions.DeletePayloadType; -// }) { -// yield call(API.deleteFileEntity, payload.id); -// // now put results to redux store -// const deleteFileEntityPayload: actions.DeletePayloadType = { -// id: payload.id, -// }; -// yield put(actions.deleteFileEntityAction(deleteFileEntityPayload)); -// } +function* deleteFileEntitySaga({ + payload, +}: { + payload: actions.DeletePayloadType; +}) { + yield call(API.deleteFileEntity, payload.id); + // now put results to redux store + const deleteFileEntityPayload: actions.DeletePayloadType = { + id: payload.id, + }; + yield put(actions.deleteFileEntityAction(deleteFileEntityPayload)); +} function* renameFileEntitySaga({ payload: renamePayload, @@ -119,7 +119,7 @@ export function* rootFoldersSaga() { // runs in parallel yield takeEvery(actions.initAction, initSaga); yield takeEvery(actions.addItemAction, addItemSaga); - // yield takeEvery(actions.deleteFileEntityAction, deleteFileEntitySaga); + yield takeEvery(actions.deleteFileEntityAction, deleteFileEntitySaga); yield takeEvery(actions.renameFileEntityAction, renameFileEntitySaga); yield takeLatest(actions.traverseIntoFolder, traverseIntoFolderSaga); yield takeLatest(actions.traverseBackFolder, traverseBackFolderSaga); From 12e9ae3ca1db99e0ff13fb8455ae28db34639d52 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Thu, 4 May 2023 18:42:41 +1000 Subject: [PATCH 03/11] fixed infinite looping of delete action and reducer --- frontend/src/packages/dashboard/Dashboard.tsx | 37 +++++++------- .../ConfirmationModal/ConfirmationWindow.tsx | 51 ++++++++++++------- .../dashboard/components/SideBar/SideBar.tsx | 23 ++++----- .../dashboard/state/folders/reducers.ts | 7 +-- .../packages/dashboard/state/folders/sagas.ts | 5 -- 5 files changed, 66 insertions(+), 57 deletions(-) diff --git a/frontend/src/packages/dashboard/Dashboard.tsx b/frontend/src/packages/dashboard/Dashboard.tsx index 6a95faf4..3ecffe20 100644 --- a/frontend/src/packages/dashboard/Dashboard.tsx +++ b/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(null); const parentFolder = getFolderState().parentFolder; @@ -54,7 +57,7 @@ export default function Dashboard() { isOpen={isOpen} setOpen={setOpen} /> - + 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(""); + const [inputValue, setInputValue] = useState(''); 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,7 +95,7 @@ export default function ConfirmationWindow({ if (e.key === 'Enter') { handleSubmit(); } - } + }; return ( { setModalState({ open: false, - type: "", + selectedFile: '', + type: '', }); }} > @@ -100,7 +115,7 @@ export default function ConfirmationWindow({ value={inputValue} onChange={handleChange} onKeyDown={handleKeyDown} - sx={{ marginRight: "10px" }} + sx={{ marginRight: '10px' }} /> - - + {modalState.type !== 'delete' ? ( + + + Choose your {modalState.type} name + + + + + + + ) : ( + + Are you sure you want to delete? + + + + + )} ); } From 943e7a2cbdc4d79b53c2382b91ae551fad3a3bf2 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Thu, 4 May 2023 19:22:00 +1000 Subject: [PATCH 05/11] changed file access to double click and made files selectable for delete --- .../FileRenderer/FolderContainer.tsx | 32 +++++++++++++------ .../components/FileRenderer/Renderer.tsx | 28 ++++++++++------ 2 files changed, 41 insertions(+), 19 deletions(-) diff --git a/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx index 4857fb7b..85f1a79f 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx +++ b/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` @@ -35,9 +37,20 @@ const Folder = styled.div` `} `; -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,9 +59,10 @@ export default function FolderContainer({ name, id }: Props) { {/* */} diff --git a/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx index 17d10c58..546c1e9e 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx +++ b/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 ; - case "File": + case 'Folder': + return ( + + ); + case 'File': return ( {renderItems()} From bdea1685f5e9353ee217fa33d88a75211fdda217 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Thu, 4 May 2023 19:22:37 +1000 Subject: [PATCH 06/11] changed name of button from delete file to delete file/folder --- frontend/src/packages/dashboard/components/SideBar/SideBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx index 763e5e92..2732f79c 100644 --- a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx +++ b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx @@ -197,7 +197,7 @@ export default function SideBar({ - Delete File + Delete Folder/File From 97946ac2e96b2f8597708f8ea3081ef707771da5 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Wed, 24 May 2023 09:53:41 +1000 Subject: [PATCH 07/11] changed data-anchor to fix test failing --- .../dashboard/components/SideBar/SideBar.tsx | 320 +++++++++--------- 1 file changed, 160 insertions(+), 160 deletions(-) diff --git a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx index 2732f79c..71d3760c 100644 --- a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx +++ b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx @@ -9,158 +9,158 @@ import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; const Container = styled.div` - position: relative; - width: 250px; - background: #c9bff2; - height: 100vh; - transition: left 0.3s ease-in-out; - margin-right: 25px; + position: relative; + width: 250px; + background: #c9bff2; + height: 100vh; + transition: left 0.3s ease-in-out; + margin-right: 25px; `; const IconWrapper = styled.div` - z-index: 999; - position: absolute; - top: 50%; - transform: translate(0, -50%); - - right: -45px; - width: 30px; - height: 30px; - cursor: pointer; - - display: flex; - justify-content: center; - align-items: center; + z-index: 999; + position: absolute; + top: 50%; + transform: translate(0, -50%); + + right: -45px; + width: 30px; + height: 30px; + cursor: pointer; + + display: flex; + justify-content: center; + align-items: center; `; const Circle = styled.div` - position: absolute; - border: 1px solid black; - border-radius: 999px; - width: 40px; - height: 40px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + position: absolute; + border: 1px solid black; + border-radius: 999px; + width: 40px; + height: 40px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); `; const SidebarTitle = styled.div` - font-size: xx-large; - margin: 2rem; - font-weight: bold; + font-size: xx-large; + margin: 2rem; + font-weight: bold; `; const ButtonFlex = styled.div` - display: flex; - flex-direction: column; - align-items: center; - grid-gap: 80px; + display: flex; + flex-direction: column; + align-items: center; + grid-gap: 80px; `; const ButtonGroup = styled.div` - display: flex; - flex-direction: column; - align-items: center; - grid-gap: 30px; + display: flex; + flex-direction: column; + align-items: center; + grid-gap: 30px; `; const ButtonIcon = styled.div` - margin: 0 1rem 0; - display: flex; - align-items: center; + margin: 0 1rem 0; + display: flex; + align-items: center; `; const ButtonText = styled.p` - flex-grow: 2; - text-align: left; - margin: 0.2rem 0; + flex-grow: 2; + text-align: left; + margin: 0.2rem 0; `; interface SideBarButtonProps { - bgcolor: string; + bgcolor: string; } const SidebarButton = styled(Button)` - && { - width: 160px; - variant: contained; - background-color: ${(props) => props.bgcolor}; - color: white; - border-radius: 20px; - text-transform: none; - color: black; - display: flex; - &:hover { - transform: scale(1.04); - background-color: darkgrey; - } - &:active { - transform: scale(0.96); - background-color: darkgrey; + && { + width: 160px; + variant: contained; + background-color: ${(props) => props.bgcolor}; + color: white; + border-radius: 20px; + text-transform: none; + color: black; + display: flex; + &:hover { + transform: scale(1.04); + background-color: darkgrey; + } + &:active { + transform: scale(0.96); + background-color: darkgrey; + } } - } `; type Props = { - setModalState: (state: { - open: boolean; - selectedFile: string; - type: string; - }) => void; - selectedFile: string | null; - isOpen: boolean; - setOpen: (state: boolean) => void; + setModalState: (state: { + open: boolean; + selectedFile: string; + type: string; + }) => void; + selectedFile: string | null; + isOpen: boolean; + setOpen: (state: boolean) => void; }; // Wrapper component ${props => props.color} export default function SideBar({ - setModalState, - selectedFile, - isOpen, - setOpen, + setModalState, + selectedFile, + isOpen, + setOpen, }: Props) { - const handleNewFile = () => { - setModalState({ - open: true, - selectedFile: '', - type: 'file', - }); // sets modal to be open - }; - - const handleNewFolder = () => { - setModalState({ - open: true, - selectedFile: '', - type: 'folder', - }); - }; - - // temporary delete file entity button - const handleDeleteFile = () => { - if (selectedFile !== null) { - setModalState({ open: true, selectedFile, type: 'delete' }); - } - }; - - const navigate = useNavigate(); - const handleEdit = () => { - if (selectedFile !== null) { - navigate('/editor/' + selectedFile, { replace: false }), [navigate]; - } - }; - - // TODO - const handleRecycle = () => { - return; - }; - - return ( - - setOpen(!isOpen)}> - - {isOpen ? : } - - Welcome \name\ - - {/* + const handleNewFile = () => { + setModalState({ + open: true, + selectedFile: '', + type: 'file', + }); // sets modal to be open + }; + + const handleNewFolder = () => { + setModalState({ + open: true, + selectedFile: '', + type: 'folder', + }); + }; + + // temporary delete file entity button + const handleDeleteFile = () => { + if (selectedFile !== null) { + setModalState({ open: true, selectedFile, type: 'delete' }); + } + }; + + const navigate = useNavigate(); + const handleEdit = () => { + if (selectedFile !== null) { + navigate('/editor/' + selectedFile, { replace: false }), [navigate]; + } + }; + + // TODO + const handleRecycle = () => { + return; + }; + + return ( + + setOpen(!isOpen)}> + + {isOpen ? : } + + Welcome \name\ + + {/* Blog @@ -168,53 +168,53 @@ export default function SideBar({ Core pages */} - - - - - - New page - - - - - - New folder - - - - - - Delete Folder/File - - - - - - - - Edit - - {/* + + + + + + New page + + + + + + New folder + + + + + + Delete Folder/File + + + + + + + + Edit + + {/* Feature Recycle */} - - - - ); + + + + ); } From f814a5c0a3148528d146c49d582c0686ff8e3f76 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Wed, 24 May 2023 11:03:58 +1000 Subject: [PATCH 08/11] folder is highlighted when selected --- .../dashboard/components/FileRenderer/FolderContainer.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx index 85f1a79f..922b0fab 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx +++ b/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx @@ -18,6 +18,7 @@ const IconContainer = styled.div` align-items: center; margin: 20px; text-align: center; + cursor: pointer; `; interface HighlightProps { @@ -61,11 +62,11 @@ export default function FolderContainer({ onClick={handleClick} onDoubleClick={handleDoubleClick} sx={{ - color: '#e3e3e3', + color: selectedFile == id ? '#babef7' : '#e3e3e3', fontSize: '100px', }} /> - {/* */} + {/* */} ); From f08414b58144841b5705afc5876feb1f37d94fe0 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Wed, 24 May 2023 11:06:17 +1000 Subject: [PATCH 09/11] changed folder selected colour to red --- .../dashboard/components/FileRenderer/FolderContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx index 922b0fab..138a41a8 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx +++ b/frontend/src/packages/dashboard/components/FileRenderer/FolderContainer.tsx @@ -62,7 +62,7 @@ export default function FolderContainer({ onClick={handleClick} onDoubleClick={handleDoubleClick} sx={{ - color: selectedFile == id ? '#babef7' : '#e3e3e3', + color: selectedFile == id ? '#f590a1' : '#e3e3e3', fontSize: '100px', }} /> From 31587f9e2c5bfd22d45d3c8c1f4958371d0f9eb1 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Wed, 21 Jun 2023 00:32:55 +1000 Subject: [PATCH 10/11] implemented relevant changes --- .../components/FileRenderer/FileContainer.tsx | 45 ++- .../FileRenderer/FolderContainer.tsx | 37 +- .../components/FileRenderer/Renderer.tsx | 19 +- .../dashboard/components/SideBar/SideBar.tsx | 322 +++++++++--------- 4 files changed, 241 insertions(+), 182 deletions(-) diff --git a/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx index d244c58e..b98b75e8 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx +++ b/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx @@ -4,16 +4,18 @@ // Wraps the contents of a file stored on the CMS into its own // functional component, with hovering capabilities -import React from "react"; -import styled, { css } from "styled-components"; -import { useNavigate } from "react-router-dom"; -import Renamable from "./Renamable"; +import React, { useRef } from 'react'; +import styled, { css } from 'styled-components'; +import { useNavigate } from 'react-router-dom'; +import Renamable from './Renamable'; +import { useDispatch } from 'react-redux'; type Props = { name: string; id: string; selectedFile: string | null; setSelectedFile: (id: string) => void; + handleDeleteKeyDown: (event: React.KeyboardEvent) => void; }; type styledProps = { @@ -34,13 +36,22 @@ const IconContainer = styled.div` cursor: pointer; border: ${(props) => - props.active ? "3px solid red" : "3px solid var(--background-color)"}; + props.active ? '3px solid red' : '3px solid var(--background-color)'}; `; -function FileContainer({ name, id, selectedFile, setSelectedFile }: Props) { +function FileContainer({ + name, + id, + selectedFile, + setSelectedFile, + handleDeleteKeyDown, +}: Props) { const handleClick = () => { console.log(id); setSelectedFile(id); + if (fileEntityRef && fileEntityRef.current) { + fileEntityRef.current.focus(); + } }; const navigate = useNavigate(); @@ -48,18 +59,30 @@ function FileContainer({ name, id, selectedFile, setSelectedFile }: Props) { console.log(id); setSelectedFile(id); if (selectedFile !== null) { - navigate("/editor/" + selectedFile, { replace: false }), [navigate]; + navigate('/editor/' + selectedFile, { replace: false }), [navigate]; } }; + const fileEntityRef = useRef(null); + + const handleBlur = () => { + setSelectedFile(''); + }; + + const dispatch = useDispatch(); + return (
void; + handleDeleteKeyDown: (event: React.KeyboardEvent) => void; } const IconContainer = styled.div` @@ -43,12 +44,16 @@ export default function FolderContainer({ id, selectedFile, setSelectedFile, + handleDeleteKeyDown, }: Props) { const dispatch = useDispatch(); const handleClick = () => { console.log(id); setSelectedFile(id); + if (fileEntityRef && fileEntityRef.current) { + fileEntityRef.current.focus(); + } }; const handleDoubleClick = () => { @@ -56,16 +61,30 @@ export default function FolderContainer({ dispatch(traverseIntoFolder(id)); }; + const fileEntityRef = useRef(null); + + const handleBlur = () => { + setSelectedFile(''); + }; + return ( - +
+ +
+ {/* */} diff --git a/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx index 546c1e9e..c9b98067 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx +++ b/frontend/src/packages/dashboard/components/FileRenderer/Renderer.tsx @@ -1,9 +1,13 @@ import React from 'react'; -import { useSelector } from 'react-redux'; +import { useDispatch, 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 { + DeletePayloadType, + deleteFileEntityAction, +} from '../../state/folders/actions'; type Props = { selectedFile: string | null; @@ -17,6 +21,17 @@ export default function Renderer({ selectedFile, setSelectedFile }: Props) { const folderItems = folders.items; + const dispatch = useDispatch(); + + const handleDeleteKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Delete' && selectedFile !== null) { + const folderPayload: DeletePayloadType = { + id: selectedFile, + }; + dispatch(deleteFileEntityAction(folderPayload)); + } + }; + const renderItems = () => folderItems.map((item, index) => { switch (item.type) { @@ -28,6 +43,7 @@ export default function Renderer({ selectedFile, setSelectedFile }: Props) { name={item.name} selectedFile={selectedFile} setSelectedFile={setSelectedFile} + handleDeleteKeyDown={handleDeleteKeyDown} /> ); case 'File': @@ -38,6 +54,7 @@ export default function Renderer({ selectedFile, setSelectedFile }: Props) { name={item.name} selectedFile={selectedFile} setSelectedFile={setSelectedFile} + handleDeleteKeyDown={handleDeleteKeyDown} /> ); default: diff --git a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx index 71d3760c..c6c3a4c2 100644 --- a/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx +++ b/frontend/src/packages/dashboard/components/SideBar/SideBar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import styled from 'styled-components'; import Button from '@mui/material/Button'; import { useNavigate } from 'react-router-dom'; @@ -9,158 +9,158 @@ import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; const Container = styled.div` - position: relative; - width: 250px; - background: #c9bff2; - height: 100vh; - transition: left 0.3s ease-in-out; - margin-right: 25px; + position: relative; + width: 250px; + background: #c9bff2; + height: 100vh; + transition: left 0.3s ease-in-out; + margin-right: 25px; `; const IconWrapper = styled.div` - z-index: 999; - position: absolute; - top: 50%; - transform: translate(0, -50%); - - right: -45px; - width: 30px; - height: 30px; - cursor: pointer; - - display: flex; - justify-content: center; - align-items: center; + z-index: 999; + position: absolute; + top: 50%; + transform: translate(0, -50%); + + right: -45px; + width: 30px; + height: 30px; + cursor: pointer; + + display: flex; + justify-content: center; + align-items: center; `; const Circle = styled.div` - position: absolute; - border: 1px solid black; - border-radius: 999px; - width: 40px; - height: 40px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + position: absolute; + border: 1px solid black; + border-radius: 999px; + width: 40px; + height: 40px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); `; const SidebarTitle = styled.div` - font-size: xx-large; - margin: 2rem; - font-weight: bold; + font-size: xx-large; + margin: 2rem; + font-weight: bold; `; const ButtonFlex = styled.div` - display: flex; - flex-direction: column; - align-items: center; - grid-gap: 80px; + display: flex; + flex-direction: column; + align-items: center; + grid-gap: 80px; `; const ButtonGroup = styled.div` - display: flex; - flex-direction: column; - align-items: center; - grid-gap: 30px; + display: flex; + flex-direction: column; + align-items: center; + grid-gap: 30px; `; const ButtonIcon = styled.div` - margin: 0 1rem 0; - display: flex; - align-items: center; + margin: 0 1rem 0; + display: flex; + align-items: center; `; const ButtonText = styled.p` - flex-grow: 2; - text-align: left; - margin: 0.2rem 0; + flex-grow: 2; + text-align: left; + margin: 0.2rem 0; `; interface SideBarButtonProps { - bgcolor: string; + bgcolor: string; } const SidebarButton = styled(Button)` - && { - width: 160px; - variant: contained; - background-color: ${(props) => props.bgcolor}; - color: white; - border-radius: 20px; - text-transform: none; - color: black; - display: flex; - &:hover { - transform: scale(1.04); - background-color: darkgrey; - } - &:active { - transform: scale(0.96); - background-color: darkgrey; - } + && { + width: 160px; + variant: contained; + background-color: ${(props) => props.bgcolor}; + color: white; + border-radius: 20px; + text-transform: none; + color: black; + display: flex; + &:hover { + transform: scale(1.04); + background-color: darkgrey; + } + &:active { + transform: scale(0.96); + background-color: darkgrey; } + } `; type Props = { - setModalState: (state: { - open: boolean; - selectedFile: string; - type: string; - }) => void; - selectedFile: string | null; - isOpen: boolean; - setOpen: (state: boolean) => void; + setModalState: (state: { + open: boolean; + selectedFile: string; + type: string; + }) => void; + selectedFile: string | null; + isOpen: boolean; + setOpen: (state: boolean) => void; }; // Wrapper component ${props => props.color} export default function SideBar({ - setModalState, - selectedFile, - isOpen, - setOpen, + setModalState, + selectedFile, + isOpen, + setOpen, }: Props) { - const handleNewFile = () => { - setModalState({ - open: true, - selectedFile: '', - type: 'file', - }); // sets modal to be open - }; - - const handleNewFolder = () => { - setModalState({ - open: true, - selectedFile: '', - type: 'folder', - }); - }; - - // temporary delete file entity button - const handleDeleteFile = () => { - if (selectedFile !== null) { - setModalState({ open: true, selectedFile, type: 'delete' }); - } - }; - - const navigate = useNavigate(); - const handleEdit = () => { - if (selectedFile !== null) { - navigate('/editor/' + selectedFile, { replace: false }), [navigate]; - } - }; - - // TODO - const handleRecycle = () => { - return; - }; - - return ( - - setOpen(!isOpen)}> - - {isOpen ? : } - - Welcome \name\ - - {/* + const handleNewFile = () => { + setModalState({ + open: true, + selectedFile: '', + type: 'file', + }); // sets modal to be open + }; + + const handleNewFolder = () => { + setModalState({ + open: true, + selectedFile: '', + type: 'folder', + }); + }; + + // temporary delete file entity button + const handleDeleteFile = () => { + if (selectedFile !== null) { + setModalState({ open: true, selectedFile, type: 'delete' }); + } + }; + + const navigate = useNavigate(); + const handleEdit = () => { + if (selectedFile !== null) { + navigate('/editor/' + selectedFile, { replace: false }), [navigate]; + } + }; + + // TODO + const handleRecycle = () => { + return; + }; + + return ( + + setOpen(!isOpen)}> + + {isOpen ? : } + + Welcome \name\ + + {/* Blog @@ -168,53 +168,53 @@ export default function SideBar({ Core pages */} - - - - - - New page - - - - - - New folder - - - - - - Delete Folder/File - - - - - - - - Edit - - {/* + + + + + + New page + + + + + + New folder + + + + + + Delete Folder/File + + + + + + + + Edit + + {/* Feature Recycle */} - - - - ); + + + + ); } From 6ef08f7f6e39cd50ef0442d04874052bb239c370 Mon Sep 17 00:00:00 2001 From: Brian Wang Date: Tue, 11 Jul 2023 21:36:50 +1000 Subject: [PATCH 11/11] removed unnecessary handler function --- .../components/FileRenderer/FileContainer.tsx | 12 +++--------- .../components/FileRenderer/FolderContainer.tsx | 10 +++------- 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx index 824d696c..5ec36fd0 100644 --- a/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx +++ b/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx @@ -46,6 +46,8 @@ function FileContainer({ setSelectedFile, handleDeleteKeyDown, }: Props) { + const fileEntityRef = useRef(null); + const handleClick = () => { console.log(id); setSelectedFile(id); @@ -69,14 +71,6 @@ function FileContainer({ } }; - const fileEntityRef = useRef(null); - - const handleBlur = () => { - setSelectedFile(''); - }; - - const dispatch = useDispatch(); - return (
setSelectedFile('')} onKeyDown={handleDeleteKeyDown} > (null); + const handleClick = () => { console.log(id); setSelectedFile(id); @@ -61,18 +63,12 @@ export default function FolderContainer({ dispatch(traverseIntoFolder(id)); }; - const fileEntityRef = useRef(null); - - const handleBlur = () => { - setSelectedFile(''); - }; - return (
setSelectedFile('')} onKeyDown={handleDeleteKeyDown} >