Merge pull request #2 from OS-Builders/leftcontainer

Leftcontainer

Author: johnlcos

src/components/CreateBoardModal.tsx

@@ -1,14 +1,18 @@
-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,
+  boardList,
+  setBoardList,
+  handleBoardSelect,
+  selectedBoard,
 }: CreateBoardModalProps) => {
-  const [boardName, setBoardName] = useState<string>('');
+  const [boardName, setBoardName] = useState<string>("");
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue: string = e.target.value;
@@ -22,49 +26,64 @@ 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),
     });
-    // receive username from backend
+    // receive usernam and id from backend
     // if request success, save username to state and route to dashboard
     if (response.status === 200) {
       const responseData = await response.json();
+      console.log("Board created: ", responseData);
+      const newBoardListItem = (
+        <button
+          className={`board-selector ${
+            selectedBoard === responseData._id ? "selected" : ""
+          }`}
+          onClick={handleBoardSelect}
+          name={responseData.name}
+          id={responseData._id}
+          key={responseData._id}
+        >
+          {responseData.name}
+        </button>
+      );
+      setBoardList([...boardList, newBoardListItem]);
+      setCurrentBoard({ name: responseData.name, id: responseData._id });
       setCreatingBoard(false);
-      console.log('Board created: ', responseData);
     } else {
-      console.log('Failed To create board.');
+      console.log("Failed To create board.");
     }
   };
 
-  const isButtonDisabled: boolean = boardName === ''; //checking if boardName is empty? using trim in handle input
+  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'>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'>
+          <div className="modal-btns">
             <button
-              className='modal-submit'
-              type='submit'
+              className="modal-submit"
+              type="submit"
               disabled={isButtonDisabled}
             >
               Save
             </button>
             <button
-              className='modal-cancel'
+              className="modal-cancel"
               onClick={() => {
                 setCreatingBoard(false);
               }}
@@ -75,7 +94,7 @@ const CreateBoardModal = ({
         </form>
       </div>
     </div>,
-    document.getElementById('portal') as Element
+    document.getElementById("portal") as Element
   );
 };
 

src/containers/LeftContainer.tsx

@@ -1,23 +1,37 @@
-import { ContainerProps, BoardListItemState } from '../types';
-import { useEffect, useState } from 'react';
-import CreateBoardModal from '../components/CreateBoardModal';
-import '../scss/leftContainer.scss';
+import { BoardListItemState, ContainerProps } from "../types";
+import { ReactNode, 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[]>([]);
+  const [boardList, setBoardList] = useState<ReactNode[]>([]);
   //state for selected board
   const [selectedBoard, setSelectedBoard] = useState<string | null>(null);
   // make a request for all board naames, return an array containing strings of the board names
   useEffect(() => {
     const fetchBoardList = async () => {
       const reponse: Response = await fetch(`/boards/${user.id}`);
       const list = await reponse.json();
-      setBoardList(list);
+      const boardSelectors = list.map((board: BoardListItemState) => (
+        <button
+          className={`board-selector ${
+            selectedBoard === board.id ? "selected" : ""
+          }`}
+          onClick={handleBoardSelect}
+          name={board.name}
+          id={board.id}
+          key={board.id}
+        >
+          {board.name}
+        </button>
+      ));
+      setBoardList(boardSelectors);
     };
     fetchBoardList().catch(console.error);
+    // iterate through board names push buttons or components into array boardlist in state
   }, []);
 
   // function for changing board when click selection button
@@ -36,39 +50,29 @@ const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
     setCreatingBoard(true);
   };
 
-  // iterate through board names push buttons or components into array boardlist in state
-  const boardSelectors = boardList.map((board, index) => (
-    <button
-      className={`board-selector ${
-        selectedBoard === board.id ? 'selected' : ''
-      }`}
-      onClick={handleBoardSelect}
-      name={board.name}
-      id={board.id}
-      key={index}
-    >
-      {board.name}
-    </button>
-  ));
-
   return (
-    <div className='left-container'>
-      <h1 className='heading'>Hello, {user.name}</h1>
-      <button className='new-board-btn' onClick={handleCreateBoard}>
+    <div className="left-container">
+      <h1 className="heading">Task Pro</h1>
+      <h1 className="heading">{user.name}'s Boards</h1>
+      <button className="new-board-btn" onClick={handleCreateBoard}>
         Create New Board +
       </button>
-      <div className='boards-info'>
-        <div className='board-selectors'>{boardSelectors}</div>
+      <div className="boards-info">
+        <div className="board-selectors">{boardList}</div>
       </div>
       {creatingBoard ? (
         <CreateBoardModal
           setCreatingBoard={setCreatingBoard}
           setCurrentBoard={setCurrentBoard}
           user={user}
+          boardList={boardList}
+          setBoardList={setBoardList}
+          handleBoardSelect={handleBoardSelect}
+          selectedBoard={selectedBoard}
         />
       ) : null}
       <footer>
-        <button className='setting-button'>Setting</button>
+        <button className="settings-button">Settings</button>
       </footer>
     </div>
   );

src/containers/MainContainer.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import '../scss/mainContainer.scss';
-import { ContainerProps } from '../types';
+import { useState, useEffect } from "react";
+import "../scss/mainContainer.scss";
+import { ContainerProps } from "../types";
 
 const MainContainer = ({ currentBoard }: ContainerProps) => {
   // const [view, setView] = useState();
@@ -13,10 +13,20 @@ const MainContainer = ({ currentBoard }: ContainerProps) => {
     fetchBoard().catch(console.error);
   }, []);
 
+  if (!currentBoard?.name) {
+    return (
+      <div className="main-container">
+        <h1 className="heading">
+          Select existing board or create a new one to get started!
+        </h1>
+      </div>
+    );
+  }
+
   return (
-    <div className='main-container'>
+    <div className="main-container">
       <h1>{currentBoard.name}</h1>
-      <div className='task-container'></div>
+      <div className="task-container"></div>
     </div>
   );
 };

src/scss/dashBoard.scss

@@ -2,4 +2,5 @@
   color: white;
   display: flex;
   height: 100%;
+  width: 100%;
 }

src/scss/leftContainer.scss

@@ -1,5 +1,5 @@
 .left-container {
-  width: 20%;
+  width: 300px;
   height: 100%;
   background-color: rgb(22, 22, 22);
   margin: 0;
@@ -14,7 +14,7 @@
     margin-top: auto;
     height: 60px;
   }
-  .setting-button {
+  .settings-button {
     border: none;
     background-color: rgb(22, 22, 22);
     color: white;
@@ -84,7 +84,7 @@
   border-radius: 5px;
 
   &:before {
-    content: '';
+    content: "";
     background: linear-gradient(
       45deg,
       #ff0000,
@@ -115,7 +115,7 @@
   // }
   &:after {
     z-index: -1;
-    content: '';
+    content: "";
     position: absolute;
     width: 100%;
     height: 100%;

src/types.ts

@@ -20,7 +20,11 @@ export type ContainerProps = {
 export type CreateBoardModalProps = {
   setCreatingBoard: React.Dispatch<React.SetStateAction<boolean>>;
   setCurrentBoard: React.Dispatch<React.SetStateAction<CurrentBoardState>>;
+  boardList: React.ReactNode[];
+  setBoardList: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;
   user: UserState;
+  handleBoardSelect: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  selectedBoard: string | null;
 };
 
 export interface UserState {