WCRI56-Team-GS · samhhenderson · Mar 4, 2023 · Mar 4, 2023 · Mar 4, 2023 · Mar 4, 2023
diff --git a/build/bundle.js b/build/bundle.js
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,21 +1,121 @@
 import React from 'react';
-import { useState, useEffect, createContext } from 'react';
-import LoginPage from './LoginPage'
-
-const UserContext = createContext();
+import { useState, useEffect } from 'react';
+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 [ 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(false); //<--- Switch to false when ready
+  const [loginError, setLoginError] = useState(false);
+
+
+  //SIGN-UP / SIGN-IN TOGGLE
+  const toggle = () => {
+    setSignUpToggle(!signUpToggle);
+  }
+
+  useEffect(() => {
+    if (loginError === true) alert('Incorrect username or password. Please try again');
+  },[loginError])
 
   return (
-    <UserContext.Provider value={user}>
-      <LoginPage user={user} />
-      <div>
-        <h1>{`Hello ${user}!`}</h1>
-      </div>
-    </UserContext.Provider>
-  )
+    <>
+      {isLoggedIn ? (<HomePage user={user} isLoggedIn={isLoggedIn} setLogin={setLogin}/>) :
+      (signUpToggle ? (
+        <SignUpPage
+        user={user}
+        setUser={setUser}
+        password={password}
+        setPassword={setPassword}
+        toggle={toggle}
+        isLoggedIn={isLoggedIn}
+        setLogin={setLogin}
+      />
+      ) : (
+        <LoginPage
+          user={user}
+          setUser={setUser}
+          password={password}
+          setPassword={setPassword}
+          toggle={toggle}
+          isLoggedIn={isLoggedIn}
+          setLogin={setLogin}
+          setLoginError={setLoginError}
+        />
+      )
+      )}
+      {/* {loginError ? (<div>Incorrect username or password. Please try again</div>) : <></>} */}
+
+    </>
+  );
 }
+
+export default App;
+
+/*notes on the routing:
+//the first Route has a path of "/" (which maybe should change?)
+// and it renders the Login Page
+//the next Routes are nested in that first Route
+
+// do we need to add a catchall for undefined URLs, like <Route path="*" element={<NoPage />} />
+// & then import a NoPage & have an error msg?
+*/
+
+
+/*
+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>
+
+*/
 
-export default App;
+/* tried useContext() 
+  const [signUpToggle, setSignUpToggle]= useContext(UserProvider)
+  console.log('SIGNUPTOGGLE from app: ',signUpToggle)
+  console.log('UserProvider from APP.jsx', UserProvider)
+*/
diff --git a/client/UserContext.js b/client/UserContext.js
@@ -0,0 +1,27 @@
+/* tried useContext()
+
+import React, { useContext, useState, createContext } from 'react';
+
+export const UserContext = React.createContext();
+
+function UserProvider({ children }) {
+  const [ signUpToggle, setSignUpToggle ] = useState(true);
+  const [ user, setUser ] = useState("");
+  const [ password, setPassword ] = useState("")
+
+
+
+  return (
+    <UserContext.Provider value={[signUpToggle, setSignUpToggle]}> 
+      <UserContext.Provider value={[ user, setUser ]}> 
+        <UserContext.Provider value={[ password, setPassword ]}> 
+        {children}
+         </UserContext.Provider>
+      </UserContext.Provider>
+    </UserContext.Provider>
+  )
+}
+
+export default UserProvider;
+
+*/
diff --git a/client/components/Column.jsx b/client/components/Column.jsx
@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import { useState, useEffect } from "react";
+// import { CardModal } from "./Modals";
+
+
+
+function Column ({columnName, cards, setShowCardModal}) {
+  const renderCards = cards.map((card, index) => {
+    return (<div key={index} className='card'>{card.cardText}</div>);
+  })
+
+  return (
+    <div className='columnCont'>
+      <div>{columnName}</div>
+      <div className='cardCont'>
+      {renderCards}
+      </div>
+    <button onClick={() => setShowCardModal(true)}>ADD CARD</button>
+    </div>
+  );
+}
+
+export default Column;
diff --git a/client/components/HomePage.jsx b/client/components/HomePage.jsx
@@ -0,0 +1,110 @@
+import React, { Component } from "react";
+import { useState, useEffect } from "react";
+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 
+  // [
+  //   {
+  //       "_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);
+        setCurrBoardID(data[0]._id)
+      })
+      .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;
+
+    if (showColumnModal || showCardModal) overlay = <div className="overlay"></div>
+    else overlay = null;
+
+    return (
+      <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}
+              currBoardID={currBoardID}
+              setBoardData={setBoardData} />) 
+              : (<></>)
+            }
+            {showCardModal ? (<CardModal 
+              showCardModal={showCardModal} 
+              setShowCardModal={setShowCardModal} />) 
+              : (<></>)
+            }
+          </div>
+          <div className="column-container">
+            {renderColumns}
+          </div>
+          <div>
+            <button className="addColumn" onClick={() => setShowColumnModal(true)}>ADD COLUMN</button>
+          </div>
+        </div>
+      </div>
+  );
+
+}
+
+export default HomePage;