building main container, styled left container

Author: namos2502

server/controllers/boardsController.ts

@@ -58,7 +58,6 @@ const boardsController = {
   },
   createBoard: async (req: Request, res: Response, next: NextFunction) => {
     try {
-      console.log('req.body', req.body.boardName);
       const createdBoard = await Board.create({
         name: req.body.boardName,
         backlog: [],
@@ -94,6 +93,29 @@ const boardsController = {
       });
     }
   },
+  getCurrentBoard: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      // find all boards beloning to the user, push board names into an array and save on locals
+      const board = await User.findOne({ _id: req.params.boardID });
+      console.log(board);
+      if (!board) {
+        return next({
+          log: `boardsController.getCurrentBoard ERROR: Board cannot be found.`,
+          status: 500,
+          message: { err: 'Cannot find board.' },
+        });
+      }
+      res.locals.boardInfo = board;
+      return next();
+    } catch (err) {
+      // pass error through to global error handler
+      return next({
+        log: `boardssController.getCurrentBoard ERROR: ${err}`,
+        status: 500,
+        message: { err: 'Error getting current board' },
+      });
+    }
+  },
 };
 
 export default boardsController;

server/routes/boardsRouter.ts

@@ -1,28 +1,36 @@
-import express, { Request, Response } from "express";
+import express, { Request, Response } from 'express';
 
 const router = express.Router();
 
 // import controllers
-import boardsController from "../controllers/boardsController.ts";
+import boardsController from '../controllers/boardsController.ts';
 
 // define routes
 
 // route for getting board names
 router.get(
-  "/:userId",
+  '/:userId',
   boardsController.getMyBoards,
   boardsController.getBoardNamesAndIds,
   (_req: Request, res: Response) => {
     return res.status(200).json(res.locals.namesAndIds);
   }
 );
 
+router.get(
+  '/:boardID',
+  boardsController.getCurrentBoard,
+  (_req: Request, res: Response) => {
+    return res.status(200).json(res.locals.boardInfo);
+  }
+);
+
 router.post(
-  "/create",
+  '/create',
   boardsController.createBoard,
   boardsController.assignNewBoard,
   (_req: Request, res: Response) => {
-    return res.sendStatus(200); //may need the board just created data to render into the main container
+    return res.status(200).json(res.locals.createdBoard); //may need the board just created data to render into the main container
   }
 );
 

src/components/CreateBoardModal.tsx

@@ -1,14 +1,14 @@
-import { createPortal } from "react-dom";
-import { CreateBoardModalProps } from "../types";
-import { useState } from "react";
-import "../scss/modal.scss";
+import { createPortal } from 'react-dom';
+import { CreateBoardModalProps } from '../types';
+import { useState } from 'react';
+import '../scss/modal.scss';
 
 const CreateBoardModal = ({
   setCreatingBoard,
   setCurrentBoard,
   user,
 }: CreateBoardModalProps) => {
-  const [boardName, setBoardName] = useState<string>("");
+  const [boardName, setBoardName] = useState<string>('');
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setBoardName(e.target.value);
@@ -21,10 +21,10 @@ const CreateBoardModal = ({
       boardName: boardName,
       userId: user.id,
     };
-    const response: Response = await fetch("/boards/create", {
-      method: "POST",
+    const response: Response = await fetch('/boards/create', {
+      method: 'POST',
       headers: {
-        "Content-type": "application/json; charset=UTF-8",
+        'Content-type': 'application/json; charset=UTF-8',
       },
       body: JSON.stringify(body),
     });
@@ -33,31 +33,31 @@ const CreateBoardModal = ({
     if (response.status === 200) {
       const responseData = await response.json();
       setCreatingBoard(false);
-      setCurrentBoard(responseData.name);
+      console.log('Board created: ', responseData);
     } else {
-      console.log("Board creation failed");
+      console.log('Failed To create board.');
     }
   };
 
   return createPortal(
-    <div className="modal-overlay">
-      <div className="modal">
-        <form className="modal-form" onSubmit={handleFormSubmit}>
-          <h2 className="modal-title">New Board</h2>
+    <div className='modal-overlay'>
+      <div className='modal'>
+        <form className='modal-form' onSubmit={handleFormSubmit}>
+          <h2 className='modal-title'>New Board</h2>
           <input
-            className="modal-input"
-            name="boardname"
-            type="text"
-            placeholder="Enter Board Name"
+            className='modal-input'
+            name='boardname'
+            type='text'
+            placeholder='Enter Board Name'
             onChange={handleInputChange}
             required
           />
-          <div className="modal-btns">
-            <button className="modal-submit" type="submit">
+          <div className='modal-btns'>
+            <button className='modal-submit' type='submit'>
               Save
             </button>
             <button
-              className="modal-cancel"
+              className='modal-cancel'
               onClick={() => {
                 setCreatingBoard(false);
               }}
@@ -68,7 +68,7 @@ const CreateBoardModal = ({
         </form>
       </div>
     </div>,
-    document.getElementById("portal") as Element
+    document.getElementById('portal') as Element
   );
 };
 

src/containers/LeftContainer.tsx

@@ -1,48 +1,44 @@
-import { ContainerProps, BoardListItemState } from "../types";
-import { useEffect, useState } from "react";
-import CreateBoardModal from "../components/CreateBoardModal";
-import "../scss/leftContainer.scss";
+import { ContainerProps, BoardListItemState } from '../types';
+import { useEffect, useState } from 'react';
+import CreateBoardModal from '../components/CreateBoardModal';
+import '../scss/leftContainer.scss';
 
 const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
   // creating state to open board creating modal
   const [creatingBoard, setCreatingBoard] = useState<boolean>(false);
   // creating state to store the list of board names
   const [boardList, setBoardList] = useState<BoardListItemState[]>([]);
   // make a request for all board naames, return an array containing strings of the board names
-  console.log(user);
   useEffect(() => {
     const fetchBoardList = async () => {
       const reponse: Response = await fetch(`/boards/${user.id}`);
       const list = await reponse.json();
       setBoardList(list);
-      console.log("boardList: ", boardList);
     };
     fetchBoardList().catch(console.error);
   }, []);
 
   // function for changing board when click selection button
   const handleBoardSelect = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault;
+    e.preventDefault();
     setCurrentBoard({
       name: e.currentTarget.name,
       id: e.currentTarget.id,
     });
   };
 
   // function for creating a new board
-  const handleCreateBoard = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault;
+  const handleCreateBoard = () => {
     // create a pop up to create the new board
     setCreatingBoard(true);
   };
 
   // iterate through board names push buttons or components into array boardlist in state
   const boardSelectors = [];
   for (let i = 0; i < boardList.length; i++) {
-    console.log("boardList[i]: ", boardList[i]);
     boardSelectors.push(
       <button
-        className="board-selector"
+        className='board-selector'
         onClick={handleBoardSelect}
         name={boardList[i].name}
         id={boardList[i].id}
@@ -54,22 +50,24 @@ const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
   }
 
   return (
-    <div className="left-container">
-      <div className="boards-info">
-        <h1 className="heading">{user.name}'s Boards</h1>
-        <button className="new-board-btn" onClick={handleCreateBoard}>
+    <div className='left-container'>
+      <h1 className='heading'>Hello, {user.name}</h1>
+      <div className='boards-info'>
+        <button className='new-board-btn' onClick={handleCreateBoard}>
           Create New Board +
         </button>
-        <div className="board-selectors">{boardSelectors}</div>
+        <div className='board-selectors'>{boardSelectors}</div>
       </div>
-      <button className="settings-btn">Settings</button>
       {creatingBoard ? (
         <CreateBoardModal
           setCreatingBoard={setCreatingBoard}
           setCurrentBoard={setCurrentBoard}
           user={user}
         />
       ) : null}
+      <footer>
+        <button className='settings-btn'>Settings</button>
+      </footer>
     </div>
   );
 };

src/containers/MainContainer.tsx

@@ -1,7 +1,24 @@
-import "../scss/mainContainer.scss";
+import { useState, useEffect } from 'react';
+import '../scss/mainContainer.scss';
+import { ContainerProps } from '../types';
 
-const MainContainer = () => {
-  return <div className="main-container">Main Container</div>;
+const MainContainer = ({ currentBoard }: ContainerProps) => {
+  // const [view, setView] = useState();
+  useEffect(() => {
+    const fetchBoard = async () => {
+      const reponse: Response = await fetch(`/boards/${currentBoard.id}`);
+      const board = await reponse.json();
+      console.log(board);
+    };
+    fetchBoard().catch(console.error);
+  }, []);
+
+  return (
+    <div className='main-container'>
+      <h1>{currentBoard.name}</h1>
+      <div className='task-container'></div>
+    </div>
+  );
 };
 
 export default MainContainer;

src/routes/Dashboard.tsx

@@ -11,11 +11,10 @@ const Dashboard = ({ user }: DashboardProps) => {
     id: '',
   });
   //state confirmDelete false
-  console.log('User in dash board', user);
   return (
     <div className='main-page'>
       <LeftContainer user={user} setCurrentBoard={setCurrentBoard} />
-      <MainContainer />
+      <MainContainer currentBoard={currentBoard}/>
     </div>
   );
 };

src/scss/leftContainer.scss

@@ -3,17 +3,65 @@
   height: 100%;
   background-color: rgb(22, 22, 22);
   margin: 0;
-  padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  text-align: center; /* Center text horizontally */
+  h1 {
+    padding: 10px;
+  }
+  footer {
+    margin-top: auto;
+    height: fit-content;
+  }
+  .settings-btn {
+    margin: 20px;
+    border: 2px solid rgb(169, 166, 166);
+    border-radius: 10px;
+    background-color: rgb(22, 22, 22);
+    color: white;
+    font-size: x-large;
+    padding: 10px;
+    &:hover {
+      background-color: rgb(54, 53, 53);
+    }
+  }
+}
+.boards-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.board-selector {
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  color: white;
+  background-color: rgb(22, 22, 22);
+  padding: 15px;
+  border: 2px solid rgb(22, 22, 22);
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: large;
+  width: 200px;
+  margin: 10px;
+  &:hover {
+    border: 2px solid rgb(195, 255, 14);
+  }
+  &:target {
+    border: 2px solid rgb(195, 255, 14);
+  }
 }
-.boardSelector {
+.new-board-btn {
   align-self: center;
-  background-color: #4caf50;
-  color: #fff;
+  border: 2px solid rgb(22, 22, 22);
+  border-radius: 10px;
+  background-color: rgb(22, 22, 22);
+  color: white;
+  font-size: large;
   padding: 10px;
-  border: 1px solid black;
-  border-radius: 4px;
+  &:hover {
+    background-color: rgb(54, 53, 53);
+  }
 }

src/scss/mainContainer.scss

@@ -1,4 +1,5 @@
 .main-container {
   width: 80%;
   text-align: center;
+  height: 100%;
 }

src/scss/modal.scss

@@ -57,10 +57,12 @@
 
         .modal-submit {
           background-color: #4caf50;
+          width: 100px;
         }
 
         .modal-cancel {
           background-color: goldenrod;
+          width: 100px;
         }
       }
     }

src/types.ts

@@ -13,7 +13,7 @@ export type DashboardProps = {
 
 export type ContainerProps = {
   user: UserState;
-  currentBoard?: string;
+  currentBoard?: CurrentBoardState;
   setCurrentBoard: React.Dispatch<React.SetStateAction<CurrentBoardState>>;
 };