From cd71cf48334692d5c4687d8310909b10ef27889d Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Wed, 16 Aug 2023 00:38:54 +0100 Subject: [PATCH] Added abandon popup --- src/components/AbandonPopup.tsx | 62 +++++++++++++++++++++++++++++++++ src/components/FocusLayer.tsx | 14 ++++++-- src/components/High/Layout.tsx | 7 ++-- src/components/Navbar.tsx | 5 +-- src/components/Sidebar.tsx | 5 +-- src/pages/exam.tsx | 24 +++++++++++-- src/pages/exercises.tsx | 25 +++++++++++-- 7 files changed, 129 insertions(+), 13 deletions(-) create mode 100644 src/components/AbandonPopup.tsx diff --git a/src/components/AbandonPopup.tsx b/src/components/AbandonPopup.tsx new file mode 100644 index 00000000..c1267e13 --- /dev/null +++ b/src/components/AbandonPopup.tsx @@ -0,0 +1,62 @@ +import {Dialog, Transition} from "@headlessui/react"; +import {Fragment} from "react"; +import Button from "./Low/Button"; + +interface Props { + isOpen: boolean; + abandonPopupTitle: string; + abandonPopupDescription: string; + abandonConfirmButtonText: string; + onAbandon: Function; + onCancel: Function; +} + +export default function AbandonPopup({ + isOpen, + abandonPopupTitle, + abandonPopupDescription, + abandonConfirmButtonText, + onAbandon, + onCancel, +}: Props) { + return ( + + + +
+ + + +
+ + {abandonPopupTitle} + {abandonPopupDescription} +
+ + +
+ +
+ +
+ + ); +} \ No newline at end of file diff --git a/src/components/FocusLayer.tsx b/src/components/FocusLayer.tsx index ada8adb4..9b9c39cf 100644 --- a/src/components/FocusLayer.tsx +++ b/src/components/FocusLayer.tsx @@ -1,3 +1,13 @@ -export default function FocusLayer() { - return
+import {useEffect, useState} from "react"; + +interface Props { + onFocusLayerMouseEnter: Function, +} + +export default function FocusLayer({ + onFocusLayerMouseEnter, +}: Props) { + return ( +
+ ); } diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx index f07bb233..78774e65 100644 --- a/src/components/High/Layout.tsx +++ b/src/components/High/Layout.tsx @@ -10,16 +10,17 @@ interface Props { className?: string; navDisabled?: boolean; focusMode?: boolean + onFocusLayerMouseEnter?: Function; } -export default function Layout({user, children, className, navDisabled = false, focusMode = false}: Props) { +export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) { const router = useRouter(); return (
- +
- +
{user.name}
- {focusMode && } + {focusMode && } ); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 4cd2046c..f80aaaf9 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -14,6 +14,7 @@ interface Props { path: string; navDisabled?: boolean; focusMode?: boolean; + onFocusLayerMouseEnter?: Function; } interface NavProps { @@ -36,7 +37,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => ( ); -export default function Sidebar({path, navDisabled = false, focusMode = false }: Props) { +export default function Sidebar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) { const router = useRouter(); const logout = async () => { @@ -68,7 +69,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false }: Log Out
- {focusMode && } + {focusMode && } ); } diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx index f70f1501..d22c0af6 100644 --- a/src/pages/exam.tsx +++ b/src/pages/exam.tsx @@ -30,6 +30,7 @@ import useUser from "@/hooks/useUser"; import useExamStore from "@/stores/examStore"; import Layout from "@/components/High/Layout"; import {speakingReverseMarking, writingReverseMarking} from "@/utils/score"; +import AbandonPopup from "@/components/AbandonPopup"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -61,6 +62,7 @@ export default function Page() { const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]); const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]); const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]); + const [showAbandonPopup, setShowAbandonPopup] = useState(false); const setHasExamEnded = useExamStore((state) => state.setHasExamEnded); const {user} = useUser({redirectTo: "/login"}); @@ -315,8 +317,26 @@ export default function Page() { {user && ( - - {renderScreen()} + setShowAbandonPopup(true)} + > + <> + {renderScreen()} + { + console.log('TODO: Handle Abandon'); + return true; + }} + onCancel={() => setShowAbandonPopup(false)} + /> + )} diff --git a/src/pages/exercises.tsx b/src/pages/exercises.tsx index d6656729..fa0f1e3a 100644 --- a/src/pages/exercises.tsx +++ b/src/pages/exercises.tsx @@ -33,6 +33,7 @@ import Sidebar from "@/components/Sidebar"; import Layout from "@/components/High/Layout"; import {sortByModule} from "@/utils/moduleUtils"; import {speakingReverseMarking, writingReverseMarking} from "@/utils/score"; +import AbandonPopup from "@/components/AbandonPopup"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -64,6 +65,7 @@ export default function Page() { const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]); const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]); const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]); + const [showAbandonPopup, setShowAbandonPopup] = useState(false); const {user} = useUser({redirectTo: "/login"}); @@ -317,8 +319,27 @@ export default function Page() { {user && ( - - {renderScreen()} + setShowAbandonPopup(true)} + > + <> + {renderScreen()} + { + console.log('TODO: Handle Abandon'); + return true; + }} + onCancel={() => setShowAbandonPopup(false)} + /> + )}