Merge pull request #54 from knowankit/feat/delete-all-column

Delete all columns when its board is deleted

pages/api/boards/[slug]/columns/index.tsx

@@ -38,6 +38,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         return;
       }
 
+      case 'DELETE': {
+        const { slug } = req.query;
+
+        await db.collection('columns').remove({ boardId: slug });
+        res.send({ message: 'All columns deleted' });
+
+        return;
+      }
+
       default:
         res.send({ message: 'DB error' });
         break;

src/components/board/columns/column.tsx

@@ -5,7 +5,7 @@ import Cards from '@/src/components/board/columns/cards';
 import { useDrop } from 'react-dnd';
 import { ItemTypes } from '@/util/items';
 import { useDispatch } from 'react-redux';
-import columns, { deleteColumn, fetchColumns, updateColumn } from '@/src/slices/columns';
+import { deleteColumn, fetchColumns, updateColumn } from '@/src/slices/columns';
 import debounce from 'lodash.debounce';
 
 const Column = ({ showCardDetail, column, index, id }): JSX.Element => {
@@ -69,6 +69,7 @@ const Column = ({ showCardDetail, column, index, id }): JSX.Element => {
       columnName: value,
       columnId: column._id
     };
+
     await dispatch(updateColumn(data));
   };
 
@@ -94,7 +95,6 @@ const Column = ({ showCardDetail, column, index, id }): JSX.Element => {
           </Button>
         </Box>
       </Box>
-
       <Cards showCardDetail={showCardDetail} cards={column.cards} columnIndex={index} />
       <Button
         size="xs"

src/components/board/columns/index.tsx

@@ -34,6 +34,7 @@ const BoardColumns: FC = (): JSX.Element => {
 
   const addColumn = async () => {
     const columnId = shortId.generate();
+
     await dispatch(addColumnToBoard(columnId));
     await dispatch(fetchColumns());
   };

src/components/sub-navbar/board-settings/index.tsx

@@ -23,13 +23,8 @@ import {
 import Link from 'next/link';
 import { useAppSelector } from '@/src/hooks';
 import { useDispatch } from 'react-redux';
-import {
-  updateBoardDetail,
-  saveBoard,
-  fetchBoard,
-  deleteBoard,
-  resetBoard
-} from '@/src/slices/board';
+import { updateBoardDetail, saveBoard, fetchBoard, deleteBoard } from '@/src/slices/board';
+import { deleteAllColumn } from '@/src/slices/columns';
 import { AiFillSetting } from 'react-icons/ai';
 import { useRouter } from 'next/router';
 
@@ -49,6 +44,7 @@ const BoardSettings = (): JSX.Element => {
 
   const handleDelete = async () => {
     await dispatch(deleteBoard());
+    await dispatch(deleteAllColumn());
 
     if (boardDetail.status === 'success') {
       router.push('/boards');

src/slices/columns.ts

@@ -47,6 +47,31 @@ export const deleteColumn = createAsyncThunk(
   }
 );
 
+export const deleteAllColumn = createAsyncThunk(
+  'column/deleteAllColumn',
+  async (_obj, { getState }) => {
+    const { board } = getState() as { board: BoardSlice };
+
+    const url = `${host}/api/boards/${board.board._id}/columns`;
+
+    const response = await fetch(url, {
+      method: 'DELETE',
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer'
+    });
+
+    const inJSON = await response.json();
+
+    return inJSON;
+  }
+);
+
 export const addColumnToBoard = createAsyncThunk(
   'column/add',
   async (columnId: string, { getState }) => {
@@ -158,6 +183,15 @@ export const boardSlice = createSlice({
     },
     [updateColumn.rejected.toString()]: (state) => {
       state.status = 'failed';
+    },
+    [deleteAllColumn.pending.toString()]: (state) => {
+      state.status = 'pending';
+    },
+    [deleteAllColumn.fulfilled.toString()]: (state, { payload }) => {
+      state.status = 'success';
+    },
+    [deleteAllColumn.rejected.toString()]: (state) => {
+      state.status = 'failed';
     }
   }
 });