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

- Solved the bug on Diagnostic where the exams weren't loading;

Browse Source 
- Removed the Layout appearance and made it so the abandon popup appears on click and not on enter
This commit is contained in:
Tiago Ribeiro
2023-08-22 23:13:26 +01:00
parent 78c5b7027e
commit 14a719b8b5
7 changed files with 80 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/AbandonPopup.tsx
View File

@@ -3,60 +3,53 @@ import {Fragment} from "react";
import Button from "./Low/Button";
interface Props {
isOpen: boolean;
isOpen: boolean;
abandonPopupTitle: string;
abandonPopupDescription: string;
abandonConfirmButtonText: string;
onAbandon: Function;
onCancel: Function;
onAbandon: () => void;
onCancel: () => void;
}
export default function AbandonPopup({
isOpen,
abandonPopupTitle,
abandonPopupDescription,
abandonConfirmButtonText,
onAbandon,
onCancel,
}: Props) {
return (
<Transition show={isOpen} as={Fragment}>
<Dialog onClose={onCancel} className="relative z-50">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-black/30" />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
<span>{abandonPopupDescription}</span>
<div className="w-full flex justify-between mt-8">
<Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
Cancel
</Button>
<Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
{abandonConfirmButtonText}
</Button>
</div>
</Dialog.Panel>
</div>
</Transition.Child>
</Dialog>
</Transition>
);
}
export default function AbandonPopup({isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel}: Props) {
return (
<Transition show={isOpen} as={Fragment}>
<Dialog onClose={onCancel} className="relative z-50">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-black/30" />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
<span>{abandonPopupDescription}</span>
<div className="w-full flex justify-between mt-8">
<Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
Cancel
</Button>
<Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
{abandonConfirmButtonText}
</Button>
</div>
</Dialog.Panel>
</div>
</Transition.Child>
</Dialog>
</Transition>
);
}

8
src/components/Diagnostic.tsx
View File

@@ -10,7 +10,7 @@ import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useRouter} from "next/router";
import {useState} from "react";
import {useEffect, useState} from "react";
import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
import {toast} from "react-toastify";
import Button from "./Low/Button";
@@ -23,7 +23,7 @@ interface Props {
const DIAGNOSTIC_EXAMS = [
["reading", "CurQtQoxWmHaJHeN0JW2"],
["listening", "Y6cMao8kUcVnPQOo6teV"],
["writing", "hbueuDaEZXV37EW7I12A"],
["writing", "B1J90R4Lmdn2dwjdHEwj"],
["speaking", "QVFm4pdcziJQZN2iUTDo"],
];
@@ -49,7 +49,7 @@ export default function Diagnostic({onFinish}: Props) {
if (exams.every((x) => !!x)) {
setExams(exams.map((x) => x!));
setSelectedModules(exams.map((x) => x!.module));
router.push("/exam");
router.push("/exercises");
}
});
};
@@ -58,7 +58,7 @@ export default function Diagnostic({onFinish}: Props) {
axios
.patch("/api/users/update", {
focus,
levels: Object.values(levels).includes(-1) ? {reading: -1, listening: -1, writing: -1, speaking: -1} : levels,
levels: Object.values(levels).includes(-1) ? {reading: 0, listening: 0, writing: 0, speaking: 0} : levels,
desiredLevels,
isFirstLogin: false,
})

10
src/components/FocusLayer.tsx
View File

@@ -1,13 +1,9 @@
import {useEffect, useState} from "react";
interface Props {
onFocusLayerMouseEnter: Function,
onFocusLayerMouseEnter?: () => void;
}
export default function FocusLayer({
onFocusLayerMouseEnter,
}: Props) {
return (
<div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" onMouseEnter={onFocusLayerMouseEnter}/>
);
export default function FocusLayer({onFocusLayerMouseEnter}: Props) {
return <div className="absolute top-0 left-0 bottom-0 right-0" onMouseDown={onFocusLayerMouseEnter} />;
}

8
src/components/High/Layout.tsx
View File

@@ -9,18 +9,18 @@ interface Props {
children: React.ReactNode;
className?: string;
navDisabled?: boolean;
focusMode?: boolean
onFocusLayerMouseEnter?: Function;
focusMode?: boolean;
onFocusLayerMouseEnter?: () => void;
}
export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const router = useRouter();
return (
<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
<div className="h-full w-full flex gap-2">
<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>
<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
<div
className={clsx(
"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",

9
src/components/Navbar.tsx
View File

@@ -1,15 +1,14 @@
import {User} from "@/interfaces/user";
import Link from "next/link";
import {Avatar} from "primereact/avatar";
import FocusLayer from '@/components/FocusLayer';
import { preventNavigation } from "@/utils/navigation.disabled";
import FocusLayer from "@/components/FocusLayer";
import {preventNavigation} from "@/utils/navigation.disabled";
interface Props {
user: User;
navDisabled?: boolean;
focusMode?: boolean;
onFocusLayerMouseEnter?: Function;
onFocusLayerMouseEnter?: () => void;
}
/* eslint-disable @next/next/no-img-element */
@@ -26,7 +25,7 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
<span className="text-right">{user.name}</span>
</Link>
</div>
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
</header>
);
}

15
src/pages/exam.tsx
View File

@@ -321,25 +321,22 @@ export default function Page() {
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<>
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."
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');
setExam(undefined);
setSelectedModules([]);
setShowAbandonPopup(false)
return true;
setShowAbandonPopup(false);
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
</>
</Layout>
)}
</>

31
src/pages/exercises.tsx
View File

@@ -323,25 +323,22 @@ export default function Page() {
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
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={() => {
setExam(undefined);
setSelectedModules([]);
setShowAbandonPopup(false)
return true;
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
<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={() => {
setExam(undefined);
setSelectedModules([]);
setShowAbandonPopup(false);
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
</Layout>
)}
</>