From 7a957e4d78acbc1b51c7f65dc8132359e64db746 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Fri, 22 Sep 2023 14:13:57 +0100 Subject: [PATCH] Extracted the Admin Panel items --- src/pages/(admin)/CodeGenerator.tsx | 73 ++++++++++++++ src/pages/(admin)/ExamLoader.tsx | 76 ++++++++++++++ src/pages/admin.tsx | 147 +--------------------------- 3 files changed, 152 insertions(+), 144 deletions(-) create mode 100644 src/pages/(admin)/CodeGenerator.tsx create mode 100644 src/pages/(admin)/ExamLoader.tsx diff --git a/src/pages/(admin)/CodeGenerator.tsx b/src/pages/(admin)/CodeGenerator.tsx new file mode 100644 index 00000000..749f72ce --- /dev/null +++ b/src/pages/(admin)/CodeGenerator.tsx @@ -0,0 +1,73 @@ +import Button from "@/components/Low/Button"; +import {Type} from "@/interfaces/user"; +import axios from "axios"; +import clsx from "clsx"; +import {capitalize} from "lodash"; +import {useState} from "react"; +import {toast} from "react-toastify"; +import ShortUniqueId from "short-unique-id"; + +export default function CodeGenerator() { + const [generatedCode, setGeneratedCode] = useState(); + + 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 ( +
+ +
+ + + + +
+ +
{ + if (generatedCode) navigator.clipboard.writeText(generatedCode); + }}> + {generatedCode} +
+ {generatedCode && Give this code to the user to complete their registration} +
+ ); +} diff --git a/src/pages/(admin)/ExamLoader.tsx b/src/pages/(admin)/ExamLoader.tsx new file mode 100644 index 00000000..2f27522b --- /dev/null +++ b/src/pages/(admin)/ExamLoader.tsx @@ -0,0 +1,76 @@ +import Button from "@/components/Low/Button"; +import Input from "@/components/Low/Input"; +import {Module} from "@/interfaces"; +import useExamStore from "@/stores/examStore"; +import {getExamById} from "@/utils/exams"; +import {MODULE_ARRAY} from "@/utils/moduleUtils"; +import {RadioGroup} from "@headlessui/react"; +import clsx from "clsx"; +import {capitalize} from "lodash"; +import {useRouter} from "next/router"; +import {FormEvent, useState} from "react"; +import {toast} from "react-toastify"; + +export default function ExamLoader() { + const [selectedModule, setSelectedModule] = useState(); + const [examId, setExamId] = useState(); + 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 ( +
+ +
+ + {MODULE_ARRAY.map((module) => ( + + {({checked}) => ( + + {capitalize(module)} + + )} + + ))} + + + +
+
+ ); +} diff --git a/src/pages/admin.tsx b/src/pages/admin.tsx index 2a9793af..0b72ce4e 100644 --- a/src/pages/admin.tsx +++ b/src/pages/admin.tsx @@ -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(); - const [examId, setExamId] = useState(); - 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 ( -
- -
- - {MODULE_ARRAY.map((module) => ( - - {({checked}) => ( - - {capitalize(module)} - - )} - - ))} - - - -
-
- ); -}; - -const CodeGenerator = () => { - const [generatedCode, setGeneratedCode] = useState(); - - 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 ( -
- -
- - - - -
- -
{ - if (generatedCode) navigator.clipboard.writeText(generatedCode); - }}> - {generatedCode} -
- {generatedCode && Give this code to the user to complete their registration} -
- ); -}; - export default function Admin() { const {user} = useUser({redirectTo: "/login"});