final commit with further comments added to the code

src/App.js

@@ -5,7 +5,7 @@ import MenuBar from "./components/MenuBar";
 import Login from "./components/Login";
 import SignUp from "./components/SignUp";
 import Details from "./components/Details";
-import Genres from "./components/Genres";
+import Categories from "./components/Categories";
 import AddDocument from "./components/AddDocument";
 import Home from './components/Home'
 
@@ -18,7 +18,7 @@ function App() {  //used to route the pages and adds the hyperlink to the menu b
                 <Route exact path="/Login" element={<Login/>}/>
                 <Route exact path="/SignUp" element={<SignUp/>}/>       
                 <Route exact path="/Details/:id" element={<Details/>}/>    
-                <Route exact path="/Genres/:genre" element={<Genres/>}/> 
+                <Route exact path="/Categories/:category" element={<Categories/>}/> 
                 <Route exact path="/AddDocument" element={<AddDocument/>}/>  
             </Routes>
         </BrowserRouter>

src/components/AddDocument.js

@@ -4,7 +4,7 @@ import {makeStyles} from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button';
 
 const useStyles =  makeStyles( (theme) => ({ //used for styling of each element on the page.
-    movieForm: {
+    documentForm: {
         font: '16px',
         margin: '10px',
         background: 'white',
@@ -77,7 +77,7 @@ const useStyles =  makeStyles( (theme) => ({ //used for styling of each element
             fontSize: "16px",
         },
     }, 
-        genres:{
+        categories:{
         padding: '10px',
         fontSize: '15px',
         height: '50px',
@@ -100,29 +100,21 @@ function file2Base64(file) { //used for turning the image into a base64 file, re
 
 
 
-function AddDocument() {   //The function used to run the page itself. This creates a form so the user can add a movie which is then pushed to the database through an API.
+function AddDocument() {   //The function used to run the page itself. This creates a form so the user can add a document which is then pushed to the database through an API.
 	const classes = useStyles();   //this is used to create a class for each element when defined so it can styled. 
     const [documentTitle, setDocumentTitle] = useState(''); //use states for each element set to the before and after it is dealt with. 
     const [documentDescription, setDocumentDescription] = useState("");     
-    const [documentGenre, setDocumentGenre] = useState('');
+    const [documentCategory, setDocumentCategory] = useState('');
     const [documents, setDocuments] = useState([]);
     const [documentFile, setDocumentFile] = useState('');
-    const userID = localStorage.getItem('userID') //Gets the user id from local storage so it can be used for setting which user adds the movie. 
-    //     useEffect(()=> { //API to obtain addDocuments table fields
-    //         fetch('https://deliverrelax-amandarose-5000.codio-box.uk/AddDocument',
-    //               {credentials: 'include', 
-    //                method: 'POST', 
-    //                headers: { 'Content-type': 'application/json'}, 
-    //                body: JSON.stringify(documents)}).then(response =>response.json().then(data => {setDocuments(data.documents);
-    //         })
-    //     );
-    // },[documents]);
+    const userID = localStorage.getItem('userID') //Gets the user ID from local storage so it can be used for setting which user adds the document. 
+
     async function addDocuments (event) { 
-        const filesToUploads = document.querySelector('#ImageSelect').files  //gets the image file once it has been added so that it can rename it 
+        const filesToUploads = document.querySelector('#ImageSelect').files  //gets the image/document file once it has been added so that it can rename it 
         const file = filesToUploads[0]
         const fileName = file.name
         const data = await file2Base64(file) //uses base 64 to rename the file
-        const documentInfo = [documentTitle, documentDescription, documentGenre, fileName, data]; //sets each field which is required by the api and form. 
+        const documentInfo = [documentTitle, documentDescription, documentCategory, fileName, data]; //sets each field which is required by the api and form. 
         console.log (documentInfo)
               fetch('https://deliverrelax-amandarose-5000.codio-box.uk/AddDocument', { 
                         method: 'POST',
@@ -168,8 +160,8 @@ function AddDocument() {   //The function used to run the page itself. This crea
                     <div className={classes.headings}>
                         <p>4.  Add a Category </p>
                      </div>
-                    <div className= {classes.containersGenres}>
-                            <select value={documentGenre} className= {classes.genres} onChange={(e) => setDocumentGenre(e.target.value)}>
+                    <div className= {classes.containersCategories}>
+                            <select value={documentCategory} className= {classes.categories} onChange={(e) => setDocumentCategory(e.target.value)}>
                                     <option value="Maths">Maths</option>
                                     <option value="Computing">Computing</option>
                                     <option value="Algorithms">Algorithms</option>

src/components/Genres.js → src/components/Categories.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {makeStyles} from '@material-ui/core/styles'
 import {useParams} from "react-router-dom";
 import Button from '@material-ui/core/Button';
-import { PDFViewer } from 'react-view-pdf';
+import { PDFViewer } from 'react-view-pdf'; //https://www.npmjs.com/package/pdf-viewer-reactjs
 const useStyles =  makeStyles( (theme) => ({ //styling
     documentDetails:{
         font: "10px", 
@@ -103,35 +103,35 @@ const useStyles =  makeStyles( (theme) => ({ //styling
 }));    
 
 
-function Genres (){
+function Categories (){
     const classes = useStyles();
     const [documents, setDocuments] = useState([]);  
-    let {genre} = useParams();
+    let {category} = useParams();
 
         useEffect(()=> {
-                fetch('https://deliverrelax-amandarose-5000.codio-box.uk/Genres', { 
+                fetch('https://deliverrelax-amandarose-5000.codio-box.uk/Categories', { 
                     method: "POST", 
                     credentials: 'include', 
                     headers: {'Content-type': 'application/json' }, 
-                    body: JSON.stringify(genre) }).then(response =>response.json().then(data => {setDocuments(data.Genres);
+                    body: JSON.stringify(category) }).then(response =>response.json().then(data => {setDocuments(data.Categories);
                 })
             );
-        },[genre]);  
+        },[category]);  
              console.log(documents)
-             console.log (genre)
+             console.log (category)
      return ( 
                 <div className= {classes.profileContainer}>  
                 <center>
 				        <div className={classes.linkButtons}>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Maths')}}>Home</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Javascript')}}>Javascript</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Algorithms')}}>Algorithms</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Computing')}}>Computing</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Random')}}>Random</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Maths')}}>Home</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Javascript')}}>Javascript</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Algorithms')}}>Algorithms</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Computing')}}>Computing</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Random')}}>Random</Button>   
                         </div>    
 				</center>    
                 <center>            
-                <h1 className= {classes.theTitle}> {genre} </h1> 
+                <h1 className= {classes.theTitle}> {category} </h1> 
                 </center> 
             <div className = {classes.container}> 
                 {documents.map (document => { 
@@ -143,17 +143,17 @@ function Genres (){
                 </center>
                 </div>
                <div className={classes.sectionTwo}>
-                                    {(() => { // If not a user logged in then it shows login and sign up link 
+                                    {(() => { // If the file contains the file type .pdf then it will show in the pdf viewer.
                                     const docName = document.documentFile
                                     console.log (docName)
-                    if(docName.includes(".pdf") || docName.includes(".ppt") || docName.includes(".docx") ){
+                    if(docName.includes(".pdf")){
                             return(
                                 <React.Fragment>
                                                 <div className={classes.fileview}>
                                                    <PDFViewer url= {"/documentFiles/"+ document.documentFile} className={classes.sized} />
                                                 </div>
                                 </React.Fragment>
-                   )} else { //if a user is logged in they can add a movie, view their reviews and logout
+                   )} else { //if the file is an image it will show as an image
                             return(
                                  <React.Fragment>
                                     <img className ={classes.docImage} src= {"/documentFiles/"+ document.documentFile} onClick={() => {window.location=('/Details/'+ document.documentID)}}/> 
@@ -171,5 +171,5 @@ function Genres (){
         </div> </div>
 )}
 
-export default Genres;
+export default Categories;
 

src/components/Details.js

@@ -140,7 +140,7 @@ function Details() {
     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
+    function submitComment (event) { //adds a comment when the button clicked (event listener)
         const commentInfo = [id, userID, commentTitle, commentDescription]; 
             console.log (commentInfo)
               fetch('https://deliverrelax-amandarose-5000.codio-box.uk/AddComments', {
@@ -154,7 +154,6 @@ function Details() {
                       window.location.reload() //refreshes the page when it is done
                   }))
     event.preventDefault();
-
     }   
 
 

src/components/Documents.js

@@ -1,7 +1,7 @@
 import React from 'react'; //required imports
 import {makeStyles} from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button';
-import { PDFViewer } from 'react-view-pdf';
+import { PDFViewer } from 'react-view-pdf'; //https://www.npmjs.com/package/pdf-viewer-reactjs
 
 const useStyles =  makeStyles( (theme) => ({ //styling
     documentDetails:{
@@ -121,7 +121,7 @@ export const Documents = ({document}) => {
                 </div>
                <div className={classes.sectionTwo}>
                                     {(() => { 
-                    if(docName.includes(".pdf") || docName.includes(".ppt") || docName.includes(".docx") ){
+                    if(docName.includes(".pdf") ){
                             return(
                                 <React.Fragment>
                                                 <div className={classes.fileview}>
@@ -137,7 +137,7 @@ export const Documents = ({document}) => {
                 </div>
                 <div className={classes.sectionThree}>
                 <p className={classes.desc}> {documents.documentDescription}  </p> 
-                <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/'+documents.documentGenre)}}>{documents.documentGenre}</Button>
+                <Button className={classes.Buttonss} onClick={() => {window.location=('./Categories/'+documents.documentGenre)}}>{documents.documentGenre}</Button>
                 </div>
 
                  <div className={classes.sectionFour}>

src/components/Home.js

@@ -45,11 +45,11 @@ function App() {
                 <div className= {classes.profileContainer}>   
 				<center>
 				        <div className={classes.linkButtons}>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Maths')}}>Home</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Javascript')}}>Javascript</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Algorithms')}}>Algorithms</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Computing')}}>Computing</Button>
-                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Genres/Random')}}>Random</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Categories/Maths')}}>Home</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Categories/Javascript')}}>Javascript</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Categories/Algorithms')}}>Algorithms</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Categories/Computing')}}>Computing</Button>
+                            <Button className={classes.Buttonss} onClick={() => {window.location=('./Categories/Random')}}>Random</Button>
                         </div>    
 				</center>       
                 <p className= {classes.theTitle}>My Documents</p> 

src/components/Login.js

@@ -98,16 +98,16 @@ function Login() {
                 'Content-type': 'application/json',
                 'Authorization': token },
             }).then(response =>response.json().then(data => {
-             if(data.userID==null){ //checks if the password entered matches the userId, if not then the API returns userId = null so it knows the password is wrong
+             if(data.userID==null){ //checks if the password entered matches the userID, if not then the API returns userID = null so it knows the password is wrong
                    alert ('Incorrect Password')   
         }else{
-            localStorage.setItem('userID',data.userID) //once successful adds userId to local storange along with the auth token
+            localStorage.setItem('userID',data.userID) //once successful adds userID to local storange along with the auth token
             localStorage.setItem('authorization',token) 
             window.location.href='./' //redirects user to the homepage
         }})); };
 
-    /* used to create the whole page 
-     * Uses input fields so users can enter their username and password. When a value is enetred this is set to be the set useState
+    /* 
+     * Uses input fields so users can enter their username and password. When a value is entered this is set to be the set useState
      * There is a hyperlink to the sign up page for users who enetered the wrong page and actually need to sign up
      * Submit button calls the API which checks everything is correct
      * */

src/components/MenuBar.js

@@ -68,8 +68,8 @@ function MenuBar() { //function to create the navigation bar.
 };
     const userID=localStorage.getItem('userID'); 
 
-    /* Bellow the links for the menu bar are defined
-     * There is a div created (inside the genres div) which creates a drop down.
+    /* Below the links for the menu bar are defined
+     * There is a div created (inside the dropdown content div) which creates a drop down which lists all the categories.
      * When it is hovered, the useState is set to true so it displays.
      * Once the user leaves the hover or does not hover on it all then useState is set to false so it is hidden.
      *  */
@@ -79,14 +79,14 @@ function MenuBar() { //function to create the navigation bar.
             <Toolbar className={classes.bar} >
                 <img  className={classes.logo}  onClick={() => {window.location=('/')}}/>
                 <div className={classes.navlinks}>
-                     {(() => { // If not a user logged in then it shows login and sign up link 
+                     {(() => { // If user is not logged in then it shows login and sign up link 
                     if(userID==null){
                             return(
                                 <React.Fragment>
                                 <Link to="/Login" className={classes.link}>  Login </Link>
                                 <Link to="/SignUp" className={classes.link}> Sign Up </Link>
                                 </React.Fragment>
-                   )} else { //if a user is logged in they can add a movie, view their reviews and logout
+                   )} else { //if a user is logged in they can view all the options
                             return(
                                  <React.Fragment>
                                 <Link to="/" className={classes.link}> Home </Link>
@@ -95,11 +95,11 @@ function MenuBar() { //function to create the navigation bar.
                         <Link to="/" className={classes.link} onMouseEnter={() => setOnHover(true)}> Categories </Link> 
                         {onHover && (
                        <React.Fragment> <div className={classes.dropdownContent} onMouseLeave={() => setOnHover(false)}>
-                        <Link to="/Genres/Maths" className={classes.dropLink}>Maths</Link>
-                        <Link to="/Genres/Algorithms" className={classes.dropLink}>Algorithms</Link>
-                        <Link to="/Genres/Javascript" className={classes.dropLink}>Javascript</Link>
-                        <Link to="/Genres/Computing" className={classes.dropLink}>Computing</Link>
-                        <Link to="/Genres/Random" className={classes.dropLink}>Random</Link>                                           
+                        <Link to="/Categories/Maths" className={classes.dropLink}>Maths</Link>
+                        <Link to="/Categories/Algorithms" className={classes.dropLink}>Algorithms</Link>
+                        <Link to="/Categories/Javascript" className={classes.dropLink}>Javascript</Link>
+                        <Link to="/Categories/Computing" className={classes.dropLink}>Computing</Link>
+                        <Link to="/Categories/Random" className={classes.dropLink}>Random</Link>                                           
 
                          </div> </React.Fragment>
                         )}