Merge pull request #14 from WCRI56-Team-GS/joyce/loginfetches

Joyce/loginfetches
WCRI56-Team-GS · Mar 7, 2023 · 1ce461f · 1ce461f
2 parents 583c7cc + b8bc488
commit 1ce461f
Show file tree

Hide file tree

Showing 23 changed files with 558 additions and 208 deletions.
diff --git a/build/bundle.js b/build/bundle.js
diff --git a/build/bundle.js.LICENSE.txt b/build/bundle.js.LICENSE.txt
@@ -27,36 +27,3 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/**
- * @remix-run/router v1.3.3
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * React Router DOM v6.8.2
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * React Router v6.8.2
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script defer="defer" src="bundle.js"></script></head><body><h1>index.html</h1><div id="app"></div><script src="./build/bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script defer="defer" src="bundle.js"></script></head><body><div id="app"></div><script src="./build/bundle.js"></script></body></html>
diff --git a/client/App.jsx b/client/App.jsx
@@ -1,27 +1,33 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import LoginPage from './components/LoginPage.jsx';
 import SignUpPage from './components/SignUpPage.jsx';
 import HomePage from './components/HomePage.jsx';
 
 
 const App = () => {
 
-  const [ signUpToggle, setSignUpToggle ] = useState('');
-  const [ user, setUser ] = useState("");
+  const [ signUpToggle, setSignUpToggle ] = useState(false);
+  const [ user, setUser ] = useState(''); //<-- Switch to an empty string when ready
   const [ password, setPassword ] = useState("")
-  const [ isLoggedIn, setLogin ] = useState(true);
+  const [ isLoggedIn, setLogin ] = useState(false); //<--- Switch to false when ready
+  const [loginError, setLoginError] = useState(false);
 
 
+  //SIGN-UP / SIGN-IN TOGGLE
   const toggle = () => {
     setSignUpToggle(!signUpToggle);
   }
 
+  useEffect(() => {
+
+  },[loginError, isLoggedIn])
+
   return (
     <>
-      <div>HELLLOOOO WORLDDDD</div>
-      {signUpToggle ? (
+      {isLoggedIn ? (<HomePage user={user} isLoggedIn={isLoggedIn} setLogin={setLogin}/>) :
+      (signUpToggle ? (
         <SignUpPage
         user={user}
         setUser={setUser}
@@ -40,18 +46,11 @@ const App = () => {
           toggle={toggle}
           isLoggedIn={isLoggedIn}
           setLogin={setLogin}
+          setLoginError={setLoginError}
         />
-
+      )
       )}
-      {/* <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<LoginPage />}>
-            <Route path="signup" element={<SignUpPage />} />
-            <Route index element={<HomePage />} />
-          </Route>
-        </Routes>
-      </BrowserRouter> */}
-      <HomePage/>
+      {loginError ? (<div>Incorrect username or password. Please try again</div>) : <></>}
     </>
   );
 }
@@ -68,6 +67,52 @@ export default App;
 */
 
 
+/*
+Routing:
+<SignUpPage />
+<LoginPage />
+<HomePage />
+
+<Router>
+  <Routes>
+    <Route 
+      path="/login" 
+      element={
+        <LoginPage
+          user={user}
+          setUser={setUser}
+          password={password}
+          setPassword={setPassword}
+          toggle={toggle}
+          isLoggedIn={isLoggedIn}
+          setLogin={setLogin}
+        />
+      }
+    />
+    <Route 
+      path="/signup" 
+      element={
+        <SignUpPage
+          user={user}
+          setUser={setUser}
+          password={password}
+          setPassword={setPassword}
+          toggle={toggle}
+          isLoggedIn={isLoggedIn}
+          setLogin={setLogin}
+        />
+      }
+    />
+    <Route 
+      path='/home' 
+      element={
+        <HomePage 
+        />} />
+  </Routes>
+</Router>
+
+*/
+
 /* tried useContext() 
   const [signUpToggle, setSignUpToggle]= useContext(UserProvider)
   console.log('SIGNUPTOGGLE from app: ',signUpToggle)

diff --git a/client/components/Column.jsx b/client/components/Column.jsx
@@ -1,32 +1,21 @@
 import React, { Component } from "react";
 import { useState, useEffect } from "react";
+// import { CardModal } from "./Modals";
 
 
 
-function Column ({columns}) {
-
-  //iterate through the columns array of objects
-  const renderColumns = columns.map( col => {
-      let cards = col.cards;
-      //generate an array of cardtexts
-      let renderCards = cards.map(card => {
-        return (
-          <div>{card.cardText}</div>
-        )
-      })
-      //return a column component that contains the column name and the card texts as their own components.
-    return (
-      <div className="column">
-          <div>{col.columnName}</div>
-          {renderCards}
-      </div>
-    )
+function Column ({columnName, cards, setShowCardModal}) {
+  const renderCards = cards.map((card, index) => {
+    return (<div key={index} className='card'>{card.cardText}</div>);
   })
 
-
   return (
-    <div className="column-container">
-      {renderColumns}
+    <div className='columnCont'>
+      <div>{columnName}</div>
+      <div className='cardCont'>
+      {renderCards}
+      </div>
+    <button onClick={() => setShowCardModal(true)}>ADD CARD</button>
     </div>
   );
 }

diff --git a/client/components/HomePage.jsx b/client/components/HomePage.jsx
@@ -3,53 +3,107 @@ import { useState, useEffect } from "react";
 import  { ColumnModal, CardModal } from './Modals.jsx';
 import Column from './Column.jsx'
 
-function HomePage() {
+function HomePage({user, isLoggedIn, setLogin}) {
 
   // state to render a column creation modal
-  const [showColumnModal, setShowColumnModal] = useState(false)
+  const [ showColumnModal, setShowColumnModal ] = useState(false)
   // state to render a card creation modal
-  const [showCardModal, setShowCardModal] = useState(false)
-  const [columns, setColumns] = useState(null);
+  const [ showCardModal, setShowCardModal ] = useState(false)
+  // const [columnsState, setColumns] = useState(null);
+  const [ boardData, setBoardData ] = useState([]);
 
-//useEffect
-  //Make a fetch Request to the server for Column ID(s) associated with the user
-  //Check the cookie for authorization 
-    //fetch GET request to DB.
-      //Should receive an object which we can use to setState OR pass onto Columns component
+  //render columns and cards within 
+  // [
+  //   {
+  //       "_id": "640635f9e846af21bdd5652e",
+  //       "boardName": "testBoard",
+  //       "columns": [
+  //           {
+  //               "_id": "64065a6f664404268f5fc975",
+  //               "columnName": "col1",
+  //               "cards": [
+  //                   {
+  //                       "_id": "64065a6f664404268f5fc976",
+  //                       "cardText": "hello, I'm a card!"
+  //                   }
+  //               ]
+  //           }
+  //       ]
+  //   }
+  // ]
+    //This is real code do not delete:
+    let renderColumns = [];
 
+    useEffect(() => {
+
+      fetch('/api', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({username: user})
+      }).then((res) => res.json())
+      .then((data) => {
+        setBoardData(data);
+      })
+      .catch((error) => {
+        console.log('Error fetching boardData in APP.jsx:', error)
+      })
+    },[isLoggedIn])
+
+    console.log('BOARD DATA', boardData)
+
+
+    if (boardData.length !== 0) {
+      renderColumns = boardData[0].columns.map((column, index) => {
+          return (<Column key={index} columnName={column.columnName} cards={column.cards} setShowCardModal={setShowCardModal}/>)
+        })
+    }
+    let overlay = null;
+
+    useEffect(() => {
+      if (showColumnModal) overlay = <div className="overlay"></div>
+      else overlay = null;
+    }, [showColumnModal, showCardModal])
+    console.log('showColumnModal: ', showColumnModal)
 
     return (
-      <>
-        <div>
-          <div> Home Page
-            <button className="logOut" onClick={() => (console.log('logout button clicked '))}>LOG OUT</button>
+      <div className='homeCont'>
+
+        {overlay}
+
+        <header className='homeHeader'>
+          <h1> Home Page </h1>
+          <button className="logOut" onClick={() => (setLogin(false))}>LOG OUT</button>
+
+        </header>
+
+        <div className='boardDisplay'>
+          <div className="modal-box">
+            {/* when showModal is set to true a column modal will render */}
+            {/* having issues with page re-rendering when state is updated. modal does not stay up */}
+            {/* {showColumnModal && <ColumnModal showColumnModal={showColumnModal} setShowColumnModal={setShowColumnModal} />} */}
+            {showColumnModal ? (<ColumnModal 
+              showColumnModal={showColumnModal} 
+              setShowColumnModal={setShowColumnModal} 
+              showCardModal={showCardModal} 
+              setShowCardModal={setShowCardModal}
+              boardData={boardData}
+              setBoardData={setBoardData} />) 
+              : (<></>)
+            }
+            {showCardModal ? (<CardModal 
+              showCardModal={showCardModal} 
+              setShowCardModal={setShowCardModal} />) 
+              : (<></>)
+            }
+          </div>
+          <div className="column-container">
+            {renderColumns}
           </div>
           <div>
-              <button className="addColumn" onClick={() => setShowColumnModal(true)}>ADD MODAL</button>
-              {console.log(showColumnModal)}
+            <button className="addColumn" onClick={() => setShowColumnModal(true)}>ADD COLUMN</button>
           </div>
         </div>
-        <div className="modal-box">
-        {/* when showModal is set to true a column modal will render */}
-        {/* having issues with page re-rendering when state is updated. modal does not stay up */}
-        {/* {showColumnModal && <ColumnModal showColumnModal={showColumnModal} setShowColumnModal={setShowColumnModal} />} */}
-        {showColumnModal ? (<ColumnModal showColumnModal={showColumnModal} setShowColumnModal={setShowColumnModal} />) : (<></>)}
-        </div>
-        <div>
-          {/* Populate with Column components */}
-          {/* <Column columns={columns}/> */}
-        </div>
-      </form>
-      <div className="modal-box">
-      {/* when showModal is set to true a column modal will render */}
-      {/* having issues with page re-rendering when state is updated. modal does not stay up */}
-      {showColumnModal && <ColumnModal setShowColumnModal={setShowColumnModal} />}
-      </div>
-      <div>
-        {/* //Populate with Column components */}
-        {/* <Column columns={columns}/> */}
       </div>
-    </>
   );
 
 }