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

Extracted the Admin Panel items

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-22 14:13:57 +01:00
parent a9ceecdc84
commit 7a957e4d78
3 changed files with 152 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/pages/admin.tsx
View File

@@ -3,22 +3,10 @@ import Head from "next/head";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import useUser from "@/hooks/useUser";
import {toast, ToastContainer} from "react-toastify";
import {ToastContainer} from "react-toastify";
import Layout from "@/components/High/Layout";
import {RadioGroup} from "@headlessui/react";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import clsx from "clsx";
import {capitalize} from "lodash";
import {FormEvent, useState} from "react";
import {Module} from "@/interfaces";
import Input from "@/components/Low/Input";
import Button from "@/components/Low/Button";
import {getExamById} from "@/utils/exams";
import useExamStore from "@/stores/examStore";
import {useRouter} from "next/router";
import ShortUniqueId from "short-unique-id";
import {Type} from "@/interfaces/user";
import axios from "axios";
import CodeGenerator from "./(admin)/CodeGenerator";
import ExamLoader from "./(admin)/ExamLoader";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -50,135 +38,6 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}, sessionOptions);
const ExamLoader = () => {
const [selectedModule, setSelectedModule] = useState<Module>();
const [examId, setExamId] = useState<string>();
const [isLoading, setIsLoading] = useState(false);
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const router = useRouter();
const loadExam = async (e?: FormEvent) => {
if (e) e.preventDefault();
setIsLoading(true);
if (selectedModule && examId) {
const exam = await getExamById(selectedModule, examId.trim());
if (!exam) {
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
toastId: "invalid-exam-id",
});
setIsLoading(false);
return;
}
setExams([exam]);
setSelectedModules([selectedModule]);
router.push("/exercises");
}
setIsLoading(false);
};
return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">Exam Loader</label>
<form className="flex flex-col gap-4 w-full" onSubmit={loadExam}>
<RadioGroup value={selectedModule} onChange={setSelectedModule} className="grid grid-cols-2 items-center gap-4 place-items-center">
{MODULE_ARRAY.map((module) => (
<RadioGroup.Option value={module} key={module}>
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"hover:bg-mti-purple-light hover:border-mti-purple-dark hover:text-white",
"transition duration-300 ease-in-out",
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
{capitalize(module)}
</span>
)}
</RadioGroup.Option>
))}
</RadioGroup>
<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" />
<Button disabled={!selectedModule || !examId} isLoading={isLoading}>
Load Exam
</Button>
</form>
</div>
);
};
const CodeGenerator = () => {
const [generatedCode, setGeneratedCode] = useState<string>();
const generateCode = (type: Type) => {
const uid = new ShortUniqueId();
const code = uid.randomUUID(6);
axios
.post("/api/code", {type, code})
.then(({data, status}) => {
if (data.ok) {
toast.success(`Successfully generated a ${capitalize(type)} code!`, {toastId: "success"});
setGeneratedCode(code);
return;
}
if (status === 403) {
toast.error(`You do not have permission to generate a ${capitalize(type)} code!`, {toastId: "forbidden"});
}
})
.catch(({response: {status}}) => {
if (status === 403) {
toast.error(`You do not have permission to generate a ${capitalize(type)} code!`, {toastId: "forbidden"});
return;
}
toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
});
};
return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
<div className="grid grid-cols-2 gap-4">
<Button className="w-48" variant="outline" onClick={() => generateCode("student")}>
Student
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")}>
Teacher
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("admin")}>
Admin
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("owner")}>
Owner
</Button>
</div>
<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
<div
className={clsx(
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"hover:border-mti-purple tooltip",
"transition duration-300 ease-in-out",
)}
data-tip="Click to copy"
onClick={() => {
if (generatedCode) navigator.clipboard.writeText(generatedCode);
}}>
{generatedCode}
</div>
{generatedCode && <span className="text-sm text-mti-gray-dim font-light">Give this code to the user to complete their registration</span>}
</div>
);
};
export default function Admin() {
const {user} = useUser({redirectTo: "/login"});