merge new prs 1

hratx-blue-ocean · Feb 22, 2021 · ea56dd7 · ea56dd7
2 parents 2f46d61 + f08f28b
commit ea56dd7
Show file tree

Hide file tree

Showing 30 changed files with 582 additions and 750 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,12 +22,7 @@ node_modules/
 /client/dist/font/.ttf
 /client/dist/font/.woff
 /client/dist/font/.woff2
-/client/dist/img/
-/client/dist/img/.svg
-/client/dist/img/.png
-/client/dist/img/.gif
-/client/dist/img/.jpg
-/client/dist/img/.jpeg
+/client/dist/img/*
 
 # testing
 /coverage

diff --git a/Docs/userRoutes.rest b/Docs/userRoutes.rest
@@ -1,4 +1,4 @@
-@baseUrl = http://localhost:3008
+@baseUrl = http://localhost:3000
 
 ### Infos
 @matthew = 602be49226e7f146247321c8
@@ -17,7 +17,7 @@ POST {{baseUrl}}/user/friends
 Content-Type: application/json
 
 {
-    "userId": "{{jerrick}}"
+    "userId": "{{matthew}}"
 }
 
 ### Get all users that user are not friends with
@@ -34,7 +34,7 @@ POST {{baseUrl}}/user/friend
 Content-Type: application/json
 
 {
-    "userId":"{{jerrick}}",
+    "userId":"{{matthew}}",
     "friendId":"{{chris}}"
 }
 
@@ -135,9 +135,16 @@ Content-Type: application/json
     "userId":"{{jason}}",
     "title":"Harry Potter",
     "authors":"JK Rowling",
-    "isbn":525,
+    "googleId":"hyGODQAAQBAJ",
     "image":"https://media2.s-nbcnews.com/i/newscms/2020_26/3155921/191219-j-k-rowling-2018-ac-845p_b96cd21ada5eec6c9ff8b9ff33920b0f.jpg",
     "price":50,
     "category":"fiction"
 }
 
+### Get all bookclubs that user is in
+GET {{baseUrl}}/user/bookclubs
+Content-Type: application/json
+
+{
+    "userId":"602be49226e7f146247321c8"
+}
diff --git a/client/App.jsx b/client/App.jsx
@@ -33,7 +33,6 @@ export const App = () => {
               </Route>
               <Route exact path='/' component={HomePage} />
               <Route exact path='/clubs' component={BookClubs} />
-              {/* need to set up dynamic routing for different book clubs based on Id */}
               <Route path='/clubs/detail/:id' component={BookClub} />
               <Route path='/clubs/create'>
                 <CreateBookClub user={user} />
@@ -49,6 +48,8 @@ export const App = () => {
             </Switch>
           </Container>
         </main>
+        {/* <Button onClick={setShow(true)}>Book</Button>
+        <BookDetail handleClose={setShow(false)} show={show} /> */}
         <NewFooter />
       </Router>
     </div>

diff --git a/client/assets/images/bookclubs_sample/.bookclub_1.svg.icloud b/client/assets/images/bookclubs_sample/.bookclub_1.svg.icloud
diff --git a/client/components/global/BookDetail.jsx b/client/components/global/BookDetail.jsx
@@ -1,117 +1,99 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Modal,
-  Image,
-  Button,
-  Table,
-  Badge,
-  Spinner,
-  Row,
-  Col
-} from 'react-bootstrap';
-import axios from 'axios';
+import React, { useState, useContext, useEffect } from 'react';
+import { Modal, Image, Button, Table, Badge, Row, Col } from 'react-bootstrap';
+import { AppContext } from '../../context/context.jsx';
+import { AuthContext } from '../../context/authContext.jsx';
+import Loader from './Loader.jsx';
 
-//Props: id from Google books (number), show & owned & inLibrary (boolean), handleClose & handleAddToLibrary & handlePurchase functions
-export default function BookDetail({
-  // id,
-  inLibrary,
-  owned,
-  handlePurchase,
-  handleAddToLibrary,
-  handleClose,
-  show,
-  book
-}) {
-  // const [data, setData] = useState({});
+let currentISBN;
 
-  //Temporary test constants
-  // id = '0efCDwAAQBAJ';
-  // owned = false;
-  // inLibrary = true;
-  // handlePurchase = () => {};
-  // handleAddToLibrary = () => {};
+//Accepts only a googleId, handleClose function and show boolean.
+export default function BookDetail({ isbn, show, setShow }) {
+  const user = useContext(AuthContext);
+  const { getBookDetails, purchaseBook } = useContext(AppContext);
+  const [book, setBook] = useState({});
+  const [purchased, setPurchased] = useState(false);
 
-  //Temporary fetch from Google Books, will need to replaced by our own server proxy route
-  // useEffect(async () => {
-  //   let info = await axios.get(
-  //     `https://www.googleapis.com/books/v1/volumes/${id}?key=${'AIzaSyClsYn7svvE9FTXQi_2hEVc9A0_vZgYCOY'}`
-  //   );
-  //   setData(info.data);
-  // }, []);
-
-  return book === undefined ? (
-    <Spinner animation='border' role='status'>
-      <span className='sr-only'>Loading...</span>
-    </Spinner>
+  useEffect(async () => {
+    if (isbn && isbn !== currentISBN) {
+      currentISBN = isbn;
+      let data = await getBookDetails(isbn);
+      setBook(data);
+    }
+  }, [isbn]);
+  return !book.volumeInfo ? (
+    <></>
   ) : (
-    <Modal
-      size='lg'
-      show={show}
-      onHide={handleClose}
-      backdrop='static'
-      keyboard={false}
-    >
+    <Modal size='xl' show={show} onHide={() => setShow(false)} backdrop='static' keyboard={false}>
       <Modal.Header closeButton>
-        <Modal.Title>{book.title}</Modal.Title>
+        <Modal.Title>{book.volumeInfo.title}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <Row>
-          <Col>
-            <Image src={book.imageURL} fluid rounded />
+          <Col md='auto'>
+            <Image
+              src={
+                book.volumeInfo.imageLinks.large ||
+                book.volumeInfo.imageLinks.thumbnail ||
+                'https://i.imgur.com/sJ3CT4V.gif'
+              }
+              fluid
+              rounded
+            />
           </Col>
           <Col>
-            <div>by {book.authors.join(', ')}</div>
-            <p>{book.price}</p>
+            <div>by {book.volumeInfo.authors.join(', ')}</div>
             <br />
-            <br />
-            <p>{book.description}</p>
-            {/* <Table size='sm' striped bordered variant='light'>
+            <p dangerouslySetInnerHTML={{ __html: book.volumeInfo.description }}></p>
+            <Table size='sm' striped bordered variant='light'>
               <tbody>
                 <tr>
                   <td>Publisher</td>
-                  <td colSpan='2'>{data.volumeInfo.publisher}</td>
+                  <td colSpan='1'>{book.volumeInfo.publisher || 'Not Available'}</td>
                 </tr>
                 <tr>
                   <td>Published Date</td>
-                  <td colSpan='2'>{data.volumeInfo.publishedDate}</td>
+                  <td colSpan='1'>{book.volumeInfo.publishedDate || 'Not Available'}</td>
                 </tr>
                 <tr>
                   <td>Language</td>
-                  <td colSpan='2'>{data.volumeInfo.language}</td>
+                  <td colSpan='1'>{book.volumeInfo.language || 'Not Available'}</td>
                 </tr>
                 <tr>
                   <td>Price</td>
-                  <td colSpan='2'>{`$${data.saleInfo.retailPrice.amount}`}</td>
+                  <td colSpan='1'>{`$${
+                    book.saleInfo.retailPrice ? book.saleInfo.retailPrice.amount : 'Not for Sale'
+                  }`}</td>
                 </tr>
                 <tr>
                   <td>Tags</td>
-                  <td colSpan='2'>
-                    {data.volumeInfo.categories.map((category, idx) => (
-                      <React.Fragment key={idx}>
-                        <Badge pill variant='light'>
-                          {category}
-                        </Badge>{' '}
-                      </React.Fragment>
-                    ))}
+                  <td colSpan='1'>
+                    {book.volumeInfo.categories &&
+                      book.volumeInfo.categories.map((category, idx) => (
+                        <React.Fragment key={idx}>
+                          <Badge pill variant='light'>
+                            {category}
+                          </Badge>{' '}
+                        </React.Fragment>
+                      ))}
                   </td>
                 </tr>
               </tbody>
-            </Table> */}
+            </Table>
           </Col>
         </Row>
       </Modal.Body>
       <Modal.Footer>
-        <Button variant='secondary' onClick={handleClose}>
+        <Button variant='secondary' onClick={() => setShow(false)}>
           Close
         </Button>
         <Button
           variant='primary'
-          onClick={handleAddToLibrary}
-          disabled={inLibrary}
+          onClick={() => {
+            purchaseBook(user._id, book);
+            setPurchased(true);
+          }}
+          disabled={purchased}
         >
-          {'Add to Library'}
-        </Button>
-        <Button variant='primary' onClick={handlePurchase} disabled={owned}>
           {'Purchase'}
         </Button>
       </Modal.Footer>

diff --git a/client/components/homePage/GenreCaro.jsx b/client/components/homePage/GenreCaro.jsx
diff --git a/client/components/homePage/LogInSignUp.jsx b/client/components/homePage/LogInSignUp.jsx
diff --git a/client/components/homePage/MonthlySubscr.jsx b/client/components/homePage/MonthlySubscr.jsx
@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import Button from 'react-bootstrap/Button';
 
-const MonthlySubscr = (props) => {
+const MonthlySubscr = () => {
 
   return (
     <div>

diff --git a/client/components/homePage/SiteDesc.jsx b/client/components/homePage/SiteDesc.jsx
@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 
 
-const SiteDesc = (props) => {
+const SiteDesc = () => {
 
   return (
     <div>