Project 3 Review Pull _-AKK-_

README.md

@@ -1,5 +1,5 @@
 # Trivia-Client
-
+<!-- v should not be a header, include a sentence describing how they are supposed to work together " to be used with / consume  x ". I almost missed it because of its size ironically -->
 # <a href="https://github.com/infinitelyann/Trivia-API">Trivia Back-End</a>
 
 ### Team Roles:
@@ -11,7 +11,7 @@
 ### Back-End: <a href="https://github.com/zyaffee">Zack Yaffee</a>
 
 ### Full-Stack: <a href="https://github.com/harrisimon">Harrison Simon,</a> Stephanie Parker
-
+<!-- Steph should be linked here as well  -->
 <hr>
 
 ## Technologies Used
@@ -52,7 +52,7 @@
 <hr>
 
 ## WireFrames
-
+<!-- alt text wireframe is less helpful when we have multiple - try and be slightly more descriptive  -->
 ![Wireframe](/images/image3.png)
 ![Wireframe](/images/image2.png)
 ![Wireframe](/images/image1.png)

src/App.js

@@ -13,16 +13,16 @@ import SignIn from "./components/auth/SignIn";
 import SignOut from "./components/auth/SignOut";
 import ChangePassword from "./components/auth/ChangePassword";
 import Timer from "./components/Timer";
-import QuestionCreate from "./components/QuestionCreate";
+import QuestionCreate from "./components/QuestionCreate"; // unused import
 import PlayerLanding from "./components/PlayerLanding";
 import GameCreate from "./components/GameCreate";
 import UserGameIndex from "./components/UserGameIndex";
 import UserGameShow from "./components/UserGameShow";
 import { getOpenDBUrl } from "./utils/openDB";
-import GameInputs from "./components/trivia-api/GameInputs";
+import GameInputs from "./components/trivia-api/GameInputs"; // unused import
 import GamePlay from "./components/trivia-api/GamePlay";
 import Leaderboard from "./components/Leaderboard";
-import UserGamePlay from "./components/UserGamePlay";
+import UserGamePlay from "./components/UserGamePlay"; // unused import
 import Result from "./components/Result";
 import GameTitleEdit from "./components/GameTitleEdit";
 
@@ -37,7 +37,7 @@ const App = () => {
 
 
   const handleClick = async () => {
-
+  // inconsistent white space 
 
     if (filterOptions === {}) return;
     setIsLoading(true);
@@ -85,7 +85,7 @@ const App = () => {
   return (
     <Fragment >
       <Header user={user} />
-      <Routes>
+      <Routes>{/* change your grouping here and stay organized, follow 1 style, be consistent */}
         <Route path='/result' element={<Result userID={userID} msgAlert={msgAlert} />} />
         <Route path='/leaderboard' element={<Leaderboard msgAlert={msgAlert} />} />
         <Route path='/' element={<Home msgAlert={msgAlert} user={user} />} />
@@ -100,7 +100,7 @@ const App = () => {
         <Route
           path='/'
         />
-
+{/* // inconsistent white space  */}
         <Route
           path='/sign-out'
           element={
@@ -121,26 +121,26 @@ const App = () => {
           element={
             <Timer />
           }
-
+// inconsistent white space 
 
 
         />
-        {/* <Route
+        {/* <Route remove zombie code
 		  	path='/create-question'
 			element={
 				<QuestionCreate user={user}/>
 			}
 			/> */}
-
-        <Route path="/homepage" element={<PlayerLanding />} />
+{/* duplicate path components !?  remove one with double quotes, BE consistent */}
+        <Route path="/homepage" element={<PlayerLanding />} /> 
 
         <Route
           path='/homepage'
           element={
             <PlayerLanding />
           }
         />
-
+{/* // inconsistent white space  */}
 
         <Route
           path='/games/:id'
@@ -154,15 +154,15 @@ const App = () => {
             <GameTitleEdit msgAlert={msgAlert} user= {user}/>
           }
           />
-
+{/* // inconsistent white space  */}
         <Route
           path='/game'
           element={
             <GamePlay user={user} userID={userID} setUserID={setUserID} setFilterOptions={setFilterOptions} err={err} handleClick={handleClick} isLoading={isLoading} data={data}
             />
           }
         />
-
+{/* // inconsistent white space  */}
         <Route
           path="/create-game"
           element={
@@ -171,7 +171,7 @@ const App = () => {
             </RequireAuth>
           }
         />
-
+{/* // inconsistent white space  */}
         <Route
           path="/user-created-games"
           element={
@@ -181,7 +181,7 @@ const App = () => {
           }
         />
       </Routes>
-
+{/* // inconsistent white space  */}
       {msgAlerts.map((msgAlert) => (
         <AutoDismissAlert
           key={msgAlert.id}
@@ -193,7 +193,7 @@ const App = () => {
         />
       ))}
     </Fragment>
-  );
-};
+  ); // ; ?
+}; // ; ?
 
 export default App;

src/api/leaderboard.js

@@ -1,6 +1,6 @@
 import apiUrl from '../apiConfig'
 import axios from 'axios'
-
+// consider renaming, get in function name for a post request is counter intuitive 
 export const getLeaderboard = (category) => {
     return axios({
         method: 'POST',

src/api/question.js

@@ -19,11 +19,11 @@ export const createQuestion = (user, gameId, data) => {
 }
 
 // this is the api call to update a question
-export const updateQuestion = (user, gameId, updatedQuestion) => {
+export const updateQuestion = (user, gameId, updatedQuestion) => { // unused variable 
     return axios({
         method:'PATCH',
         url: `${apiUrl}/questions/${gameId}/${updatedQuestion._id}`,
-
+// inconsistent white space 
         data: { question: updatedQuestion}
     })
 }
@@ -33,6 +33,6 @@ export const deleteQuestion = ( gameId, questionId) => {
     return axios({
         method: 'DELETE',
         url: `${apiUrl}/questions/${gameId}/${questionId}`,
-
+// inconsistent white space 
     })
 }

src/components/Categories.js

@@ -1,4 +1,4 @@
-export const categories = [
+export const categories = [ // not a component, this should go in the lib
     "Any",
     "General Knowledge",
     "Entertainment: Books",
@@ -25,4 +25,3 @@ export const categories = [
     "Entertainment: Japanese Anime & Manga",
     "Entertainment: Cartoon & Animations",
   ]
-

src/components/EditQuestionForm.js

@@ -7,7 +7,7 @@ import { categories } from './Categories'
 const EditQuestionForm = (props) => {
     const  { question, handleChange, handleSubmit, index } = props
 
-    const [incorrectAnswerSubmissions, setIncorrectAnswers] = useState([])
+    const [incorrectAnswerSubmissions, setIncorrectAnswers] = useState([]) // totally unused 
     const [checked, setRadioValue] = useState({typeOfQuestion: "Multiple Choice", another: "another"})
     const { typeOfQuestion } = checked
 
@@ -29,7 +29,7 @@ const EditQuestionForm = (props) => {
                 <Form.Label>Enter the Incorrect Answer(s)</Form.Label>
                 <Form.Control 
                         key="incorrect2"
-                        placeholder='enter the incorrrect answer'
+                        placeholder='enter the incorrrect answer' // spelling rrr
                         name='incorrectAnswerOne'
                         id='incorrect answer'
                         onChange={handleChange}
@@ -71,7 +71,7 @@ const EditQuestionForm = (props) => {
     }
 
     return(
-
+// indentation is off from the start 
     <Container className='justify-content-center'>
         <Form onSubmit={handleSubmit}>
             <Form.Label>Question:</Form.Label>
@@ -84,7 +84,7 @@ const EditQuestionForm = (props) => {
                 value={question.question}
                 required
             />
-        <Form.Group controlId="questionType">
+        <Form.Group controlId="questionType">{/* fix indentation  */}
             <Form.Check
             value="Multiple Choice"
             type="radio"
@@ -115,14 +115,14 @@ const EditQuestionForm = (props) => {
                 onChange={handleChange}
                 required
                 value={question.correctAnswer}
-            />
-        <>
+            />{/* incorrect indentation  */}
+        <>{/* bad use of shards, we don't need them here to my knowledge */}
             {incorrectAnswers}
         </>
-
+ {/* inconsistent white space */}
 
         <select className='m-2' required>
-        {categories.map((category, index) => (
+        {categories.map((category, index) => ( // bad indentation
                     <option
                     value={category} 
                     index={index}
@@ -137,7 +137,7 @@ const EditQuestionForm = (props) => {
         </select>
         <br/>
         <select className='m-2' required>
-                <option
+                <option // bad indentation 
                     key="easy"
                     value='Easy'
                     onClick={handleChange}
@@ -164,7 +164,7 @@ const EditQuestionForm = (props) => {
         <Button type='submit'>Add</Button>
             </Form>
         </Container>
-
+        // T.T indentation ? 
 )}
 
 export default EditQuestionForm

src/components/GameCreate.js

@@ -18,8 +18,8 @@ const GameCreate = ({user, msgAlert} ) => {
     const handleChange = (e) => {
         setGame(prevGame => {
             const updatedName = e.target.name
-            let updatedValue = e.target.value
-
+            let updatedValue = e.target.value // are we reassigning updateValue ? - use const 
+// inconsistent whitespace
             const updatedGame = { [updatedName]: updatedValue}
             return { ...prevGame, ...updatedGame}
         })
@@ -41,14 +41,14 @@ const GameCreate = ({user, msgAlert} ) => {
     }
 
     return (
-        <>
+        <> {/* don't need fragment here since we only have 1 element ti return*/}
             <GameForm
                 game = { game }
                 handleChange = { handleChange }
                 handleSubmit = { handleCreateGame }
             />
 
-
+{/* inconsistent whitespace*/}
         </>
     )
 }

src/components/GameForm.js

@@ -1,12 +1,13 @@
 import { Form, Button, Container } from 'react-bootstrap'
 import QuestionCreate from './QuestionCreate'
-
+// unused imports
 
 const GameForm = (props) => {
 
-
+// inconsistent white space throughout 
     const { game, handleChange, handleSubmit, gameTitle } = props
-
+// unused variable / import
+//bad indentation 
         return (
             <div style={{backgroundColor: '#240046', height: '100vh', padding: '50px'}}>
                 <Container style={{border: '2px solid lightgray', borderRadius: '10px', textAlign: 'center', height: '200px', padding: '30px'}}>

src/components/GameTitleEdit.js

@@ -2,18 +2,18 @@ import React, { useState } from "react"
 import { gameIndex, gameUpdate } from "../api/game"
 import { useNavigate, useLocation } from "react-router-dom"
 import GameForm from "./GameForm"
-
+// unused imports
 const GameTitleEdit = (props) => {
     const location = useLocation()
     const { game } = location.state
 	const navigate = useNavigate()
 	const { gameId } = props
-
+// unused imports
 	const [gameTitle, setGameTitle] = useState()
-
-    console.log(game.name)
+// unused state variable
+    console.log(game.name) // put in a use effect to run on mount, otherwise will run too early
 	const handleChange = (e) => {
-
+// inconsistent whitespace
 		setGameTitle(prevTitle => {
             console.log(game.name)
 			let updatedName = e.target.name
@@ -32,7 +32,7 @@ const GameTitleEdit = (props) => {
 
 	const handleUpdate = (e) => {
 		e.preventDefault()
-
+// whhhiiiiittttte space
 		gameUpdate(game, game._id)
 			.then((res) => {
 				navigate(`/games/${game._id}`)

src/components/Home.js

@@ -9,7 +9,7 @@ const Home = (props) => {
 	// const { msgAlert, user } = props
 	console.log('props in home', props)
 
-	return (
+	return (// indentation and white space, why do you wound me so,  
 
 
 		<div className='background'>
@@ -27,7 +27,7 @@ const Home = (props) => {
 		</div>
 		<div className='buttons'>
 		    <Link className='btn' to='sign-up' style={{backgroundColor: '#240046', color: 'white', border:'2px solid #ffc300', fontSize: '20px'}}>Sign-Up</Link>
-
+			{/* huge 1 liners could be reformatted to be more readable */}
 			<Link className='btn' to='sign-in' style={{backgroundColor: '#240046', color: 'white', border:'2px solid #ffc300', fontSize: '20px'}}>Sign-In</Link>
 
 		</div>

src/components/Leaderboard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { getLeaderboard } from "../api/leaderboard"
-
+// replace with your import 
 const categories = [
     "Any",
     "General Knowledge",
@@ -30,7 +30,7 @@ const categories = [
 ]
 
 const Leaderboard = (props) => {
-
+// no comments in here at all and inconsistent whitespace
     const { msgAlert } = props
 
     const [category, setCategory] = useState('')
@@ -64,7 +64,7 @@ const Leaderboard = (props) => {
             <td>{rank + 1}</td><td>{entry.username}</td><td>{entry.score}</td>
         </tr>
     ))
-
+// inconsistent white space and bad indentation 
     return (
         <div style={{backgroundColor: '#240046', height: '100vh', color: 'white', paddingTop: '100px'}}>
             <div className="leaderboardContainer">

src/components/PlayerLanding.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 const PlayerLanding = () => {
-    return (
+    return (// use classes in here 
         <>
             <div style={{ backgroundColor: '#240046', height: '100vh', textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
                 <div style={{ backgroundColor: '#240046', width: '200px', height: '200px', padding: '30px', border: '1px solid #7552f2', marginLeft: '20px', marginTop: '100px', borderRadius: '10px' }}>