adds board delete

Author: johnlcos

server/controllers/boardsController.ts

@@ -124,6 +124,36 @@ const boardsController = {
       });
     }
   },
+  getBoardFromId: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      // obtain the user document
+      const board = await Board.findOne({ _id: req.params.boardId });
+      res.locals.board = board;
+      return next();
+    } catch (err) {
+      // pass error through to global error handler
+      return next({
+        log: `boardssController.getBoardFromId ERROR: ${err}`,
+        status: 500,
+        message: { err: "Error getting board" },
+      });
+    }
+  },
+  deleteBoard: async (req: Request, _res: Response, next: NextFunction) => {
+    try {
+      await Board.findOneAndDelete({
+        _id: req.params.boardId,
+      });
+      return next();
+    } catch (err) {
+      // pass error through to global error handler
+      return next({
+        log: `tasksController.deleteBoard ERROR: ${err}`,
+        status: 500,
+        message: { err: "Error deleting board" },
+      });
+    }
+  },
 };
 
 export default boardsController;

server/controllers/tasksController.ts

@@ -139,6 +139,28 @@ const tasksController = {
       });
     }
   },
+  clearTask: async (_req: Request, res: Response, next: NextFunction) => {
+    try {
+      await Card.deleteMany({
+        _id: {
+          $in: [
+            ...res.locals.board.backlog,
+            ...res.locals.board.inProgress,
+            ...res.locals.board.inReview,
+            ...res.locals.board.completed,
+          ],
+        },
+      });
+      return next();
+    } catch (err) {
+      // pass error through to global error handler
+      return next({
+        log: `tasksController.clearTask ERROR: ${err}`,
+        status: 500,
+        message: { err: "Error clearing Tasks" },
+      });
+    }
+  },
 };
 
 export default tasksController;

server/routes/boardsRouter.ts

@@ -36,4 +36,15 @@ router.post(
   }
 );
 
+// route for deleting a task card
+router.delete(
+  "/delete/:boardId",
+  boardsController.getBoardFromId,
+  tasksController.clearTask,
+  boardsController.deleteBoard,
+  (_req: Request, res: Response) => {
+    return res.status(200).json();
+  }
+);
+
 export default router;

src/components/Column.tsx

@@ -7,7 +7,6 @@ import EditTaskModal from "./EditTaskModal.tsx";
 const Column = ({
   name,
   create,
-  user,
   currentBoard,
   boardState,
   setBoardState,
@@ -37,12 +36,7 @@ const Column = ({
     // map column to an array of task card components and then set as the state
     const cardsArray = column.map((task: TaskState) => {
       return (
-        <Card
-          info={task}
-          editingTask={editingTask}
-          setEditingTask={setEditingTask}
-          key={task._id}
-        />
+        <Card info={task} setEditingTask={setEditingTask} key={task._id} />
       );
     });
     setTaskCards(cardsArray);

src/components/CreateBoardModal.tsx

@@ -11,6 +11,7 @@ const CreateBoardModal = ({
   setBoardList,
   handleBoardSelect,
   selectedBoard,
+  setSelectedBoard,
 }: CreateBoardModalProps) => {
   const [boardName, setBoardName] = useState<string>("");
 
@@ -53,6 +54,7 @@ const CreateBoardModal = ({
       );
       setBoardList([...boardList, newBoardListItem]);
       setCurrentBoard({ name: responseData.name, id: responseData._id });
+      setSelectedBoard(responseData._id);
       setCreatingBoard(false);
     } else {
       console.log("Failed To create board.");

src/components/EditBoardModal.tsx

@@ -0,0 +1,103 @@
+import { createPortal } from "react-dom";
+import { EditBoardModalProps } from "../types";
+import { useState } from "react";
+import "../scss/modal.scss";
+
+const EditBoardModal = ({
+  setEditingBoard,
+  setCurrentBoard,
+  currentBoard,
+}: EditBoardModalProps) => {
+  const [boardName, setBoardName] = useState<string>(currentBoard.name);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue: string = e.target.value;
+    setBoardName(inputValue.trim()); //edge case for whitespace
+  };
+
+  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // send put request to /boards/edit with new boardName and id in body
+    const body = {
+      boardName: boardName,
+      id: currentBoard.id,
+    };
+    const response: Response = await fetch("/boards/edit", {
+      method: "PUT",
+      headers: {
+        "Content-type": "application/json; charset=UTF-8",
+      },
+      body: JSON.stringify(body),
+    });
+    // if request success, update currentBoard
+    if (response.status === 200) {
+      const responseData = await response.json();
+      setCurrentBoard({ name: responseData.name, id: responseData._id });
+      setEditingBoard(false);
+    } else {
+      console.log("Failed to edit board.");
+    }
+  };
+
+  const handleDeleteBoard = () => {
+    const fetchDeleteBoard = async () => {
+      const response: Response = await fetch(
+        `/boards/delete/${currentBoard.id}`,
+        {
+          method: "DELETE",
+        }
+      );
+      if (response.status === 200) {
+        setCurrentBoard({
+          name: "",
+          id: "",
+        });
+        setEditingBoard(false);
+      }
+    };
+    fetchDeleteBoard().catch(console.error);
+  };
+
+  const isButtonDisabled: boolean = boardName === ""; //checking if boardName is empty? using trim in handle input
+
+  return createPortal(
+    <div className="modal-overlay">
+      <div className="modal">
+        <form className="modal-form" onSubmit={handleFormSubmit}>
+          <h2 className="modal-title">Edit Board</h2>
+          <input
+            className="modal-input"
+            name="boardname"
+            type="text"
+            value={boardName}
+            onChange={handleInputChange}
+            required
+          />
+          <div className="modal-btns">
+            <button
+              className="modal-submit"
+              type="submit"
+              disabled={isButtonDisabled}
+            >
+              Save
+            </button>
+            <button
+              className="modal-cancel"
+              onClick={() => {
+                setEditingBoard(false);
+              }}
+            >
+              Cancel
+            </button>
+            <button className="modal-delete" onClick={handleDeleteBoard}>
+              Delete
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.getElementById("portal") as Element
+  );
+};
+
+export default EditBoardModal;

src/containers/LeftContainer.tsx

@@ -3,7 +3,11 @@ import { ReactNode, useEffect, useState } from "react";
 import CreateBoardModal from "../components/CreateBoardModal";
 import "../scss/leftContainer.scss";
 
-const LeftContainer = ({ user, setCurrentBoard }: LeftContainerProps) => {
+const LeftContainer = ({
+  user,
+  setCurrentBoard,
+  currentBoard,
+}: LeftContainerProps) => {
   // creating state to open board creating modal
   const [creatingBoard, setCreatingBoard] = useState<boolean>(false);
   // creating state to store the list of board names
@@ -32,7 +36,7 @@ const LeftContainer = ({ user, setCurrentBoard }: LeftContainerProps) => {
     };
     fetchBoardList().catch(console.error);
     // iterate through board names push buttons or components into array boardlist in state
-  }, []);
+  }, [currentBoard]);
 
   // function for changing board when click selection button
   const handleBoardSelect = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -69,6 +73,7 @@ const LeftContainer = ({ user, setCurrentBoard }: LeftContainerProps) => {
           setBoardList={setBoardList}
           handleBoardSelect={handleBoardSelect}
           selectedBoard={selectedBoard}
+          setSelectedBoard={setSelectedBoard}
         />
       ) : null}
       <footer>

src/containers/MainContainer.tsx

@@ -2,8 +2,14 @@ import { useState, useEffect } from "react";
 import "../scss/mainContainer.scss";
 import { BoardState, MainContainerProps } from "../types";
 import ColumnContainer from "./ColumnContainer.tsx";
+import editSvg from "../assets/edit-cover-1481-svgrepo-com.svg";
+import EditBoardModal from "../components/EditBoardModal.tsx";
 
-const MainContainer = ({ user, currentBoard }: MainContainerProps) => {
+const MainContainer = ({
+  user,
+  currentBoard,
+  setCurrentBoard,
+}: MainContainerProps) => {
   // set the board state as empty arrays, will be populated with card ids after fetch
   const [boardState, setBoardState] = useState<BoardState>({
     backlog: [],
@@ -12,6 +18,8 @@ const MainContainer = ({ user, currentBoard }: MainContainerProps) => {
     completed: [],
   });
 
+  const [editingBoard, setEditingBoard] = useState<boolean>(false);
+
   // effect for fetching the current board info whenever currentBoard changes
   useEffect(() => {
     const fetchBoard = async () => {
@@ -48,13 +56,28 @@ const MainContainer = ({ user, currentBoard }: MainContainerProps) => {
 
   return (
     <div className="main-container">
-      <h1 className="board-title">{currentBoard.name}</h1>
+      <div className="main-header">
+        <h1 className="board-title">{currentBoard.name}</h1>
+        <button
+          className="edit-board-btn"
+          onClick={() => setEditingBoard(true)}
+        >
+          <img src={editSvg} alt="Edit SVG" className="edit-svg" />
+        </button>
+      </div>
       <ColumnContainer
         user={user}
         currentBoard={currentBoard}
         boardState={boardState}
         setBoardState={setBoardState}
       />
+      {editingBoard ? (
+        <EditBoardModal
+          setEditingBoard={setEditingBoard}
+          setCurrentBoard={setCurrentBoard}
+          currentBoard={currentBoard}
+        />
+      ) : null}
     </div>
   );
 };

src/routes/Dashboard.tsx

@@ -13,8 +13,16 @@ const Dashboard = ({ user }: DashboardProps) => {
   //state confirmDelete false
   return (
     <div className="main-page">
-      <LeftContainer user={user} setCurrentBoard={setCurrentBoard} />
-      <MainContainer user={user} currentBoard={currentBoard} />
+      <LeftContainer
+        user={user}
+        setCurrentBoard={setCurrentBoard}
+        currentBoard={currentBoard}
+      />
+      <MainContainer
+        user={user}
+        setCurrentBoard={setCurrentBoard}
+        currentBoard={currentBoard}
+      />
     </div>
   );
 };

src/scss/mainContainer.scss

@@ -5,9 +5,25 @@
   text-align: center;
   height: 100%;
 
-  .board-title {
-    height: 5%;
-    margin: 0;
-    margin-top: 10px;
+  .main-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px;
+
+    .edit-board-btn {
+      padding: 5;
+      height: fit-content;
+
+      .edit-svg {
+        width: 20px;
+        height: auto;
+        margin: 0;
+      }
+    }
+
+    .board-title {
+      margin: 0 auto;
+    }
   }
 }