From e9d33046270c98964e285fd20b7511443ae329b2 Mon Sep 17 00:00:00 2001
From: OttaviaFeletig <ottafel@hotmail.it>
Date: Thu, 30 Jun 2022 17:48:50 +0200
Subject: [PATCH 1/2] code review Raul & Ottavia

---
 src/App.js                     |  54 ++++++++-----
 src/components/BookList.js     | 128 +++++++++++++++++--------------
 src/components/BookPreview.js  |  59 +++++++-------
 src/components/BookReviews.js  |  92 ++++++++++++----------
 src/components/GoBackButton.js |  29 ++++---
 src/components/SaveNote.js     |  55 +++++++------
 src/components/UserNotes.js    |  98 +++++++++++++-----------
 src/context/AuthContext.js     | 136 +++++++++++++++++----------------
 src/views/About.js             |  15 ++--
 src/views/Detail.js            |  26 +++----
 src/views/ErrorPage.js         |  22 +++---
 src/views/MyRack.js            |  44 +++++------
 12 files changed, 411 insertions(+), 347 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5fc5b99..6f7a50c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,40 +1,54 @@
-import './App.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { Routes, Route} from 'react-router-dom';
-import Home from './views/Home.js';
-import Detail from './views/Detail.js';
-import Register from './views/Register.js';
-import About from './views/About.js';
-import ErrorPage from './views/ErrorPage.js';
-import Nav from './components/Nav.js';
-import { AuthContextProvider } from './context/AuthContext';
-import ProtectedRoute from './components/ProtectedRoute';
-import { app } from "./config"
-import { Container } from 'react-bootstrap';
-import Login from './views/Login';
-import MyRack from './views/MyRack';
+import "./App.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Routes, Route } from "react-router-dom";
+import Home from "./views/Home.js";
+import Detail from "./views/Detail.js";
+import Register from "./views/Register.js";
+import About from "./views/About.js";
+import ErrorPage from "./views/ErrorPage.js";
+import Nav from "./components/Nav.js";
+import { AuthContextProvider } from "./context/AuthContext";
+import ProtectedRoute from "./components/ProtectedRoute";
+import { app } from "./config";
+import { Container } from "react-bootstrap";
+import Login from "./views/Login";
+import MyRack from "./views/MyRack";
 
 function App() {
   const year = new Date().getFullYear().toString();
 
   return (
-    <Container className='App'>
+    <Container className="App">
       <AuthContextProvider>
         <Nav />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="detail/:bookid" element={<ProtectedRoute><Detail /></ProtectedRoute>} />
+          <Route
+            path="detail/:bookid"
+            element={
+              <ProtectedRoute>
+                <Detail />
+              </ProtectedRoute>
+            }
+          />
           <Route path="register" element={<Register />} />
           <Route path="login" element={<Login />} />
-          <Route path="myrack" element={<ProtectedRoute><MyRack /></ProtectedRoute>} />
+          <Route
+            path="myrack"
+            element={
+              <ProtectedRoute>
+                <MyRack />
+              </ProtectedRoute>
+            }
+          />
           <Route path="about" element={<About />} />
           <Route path="*" element={<ErrorPage />} />
         </Routes>
       </AuthContextProvider>
 
-      <footer className='pt-3'>© {year} Marta Podziewska</footer>
+      <footer className="pt-3">© {year} Marta Podziewska</footer>
     </Container>
-  )
+  );
 }
 
 export default App;
diff --git a/src/components/BookList.js b/src/components/BookList.js
index e72e6d3..a12530c 100644
--- a/src/components/BookList.js
+++ b/src/components/BookList.js
@@ -1,68 +1,82 @@
-import React, { useState, useEffect } from 'react'
-import Pagination from './Pagination';
-import { Col, Container, Row } from 'react-bootstrap';
-import BookPreview from './BookPreview';
-
+import React, { useState, useEffect } from "react";
+import Pagination from "./Pagination";
+import { Col, Container, Row } from "react-bootstrap";
+import BookPreview from "./BookPreview";
+// ! general observation: everytime you fetch the API with a different startIndex you get back a different totalItems number
+// ! so, when you are on page 1 and you click on page 70, your app crashes. did you notice it? do you have an idea why the API gives you different numbers of books?
 function BookList() {
-    const [books, setBooks] = useState([]);
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const [totalBookCount, setTotalBookCount] = useState(0)
-    const [totalPageCount, setTotalPageCount] = useState(0)
-    const [url, setUrl] = useState("https://www.googleapis.com/books/v1/volumes?q=climbing&key="+process.env.REACT_APP_GOOGLE_BOOKS_API_KEY+"&startIndex=");
+  const [books, setBooks] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [totalBookCount, setTotalBookCount] = useState(0);
+  const [totalPageCount, setTotalPageCount] = useState(0);
+  const [url, setUrl] = useState(
+    "https://www.googleapis.com/books/v1/volumes?q=climbing&key=" +
+      process.env.REACT_APP_GOOGLE_BOOKS_API_KEY +
+      "&startIndex="
+  );
 
-    const fetchBooks = async () => {
-        try {
-            const response = await fetch(url+currentIndex);
-            const bookData = await response.json();
-            const bookCount = await bookData.totalItems;
-            setTotalBookCount(bookCount);
-            const numberOfPages = Math.ceil(bookCount/10)
-            setTotalPageCount(numberOfPages);
-            const bookList = await bookData.items;
-            setBooks(bookList);
-        } catch (err) {
-            console.log(err);
-        };
-    };
+  const fetchBooks = async () => {
+    try {
+      const response = await fetch(url + currentIndex);
+      const bookData = await response.json();
+      console.log("bookData", bookData);
+      // ! why do you have to await for the total items? totalItems is just a key of the bookData object
+      const bookCount = await bookData.totalItems;
+      setTotalBookCount(bookCount);
+      const numberOfPages = Math.ceil(bookCount / 10);
+      setTotalPageCount(numberOfPages);
+      // ! same here, items is part of the object so you don't have to wait
+      const bookList = await bookData.items;
+      setBooks(bookList);
+    } catch (err) {
+      // ! here it would be good to set an error message and display it to the user if it occurs
+      console.log(err);
+    }
+  };
 
-    const handlePageClick = (event) => {
-        setCurrentIndex(event.selected)
-    };
+  const handlePageClick = (event) => {
+    setCurrentIndex(event.selected);
+  };
 
-    useEffect(() => {
-        fetchBooks()
-    }, [currentIndex])
+  useEffect(() => {
+    fetchBooks();
+  }, [currentIndex]);
 
   return (
     <>
-        <Row>
-            <Col>
-                {totalBookCount ? <p>A total of {totalBookCount} results, page {currentIndex+1}</p> :
-                    <div className='py-3'>
-                        <p>Loading list view...</p>
-                    </div> 
-                }
-            </Col>
-        </Row>
-        <Container className='d-flex flex-wrap'>
-            {books && books.map(book => { 
-                return (
-                    <Container
-                    className='py-1'
-                    key={book.id}
-                    >
-                        <BookPreview props={book}/>
-                    </Container>
-                )
-            }
-            )}
-        </Container>
+      <Row>
+        <Col>
+          {totalBookCount ? (
+            <p>
+              A total of {totalBookCount} results, page {currentIndex + 1}
+            </p>
+          ) : (
+            <div className="py-3">
+              <p>Loading list view...</p>
+            </div>
+          )}
+        </Col>
+      </Row>
+      <Container className="d-flex flex-wrap">
+        {books &&
+          books.map((book) => {
+            return (
+              <Container className="py-1" key={book.id}>
+                {/*//! calling props a prop is a bit weird, why don't you call it book? */}
+                <BookPreview props={book} />
+              </Container>
+            );
+          })}
+      </Container>
 
-        {totalPageCount && 
-            <Pagination handlePageClick={handlePageClick} totalPageCount={totalPageCount}
-            />}
+      {totalPageCount && (
+        <Pagination
+          handlePageClick={handlePageClick}
+          totalPageCount={totalPageCount}
+        />
+      )}
     </>
-  )
+  );
 }
 
-export default BookList
\ No newline at end of file
+export default BookList;
diff --git a/src/components/BookPreview.js b/src/components/BookPreview.js
index 6c67f2f..94ca23c 100644
--- a/src/components/BookPreview.js
+++ b/src/components/BookPreview.js
@@ -1,35 +1,38 @@
-import React from 'react'
-import { Col, Image, Row } from 'react-bootstrap'
-import FavButton from './FavButton'
-import SeeDetailButton from './SeeDetailButton'
-
-function BookPreview({props}) {
+import React from "react";
+import { Col, Image, Row } from "react-bootstrap";
+import FavButton from "./FavButton";
+import SeeDetailButton from "./SeeDetailButton";
 
+function BookPreview({ props }) {
   return (
-      <>
-        <Row
-        className='justify-content-center'
-        >
-            {/* <Col xs={2} md={1} className='d-flex'>
+    <>
+      <Row className="justify-content-center">
+        {/* <Col xs={2} md={1} className='d-flex'>
                 <SeeDetailButton id={props.id} />
                 <FavButton/>
             </Col> */}
-            <Col>
-                <h5>{props.volumeInfo.title} </h5>
-            </Col>
-        </Row>
-        <Row>
-            <Col xs={4} md={3} l={2}>
-                <Image thumbnail="true" fluid="true" src={props.volumeInfo.imageLinks.thumbnail} alt={`Cover photo of the book ${props.volumeInfo.title}`}/>
-            </Col>
-            <Col>
-                <p>{`${props.volumeInfo.description.slice(0, 100)}...`}</p>
-                <SeeDetailButton id={props.id} />
-                <FavButton/>
-            </Col>
-        </Row>
-      </>
-  )
+        <Col>
+          <h5>{props.volumeInfo.title} </h5>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={4} md={3} l={2}>
+          <Image
+            thumbnail="true"
+            fluid="true"
+            src={props.volumeInfo.imageLinks.thumbnail}
+            alt={`Cover photo of the book ${props.volumeInfo.title}`}
+          />
+        </Col>
+        <Col>
+          <p>{`${props.volumeInfo.description.slice(0, 100)}...`}</p>
+          {/* // ! nice that you created specific components for it */}
+          <SeeDetailButton id={props.id} />
+          <FavButton />
+        </Col>
+      </Row>
+    </>
+  );
 }
 
-export default BookPreview
\ No newline at end of file
+export default BookPreview;
diff --git a/src/components/BookReviews.js b/src/components/BookReviews.js
index f5960ab..6d5016a 100644
--- a/src/components/BookReviews.js
+++ b/src/components/BookReviews.js
@@ -1,54 +1,64 @@
-import { collection, getDocs, query, where } from 'firebase/firestore';
-import React, { useContext, useEffect, useState } from 'react'
-import { Container } from 'react-bootstrap';
-import { useParams } from 'react-router-dom';
-import { db } from '../config'
-import { AuthContext } from '../context/AuthContext';
-import NoteCard from './NoteCard';
+import { collection, getDocs, query, where } from "firebase/firestore";
+import React, { useContext, useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import { useParams } from "react-router-dom";
+import { db } from "../config";
+import { AuthContext } from "../context/AuthContext";
+import NoteCard from "./NoteCard";
 
 function BookReviews() {
-    const [reviews, setReviews] = useState()
-    let { bookid } = useParams();
-    const {user} = useContext(AuthContext);
-    const bookReviews = query(collection(db, "notes"), where("book_id", "==", bookid), where("user", "!=", user.email));
+  const [reviews, setReviews] = useState();
+  let { bookid } = useParams();
+  const { user } = useContext(AuthContext);
+  // ! why are you hiding the logged in user's notes? please remember to tell us cause we are very curious
 
-    const getReviews = async() => {
-        try {
-            const querySnapshot = await getDocs(bookReviews);
-            let fetchedReviews = [];
-            querySnapshot.forEach((doc) => {
-                fetchedReviews.push(doc.data());
-            });
-            setReviews(fetchedReviews)
+  const getReviews = async () => {
+    // ! the bookReviews query should be here because if you don't have the user yet (we know it's a protected route, but still we are trying to break your code as much as we can ;))
+    // ! it will throw an error
+    const bookReviews = query(
+      collection(db, "notes"),
+      where("book_id", "==", bookid),
+      where("user", "!=", user.email)
+    );
 
-        } catch (error) {
-            console.log(error)
-        }
-    };
+    try {
+      const querySnapshot = await getDocs(bookReviews);
+      let fetchedReviews = [];
+      querySnapshot.forEach((doc) => {
+        fetchedReviews.push(doc.data());
+      });
+      setReviews(fetchedReviews);
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
-    const noteDate = (time) => {
-        return new Date(time*1000).toLocaleDateString();
-    };
+  const noteDate = (time) => {
+    return new Date(time * 1000).toLocaleDateString();
+  };
 
-    useEffect(() => {
-        getReviews();
-    }, []);
+  useEffect(() => {
+    getReviews();
+  }, []);
 
   return (
     <>
-    {reviews && <h5>what other users say about this book</h5>}
-    {reviews ? (reviews.map((note, index) => {
-        return (
-            <Container className='py-2' key={index}>
-                <NoteCard note={note} date={noteDate(note.date.seconds)} />
+      {reviews && <h5>what other users say about this book</h5>}
+      {reviews ? (
+        reviews.map((note, index) => {
+          return (
+            <Container className="py-2" key={index}>
+              <NoteCard note={note} date={noteDate(note.date.seconds)} />
             </Container>
-        )})) :
-        <div className='py-3'>
-            <p>Loading reviews...</p>
-        </div> 
-    } 
+          );
+        })
+      ) : (
+        <div className="py-3">
+          <p>Loading reviews...</p>
+        </div>
+      )}
     </>
-  )
+  );
 }
 
-export default BookReviews
\ No newline at end of file
+export default BookReviews;
diff --git a/src/components/GoBackButton.js b/src/components/GoBackButton.js
index 0391812..4dedefb 100644
--- a/src/components/GoBackButton.js
+++ b/src/components/GoBackButton.js
@@ -1,22 +1,27 @@
-import React from 'react'
-import { Button } from 'react-bootstrap'
-import { useNavigate } from "react-router-dom"
+import React from "react";
+import { Button } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
 
 function GoBackButton() {
-    const navigate = useNavigate()
+  const navigate = useNavigate();
   return (
     <>
-        <Button
-        className='d-flex text-primary'
+      <Button
+        className="d-flex text-primary"
         variant="outline-none"
         onClick={() => {
-            navigate(-1)
+          // ! there should be an other parameter to avoid going back to a non protected route
+          // ! example: you login, then go to home, then click to go back and it brings you back to the login which is a bit weird (try it)
+          // ! investigate if you want and try fixing it
+          navigate(-1);
         }}
-        >
-            <span className="material-symbols-outlined">keyboard_double_arrow_left</span>
-        </Button>
+      >
+        <span className="material-symbols-outlined">
+          keyboard_double_arrow_left
+        </span>
+      </Button>
     </>
-  )
+  );
 }
 
-export default GoBackButton
\ No newline at end of file
+export default GoBackButton;
diff --git a/src/components/SaveNote.js b/src/components/SaveNote.js
index 6836d5b..64fc25f 100644
--- a/src/components/SaveNote.js
+++ b/src/components/SaveNote.js
@@ -1,52 +1,59 @@
-import React from 'react'
-import { useContext, useState } from 'react';
-import { Button, Form } from 'react-bootstrap';
-import { useNavigate, useParams } from 'react-router-dom';
-import { AuthContext } from '../context/AuthContext';
-import { collection, addDoc } from "firebase/firestore"; 
-import { db } from '../config';
+import React from "react";
+import { useContext, useState } from "react";
+import { Button, Form } from "react-bootstrap";
+import { useNavigate, useParams } from "react-router-dom";
+import { AuthContext } from "../context/AuthContext";
+import { collection, addDoc } from "firebase/firestore";
+import { db } from "../config";
 
 function SaveNote() {
   const [note, setNote] = useState("");
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const { bookid } = useParams();
   const navigateTo = useNavigate();
 
   const handleNoteChange = (event) => {
     setNote(event.target.value);
-  }; 
+  };
 
   const handleNoteSave = async (event) => {
-    event.preventDefault()
+    event.preventDefault();
     const noteObj = {
       text: note,
       user: user.email,
       date: new Date(),
       book_id: bookid,
-    }
+    };
     try {
+      // ! you should double check that the input is not empty before adding the doc
       const docRef = await addDoc(collection(db, "notes"), noteObj);
       console.log("Document written with ID: ", docRef.id);
       navigateTo("/myrack");
-      event.target.value=""
+      event.target.value = "";
     } catch (err) {
       console.log(err);
     }
-  }
+  };
 
   return (
     <>
-          <Form>
-            <Form.Group className="my-3">
-            <h5>Add a note and place the book on your rack</h5>
-              <Form.Control type="text" placeholder="What would you like to remember about this book?" value={note} onChange={handleNoteChange}/>
-            </Form.Group>
-            <Button variant="primary" type="submit" onClick={handleNoteSave}>
-              Save your note
-            </Button>
-          </Form>
+      <Form>
+        <Form.Group className="my-3">
+          <h5>Add a note and place the book on your rack</h5>
+          <Form.Control
+            type="text"
+            placeholder="What would you like to remember about this book?"
+            value={note}
+            onChange={handleNoteChange}
+          />
+        </Form.Group>
+        {/* // ! you could disable the button unless you have some text in the input */}
+        <Button variant="primary" type="submit" onClick={handleNoteSave}>
+          Save your note
+        </Button>
+      </Form>
     </>
-  )
+  );
 }
 
-export default SaveNote
\ No newline at end of file
+export default SaveNote;
diff --git a/src/components/UserNotes.js b/src/components/UserNotes.js
index 6760bdb..ecacd84 100644
--- a/src/components/UserNotes.js
+++ b/src/components/UserNotes.js
@@ -1,55 +1,61 @@
-import { collection, getDocs, query, where } from 'firebase/firestore';
-import React, { useContext, useEffect, useState } from 'react'
-import { Container } from 'react-bootstrap';
-import { db } from '../config'
-import { AuthContext } from '../context/AuthContext';
-import BookFetchPreview from './BookFetchPreview';
-import NoteCard from './NoteCard';
+import { collection, getDocs, query, where } from "firebase/firestore";
+import React, { useContext, useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import { db } from "../config";
+import { AuthContext } from "../context/AuthContext";
+import BookFetchPreview from "./BookFetchPreview";
+import NoteCard from "./NoteCard";
 
 function UserNotes() {
-    const [notes, setNotes] = useState()
-    const {user} = useContext(AuthContext);
-
-    const getNotes = async() => {
-        const userNotes = query(collection(db, "notes"), where("user", "==", user.email));
-
-        try {
-            const querySnapshot = await getDocs(userNotes);
-            let fetchedNotes = [];
-            querySnapshot.forEach((doc) => {
-                fetchedNotes.push(doc.data());
-            });
-            setNotes(fetchedNotes)
-
-        } catch (error) {
-            console.log(error)
-        }
-    };
-
-    const noteDate = (time) => {
-        return new Date(time*1000).toLocaleDateString();
-    };
-
-    useEffect(() => {
-        getNotes();
-    }, []);
+  const [notes, setNotes] = useState();
+  const { user } = useContext(AuthContext);
+
+  const getNotes = async () => {
+    const userNotes = query(
+      collection(db, "notes"),
+      where("user", "==", user.email)
+    );
+
+    try {
+      const querySnapshot = await getDocs(userNotes);
+      let fetchedNotes = [];
+      querySnapshot.forEach((doc) => {
+        fetchedNotes.push(doc.data());
+      });
+      setNotes(fetchedNotes);
+      console.log("fetchedNotes", fetchedNotes);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const noteDate = (time) => {
+    return new Date(time * 1000).toLocaleDateString();
+  };
+
+  useEffect(() => {
+    getNotes();
+  }, []);
 
   return (
     <>
-    <p>Notes on your books: </p>
-    {notes ? (notes.map((note, index) => {
-        return (
-            <Container className='py-2' key={index}>
-                <BookFetchPreview bookId={note.book_id} />
-                <NoteCard note={note} date={noteDate(note.date.seconds)} />
+      <p>Notes on your books: </p>
+      {notes ? (
+        notes.map((note, index) => {
+          return (
+            <Container className="py-2" key={index}>
+              <BookFetchPreview bookId={note.book_id} />
+              <NoteCard note={note} date={noteDate(note.date.seconds)} />
             </Container>
-        )})) :
-        <div className='py-3'>
-            <p>Loading your notes...</p>
-        </div> 
-    } 
+          );
+        })
+      ) : (
+        <div className="py-3">
+          <p>Loading your notes...</p>
+        </div>
+      )}
     </>
-  )
+  );
 }
 
-export default UserNotes
\ No newline at end of file
+export default UserNotes;
diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js
index 4468097..bb4129e 100644
--- a/src/context/AuthContext.js
+++ b/src/context/AuthContext.js
@@ -1,78 +1,84 @@
 import { createContext, useEffect, useState } from "react";
-import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword, signOut } from "firebase/auth";
-import { auth } from "../config.js"
+import {
+  createUserWithEmailAndPassword,
+  onAuthStateChanged,
+  signInWithEmailAndPassword,
+  signOut,
+} from "firebase/auth";
+import { auth } from "../config.js";
 import { useNavigate } from "react-router-dom";
 
-
 export const AuthContext = createContext();
 
 export const AuthContextProvider = (props) => {
-    const [user, setUser] = useState(null)
-    const redirectTo = useNavigate();
-
-    const register = async (email, password) => {
-        console.log("email + password", email, password)
+  const [user, setUser] = useState(null);
+  const redirectTo = useNavigate();
 
-        try {
-            const userCredential = await createUserWithEmailAndPassword(auth, email, password)
-            // setUser(userCredential.user.email);
-            setUser(userCredential.user);
-            console.log(userCredential)
-            redirectTo("myrack")
-        } catch (error) {
-            console.log(error)
-            setUser(null)
-            }
-        }
+  const register = async (email, password) => {
+    console.log("email + password", email, password);
 
-    const login = (email, password) => {
+    try {
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      // ! you could use the method to update the user and add a displayName too
+      // setUser(userCredential.user.email);
+      setUser(userCredential.user);
+      console.log(userCredential);
+      redirectTo("myrack");
+    } catch (error) {
+      console.log(error);
+      setUser(null);
+    }
+  };
 
-        signInWithEmailAndPassword(auth, email, password)
-            .then((userCredential) => {
-                // Signed in 
-                console.log(userCredential.user)
-                // setUser(userCredential.user.email)
-                setUser(userCredential.user)
-                redirectTo("myrack")
-            })
-            .catch((error) => {
-                const errorCode = error.code;
-                const errorMessage = error.message;
-                setUser(null)
-                console.log(errorCode, errorMessage);
-            });
-    };
+  const login = (email, password) => {
+    signInWithEmailAndPassword(auth, email, password)
+      .then((userCredential) => {
+        // Signed in
+        console.log(userCredential.user);
+        // setUser(userCredential.user.email)
+        setUser(userCredential.user);
+        redirectTo("myrack");
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        setUser(null);
+        console.log(errorCode, errorMessage);
+      });
+  };
 
-    const checkIfUserLoggedin = () => {
-        onAuthStateChanged(auth, (user) => {
-            if (user) {
-                const uid = user.uid;
-                setUser(user);
-            } else {
-                setUser(null);
-            }
-        });
-    };
+  const checkIfUserLoggedin = () => {
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        // const uid = user.uid;
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+    });
+  };
 
-    const logout = () => {
-        signOut(auth)
-        .then(() => {
-            setUser(null)
-        }).catch((error) => {
-            console.log(error);
-        })
-    };
+  const logout = () => {
+    signOut(auth)
+      .then(() => {
+        setUser(null);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
-    useEffect(() => {
-      checkIfUserLoggedin();
-    }, [])
-    
+  useEffect(() => {
+    checkIfUserLoggedin();
+  }, []);
 
-    return (
-        <AuthContext.Provider
-        value={ {user, setUser, register, login, logout} }
-        >
-            {props.children}
-        </AuthContext.Provider>
-    );
-};
\ No newline at end of file
+  return (
+    <AuthContext.Provider value={{ user, setUser, register, login, logout }}>
+      {props.children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/src/views/About.js b/src/views/About.js
index 8a8db9a..8513964 100644
--- a/src/views/About.js
+++ b/src/views/About.js
@@ -1,23 +1,24 @@
-import React from 'react'
-import { Col, Row } from 'react-bootstrap'
-import GoToButton from '../components/GoToButton'
+import React from "react";
+import { Col, Row } from "react-bootstrap";
+import GoToButton from "../components/GoToButton";
 
 function About() {
   return (
     <>
-      <Row className='justify-content-center py-5  mt-4'>
+      <Row className="justify-content-center py-5  mt-4">
         <Col>
           <h1>data</h1>
           <h5>there is no content here just yet</h5>
         </Col>
         <Row>
           <Col>
-            <GoToButton path="/" element="home page"  />
+            {/* // ! nice that you are creating a resusable GoTo button!! */}
+            <GoToButton path="/" element="home page" />
           </Col>
         </Row>
       </Row>
     </>
-  )
+  );
 }
 
-export default About
\ No newline at end of file
+export default About;
diff --git a/src/views/Detail.js b/src/views/Detail.js
index e57effb..74b6ce0 100644
--- a/src/views/Detail.js
+++ b/src/views/Detail.js
@@ -1,30 +1,30 @@
-import { Col, Row } from 'react-bootstrap';
-import BookDetail from '../components/BookDetail';
-import BookReviews from '../components/BookReviews';
-import GoBackButton from '../components/GoBackButton';
-import SaveNote from '../components/SaveNote';
+import { Col, Row } from "react-bootstrap";
+import BookDetail from "../components/BookDetail";
+import BookReviews from "../components/BookReviews";
+import GoBackButton from "../components/GoBackButton";
+import SaveNote from "../components/SaveNote";
 
 function Detail() {
   return (
     <>
-      <Row className='justify-content-center pt-5 pb-2 mt-4'>
+      <Row className="justify-content-center pt-5 pb-2 mt-4">
         <Col>
           <BookDetail />
-          <GoBackButton/>
+          <GoBackButton />
         </Col>
       </Row>
-      <Row className='justify-content-center pb-2'>
+      <Row className="justify-content-center pb-2">
         <Col>
-          <SaveNote/> 
+          <SaveNote />
         </Col>
       </Row>
-      <Row className='justify-content-center py-4'>
+      <Row className="justify-content-center py-4">
         <Col>
-          <BookReviews/>
+          <BookReviews />
         </Col>
       </Row>
     </>
-  )
+  );
 }
 
-export default Detail
\ No newline at end of file
+export default Detail;
diff --git a/src/views/ErrorPage.js b/src/views/ErrorPage.js
index db2f2fd..b0814c4 100644
--- a/src/views/ErrorPage.js
+++ b/src/views/ErrorPage.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Col, Row } from 'react-bootstrap'
-import GoToButton from "../components/GoToButton"
-
+import React from "react";
+import { Col, Row } from "react-bootstrap";
+import GoToButton from "../components/GoToButton";
+// ! very nice that you created an error page
 function ErrorPage() {
   return (
     <>
-      <Row className='justify-content-center py-5 mt-4'>
+      <Row className="justify-content-center py-5 mt-4">
         <Col>
           <h1>snap!</h1>
           <h5>The page you're trying to access does not exist. </h5>
         </Col>
       </Row>
-      <Row className='justify-content-center'>
+      <Row className="justify-content-center">
         <Col>
-        
-          <p>How about you take a look at some books on the main page instead?</p>
+          <p>
+            How about you take a look at some books on the main page instead?
+          </p>
           <GoToButton path="/" element="main page" />
-
         </Col>
       </Row>
     </>
-  )
+  );
 }
 
-export default ErrorPage
\ No newline at end of file
+export default ErrorPage;
diff --git a/src/views/MyRack.js b/src/views/MyRack.js
index 9f9f665..4e457db 100644
--- a/src/views/MyRack.js
+++ b/src/views/MyRack.js
@@ -1,29 +1,27 @@
-import React, { useContext } from 'react'
-import { Col, Row } from 'react-bootstrap'
-import UserNotes from '../components/UserNotes'
-import { AuthContext } from '../context/AuthContext'
+import React, { useContext } from "react";
+import { Col, Row } from "react-bootstrap";
+import UserNotes from "../components/UserNotes";
+import { AuthContext } from "../context/AuthContext";
 
 function MyRack() {
-  const { user } = useContext(AuthContext)
-  
+  const { user } = useContext(AuthContext);
+
   return (
     <>
-    <Row className='justify-content-center py-5 mt-4'>
-      <Col>
-        <h1>my rack</h1>
-        {user && 
-        <h5>hi {user.email.slice(0, user.email.indexOf("@"))}!</h5>
-        }
-        <h5>here are the books placed on your rack</h5>
-      </Col>
-    </Row>
-    <Row>
-      <Col>
-        <UserNotes/>
-      </Col>
-    </Row>
-  </>
-  )
+      <Row className="justify-content-center py-5 mt-4">
+        <Col>
+          <h1>my rack</h1>
+          {user && <h5>hi {user.email.slice(0, user.email.indexOf("@"))}!</h5>}
+          <h5>here are the books placed on your rack</h5>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <UserNotes />
+        </Col>
+      </Row>
+    </>
+  );
 }
 
-export default MyRack
\ No newline at end of file
+export default MyRack;

From 84c12f6f6d71c2551d728fc5f5aec294a27cf015 Mon Sep 17 00:00:00 2001
From: OttaviaFeletig <ottafel@hotmail.it>
Date: Fri, 1 Jul 2022 14:29:59 +0200
Subject: [PATCH 2/2] protected route fix when refreshing page

---
 src/components/ProtectedRoute.js | 20 +++++++-------------
 src/context/AuthContext.js       |  8 ++++++--
 src/utils/useIsAuthenticated.js  | 13 +++++++------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/ProtectedRoute.js b/src/components/ProtectedRoute.js
index 5b86d22..ffee1b4 100644
--- a/src/components/ProtectedRoute.js
+++ b/src/components/ProtectedRoute.js
@@ -1,16 +1,10 @@
-import React, { useContext } from 'react'
-import { Navigate } from 'react-router-dom';
-import useIsAuthenticated from '../utils/useIsAuthenticated'
+import React, { useContext } from "react";
+import { Navigate } from "react-router-dom";
+import { AuthContext } from "../context/AuthContext";
+function ProtectedRoute({ children }) {
+  const { user, loading } = useContext(AuthContext);
 
-function ProtectedRoute({children}) {
-
-    const isAuthenticated = useIsAuthenticated();
-
-  return (
-    <>
-        {isAuthenticated ? children : <Navigate to="/login"/>}
-    </>
-  )
+  return loading ? <p>Loading</p> : user ? children : <Navigate to="/login" />;
 }
 
-export default ProtectedRoute
\ No newline at end of file
+export default ProtectedRoute;
diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js
index bb4129e..5023344 100644
--- a/src/context/AuthContext.js
+++ b/src/context/AuthContext.js
@@ -12,8 +12,8 @@ export const AuthContext = createContext();
 
 export const AuthContextProvider = (props) => {
   const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
   const redirectTo = useNavigate();
-
   const register = async (email, password) => {
     console.log("email + password", email, password);
 
@@ -56,8 +56,10 @@ export const AuthContextProvider = (props) => {
       if (user) {
         // const uid = user.uid;
         setUser(user);
+        setLoading(false);
       } else {
         setUser(null);
+        setLoading(false);
       }
     });
   };
@@ -77,7 +79,9 @@ export const AuthContextProvider = (props) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{ user, setUser, register, login, logout }}>
+    <AuthContext.Provider
+      value={{ user, setUser, register, login, logout, loading }}
+    >
       {props.children}
     </AuthContext.Provider>
   );
diff --git a/src/utils/useIsAuthenticated.js b/src/utils/useIsAuthenticated.js
index 67b5f02..a3d4524 100644
--- a/src/utils/useIsAuthenticated.js
+++ b/src/utils/useIsAuthenticated.js
@@ -1,11 +1,12 @@
-import React, { useContext } from 'react'
-import { AuthContext } from '../context/AuthContext'
-
+import React, { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
+// ! NOT IN USE
 function useIsAuthenticated() {
-    const { user } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
+
+  const isAuthenticated = user !== null ? true : false;
 
-    const isAuthenticated = user !== null ? true : false;
   return isAuthenticated;
 }
 
-export default useIsAuthenticated
\ No newline at end of file
+export default useIsAuthenticated;