Ben's Project 1 - Random Quote Generator

package.json

@@ -10,8 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "axios": "^1.6.2",
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-bootstrap": "^2.9.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.css

@@ -1,42 +1,5 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
 
-.read-the-docs {
-  color: #888;
+body {
+  background-color: rgb(255, 255, 255)
 }

src/App.jsx

@@ -1,17 +1,146 @@
-import logo from "/logo.png";
+import NavBar from "./components/Navbar/Navbar";
+import { Routes, Route } from "react-router-dom";
+import QuoteWrapper from "./components/RandomQuote/QuoteWrapper";
+import Home from "./components/Start/Home.jsx";
+import ChangeUser from "./components/ChangeUser/ChangeUser.jsx";
+import Create from "./components/Create/Create.jsx";
+import Saved from "./components/Saved/Saved.jsx";
+import Viewed from "./components/Viewed/Viewed.jsx";
+import { useState } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
 import "./App.css";
+import QuoteX from "./components/Home/QuoteX.jsx";
 
 function App() {
+  const [users, setUsers] = useState([
+    { username: "Kelly", saved: [], created: [] },
+    { username: "Jeremy", saved: [], created: [] }
+  ]);
+  const [currUser, setCurrUser] = useState("")
+  const [viewedQuotes, setViewedQuotes] = useState([])
+
+  const addUser = (name) => {
+    setUsers([...users, {
+      username: name,
+      saved: [],
+      created: []
+    }])
+  }
+
+  const addViewedQuotes = (quote) => { 
+    setViewedQuotes([...viewedQuotes, quote])
+  }
+
+  const changeCurrUser = (name) => {
+    setCurrUser(name); 
+  }
+
+  const handleSaved = (username, quote) => {
+    console.log(quote)
+    setUsers(
+      users.map((user) =>
+        user.username === username
+          ? { ...user, saved: [...user.saved, quote] }
+          : user
+      )
+    );
+  }
+
+  const handleCreate = (username, quote) => {
+    setUsers(
+      users.map((user) =>
+        user.username === username
+          ? { ...user, created: [...user.created, quote] }
+          : user
+      )
+    );
+  }
+
+  const handleDelete = (username, quote, saveOrcreated) => {
+    if (saveOrcreated == "saved") {
+      setUsers(
+        users.map((user) =>
+          user.username === username
+            ? { ...user, saved: user.saved.filter((item) => item !== quote) }
+            : user
+        )
+      );
+    } else if (saveOrcreated == "created"){
+      setUsers(
+        users.map((user) =>
+          user.username === username
+            ? {
+                ...user,
+                created: user.created.filter((item) => item !== quote),
+              }
+            : user
+        )
+      );
+    }
+
+  }
+
   return (
     <>
-      <div>
-        <img src={logo} className="App-logo" alt="logo" />
-      </div>
-      <h1>Project 1</h1>
-      <div className="card">
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
+      <div className="app-container">
+        <NavBar />
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <QuoteX/>
+            }
+          />
+          <Route
+            path="/start"
+            element={
+              <Home
+                addUser={addUser}
+                changeCurrUser={changeCurrUser}
+                user={currUser}
+              />
+            }
+          />
+          <Route
+            path="/quote"
+            element={
+              <QuoteWrapper
+                username={currUser}
+                users={users}
+                handleSaved={handleSaved}
+                addViewedQuotes={addViewedQuotes}
+              />
+            }
+          />
+          <Route
+            path="/create"
+            element={<Create username={currUser} handleCreate={handleCreate} />}
+          />
+          <Route
+            path="/saved"
+            element={
+              <Saved
+                username={currUser}
+                users={users}
+                handleDelete={handleDelete}
+              />
+            }
+          />
+          <Route
+            path="/viewed"
+            element={<Viewed username={currUser} viewedQuotes={viewedQuotes} />}
+          />
+          <Route
+            path="/change-user"
+            element={
+              <ChangeUser
+                username={currUser}
+                options={users}
+                changeCurrUser={changeCurrUser}
+              />
+            }
+          />
+        </Routes>
       </div>
     </>
   );

src/components/ChangeUser/ChangeUser.css

@@ -0,0 +1,14 @@
+.changeuser-container {
+  margin-top: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 40%;
+}
+
+.changeuser-input {
+  margin: 1rem 0  1rem 0;
+}
+
+.concluding {
+  margin: 1rem 0  1rem 0;
+}

src/components/ChangeUser/ChangeUser.jsx

@@ -0,0 +1,54 @@
+import React, {useState} from 'react'
+import "./ChangeUser.css"
+import {Form, Button} from "react-bootstrap"
+import ModalAlert from "../RandomQuote/Modal";
+
+function ChangeUser({username, options, changeCurrUser}) {
+  const [selectedOption, setSelectedOption] = useState("")
+  const [modalShow, setModalShow] = useState(false);
+
+  const handleChange = (event) => {
+    setSelectedOption(event.target.value);
+  };
+
+  const handleClick = () => {
+    setModalShow(true);
+    changeCurrUser(selectedOption)
+  }
+
+  return (
+    <div className="changeuser-container">
+      <h3>Hello, {username}</h3>
+      <div className='changeuser-input'>
+      <label>Change User To: </label>
+      <Form.Select
+        aria-label="Default select example"
+        name="change-user"
+        value={selectedOption}
+        onChange={handleChange}
+      >
+        <option value="">Select an Option</option>
+        {options.map((option, index) => (
+          <option key={index} value={option.username}>
+            {option.username}
+          </option>
+        ))}
+      </Form.Select>  
+      </div>
+
+      <Button variant="secondary" onClick={handleClick}>
+        Change
+      </Button>
+      <div className='concluding'>To add new user, please go to "Get Started"</div>
+
+      <ModalAlert
+        show={modalShow}
+        onHide={() => setModalShow(false)}
+        text="Changed"
+      ></ModalAlert>
+
+    </div>
+  );
+}
+
+export default ChangeUser

src/components/Create/Create.css

@@ -0,0 +1,10 @@
+.create-container {
+  margin-top: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 40%;
+}
+
+.create-input {
+
+}

src/components/Create/Create.jsx

@@ -0,0 +1,63 @@
+import React, {useState} from 'react'
+import ModalAlert from '../RandomQuote/Modal';
+import {Form, Button} from "react-bootstrap";
+import "./Create.css"
+
+function Create({username, handleCreate}) {
+  const [quote, setQuote] = useState("");
+  const [category, setCategory] = useState("")
+  const [modalShow, setModalShow] = useState(false);
+
+  const handleText = (event) => {
+    setQuote(event.target.value);
+  }
+
+  const handleCategory = (event) => {
+    setCategory(event.target.value)
+  }
+
+  const createQuote = () => {
+    event.preventDefault()
+    if(username == "") {
+      return
+    } else {
+      const newQuote = {
+      text: quote,
+      author: username,
+      category: category
+      };
+      setModalShow(true);    
+      handleCreate(username, newQuote);
+    }
+  };
+
+  return (
+    <div className="create-container">
+      <h3>Hello, {username}</h3>
+      <Form onSubmit={createQuote}>
+        <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
+          <Form.Label>Write Your Own Quote</Form.Label>
+          <Form.Control as="textarea" rows={3} onChange={handleText} />
+        </Form.Group>
+        <Form.Group className="mb-3">
+          <Form.Label>Category</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Category"
+            onChange={handleCategory}
+          />
+        </Form.Group>
+        <Button variant="primary" onClick={createQuote}>
+          Create
+        </Button>
+      </Form>
+      <ModalAlert
+        show={modalShow}
+        onHide={() => setModalShow(false)}
+        text="Created"
+      ></ModalAlert>
+    </div>
+  );
+}
+
+export default Create

src/components/Home/QuoteX.css

@@ -0,0 +1,16 @@
+.quotex-container {
+  margin-top: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 60%;
+}
+
+.first-row-second-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.first-row {
+  background-color: bisque;
+}