Merge branch 'blends' into homepage

client/src/components/App.tsx

@@ -1,21 +1,24 @@
 import React, { useState, useEffect } from "react";
 import jwt_decode from "jwt-decode";
 import { CredentialResponse } from "@react-oauth/google";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useParams } from "react-router-dom";
 
 import { get, post } from "../utilities";
 import NotFound from "./pages/NotFound";
 import Home from "./pages/Home";
 import NavBar from "./modules/NavBar";
 import Profile from "./pages/Profile";
 import { socket } from "../client-socket";
-import User from "../../../shared/User";
+// import User from "../../../shared/User";
 import "../utilities.css";
 import Friends from "./pages/Friends";
+import Blends from "./pages/Blends";
 import { MantineProvider, createTheme } from "@mantine/core";
 import "@mantine/core/styles.css"; // Import Mantine styles
 import Books from "./pages/Books";
 import { FooterSimple } from "./modules/Footer";
+import { User } from "../../../server/models/User";
+import BlendsRoute from "./BlendsRoute";
 
 const theme = createTheme({
   colors: {
@@ -90,7 +93,8 @@ const App = () => {
                 {/* <Route path="/" element={} /> */}
                 <Route path="/profile/" element={<Profile userId={userId} />} />
                 <Route path="/my-books/" element={<Books userId={userId} />} />
-                <Route path="/friends/" element={<Friends userId={userId} />} />
+                <Route path="/blends/" element={<Friends userId={userId} />} />
+                <Route path="/blends/:id" element={<BlendsRoute userId={userId} />} />
                 <Route path="/" element={<Profile userId={userId} />} />
                 <Route path="*" element={<NotFound />} />
               </Routes>

client/src/components/BlendsRoute.tsx

@@ -0,0 +1,72 @@
+import { useParams } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { User } from "../../../server/models/User";
+
+import NotFound from "./pages/NotFound";
+import Blends from "./pages/Blends";
+
+import Profile from "./pages/Profile";
+import { get, post } from "../utilities";
+
+const BlendsRoute = ({ userId }) => {
+  const [ids, setIds] = useState<string[]>([]);
+  const { id } = useParams();
+  const [blendsList, setBlendsList] = useState<string[]>([]);
+
+  useEffect(() => {
+    get("/api/users").then((users: User[]) => {
+      setIds(users.map((user) => user._id));
+    });
+  }, []);
+
+  const checkId = () => {
+    for (let i = 0; i < ids.length; i++) {
+      if (ids[i] === id) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    get("/api/whoami").then((user: User) => {
+      if (user._id) {
+        setBlendsList(user.blends);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!checkBlends(id)) {
+        post("/api/updateUsers", { passedId: id });
+        // console.log("adding blend");
+    }
+  })
+
+  const checkBlends = (id) => {
+    // console.log(blendsList);
+    for (let i = 0; i < blendsList.length; i++) {
+      // console.log(blendsList[i]);
+      // console.log(id);
+      if (blendsList[i] === id) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  if (userId === undefined) {
+    return <div>
+        <p>loading...</p>
+    </div>
+  }
+
+  if (!checkId()) {
+    return <NotFound />;
+  } else if (userId === id) {
+    return <Profile userId={userId} />;
+  } else {
+    return <Blends userId={userId} />;
+  }
+};
+export default BlendsRoute;

client/src/components/modules/BookInfo.tsx

@@ -0,0 +1,93 @@
+//popup for inputting book info such as date read, genre, and rating
+
+import React, { useEffect, useState } from "react";
+import Genre from "./Genre";
+
+
+const BookInfo = ({ item, onClose, datecb, ratingcb, genrecb, addbook, dropdowncb, currentcb }) => {
+  let thumbnail =
+    item.volumeInfo && item.volumeInfo.imageLinks && item.volumeInfo.imageLinks.smallThumbnail;
+  let today = new Date();
+  const [genre, setGenre] = useState<string>(""); 
+  const [date, setDate] = useState<string>(today.toString());
+  const [rating, setRating] = useState<number>(0);
+  const [submit, setSubmit] = useState<boolean>(false); 
+  const [current, setCurrent] = useState<boolean>(false);
+
+  const handleSubmit = (event) => {
+    event.preventDefault(); // Prevent default form submission behavior
+    setSubmit(true);
+  }
+
+  useEffect(() => {
+    if (submit) {
+      dropdowncb(); // Close the dropdown
+      addbook(item); // Add the book to the library
+    }}, [submit]); 
+
+  useEffect(() => {
+    datecb(new Date(date));
+  }, [date]);
+
+  useEffect(() => {
+    ratingcb(rating);
+  }, [rating]); 
+
+  useEffect(() => {
+    genrecb(genre);
+  }, [genre]);  
+
+  const handleGenreChange = (event) => {
+    setGenre(event.target.value);
+  };
+
+  useEffect(() => {
+    currentcb(current);
+  }, [current]);
+
+  return (
+    <div>
+      <div className="overlay">
+        <div className="overlay-inner">
+          <button className="close" onClick={onClose}>X</button>
+          <div className="inner-box">
+            <img src={thumbnail} alt="" />
+            <div className="info">
+            <h1>{item.volumeInfo.title}</h1>
+               <h3>{item.volumeInfo.authors}</h3>
+               <h5>
+                 {item.volumeInfo.publisher}
+                 <span>{item.volumeInfo.published_date}</span>
+               </h5>
+               <br />
+              {/* ... Other info elements ... */}
+              <form onSubmit={handleSubmit}>
+                {!current && (
+                  <>
+                    <label htmlFor="date">Date Completed:</label>
+                    <input type="date" min="1900-01-01" id="date" name="date" value={date.toString()} onChange={(e) => setDate(e.target.value)}/>
+                  </>
+                )}
+                <label htmlFor="current">Currently Reading:</label>
+                <input type="checkbox" id="current" name="current" checked={current} onChange={(e) => setCurrent(e.target.checked)}/>
+                <br/>
+                <label htmlFor="genre">Genre:</label>
+                <Genre onChange={handleGenreChange} value={genre} />
+                <br/>
+                <label htmlFor="rating">Rating:</label>
+                <input type="number" id="rating" name="rating" placeholder="Rating" value={rating} onChange={(e) => setRating(Number(e.target.value))}/>  
+                <br/>
+                <button type="submit">Add Book</button>
+              </form>
+            </div>
+          </div>
+          <div className="description">
+            <h4 className="description">{item.volumeInfo.description}</h4>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export default BookInfo;

client/src/components/modules/Genre.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+const Genre = ({ onChange, value }) => {
+  return (
+    <select name="genre" id="genre" value={value} onChange={onChange}>
+      <option value="action">Action</option>
+      <option value="adventure">Adventure</option>
+      <option value="comedy">Comedy</option>
+      <option value="crime">Crime</option>
+      <option value="drama">Drama</option>
+      <option value="fantasy">Fantasy</option>
+      <option value="fiction">Fiction</option>
+      <option value="historical">Historical</option>
+      <option value="historical fiction">Historical Fiction</option>  
+      <option value="horror">Horror</option>  
+      <option value="magical realism">Magical Realism</option>  
+      <option value="mystery">Mystery</option>
+      <option value="non-fiction">Non-Fiction</option>
+      <option value="paranormal">Paranormal</option>
+      <option value="philosophical">Philosophical</option>
+      <option value="political">Political</option>
+      <option value="romance">Romance</option>
+      <option value="satire">Satire</option>
+      <option value="science fiction">Science Fiction</option>
+      <option value="social">Social</option>
+      <option value="speculative">Speculative</option>
+      <option value="thriller">Thriller</option>
+      <option value="urban">Urban</option>
+      <option value="western">Western</option>
+    </select>
+  )
+}
+
+export default Genre;

client/src/components/modules/NavBar.tsx

@@ -35,8 +35,8 @@ const NavBar = (props: NavBarProps) => {
           <Link to="/my-books/" className="NavBar-link">
             my books
           </Link>
-          <Link to="/friends/" className="NavBar-link">
-            friends
+          <Link to="/blends/" className="NavBar-link">
+            blends
           </Link>
           {/* <button
             onClick={() => {