From ad7332624fce7084adb7d34c9fa2209ef8899016 Mon Sep 17 00:00:00 2001 From: Edward Mualim <56242167+Edfernape@users.noreply.github.com> Date: Mon, 6 Nov 2023 21:06:58 +0800 Subject: [PATCH] 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 --- .../QuestionsPage/QuestionCreator/index.tsx | 57 ++++++++++--------- .../QuestionList/CustomList/styles.tsx | 2 +- .../QuestionsPage/QuestionList/index.tsx | 3 +- .../QuestionsPage/QuestionViewer/index.tsx | 18 +++--- .../QuestionsPage/QuestionViewer/styles.tsx | 32 +++++++++++ .../src/components/UserPage/index.tsx | 56 +----------------- .../redux/reducers/Question/QuestionSlice.tsx | 4 +- .../redux/reducers/User/UserSlice.tsx | 12 +--- 8 files changed, 79 insertions(+), 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 index 0e47c780..19068048 100644 --- 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 (
- + + {(!isAddQuestionButtonToggled) ? : <>} { 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 index 0c7b9526..101ad9e6 100644 --- 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 index ba8ffda3..f09eed69 100644 --- 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 index c675d32d..679491d6 100644 --- 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 = () => { )} - + Description: {currentDescription} diff --git a/front-end/peer-prep/src/components/QuestionsPage/QuestionViewer/styles.tsx b/front-end/peer-prep/src/components/QuestionsPage/QuestionViewer/styles.tsx index a292f043..2058b1ad 100644 --- 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 index abf5bebb..527fc5c1 100644 --- 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,10 +178,6 @@ const UserPage = () => { } }; - const upgradeUserToAdmin = () => { - // add axios code here - }; - const handleDeleteUser = () => { closeDeleteConfirmation(); navigate("/delete"); @@ -202,12 +185,6 @@ const UserPage = () => { deleteFirebaseUserData(); }; - const handleUpgradeUser = () => { - closeUpgradeConfirmation(); - upgradeUserToAdmin(); - dispatch(UserSlice.updateIsAdmin(true)); - }; - return (
@@ -343,35 +320,6 @@ const UserPage = () => { - - - - {"Upgrade Account"} - - - - Upgrade your account to obtain question editing - privileges? - - - - - - -
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 index 7bbb24dc..d5a80232 100644 --- 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) { + updateAllCurrentCatogires(state, action: PayloadAction) { state.currentCategories = action.payload; }, updateCurrentDescription(state, action: PayloadAction) { @@ -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 index 1338dbda..a61d71a8 100644 --- 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) { @@ -62,16 +60,13 @@ const userSlice = createSlice({ }, updateIsAdmin(state, action: PayloadAction) { state.isAdmin = action.payload - }, - setIsUpgradeRequested(state, action: PayloadAction) { - 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