Remove unused states and update frontend (#95)

* Add error handling logic to question creator * Update questions page to differ between normal users and admins * Fix logical bugs in questions page * Fix description overflow in question viewer * Remove unused upgrade dialog in user page * Remove unused isUpgradeRequested state in userslice * Remove id field from Question Creator * Add matching styling for scrollbar Resolves issue #83
CS3219-AY2324S1 · Nov 6, 2023 · ad73326 · ad73326
1 parent 5aefa92
commit ad73326
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 105 deletions.
diff --git a/front-end/peer-prep/src/components/QuestionsPage/QuestionCreator/index.tsx b/front-end/peer-prep/src/components/QuestionsPage/QuestionCreator/index.tsx
@@ -38,27 +38,27 @@ const QuestionCreator = () => {
 
     // Adds new question 
     const postQuestionData = () => {
-		axios
-			.post(`https://api.peerprepgroup51sem1y2023.xyz/api/questions/`, {
+        axios
+            .post(`https://api.peerprepgroup51sem1y2023.xyz/api/questions/`, {
                 category: currentCategories,
                 description: currentDescription,
                 complexity: currentComplexity,
                 title: currentTitle
-			})
-			.then((reponse) => {
+            })
+            .then((reponse) => {
                 const id = reponse.data._id;
                 dispatch(QuestionSlice.addNewQuestion(id));
                 openSuccessSnackbar(true);
-			})
-			.catch((error) => {
+            })
+            .catch((error) => {
                 console.log(error)
                 const code = error.response.status;
                 if (code === 400) {
                     openErrorSnackbar(true);
                     giveSnackbarMsg(sameQuestionTitleMessage);
                 }
-			});
-	};
+            });
+    };
 
     const handlePostQuestionData = () => {
         postQuestionData();
@@ -67,22 +67,22 @@ const QuestionCreator = () => {
 
     // Update current question
     const patchQuestionData = () => {
-		axios
-			.patch(
-				`https://api.peerprepgroup51sem1y2023.xyz/api/questions/${currentQuestionId}`,
-				{
+        axios
+            .patch(
+                `https://api.peerprepgroup51sem1y2023.xyz/api/questions/${currentQuestionId}`,
+                {
                     category: currentCategories,
                     complexity: currentComplexity,
                     description: currentDescription,
                     title: currentTitle
-				}
-			)
-			.then(() => {
+                }
+            )
+            .then(() => {
                 openSuccessSnackbar(true);
                 dispatch(QuestionSlice.updateCurrentQuestion());
-			})
-			.catch((error) => {
-			})
+            })
+            .catch((error) => {
+            })
     };
 
     const handlePatchQuestionData = () => {
@@ -96,26 +96,27 @@ const QuestionCreator = () => {
     // will run only once!
     useEffect(() => {
         axios({
-			method: "get",
-			url: `https://api.peerprepgroup51sem1y2023.xyz/api/questions`,
-		})
-			.then((response) => {
+            method: "get",
+            url: `https://api.peerprepgroup51sem1y2023.xyz/api/questions`,
+        })
+            .then((response) => {
                 const data = response.data;
                 dispatch(QuestionSlice.initializeQuestionCreator(data));
-			})
-			.catch(() => {
-			});
+            })
+            .catch(() => {
+            });
     }, [])
 
     const attemptQuestion = () => {
-        navigate("/match")
+        navigate("/practice")
     }
 
     return (
         <div style={Styles.questionCreatorContainerStyle}>
             <div style={Styles.questionCreatorViewStyle}>
                 <div style={Styles.labelContainerStyle}>
-                    <TextField label="id" id="test" value={currentQuestionId + "."} sx={Styles.idTextFieldStyle} disabled={true}></TextField>
+
+                    {(!isAddQuestionButtonToggled) ? <TextField label="id" id="test" value={currentQuestionId + "."} sx={Styles.idTextFieldStyle} disabled={true}></TextField> : <></>}
 
                     <TextField label="title"
                         sx={Styles.labelStyle}
@@ -207,7 +208,7 @@ const QuestionCreator = () => {
                                     giveSnackbarMsg("Question details updated.")
                                     openSuccessSnackbar(true)
                                 } else {
-                                    isAddQuestionButtonToggled 
+                                    isAddQuestionButtonToggled
                                         ? handlePostQuestionData()
                                         : handlePatchQuestionData();
                                 }

diff --git a/front-end/peer-prep/src/components/QuestionsPage/QuestionList/CustomList/styles.tsx b/front-end/peer-prep/src/components/QuestionsPage/QuestionList/CustomList/styles.tsx
@@ -3,7 +3,7 @@ export const listStyle = {
 	maxWidth: "100%",
 	position: "relative",
 	overflow: "auto",
-	maxHeight: 500,
+	maxHeight: 400,
 	"&::-webkit-scrollbar": {
 		width: "12px", // Set the width of the scrollbar
 		borderRadius: "15px",

diff --git a/front-end/peer-prep/src/components/QuestionsPage/QuestionList/index.tsx b/front-end/peer-prep/src/components/QuestionsPage/QuestionList/index.tsx
@@ -19,8 +19,7 @@ const QuestionList = () => {
     const navigate = useNavigate();
 
     const upgrade = () => {
-        dispatch(UserSlice.setIsUpgradeRequested(true))
-        navigate("/user")
+        navigate("/admin")
     }
 
     return (

diff --git a/front-end/peer-prep/src/components/QuestionsPage/QuestionViewer/index.tsx b/front-end/peer-prep/src/components/QuestionsPage/QuestionViewer/index.tsx
@@ -22,19 +22,19 @@ const QuestionViewer = () => {
     // will run only once!
     useEffect(() => {
         axios({
-			method: "get",
-			url: `https://api.peerprepgroup51sem1y2023.xyz/api/questions`,
-		})
-			.then((response) => {
+            method: "get",
+            url: `https://api.peerprepgroup51sem1y2023.xyz/api/questions`,
+        })
+            .then((response) => {
                 const data = response.data;
                 dispatch(QuestionSlice.initializeQuestionCreator(data));
-			})
-			.catch(() => {
-			});
+            })
+            .catch(() => {
+            });
     }, [])
 
     const attemptQuestion = () => {
-        navigate("/match")
+        navigate("/practice")
     }
 
     return (
@@ -58,7 +58,7 @@ const QuestionViewer = () => {
                             )}
                         </Stack>
                     </Box>
-                    <Box component="span" sx={Styles.questionViewerInnerStyle}>
+                    <Box component="span" sx={Styles.questionViewerDescriptionStyle}>
                         <Typography variant="subtitle1">Description: {currentDescription}</Typography>
                     </Box>
                     <Button variant="outlined" onClick={attemptQuestion}>Attempt Question</Button>

diff --git a/front-end/peer-prep/src/components/QuestionsPage/QuestionViewer/styles.tsx b/front-end/peer-prep/src/components/QuestionsPage/QuestionViewer/styles.tsx
@@ -24,3 +24,35 @@ export const questionViewerInnerStyle = {
     borderColor: "#F4C2C2",
     borderRadius: 2
 }
+
+export const questionViewerDescriptionStyle = {
+    display: 'block',
+    p: 1,
+    m: 1,
+    backgroundColor: "#1B2735",
+    color: "white",
+    border: '1px solid',
+    borderColor: "#F4C2C2",
+    borderRadius: 2,
+    overflow: "scroll",
+    height: "200px",
+    '&::-webkit-scrollbar': {
+        width: '12px', // Set the width of the scrollbar
+        borderRadius: "15px",
+        scrollTop: "100px",
+        backgroundColor: "#1B2735",
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: "#F4C2C2", // Set the color of the thumb (scrollbar handle)
+        borderRadius: "15px",
+        scrollTop: "100px",
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: "#F4C2C2", // Set the color of the thumb on hover
+        borderRadius: "15px",
+        scrollTop: "100px",
+    },
+    '&::-webkit-scrollbar-corner': {
+        background: "transparent"
+    }
+}
diff --git a/front-end/peer-prep/src/components/UserPage/index.tsx b/front-end/peer-prep/src/components/UserPage/index.tsx
@@ -36,12 +36,8 @@ const UserPage = () => {
 	const [hasEmptyDetails, setHasEmptyDetails] = useState(false);
 	const [duplicateUsername, setDuplicateUsername] = useState(false);
 
-	// State for deletion and upgrade conformation pop ups.
+	// State for deletion conformation pop up.
 	const [deletionConfirmation, setDeletionConfirmation] = useState(false);
-	const isUpgradeRequested: boolean = useSelector(
-		UserSlice.isUpgradeRequested
-	);
-	const [upgradeConfirmation, setUpgradeConfirmation] = useState(false);
 
 	// Gets user details from firebase.
 	const user = auth.currentUser;
@@ -101,15 +97,6 @@ const UserPage = () => {
 		setDeletionConfirmation(false);
 	};
 
-	const openUpgradeConfirmation = () => {
-		setUpgradeConfirmation(true);
-	};
-
-	const closeUpgradeConfirmation = () => {
-		dispatch(UserSlice.setIsUpgradeRequested(false));
-		setUpgradeConfirmation(false);
-	};
-
 	// First time creation for new user if user does not exist.
 	const postUserData = () => {
 		axios
@@ -181,7 +168,7 @@ const UserPage = () => {
 			.delete(
 				`https://api.peerprepgroup51sem1y2023.xyz/users/profile/${authUid}`
 			)
-			.catch(() => {});
+			.catch(() => { });
 	};
 
 	// Deletes user data from firebase.
@@ -191,23 +178,13 @@ const UserPage = () => {
 		}
 	};
 
-	const upgradeUserToAdmin = () => {
-		// add axios code here
-	};
-
 	const handleDeleteUser = () => {
 		closeDeleteConfirmation();
 		navigate("/delete");
 		deleteUserData();
 		deleteFirebaseUserData();
 	};
 
-	const handleUpgradeUser = () => {
-		closeUpgradeConfirmation();
-		upgradeUserToAdmin();
-		dispatch(UserSlice.updateIsAdmin(true));
-	};
-
 	return (
 		<div style={Styles.UserPageContainerStyle}>
 			<div style={Styles.MainContainerStyle}>
@@ -343,35 +320,6 @@ const UserPage = () => {
 							</Button>
 						</DialogActions>
 					</Dialog>
-
-					<Dialog
-						open={upgradeConfirmation || isUpgradeRequested}
-						onClose={closeUpgradeConfirmation}
-						aria-labelledby="alert-dialog-title"
-						aria-describedby="alert-dialog-description"
-					>
-						<DialogTitle id="alert-dialog-title">
-							{"Upgrade Account"}
-						</DialogTitle>
-						<DialogContent>
-							<DialogContentText id="alert-dialog-description">
-								Upgrade your account to obtain question editing
-								privileges?
-							</DialogContentText>
-						</DialogContent>
-						<DialogActions>
-							<Button onClick={closeUpgradeConfirmation}>
-								Back
-							</Button>
-							<Button
-								onClick={handleUpgradeUser}
-								autoFocus
-								sx={Styles.deleteConfirmationButton}
-							>
-								Yes
-							</Button>
-						</DialogActions>
-					</Dialog>
 				</div>
 			</div>
 		</div>

diff --git a/front-end/peer-prep/src/components/redux/reducers/Question/QuestionSlice.tsx b/front-end/peer-prep/src/components/redux/reducers/Question/QuestionSlice.tsx
@@ -54,7 +54,7 @@ const questionSlice = createSlice({
             const currentCategoryData = action.payload;
             state.currentCategories.push(currentCategoryData);
         },
-        updateAllCurrentCatogires(state, action:PayloadAction<string[]>) {
+        updateAllCurrentCatogires(state, action: PayloadAction<string[]>) {
             state.currentCategories = action.payload;
         },
         updateCurrentDescription(state, action: PayloadAction<string>) {
@@ -106,7 +106,7 @@ const questionSlice = createSlice({
             state.questionsData = newQuestionsData;
         },
         createNewQuestion(state) {
-            state.currentId = String(Date.now()) // temporarily using date to ensure unique id b4 merging with backend
+            state.currentId = ""
             state.currentTitle = "";
             state.currentCategories = [];
             state.currentComplexity = "";

diff --git a/front-end/peer-prep/src/components/redux/reducers/User/UserSlice.tsx b/front-end/peer-prep/src/components/redux/reducers/User/UserSlice.tsx
@@ -7,8 +7,7 @@ export interface userState {
     currentFirstName: string,
     currentLastName: string,
     currentAge: number,
-    isAdmin: boolean,
-    isUpgradeRequested: boolean
+    isAdmin: boolean
 }
 
 interface userFormat {
@@ -29,8 +28,7 @@ const userSlice = createSlice({
         currentFirstName: "",
         currentLastName: "",
         currentAge: 0,
-        isAdmin: false,
-        isUpgradeRequested: false
+        isAdmin: false
     } as userState,
     reducers: {
         setIsFirstTimeLogin(state, action: PayloadAction<boolean>) {
@@ -62,16 +60,13 @@ const userSlice = createSlice({
         },
         updateIsAdmin(state, action: PayloadAction<boolean>) {
             state.isAdmin = action.payload
-        },
-        setIsUpgradeRequested(state, action: PayloadAction<boolean>) {
-            state.isUpgradeRequested = action.payload
         }
     }
 })
 
 export const { updateUserData, updateCurrentUsername, updateCurrentEmail,
     updateCurrentFirstName, updateCurrentLastName,
-    updateCurrentAge, setIsFirstTimeLogin, updateIsAdmin, setIsUpgradeRequested } = userSlice.actions
+    updateCurrentAge, setIsFirstTimeLogin, updateIsAdmin } = userSlice.actions
 
 export default userSlice.reducer;
 
@@ -82,4 +77,3 @@ export const selectCurrentLastName = (state: any) => state.user.currentLastName
 export const selectCurrentAge = (state: any) => state.user.currentAge
 export const selectIsFirstTimeLogin = (state: any) => state.user.isFirstTimeLogin
 export const isUserAnAdmin = (state: any) => state.user.isAdmin
-export const isUpgradeRequested = (state: any) => state.user.isUpgradeRequested