deploy stuff

client/.gitignore

@@ -1 +1,3 @@
 node_modules
+.env
+build

client/package.json

@@ -3,11 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^1.9.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.2.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

client/src/App.js

@@ -1,51 +1,62 @@
-import React, {useState} from "react";
- 
+import React, { useState } from "react";
+
 // We use Route in order to define the different routes of our application
 import { Route, Routes } from "react-router-dom";
 import Navbar from "./components/navbar";
 import EditProject from "./components/editProject";
 import CreateProject from "./components/createProject";
 import ProjectList from "./components/projectList";
 import ProjectTask from "./components/projectTask";
-import './components/projectTask.css';
+import "./components/projectTask.css";
 import { Auth0Provider } from "@auth0/auth0-react";
 export const MyContext = React.createContext();
 export const ButtonContex = React.createContext();
 const App = () => {
-  const [isDarkMode,setIsDarkMode] = useState(false)
-  const [currentPage,setCurrentPage] = useState("/createProject")
-  const togleDarkMode = () =>{
-    setIsDarkMode(isDarkMode => !isDarkMode)
-  }
-  const value = {currentPage,setCurrentPage}
-  //rgb(99, 99, 99)
- return (
-   <div id="overlay2" style={{"backgroundColor":isDarkMode?"rgb(99, 99, 99)":"white"}}>
-       <Auth0Provider
-    domain={process.env.REACT_APP_AUTH0_DOMAIN}
-    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID} 
-    redirectUri={window.location.origin}>
-    <ButtonContex.Provider value={value}>
-     <MyContext.Provider value={isDarkMode}>
-     <Navbar/>
-     <Routes>
-       <Route exact path="/" element={<ProjectList />} />
-       <Route path="/createProject" element={<CreateProject />} />
-       <Route path="/editProject/:id" element={<EditProject />} />
-       <Route path="/projectTask/:id" element={<ProjectTask />} />
-     </Routes>
-     <div className="footer" style={{"backgroundColor":isDarkMode?"#838383":"#eeeeee","color":isDarkMode?"white":"#1f1f1f"}}>
-      <h3 style={{"margin":"10px"}}>{isDarkMode?"Dark Mode":"Light Mode"}</h3>
-      <label className="switch">
-      <input type="checkbox" onChange={togleDarkMode}/>
-      <span className="slider round"></span>
-      </label>
-     </div>
-     </MyContext.Provider>
-     </ButtonContex.Provider>
-     </Auth0Provider>
-   </div>
- );
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [currentPage, setCurrentPage] = useState("/createProject");
+  const togleDarkMode = () => {
+    setIsDarkMode((isDarkMode) => !isDarkMode);
+  };
+  const value = { currentPage, setCurrentPage };
+  return (
+    <div
+      id="overlay2"
+      style={{ backgroundColor: isDarkMode ? "rgb(99, 99, 99)" : "white" }}
+    >
+      <Auth0Provider
+        domain={process.env.REACT_APP_AUTH0_DOMAIN}
+        clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
+        redirectUri={window.location.origin}
+      >
+        <ButtonContex.Provider value={value}>
+          <MyContext.Provider value={isDarkMode}>
+            <Navbar />
+            <Routes>
+              <Route exact path="/" element={<ProjectList />} />
+              <Route path="/createProject" element={<CreateProject />} />
+              <Route path="/editProject/:id" element={<EditProject />} />
+              <Route path="/projectTask/:id" element={<ProjectTask />} />
+            </Routes>
+            <div
+              className="footer"
+              style={{
+                backgroundColor: isDarkMode ? "#838383" : "#eeeeee",
+                color: isDarkMode ? "white" : "#1f1f1f",
+              }}
+            >
+              <h3 style={{ margin: "10px" }}>
+                {isDarkMode ? "Dark Mode" : "Light Mode"}
+              </h3>
+              <label className="switch">
+                <input type="checkbox" onChange={togleDarkMode} />
+                <span className="slider round"></span>
+              </label>
+            </div>
+          </MyContext.Provider>
+        </ButtonContex.Provider>
+      </Auth0Provider>
+    </div>
+  );
 };
- 
-export default App;
+
+export default App;

client/src/components/createProject.js

@@ -3,67 +3,73 @@ import { useNavigate } from "react-router";
 import { useAuth0 } from "@auth0/auth0-react";
 
 export default function Create() {
- const { user, isAuthenticated } = useAuth0();
- const [form, setForm] = useState({
-   name: "",
-   user:isAuthenticated?user.email:"",
- });
- const navigate = useNavigate();
+  const { user, isAuthenticated } = useAuth0();
+  const [form, setForm] = useState({
+    name: "",
+    user: isAuthenticated ? user.email : "",
+  });
+  const navigate = useNavigate();
 
- // These methods will update the state properties.
- function updateForm(value) {
-   return setForm((prev) => {
-     return { ...prev, ...value };
-   });
- }
-
- // This function will handle the submission.
- async function onSubmit(e) {
-   e.preventDefault();
-
-   // When a post request is sent to the create url, we'll add a new record to the database.
-   const newPerson = { ...form };
-
-   await fetch("http://localhost:5000/project/add", {
-     method: "POST",
-     headers: {
-       "Content-Type": "application/json",
-     },
-     body: JSON.stringify(newPerson),
-   })
-   .catch(error => {
-     window.alert(error);
-     return;
-   });
-
-   setForm({ name: "" });
-   navigate("/");
- }
-
- // This following section will display the form that takes the input from the user.
- return (
-   <div>
-     <h3 style={{"marginLeft":"5%"}}>Create New Project</h3>
-     <form onSubmit={onSubmit} className="container">
-       <div className="form-group">
-       <label>Name</label>
-         <input
-           type="text"
-           className="form-control"
-           id="name"
-           value={form.name}
-           onChange={(e) => updateForm({ name: e.target.value, user:isAuthenticated?user.email:""})}
-         />
-       </div>
-       <div className="form-group" style={{"marginTop":"10px"}}>
-         <input
-           type="submit"
-           value="Create"
-           className="btn btn-danger"
-         />
-        <button className="btn btn-secondary" style={{"marginLeft":"10px"}} onClick={()=>navigate(`/`)}>Cancel</button>
-       </div>
-     </form>
-   </div>
- );
-}
+  // These methods will update the state properties.
+  function updateForm(value) {
+    return setForm((prev) => {
+      return { ...prev, ...value };
+    });
+  }
+
+  // This function will handle the submission.
+  async function onSubmit(e) {
+    e.preventDefault();
+
+    // When a post request is sent to the create url, we'll add a new record to the database.
+    const newPerson = { ...form };
+
+    await fetch("https://sheltered-depths-34196.herokuapp.com/project/add", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(newPerson),
+    }).catch((error) => {
+      window.alert(error);
+      return;
+    });
+
+    setForm({ name: "" });
+    navigate("/");
+  }
+
+  // This following section will display the form that takes the input from the user.
+  return (
+    <div>
+      <h3 style={{ marginLeft: "5%" }}>Create New Project</h3>
+      <form onSubmit={onSubmit} className="container">
+        <div className="form-group">
+          <label>Name</label>
+          <input
+            type="text"
+            className="form-control"
+            id="name"
+            value={form.name}
+            onChange={(e) =>
+              updateForm({
+                name: e.target.value,
+                user: isAuthenticated ? user.email : "",
+              })
+            }
+          />
+        </div>
+        <div className="form-group" style={{ marginTop: "10px" }}>
+          <input type="submit" value="Create" className="btn btn-danger" />
+          <button
+            className="btn btn-secondary"
+            style={{ marginLeft: "10px" }}
+            onClick={() => navigate(`/`)}
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}