Add column functionality

client/App.jsx

@@ -21,8 +21,8 @@ const App = () => {
   }
 
   useEffect(() => {
-
-  },[loginError, isLoggedIn])
+    if (loginError === true) alert('Incorrect username or password. Please try again');
+  },[loginError])
 
   return (
     <>
@@ -50,7 +50,8 @@ const App = () => {
         />
       )
       )}
-      {loginError ? (<div>Incorrect username or password. Please try again</div>) : <></>}
+      {/* {loginError ? (<div>Incorrect username or password. Please try again</div>) : <></>} */}
+
     </>
   );
 }

client/components/HomePage.jsx

@@ -4,13 +4,13 @@ import  { ColumnModal, CardModal } from './Modals.jsx';
 import Column from './Column.jsx'
 
 function HomePage({user, isLoggedIn, setLogin}) {
-
   // state to render a column creation modal
   const [ showColumnModal, setShowColumnModal ] = useState(false)
   // state to render a card creation modal
   const [ showCardModal, setShowCardModal ] = useState(false)
   // const [columnsState, setColumns] = useState(null);
   const [ boardData, setBoardData ] = useState([]);
+  const [ currBoardID, setCurrBoardID] = useState('');
 
   //render columns and cards within 
   // [
@@ -43,6 +43,7 @@ function HomePage({user, isLoggedIn, setLogin}) {
       }).then((res) => res.json())
       .then((data) => {
         setBoardData(data);
+        setCurrBoardID(data[0]._id)
       })
       .catch((error) => {
         console.log('Error fetching boardData in APP.jsx:', error)
@@ -59,11 +60,8 @@ function HomePage({user, isLoggedIn, setLogin}) {
     }
     let overlay = null;
 
-    useEffect(() => {
-      if (showColumnModal) overlay = <div className="overlay"></div>
-      else overlay = null;
-    }, [showColumnModal, showCardModal])
-    console.log('showColumnModal: ', showColumnModal)
+    if (showColumnModal || showCardModal) overlay = <div className="overlay"></div>
+    else overlay = null;
 
     return (
       <div className='homeCont'>
@@ -87,6 +85,7 @@ function HomePage({user, isLoggedIn, setLogin}) {
               showCardModal={showCardModal} 
               setShowCardModal={setShowCardModal}
               boardData={boardData}
+              currBoardID={currBoardID}
               setBoardData={setBoardData} />) 
               : (<></>)
             }

client/components/LoginPage.jsx

@@ -15,13 +15,13 @@ function LoginPage ({user, setUser, password, setPassword, toggle, isLoggedIn, s
             body: JSON.stringify(loginData)
         }).then((res) => {
             console.log(res.status)
-            // if (res.status === 404) {
-            //     setLogin(false)
-            //     setLoginError(true)
-            // } else {
+            if (res.status === 404) {
+                setLogin(false)
+                setLoginError(true)
+            } else {
                 setLogin(true);
                 setLoginError(false);
-            // }
+            }
             console.log('logged in on LoginPage.jsx')
             // console.log('users data', user)
         }).catch((error) => {

client/components/Modals.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import { useState, useEffect } from "react";
+import Column from './Column.jsx'
 
 // Modal for the columns
-const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setShowCardModal, boardData, setBoardData}) => {
-
+const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setShowCardModal, boardData, setBoardData, currBoardID}) => {
 
   /*
   boardData {
@@ -20,18 +20,51 @@ const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setSh
       ]
     }
   */
+
 
   const saveData = () => {
     // get the value from the input field
     const newColumnName = document.querySelector('.modal-column-input').value;
 
     // store it somewhere (local?)
-    console.log('boardData: ', boardData);
-    console.log('boardColumnData: ', boardData[0].columns);
+    console.log('boardData from line 29: ', boardData);
+    console.log('typeof boardData[0]: ', typeof boardData[0]);
     // our local state needs to reflect added column
-    // setBoardData(data => ({
+    const columnName = boardData[0]
+    console.log('line 33: ', columnName)
+    console.log('type of columnName: ', typeof columnName.columns)
+
+    const newBoardData = boardData.map(board => {
+      console.log('board: ', board)
+      console.log('currBoardID: ', currBoardID)
+      if (board._id === currBoardID) {
+        console.log('board and ID match')
+        board.columns.push({columnName: newColumnName, cards: [{cardText: 'Hello, I\'m a new column!'}]})
+        console.log('board: ', board)
+      }
+      return board;
+    })
+    console.log('newBoardData: ', newBoardData);
+    setBoardData(newBoardData)
+    console.log(boardData)
+
+
+    // [{board1}, {board2}, {board3}]
+    // grab our current board by currBoardID
+    // create a newArrayOfBoards without the currBoard (filter by currBoardID)
+    // update current board
+    // add to array of boards
+    // setBoardData(newArrayOfBoards)
+
+
+
+    // setBoardData([{}])
+    // boardData = array of BoardObjs
+    // filter currentBoard 
+
+    // setBoardData((data) => ({
     //   ...data,
-    //   columns: columns.columnName.push(newColumnName)
+    //   columnName: newColumnName
     // }))
     // send a request to DB to udpate Board with new column
     // toggle columnModal
@@ -48,17 +81,18 @@ const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setSh
 
   return (
     <div className="modal-home">
-      {console.log('modal was opened')}
-      <div>
-        <form>
-          <input 
-            className="modal-column-input"
-            type="text"
-            required
-            placeholder="column name"
-            // do we want an onChange here or wait until the input is finished
-          />
-        </form>
+
+      <form className='modal-form'>
+        <h1>ADD COLUMN</h1>
+        <input 
+          className="modal-column-input"
+          type="text"
+          required
+          placeholder="column name"
+          // do we want an onChange here or wait until the input is finished
+        />
+      </form>
+      <div className='modal-button-cont'>
         <button className="modal-text-button"
           onClick={() => saveData()}>
             SAVE
@@ -68,6 +102,7 @@ const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setSh
             DELETE
         </button>
       </div>
+
       {showCardModal && <CardModal />}
     </div>
   )
@@ -91,9 +126,9 @@ const CardModal = ({  showCardModal,setShowCardModal }) => {
 
   return (
     <div className="modal-home">
-      <div>
-        <form>
-          <div>ADD CARD</div>
+
+        <form className='modal-form'>
+          <h1>ADD CARD</h1>
           <input 
             className="card-modal-input"
             type="text"
@@ -102,15 +137,17 @@ const CardModal = ({  showCardModal,setShowCardModal }) => {
             // do we want an onChange here or wait until the input is finished
           />
         </form>
-        <button className="modal-text-button"
-          onClick={() => addTask()}>
-           +
-        </button>
-        <button className="modal-text-button"
-          onClick={() => deleteTask()}>
-            X
-        </button>
-      </div>
+        <div className='modal-button-cont'>
+          <button className="modal-text-button"
+            onClick={() => addTask()}>
+            ADD CARD
+          </button>
+          <button className="modal-text-button"
+            onClick={() => deleteTask()}>
+              CANCEL
+          </button>
+        </div>
+
     </div>
   )
 }

client/styles/components/_columns.scss

@@ -1,39 +1,23 @@
-.modal-home {
+
+
+.columnCont {
+  display: flex;
+  flex-direction: column;
   background-color: $color1;
   color: $color3;
   border-radius: 15px;
   padding: 10px;
+  gap: 10px;
+  width: 175px;
 }
 
-.modal-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.modal-column-input {
-  width: 150px;
-  height: 20px;
-  border-radius: 5px;
-  margin-bottom: 20px;
-  background-color: $color2;
-}
-
-
-.modal-text-button {
+.column-container {
   display: flex;
-  flex-direction: row;
-  justify-content: space-around;
+  gap: 10px;
 }
 
-.columnCont {
+.cardCont {
   display: flex;
   flex-direction: column;
-  background-color: $color1;
-  color: $color3;
-  border-radius: 15px;
-  padding: 10px;
   gap: 10px;
-
 }

client/styles/components/_modals.scss

@@ -0,0 +1,43 @@
+.modal-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+}
+
+.modal-home {
+  background-color: $color1;
+  color: $color3;
+  border-radius: 15px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.modal-column-input {
+  width: 150px;
+  height: 20px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  background-color: $color2;
+}
+
+.modal-text-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.modal-button-cont {
+  display: flex;
+  gap: 20px;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+}

client/styles/main.scss

@@ -7,4 +7,5 @@
 
 @import 'components/buttons';
 @import 'components/cards';
-@import 'components/columns'
+@import 'components/columns';
+@import 'components/modals';

client/styles/pages/_home.scss

@@ -34,6 +34,12 @@
   gap: 20px;
 }
 
+.column-container {
+  display: flex;
+  gap: 10px;
+
+}
+
 .overlay {
   position: fixed;
   top: 0;

server/server.js

@@ -53,7 +53,7 @@ app.post(
     // what should happen here on successful log in?
     console.log("completing post request to '/login");
     // res.redirect('/secret');
-    res.sendstatus(200)
+    res.sendStatus(200);
     // res.redirect("/");
   }
 );

webpack.config.js

@@ -35,6 +35,8 @@ module.exports = {
     port: 8080,
     proxy: {
       "/api": "http://localhost:3000",
+      "/login": "http://localhost:3000",
+      "/signup": "http://localhost:3000"
     },
   },
 };