started attempting to fix infinite loop issue when calling delete action

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<void> => {
-//   const delete_resp = await fetch('/api/filesystem/delete', {
-//     method: 'POST',
-//     body: new URLSearchParams({
-//       EntityID: fileEntityID,
-//     }),
-//   });
+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();
+  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;
+};

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({
           </SidebarButton>
           <SidebarButton
             bgcolor="#b4c6ff"
-            // onClick={handleDeleteFile}
+            onClick={handleDeleteFile}
             data-anchor="NewFolderButton"
           >
             <ButtonIcon>

frontend/src/packages/dashboard/state/folders/actions.ts

@@ -61,6 +61,6 @@ export const renameFileEntityAction = createAction<RenamePayloadType>(
 
 // TODO deleteFolderItemAction
 // TODO removeFileItemAction
-// export const deleteFileEntityAction = createAction<DeletePayloadType>(
-//   'folders/deleteFileEntity'
-// );
+export const deleteFileEntityAction = createAction<DeletePayloadType>(
+  'folders/deleteFileEntity'
+);

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

frontend/src/packages/dashboard/state/folders/reducers.ts

@@ -40,17 +40,18 @@ export function addFileItems(state: sliceState, action: PayloadAction<File>) {
   };
 }
 
-// export function deleteFileEntityItems(
-//   state: sliceState,
-//   action: PayloadAction<DeletePayloadType>
-// ) {
-//   const { id } = action.payload;
-
-//   return {
-//     ...state,
-//     items: [...state.items].filter((item) => item.id !== id),
-//   };
-// }
+export function deleteFileEntityItems(
+  state: sliceState,
+  action: PayloadAction<DeletePayloadType>
+) {
+  const { id } = action.payload;
+  return {
+    ...state,
+    items: [...state.items]
+      .map((item) => ({ ...item }))
+      .filter((item) => item.id !== id),
+  };
+}
 
 export function renameFileEntity(
   state: sliceState,

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);