Finished stage one of the website, allows users to add/delete comment…

…s, view and add documents and filter results

src/App.js

@@ -19,7 +19,7 @@ function App() {  //used to route the pages and adds the hyperlink to the menu b
                 <Route exact path="/SignUp" element={<SignUp/>}/>       
                 <Route exact path="/Details/:id" element={<Details/>}/>    
                 <Route exact path="/Genres/:genre" element={<Genres/>}/> 
-                <Route exact path="/AddDocument" element={<AddDocument/>}/>                                             
+                <Route exact path="/AddDocument" element={<AddDocument/>}/>  
             </Routes>
         </BrowserRouter>
 

src/components/Comments.js

@@ -0,0 +1,159 @@
+import React from 'react'; //All imports requried for this page (including react itself)
+import {makeStyles} from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button';
+import { useParams } from "react-router-dom"; //useParams is required to select the comment ID to fetch all associated comments. 
+
+const useStyles =  makeStyles( (theme) => ({ //styling for each element including the hovers, backgrounds used. 
+
+    container: {
+        width: 'auto',
+        height: '30px',
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginLeft: '30px',
+
+},
+
+    description: {
+        fontSize: '15px',
+        color: 'black',
+        textAlign: "justify",
+        height: "120px",
+},
+
+    userTag:{
+        fontSize: '20px',
+        textAlign:'center',
+
+},
+
+     Buttons: {
+        color: 'white',
+        background: 'black',
+        font: "10px", 
+        margin: "10px",
+        "&:hover": {
+            color: 'white',
+            background: '#8420D9',
+},},
+
+
+        sectionOne:{
+            gridColumnStart: '1',
+            gridColumnEnd: '1',
+            margin: '20px',
+            height: 'auto',
+            padding: '0',
+    },
+        sectionTwo:{
+            gridColumnStart: '1',
+            gridColumnEnd: '1',
+            width: 'fit-content',
+    },
+
+        commentsDetails:{
+            font: "10px", 
+            width: "75%",
+            height: "fit-content",
+            borderRadius: "25px",
+            marginLeft: '12%',
+            padding: '10px',
+            background: 'white',
+            flexWrap: 'wrap',
+            display:'grid',
+            border: 'black solid 1px ',
+        },   
+
+        descriptionTitle: {
+              fontSize: '20px',
+              color: 'black',
+              textAlign: "center",
+              height: "auto",
+              margin: '0',
+},
+
+    description: {
+        fontSize: '15px',
+        color: 'black',
+        textAlign: "justify",
+        height: "auto",
+},
+
+    NoComments:{
+        fontSize: '20px',
+        color: 'white',
+        textAlign: 'center',
+        marginLeft: '45%',
+        border: '1px solid white',
+        padding:'5px',
+        borderRadius: '5px',
+    },
+
+    commentsTitle :{
+        fontSize: '25px',
+        color: 'black',
+        textAlign: 'center',
+    },
+
+}));                                  
+
+export const Comments = ({comments}) => {
+  const classes = useStyles();
+   const{id} = useParams(); //id is the documentID
+   const userID=localStorage.getItem('userID'); 
+   const token = localStorage.getItem('authorization'); //checks autherisation too to see if the user is the correct user.
+    async function DeleteComment() { 
+        const commentDetails = {userID, id }
+        console.log ('this is id')
+        console.log (id)
+        console.log (commentDetails)
+        const response = await fetch('https://deliverrelax-amandarose-5000.codio-box.uk/DeleteComments', {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-type': 'application/json',
+                    'Authorization': token 
+                },
+                body: JSON.stringify(commentDetails)
+            })
+        if(response.ok){
+            window.alert ("Your comment has been deleted")
+          window.location.reload() //refreshes the page once successful
+        }
+}
+    return (   
+     <center>  
+              <p className={classes.commentsTitle}> Your Comments:  </p>
+              <div className = {classes.container}>                                              
+                 {(() => { 
+                    if (comments.length == 0){
+                        return(
+                                 <React.Fragment>
+                                          <p className = {classes.NoComments}> No Comments have been added yet </p> 
+                                 </React.Fragment>
+                    )}
+                })()}
+            {comments.map (comments => {
+
+                            return(
+
+                               <div className={classes.commentsDetails}>
+                                <div className= {classes.sectionOne}>
+                               <p className={classes.descriptionTitle}> {comments.commentTitle} </p>    
+                               <p className={classes.description}> {comments.commentDescription} </p> 
+                                </div>
+                            <center>  
+                               <div className={classes.sectionTwo}>
+                                <Button className={classes.Buttons} onClick={DeleteComment}>Delete</Button>
+                                </div> 
+                            </center> 
+                </div>
+
+                               )
+})}
+
+</div>  </center>
+
+)}
+
+export default Comments

src/components/Details.js

@@ -2,7 +2,11 @@ import React, {useEffect, useState} from 'react'; //selects imports required
 import '../App.css'; //takes in the Apps.css as it requires the background to be black which was changed there.
 import { useParams } from "react-router-dom";
 import {makeStyles} from '@material-ui/core/styles'
-import { PDFViewer } from 'react-view-pdf';
+import { PDFViewer } from 'react-view-pdf'; //https://www.npmjs.com/package/pdf-viewer-reactjs
+import { Comments } from "./Comments";
+import Button from '@material-ui/core/Button';
+
+
 const useStyles =  makeStyles( (theme) => ({ //styling for elements
     documentDetails:{
         height: 'fit-content',
@@ -11,11 +15,52 @@ const useStyles =  makeStyles( (theme) => ({ //styling for elements
         fontSize: '25px',
     },
 
+    commentTitle:{
+        fontSize: '25px',
+        textAlign: 'center',
+    },
+    commentsHelpTitle:{
+                fontSize: '20px',
+                textAlign: 'left',
+                margin: '0',
+    },
+
+    commentDescription:{
+        font: '16px',
+        background: 'white',
+        borderRadius: '5px',
+        border: 'black 1px solid',
+        height: '100px',
+        width: '500px',
+        '&::placeholder': {
+            color: 'black',
+            fontSize: "16px",
+        },
+    }, 
+
+    commentTitles:{
+        font: '16px',
+        background: 'white',
+        borderRadius: '5px',
+        border: 'black 1px solid',
+        height: '50px',
+        width: '500px',
+        '&::placeholder': {
+            color: 'black',
+            fontSize: "16px",
+        },
+    }, 
+    desc:{
+        fontSize: '20px',
+        color: 'black',
+        margin: '20px',
+    },
     docImage:{
         width: '300px',
         height: 'auto', 
         border: "1px solid black",
     },
+
     main:{
         borderRadius: '15px',
         width: '90%',
@@ -26,25 +71,100 @@ const useStyles =  makeStyles( (theme) => ({ //styling for elements
 },
 
     fileview:{
-        width: '50%',
-        height: 'auto',
+        width: '70%',
+        height: 'fit-content',
 },
+
+     Buttons: {
+        color: 'white',
+        background: 'black',
+        font: "10px", 
+        margin: "10px",
+        "&:hover": {
+            color: 'white',
+            background: '#8420D9',
+},},
+
+addCommentSection:{
+            font: "10px", 
+            width: "75%",
+            height: "fit-content",
+            borderRadius: "25px",
+            marginLeft: '12%',
+            padding: '10px',
+            background: 'white',
+            flexWrap: 'wrap',
+            display:'grid',
+            border: 'black solid 1px ',
+},
+
+
+    sectionOne:{
+        // border: "1px solid black",
+        gridColumnStart: '1',
+        gridColumnEnd: '3',
+    },
+    sectionTwo:{
+        // border: "1px solid black",
+        margin: '0',
+        gridColumnStart: '1',
+        gridColumnEnd: '3',
+    },  
+
+    sectionThree:{
+    margin: '0',
+        gridColumnStart: '1',
+        gridColumnEnd: '3',   
+        padding: '0',     
+
+    },
+
+    sectionFour:{
+    margin: '0',
+        gridColumnStart: '1',
+        gridColumnEnd: '3',   
+        padding: '0',   
+        textAlign:'center',  
+
+    },
+
 }));                   
 
 
 function Details() { 
     const{id} = useParams(); //useParams finds the documentID to know which document details to show.
     const classes = useStyles();  //adds styling by referring to classes.
     const [documents, setDocuments] = useState([]); //sets the use states for each element
-    const userID=localStorage.getItem('userID') //gets userId from local storage
+    const [comments, setComments] = useState([]); //sets the use states for each element
+    const [commentTitle, setCommentTitle] = useState([]); //sets the use states for each element
+    const [commentDescription, setCommentDescription] = useState([]); //sets the use states for each element
+    const userID=localStorage.getItem('userID') //gets userID from local storage
+
+    function submitComment (event) { //adds a review when button clicked
+        const commentInfo = [id, userID, commentTitle, commentDescription]; 
+            console.log (commentInfo)
+              fetch('https://deliverrelax-amandarose-5000.codio-box.uk/AddComments', {
+                        method: 'POST',
+                        credentials: 'include',
+                        headers: {
+                            'Content-type': 'application/json',
+                        },
+                            body: JSON.stringify(commentInfo),
+                    }).then(response =>response.json().then(data => {
+                      window.location.reload() //refreshes the page when it is done
+                  }))
+    event.preventDefault();
+
+    }   
 
-	useEffect(()=> { //fetches the details for the movie
+
+	useEffect(()=> { //fetches the comments and document details
 			fetch('https://deliverrelax-amandarose-5000.codio-box.uk/Details', { 
                 method: "POST", 
                 credentials: 'include', 
                 headers: {'Content-type': 'application/json' }, 
                 body: JSON.stringify(id) })
-                .then(response =>response.json().then(data => {setDocuments(data.detailsList);
+                .then(response =>response.json().then(data => {setDocuments(data.detailsList); ; setComments(data.commentsList);
 			})
 		);
 	},[id]); //uses the documentID
@@ -75,8 +195,39 @@ function Details() {
                                 )}})()}
                                 <p className={classes.desc}> {document.documentDescription}</p> 
                     </div>
-                                                </center>
+                    </center>
+                    <div className={classes.addCommentSection}>
+                    <div className={classes.sectionOne}>
+                                     <p className={classes.commentTitle}>Add Your Comments</p> 
+                    </div>
+                    <div className= {classes.sectionTwo}>                    
+                                            <div className= {classes.description}>
+                                                 <p className={classes.commentsHelpTitle}>Add a Title:</p> 
+                                                  <textarea className={classes.commentTitles} type="text" placeholder="Add A Title" value={commentTitle} onChange={(e) => setCommentTitle(e.target.value)}/>
+                                        </div>
+                    </div>
+                    <div className= {classes.sectionThree}>   
+                                        <div className= {classes.description}>
+                                                 <p className={classes.commentsHelpTitle}>Add comments:</p> 
+                                                <textarea className={classes.commentDescription} type="text" placeholder="Add your comments..." value={commentDescription} onChange={(e) => setCommentDescription(e.target.value)}/>
+                                        </div>
+                                        </div>
+                            <div className= {classes.sectionFour}>   
+                                         <div className= {classes.Button}>
+                                            <Button className={classes.Buttons} onClick={() => {window.location=('./')}}>Cancel</Button>
+                                            <Button className={classes.Buttons} onClick={submitComment}>Submit</Button>
+                                        </div>
+                        </div> 
+
+                    </div>
                </div>
-)})} </div> )}
+)})} 
+<center> 
+            <div>
+                 <Comments comments = {comments}/> 
+            </div> 
+        </center>
+
+</div> )}
 
 export default Details;