devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added abandon popup

Browse Source
This commit is contained in:
Joao Ramos
2023-08-16 00:38:54 +01:00
parent 93a5bcf40f
commit cd71cf4833
7 changed files with 129 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/exam.tsx
View File

@@ -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() {
</Head>
<ToastContainer />
{user && (
<Layout user={user} className="justify-between" focusMode={selectedModules.length !== 0}>
{renderScreen()}
<Layout
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<>
{renderScreen()}
<AbandonPopup
isOpen={showAbandonPopup}
abandonPopupTitle="Leave Exam"
abandonPopupDescription="Are you sure you want to leave the exam? You will lose all your progress."
abandonConfirmButtonText="Confirm"
onAbandon={() => {
console.log('TODO: Handle Abandon');
return true;
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
</Layout>
)}
</>

25
src/pages/exercises.tsx
View File

@@ -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() {
</Head>
<ToastContainer />
{user && (
<Layout user={user} className="justify-between" focusMode={selectedModules.length !== 0}>
{renderScreen()}
<Layout
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<>
{renderScreen()}
<AbandonPopup
isOpen={showAbandonPopup}
abandonPopupTitle="Leave Exercise"
abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
abandonConfirmButtonText="Confirm"
onAbandon={() => {
console.log('TODO: Handle Abandon');
return true;
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
</Layout>
)}
</>