diff --git a/public/documentFiles/MicrosoftTeams-image (1).png b/public/documentFiles/MicrosoftTeams-image (1).png new file mode 100644 index 0000000..01dcd56 Binary files /dev/null and b/public/documentFiles/MicrosoftTeams-image (1).png differ diff --git a/public/documentFiles/logicMaths.png b/public/documentFiles/logicMaths.png new file mode 100644 index 0000000..01dcd56 Binary files /dev/null and b/public/documentFiles/logicMaths.png differ diff --git a/public/documentFiles/mathematics-10-00195-v2.pdf b/public/documentFiles/mathematics-10-00195-v2.pdf new file mode 100644 index 0000000..a7d066a Binary files /dev/null and b/public/documentFiles/mathematics-10-00195-v2.pdf differ diff --git a/public/documentFiles/test image.png b/public/documentFiles/test image.png new file mode 100644 index 0000000..01dcd56 Binary files /dev/null and b/public/documentFiles/test image.png differ diff --git a/src/App.js b/src/App.js index 7c224ba..b495b43 100644 --- a/src/App.js +++ b/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 }/> }/> }/> - }/> + }/> }/> diff --git a/src/components/AddDocument.js b/src/components/AddDocument.js index fa81266..1881013 100644 --- a/src/components/AddDocument.js +++ b/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

4. Add a Category

-
- setDocumentCategory(e.target.value)}> diff --git a/src/components/Genres.js b/src/components/Categories.js similarity index 82% rename from src/components/Genres.js rename to src/components/Categories.js index f8e5205..ac4d6d0 100644 --- a/src/components/Genres.js +++ b/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 (
- - - - - + + + + +
-

{genre}

+

{category}

{documents.map (document => { @@ -143,17 +143,17 @@ function Genres (){
- {(() => { // 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(
- )} 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( {window.location=('/Details/'+ document.documentID)}}/> @@ -171,5 +171,5 @@ function Genres (){
)} -export default Genres; +export default Categories; diff --git a/src/components/Details.js b/src/components/Details.js index 65bc2e1..052ad28 100644 --- a/src/components/Details.js +++ b/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(); - } diff --git a/src/components/Documents.js b/src/components/Documents.js index f66e750..c81bda5 100644 --- a/src/components/Documents.js +++ b/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}) => {
{(() => { - if(docName.includes(".pdf") || docName.includes(".ppt") || docName.includes(".docx") ){ + if(docName.includes(".pdf") ){ return(
@@ -137,7 +137,7 @@ export const Documents = ({document}) => {

{documents.documentDescription}

- +
diff --git a/src/components/Home.js b/src/components/Home.js index 708dedc..6c68a72 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -45,11 +45,11 @@ function App() {
- - - - - + + + + +

My Documents

diff --git a/src/components/Login.js b/src/components/Login.js index 3ebdf7d..403dd4f 100644 --- a/src/components/Login.js +++ b/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 * */ diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js index 2559a37..3d18794 100644 --- a/src/components/MenuBar.js +++ b/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. {window.location=('/')}}/>
- {(() => { // 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( Login Sign Up - )} 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( Home @@ -95,11 +95,11 @@ function MenuBar() { //function to create the navigation bar. setOnHover(true)}> Categories {onHover && (
setOnHover(false)}> - Maths - Algorithms - Javascript - Computing - Random + Maths + Algorithms + Javascript + Computing + Random
)} diff --git a/src/components/SignUp.js b/src/components/SignUp.js index 26b3d23..8ad4421 100644 --- a/src/components/SignUp.js +++ b/src/components/SignUp.js @@ -105,13 +105,13 @@ export default function SignUp () { //sets the user states for each input const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); - //re-enter password double checks the user has typed the password in right + //re-enter password double checks the user has entered the password in right const [reenterPassword, setreenterPassword] = useState(""); const classes = useStyles(); function onAccountSubmit(event) { /*Function is called when users click the submit button * This checks if users have enetered a username and password and if not send an alert informing users to do so - * Then checks if the passwords both match up and if not then there's a an alert imofrming users to re-type the passwords. + * Then checks if the passwords both match up and if not then there's a an alert informing users to re-type the passwords. * */ if (username === '' || password === ''){ alert("Please enter username and password details") @@ -120,7 +120,7 @@ export default function SignUp () { } /* Then the api is called to send the data to the database if everything is fine * within this, it also checks to see if the username already exists and if so asks users to try a different username. - * But if everything is fine, it sets the userId into local storage (as it is rquired for many other componenets/functions) + * But if everything is fine, it sets the userID into local storage (as it is rquired for many other componenets/functions) * And then adds autherization token to it and sends the user an alert saying the account has been created and re-directs them to the homepage * */ const account = [username, password]; @@ -146,7 +146,6 @@ export default function SignUp () { event.preventDefault(); } /* Below is all the elements that are required to build the page - * The logo was used and has a hyperlink attacthed which sends the users to the homepage if clicked * Then the form itself is created using three inputs and then two buttons below. * One button takes the users back to the homepage if they decide to cancel * and the other button calls the SignUp function and runs it