From bd2efb0ef507092fcbf4e12fb9cd14bbed929e4f Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Mon, 22 Jul 2024 23:30:22 +0100 Subject: [PATCH 1/3] Updated the color of the task response --- src/components/Solutions/Writing.tsx | 2 +- src/pages/(generation)/LevelGeneration.tsx | 606 +++++++++------------ 2 files changed, 266 insertions(+), 342 deletions(-) diff --git a/src/components/Solutions/Writing.tsx b/src/components/Solutions/Writing.tsx index 038cb19e..593d4daf 100644 --- a/src/components/Solutions/Writing.tsx +++ b/src/components/Solutions/Writing.tsx @@ -124,7 +124,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on return (
void; -}) => { - const [isEditing, setIsEditing] = useState(false); - const [options, setOptions] = useState(question.options); - const [answer, setAnswer] = useState(question.solution); +const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => { + const [isEditing, setIsEditing] = useState(false); + const [options, setOptions] = useState(question.options); + const [answer, setAnswer] = useState(question.solution); - return ( -
- - {question.id}. {question.prompt}{" "} - -
- {question.options.map((option, index) => ( - - setAnswer(option.id)} - > - ({option.id}) - {" "} - {isEditing ? ( - - setOptions((prev) => - prev.map((x, idx) => - idx === index ? { ...x, text: e.target.value } : x - ) - ) - } - /> - ) : ( - {option.text} - )} - - ))} -
-
- {!isEditing && ( - - )} - {isEditing && ( - <> - - - - )} -
-
- ); + return ( +
+ + {question.id}. {question.prompt}{" "} + +
+ {question.options.map((option, index) => ( + + setAnswer(option.id)}> + ({option.id}) + {" "} + {isEditing ? ( + setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))} + /> + ) : ( + {option.text} + )} + + ))} +
+
+ {!isEditing && ( + + )} + {isEditing && ( + <> + + + + )} +
+
+ ); }; -const TaskTab = ({ - exam, - difficulty, - setExam, -}: { - exam?: LevelPart; - difficulty: Difficulty; - setExam: (exam: LevelPart) => void; -}) => { - const [isLoading, setIsLoading] = useState(false); +const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelPart; difficulty: Difficulty; setExam: (exam: LevelPart) => void}) => { + const [isLoading, setIsLoading] = useState(false); - const generate = () => { - const url = new URLSearchParams(); - url.append("difficulty", difficulty); + const generate = () => { + const url = new URLSearchParams(); + url.append("difficulty", difficulty); - setIsLoading(true); - axios - .get(`/api/exam/level/generate/level?${url.toString()}`) - .then((result) => { - playSound(typeof result.data === "string" ? "error" : "check"); - if (typeof result.data === "string") - return toast.error( - "Something went wrong, please try to generate again." - ); - setExam(result.data); - }) - .catch((error) => { - console.log(error); - toast.error("Something went wrong!"); - }) - .finally(() => setIsLoading(false)); - }; + setIsLoading(true); + axios + .get(`/api/exam/level/generate/level?${url.toString()}`) + .then((result) => { + console.log({data: result.data}); + playSound(typeof result.data === "string" ? "error" : "check"); + if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again."); + setExam(result.data); + }) + .catch((error) => { + console.log(error); + toast.error("Something went wrong!"); + }) + .finally(() => setIsLoading(false)); + }; - const onUpdate = (question: MultipleChoiceQuestion) => { - if (!exam) return; + const onUpdate = (question: MultipleChoiceQuestion) => { + if (!exam) return; - const updatedExam = { - ...exam, - exercises: exam.exercises.map((x) => ({ - ...x, - questions: (x as MultipleChoiceExercise).questions.map((q) => - q.id === question.id ? question : q - ), - }), - ), - }; - console.log(updatedExam); - setExam(updatedExam as any); - }; + const updatedExam = { + ...exam, + exercises: exam.exercises.map((x) => ({ + ...x, + questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)), + })), + }; + console.log(updatedExam); + setExam(updatedExam as any); + }; - return ( - -
- -
- {isLoading && ( -
- - - Generating... - -
- )} - {exam && ( -
- {exam.exercises - .filter((x) => x.type === "multipleChoice") - .map((ex) => { - const exercise = ex as MultipleChoiceExercise; + return ( + +
+ +
+ {isLoading && ( +
+ + Generating... +
+ )} + {exam && ( +
+ {exam.exercises + .filter((x) => x.type === "multipleChoice") + .map((ex) => { + const exercise = ex as MultipleChoiceExercise; - return ( -
-
- - Multiple Choice - - - {exercise.questions.length} questions - -
-
- {exercise.questions.map((question) => ( - - ))} -
-
- ); - })} -
- )} - - ); + return ( +
+
+ Multiple Choice + + {exercise.questions.length} questions + +
+
+ {exercise.questions.map((question) => ( + + ))} +
+
+ ); + })} +
+ )} + + ); }; const LevelGeneration = () => { - const [generatedExam, setGeneratedExam] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [resultingExam, setResultingExam] = useState(); - const [difficulty, setDifficulty] = useState( - sample(DIFFICULTIES)! - ); + const [generatedExam, setGeneratedExam] = useState(); + const [isLoading, setIsLoading] = useState(false); + const [resultingExam, setResultingExam] = useState(); + const [difficulty, setDifficulty] = useState(sample(DIFFICULTIES)!); - const router = useRouter(); + const router = useRouter(); - const setExams = useExamStore((state) => state.setExams); - const setSelectedModules = useExamStore((state) => state.setSelectedModules); + const setExams = useExamStore((state) => state.setExams); + const setSelectedModules = useExamStore((state) => state.setSelectedModules); - const loadExam = async (examId: string) => { - const exam = await getExamById("level", 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", - } - ); + const loadExam = async (examId: string) => { + const exam = await getExamById("level", 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", + }); - return; - } + return; + } - setExams([exam]); - setSelectedModules(["level"]); + setExams([exam]); + setSelectedModules(["level"]); - router.push("/exercises"); - }; + router.push("/exercises"); + }; - const submitExam = () => { - if (!generatedExam) { - toast.error("Please generate all tasks before submitting"); - return; - } + const submitExam = () => { + if (!generatedExam) { + toast.error("Please generate all tasks before submitting"); + return; + } - setIsLoading(true); + setIsLoading(true); - const exam: LevelExam = { - isDiagnostic: false, - minTimer: 25, - module: "level", - id: v4(), - parts: [generatedExam], - }; + const exam: LevelExam = { + isDiagnostic: false, + minTimer: 25, + module: "level", + id: v4(), + parts: [generatedExam], + }; - axios - .post(`/api/exam/level`, exam) - .then((result) => { - playSound("sent"); - console.log(`Generated Exam ID: ${result.data.id}`); - toast.success( - "This new exam has been generated successfully! Check the ID in our browser's console." - ); - setResultingExam(result.data); + axios + .post(`/api/exam/level`, exam) + .then((result) => { + playSound("sent"); + console.log(`Generated Exam ID: ${result.data.id}`); + toast.success("This new exam has been generated successfully! Check the ID in our browser's console."); + setResultingExam(result.data); - setGeneratedExam(undefined); - }) - .catch((error) => { - console.log(error); - toast.error( - "Something went wrong while generating, please try again later." - ); - }) - .finally(() => setIsLoading(false)); - }; + setGeneratedExam(undefined); + }) + .catch((error) => { + console.log(error); + toast.error("Something went wrong while generating, please try again later."); + }) + .finally(() => setIsLoading(false)); + }; - return ( - <> -
-
- - ({ + value: x, + label: capitalize(x), + }))} + onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)} + value={{value: difficulty, label: capitalize(difficulty)}} + /> +
+
+ + + + clsx( + "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70", + "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2", + "transition duration-300 ease-in-out", + selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level", + ) + }> + Exam + + + + + + +
+ {resultingExam && ( + + )} + +
+ + ); }; export default LevelGeneration; From a1c7f70329badde3816fff1f619315c35fdc31fb Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Mon, 22 Jul 2024 23:35:22 +0100 Subject: [PATCH 2/3] Solved some small issues --- .../Exercises/InteractiveSpeaking.tsx | 1 - src/components/Exercises/MatchSentences.tsx | 4 - src/components/PaymobPayment.tsx | 1 - src/pages/(admin)/BatchCodeGenerator.tsx | 2 - src/pages/(admin)/Lists/UserList.tsx | 1450 +++++++---------- src/pages/(generation)/LevelGeneration.tsx | 1 - 6 files changed, 579 insertions(+), 880 deletions(-) diff --git a/src/components/Exercises/InteractiveSpeaking.tsx b/src/components/Exercises/InteractiveSpeaking.tsx index f397dee1..7bad812c 100644 --- a/src/components/Exercises/InteractiveSpeaking.tsx +++ b/src/components/Exercises/InteractiveSpeaking.tsx @@ -60,7 +60,6 @@ export default function InteractiveSpeaking({ setIsLoading(true); const answer = await saveAnswer(questionIndex); - console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length); if (questionIndex + 1 < prompts.length) { setQuestionIndex(questionIndex + 1); setIsLoading(false); diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx index f6983584..4f17c2c3 100644 --- a/src/components/Exercises/MatchSentences.tsx +++ b/src/components/Exercises/MatchSentences.tsx @@ -87,10 +87,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us return {total, correct, missing}; }; - useEffect(() => { - console.log(answers); - }, [answers]); - useEffect(() => { if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/components/PaymobPayment.tsx b/src/components/PaymobPayment.tsx index 6ff8b578..47cec9d6 100644 --- a/src/components/PaymobPayment.tsx +++ b/src/components/PaymobPayment.tsx @@ -20,7 +20,6 @@ interface Props { export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) { const [isLoading, setIsLoading] = useState(false); - console.log(user.id); const router = useRouter(); diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx index 0b70a961..8c6a4c87 100644 --- a/src/pages/(admin)/BatchCodeGenerator.tsx +++ b/src/pages/(admin)/BatchCodeGenerator.tsx @@ -46,8 +46,6 @@ export default function BatchCodeGenerator({user}: {user: User}) { readAs: "ArrayBuffer", }); - useEffect(() => console.log(expiryDate), [expiryDate]); - useEffect(() => { if (!isExpiryDateEnabled) setExpiryDate(null); }, [isExpiryDateEnabled]); diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx index dd351f1c..23b941a5 100644 --- a/src/pages/(admin)/Lists/UserList.tsx +++ b/src/pages/(admin)/Lists/UserList.tsx @@ -1,942 +1,650 @@ import Button from "@/components/Low/Button"; -import { PERMISSIONS } from "@/constants/userPermissions"; +import {PERMISSIONS} from "@/constants/userPermissions"; import useGroups from "@/hooks/useGroups"; import useUsers from "@/hooks/useUsers"; -import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user"; -import { Popover, Transition } from "@headlessui/react"; -import { - createColumnHelper, - flexRender, - getCoreRowModel, - useReactTable, -} from "@tanstack/react-table"; +import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user"; +import {Popover, Transition} from "@headlessui/react"; +import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table"; import axios from "axios"; import clsx from "clsx"; -import { capitalize, reverse } from "lodash"; +import {capitalize, reverse} from "lodash"; import moment from "moment"; -import { Fragment, useEffect, useState } from "react"; -import { - BsArrowDown, - BsArrowDownUp, - BsArrowUp, - BsCheck, - BsCheckCircle, - BsEye, - BsFillExclamationOctagonFill, - BsPerson, - BsTrash, -} from "react-icons/bs"; -import { toast } from "react-toastify"; -import { countries, TCountries } from "countries-list"; +import {Fragment, useEffect, useState} from "react"; +import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs"; +import {toast} from "react-toastify"; +import {countries, TCountries} from "countries-list"; import countryCodes from "country-codes-list"; import Modal from "@/components/Modal"; import UserCard from "@/components/UserCard"; -import { - getUserCompanyName, - isAgentUser, - USER_TYPE_LABELS, -} from "@/resources/user"; +import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user"; import useFilterStore from "@/stores/listFilterStore"; -import { useRouter } from "next/router"; -import { isCorporateUser } from "@/resources/user"; -import { useListSearch } from "@/hooks/useListSearch"; -import { getUserCorporate } from "@/utils/groups"; -import { asyncSorter } from "@/utils"; -import { exportListToExcel, UserListRow } from "@/utils/users"; +import {useRouter} from "next/router"; +import {isCorporateUser} from "@/resources/user"; +import {useListSearch} from "@/hooks/useListSearch"; +import {getUserCorporate} from "@/utils/groups"; +import {asyncSorter} from "@/utils"; +import {exportListToExcel, UserListRow} from "@/utils/users"; const columnHelper = createColumnHelper(); -const searchFields = [ - ["name"], - ["email"], - ["corporateInformation", "companyInformation", "name"], -]; +const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]]; -const CompanyNameCell = ({ - users, - user, - groups, -}: { - user: User; - users: User[]; - groups: Group[]; -}) => { - const [companyName, setCompanyName] = useState(""); - const [isLoading, setIsLoading] = useState(false); +const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => { + const [companyName, setCompanyName] = useState(""); + const [isLoading, setIsLoading] = useState(false); - useEffect(() => { - const name = getUserCompanyName(user, users, groups); - setCompanyName(name); - }, [user, users, groups]); + useEffect(() => { + const name = getUserCompanyName(user, users, groups); + setCompanyName(name); + }, [user, users, groups]); - return isLoading ? ( - Loading... - ) : ( - <>{companyName} - ); + return isLoading ? Loading... : <>{companyName}; }; export default function UserList({ - user, - filters = [], - renderHeader, + user, + filters = [], + renderHeader, }: { - user: User; - filters?: ((user: User) => boolean)[]; - renderHeader?: (total: number) => JSX.Element; + user: User; + filters?: ((user: User) => boolean)[]; + renderHeader?: (total: number) => JSX.Element; }) { - const [showDemographicInformation, setShowDemographicInformation] = - useState(false); - const [sorter, setSorter] = useState(); - const [displayUsers, setDisplayUsers] = useState([]); - const [selectedUser, setSelectedUser] = useState(); + const [showDemographicInformation, setShowDemographicInformation] = useState(false); + const [sorter, setSorter] = useState(); + const [displayUsers, setDisplayUsers] = useState([]); + const [selectedUser, setSelectedUser] = useState(); - const { users, reload } = useUsers(); - const { groups } = useGroups( - user && (user?.type === "corporate" || user?.type === "teacher") - ? user.id - : undefined - ); + const {users, reload} = useUsers(); + const {groups} = useGroups(user && (user?.type === "corporate" || user?.type === "teacher") ? user.id : undefined); - const appendUserFilters = useFilterStore((state) => state.appendUserFilter); - const router = useRouter(); + const appendUserFilters = useFilterStore((state) => state.appendUserFilter); + const router = useRouter(); - const expirationDateColor = (date: Date) => { - const momentDate = moment(date); - const today = moment(new Date()); + const expirationDateColor = (date: Date) => { + const momentDate = moment(date); + const today = moment(new Date()); - if (today.isAfter(momentDate)) - return "!text-mti-red-light font-bold line-through"; - if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light"; - if (today.add(2, "weeks").isAfter(momentDate)) - return "!text-mti-rose-light"; - if (today.add(1, "months").isAfter(momentDate)) - return "!text-mti-orange-light"; - }; + if (today.isAfter(momentDate)) return "!text-mti-red-light font-bold line-through"; + if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light"; + if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light"; + if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light"; + }; - useEffect(() => { - (async () => { - if (user && users) { - const filterUsers = - user.type === "corporate" || user.type === "teacher" - ? users.filter((u) => - groups.flatMap((g) => g.participants).includes(u.id) - ) - : users; + useEffect(() => { + (async () => { + if (user && users) { + const filterUsers = + user.type === "corporate" || user.type === "teacher" + ? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id)) + : users; - const filteredUsers = filters.reduce( - (d, f) => d.filter(f), - filterUsers - ); - const sortedUsers = await asyncSorter( - filteredUsers, - sortFunction - ); - console.log(sortedUsers); + const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers); + const sortedUsers = await asyncSorter(filteredUsers, sortFunction); - setDisplayUsers([...sortedUsers]); - } - })(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [user, users, sorter, groups]); + setDisplayUsers([...sortedUsers]); + } + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [user, users, sorter, groups]); - const deleteAccount = (user: User) => { - if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) - return; + const deleteAccount = (user: User) => { + if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return; - axios - .delete<{ ok: boolean }>(`/api/user?id=${user.id}`) - .then(() => { - toast.success("User deleted successfully!"); - reload(); - }) - .catch(() => { - toast.error("Something went wrong!", { toastId: "delete-error" }); - }) - .finally(reload); - }; + axios + .delete<{ok: boolean}>(`/api/user?id=${user.id}`) + .then(() => { + toast.success("User deleted successfully!"); + reload(); + }) + .catch(() => { + toast.error("Something went wrong!", {toastId: "delete-error"}); + }) + .finally(reload); + }; - const updateAccountType = (user: User, type: Type) => { - if ( - !confirm( - `Are you sure you want to update ${ - user.name - }'s account from ${capitalize(user.type)} to ${capitalize(type)}?` - ) - ) - return; + const updateAccountType = (user: User, type: Type) => { + if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return; - axios - .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, { - ...user, - type, - }) - .then(() => { - toast.success("User type updated successfully!"); - reload(); - }) - .catch(() => { - toast.error("Something went wrong!", { toastId: "update-error" }); - }); - }; + axios + .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, { + ...user, + type, + }) + .then(() => { + toast.success("User type updated successfully!"); + reload(); + }) + .catch(() => { + toast.error("Something went wrong!", {toastId: "update-error"}); + }); + }; - const verifyAccount = (user: User) => { - axios - .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, { - ...user, - isVerified: true, - }) - .then(() => { - toast.success("User verified successfully!"); - reload(); - }) - .catch(() => { - toast.error("Something went wrong!", { toastId: "update-error" }); - }); - }; + const verifyAccount = (user: User) => { + axios + .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, { + ...user, + isVerified: true, + }) + .then(() => { + toast.success("User verified successfully!"); + reload(); + }) + .catch(() => { + toast.error("Something went wrong!", {toastId: "update-error"}); + }); + }; - const toggleDisableAccount = (user: User) => { - if ( - !confirm( - `Are you sure you want to ${ - user.status === "disabled" ? "enable" : "disable" - } ${ - user.name - }'s account? This change is usually related to their payment state.` - ) - ) - return; + const toggleDisableAccount = (user: User) => { + if ( + !confirm( + `Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${ + user.name + }'s account? This change is usually related to their payment state.`, + ) + ) + return; - axios - .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, { - ...user, - status: user.status === "disabled" ? "active" : "disabled", - }) - .then(() => { - toast.success( - `User ${ - user.status === "disabled" ? "enabled" : "disabled" - } successfully!` - ); - reload(); - }) - .catch(() => { - toast.error("Something went wrong!", { toastId: "update-error" }); - }); - }; + axios + .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, { + ...user, + status: user.status === "disabled" ? "active" : "disabled", + }) + .then(() => { + toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`); + reload(); + }) + .catch(() => { + toast.error("Something went wrong!", {toastId: "update-error"}); + }); + }; - const SorterArrow = ({ name }: { name: string }) => { - if (sorter === name) return ; - if (sorter === reverseString(name)) return ; + const SorterArrow = ({name}: {name: string}) => { + if (sorter === name) return ; + if (sorter === reverseString(name)) return ; - return ; - }; + return ; + }; - const actionColumn = ({ row }: { row: { original: User } }) => { - return ( -
- {PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( - - -
- -
- - - -
- - - - -
- - - - )} - {!row.original.isVerified && - PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( -
verifyAccount(row.original)} - > - -
- )} - {PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( -
toggleDisableAccount(row.original)} - > - {row.original.status === "disabled" ? ( - - ) : ( - - )} -
- )} - {PERMISSIONS.deleteUser[row.original.type].includes(user.type) && ( -
deleteAccount(row.original)} - > - -
- )} -
- ); - }; + const actionColumn = ({row}: {row: {original: User}}) => { + return ( +
+ {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && ( + + +
+ +
+ + + +
+ + + + +
+ + + + )} + {!row.original.isVerified && PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && ( +
verifyAccount(row.original)}> + +
+ )} + {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && ( +
toggleDisableAccount(row.original)}> + {row.original.status === "disabled" ? ( + + ) : ( + + )} +
+ )} + {PERMISSIONS.deleteUser[row.original.type]?.includes(user.type) && ( +
deleteAccount(row.original)}> + +
+ )} +
+ ); + }; - const demographicColumns = [ - columnHelper.accessor("name", { - header: ( - - ) as any, - cell: ({ row, getValue }) => ( -
- PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) - ? setSelectedUser(row.original) - : null - } - > - {getValue()} -
- ), - }), - columnHelper.accessor("demographicInformation.country", { - header: ( - - ) as any, - cell: (info) => - info.getValue() - ? `${ - countryCodes.findOne("countryCode" as any, info.getValue()).flag - } ${ - countries[info.getValue() as unknown as keyof TCountries].name - } (+${ - countryCodes.findOne("countryCode" as any, info.getValue()) - .countryCallingCode - })` - : "Not available", - }), - columnHelper.accessor("demographicInformation.phone", { - header: ( - - ) as any, - cell: (info) => info.getValue() || "Not available", - enableSorting: true, - }), - columnHelper.accessor( - (x) => - x.type === "corporate" - ? x.demographicInformation?.position - : x.demographicInformation?.employment, - { - id: "employment", - header: ( - - ) as any, - cell: (info) => - (info.row.original.type === "corporate" - ? info.getValue() - : capitalize(info.getValue())) || "Not available", - enableSorting: true, - } - ), - columnHelper.accessor("demographicInformation.gender", { - header: ( - - ) as any, - cell: (info) => capitalize(info.getValue()) || "Not available", - enableSorting: true, - }), - { - header: ( - setShowDemographicInformation((prev) => !prev)} - > - Switch - - ), - id: "actions", - cell: actionColumn, - }, - ]; + const demographicColumns = [ + columnHelper.accessor("name", { + header: ( + + ) as any, + cell: ({row, getValue}) => ( +
(PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}> + {getValue()} +
+ ), + }), + columnHelper.accessor("demographicInformation.country", { + header: ( + + ) as any, + cell: (info) => + info.getValue() + ? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${ + countries[info.getValue() as unknown as keyof TCountries].name + } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})` + : "Not available", + }), + columnHelper.accessor("demographicInformation.phone", { + header: ( + + ) as any, + cell: (info) => info.getValue() || "Not available", + enableSorting: true, + }), + columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), { + id: "employment", + header: ( + + ) as any, + cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available", + enableSorting: true, + }), + columnHelper.accessor("demographicInformation.gender", { + header: ( + + ) as any, + cell: (info) => capitalize(info.getValue()) || "Not available", + enableSorting: true, + }), + { + header: ( + setShowDemographicInformation((prev) => !prev)}> + Switch + + ), + id: "actions", + cell: actionColumn, + }, + ]; - const defaultColumns = [ - columnHelper.accessor("name", { - header: ( - - ) as any, - cell: ({ row, getValue }) => ( -
- PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) - ? setSelectedUser(row.original) - : null - } - > - {row.original.type === "corporate" - ? row.original.corporateInformation?.companyInformation?.name || - getValue() - : getValue()} -
- ), - }), - columnHelper.accessor("email", { - header: ( - - ) as any, - cell: ({ row, getValue }) => ( -
- PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) - ? setSelectedUser(row.original) - : null - } - > - {getValue()} -
- ), - }), - columnHelper.accessor("type", { - header: ( - - ) as any, - cell: (info) => USER_TYPE_LABELS[info.getValue()], - }), - columnHelper.accessor("corporateInformation.companyInformation.name", { - header: ( - - ) as any, - cell: (info) => ( - - ), - }), - columnHelper.accessor("subscriptionExpirationDate", { - header: ( - - ) as any, - cell: (info) => ( - - {!info.getValue() - ? "No expiry date" - : moment(info.getValue()).format("DD/MM/YYYY")} - - ), - }), - columnHelper.accessor("isVerified", { - header: ( - - ) as any, - cell: (info) => ( -
-
- -
-
- ), - }), - { - header: ( - setShowDemographicInformation((prev) => !prev)} - > - Switch - - ), - id: "actions", - cell: actionColumn, - }, - ]; + const defaultColumns = [ + columnHelper.accessor("name", { + header: ( + + ) as any, + cell: ({row, getValue}) => ( +
(PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}> + {row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()} +
+ ), + }), + columnHelper.accessor("email", { + header: ( + + ) as any, + cell: ({row, getValue}) => ( +
(PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}> + {getValue()} +
+ ), + }), + columnHelper.accessor("type", { + header: ( + + ) as any, + cell: (info) => USER_TYPE_LABELS[info.getValue()], + }), + columnHelper.accessor("corporateInformation.companyInformation.name", { + header: ( + + ) as any, + cell: (info) => , + }), + columnHelper.accessor("subscriptionExpirationDate", { + header: ( + + ) as any, + cell: (info) => ( + + {!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")} + + ), + }), + columnHelper.accessor("isVerified", { + header: ( + + ) as any, + cell: (info) => ( +
+
+ +
+
+ ), + }), + { + header: ( + setShowDemographicInformation((prev) => !prev)}> + Switch + + ), + id: "actions", + cell: actionColumn, + }, + ]; - const reverseString = (str: string) => reverse(str.split("")).join(""); + const reverseString = (str: string) => reverse(str.split("")).join(""); - const selectSorter = (previous: string | undefined, name: string) => { - if (!previous) return name; - if (previous === name) return reverseString(name); + const selectSorter = (previous: string | undefined, name: string) => { + if (!previous) return name; + if (previous === name) return reverseString(name); - return undefined; - }; + return undefined; + }; - const sortFunction = async (a: User, b: User) => { - if (sorter === "name" || sorter === reverseString("name")) - return sorter === "name" - ? a.name.localeCompare(b.name) - : b.name.localeCompare(a.name); + const sortFunction = async (a: User, b: User) => { + if (sorter === "name" || sorter === reverseString("name")) + return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name); - if (sorter === "email" || sorter === reverseString("email")) - return sorter === "email" - ? a.email.localeCompare(b.email) - : b.email.localeCompare(a.email); + if (sorter === "email" || sorter === reverseString("email")) + return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email); - if (sorter === "type" || sorter === reverseString("type")) - return sorter === "type" - ? userTypes.findIndex((t) => a.type === t) - - userTypes.findIndex((t) => b.type === t) - : userTypes.findIndex((t) => b.type === t) - - userTypes.findIndex((t) => a.type === t); + if (sorter === "type" || sorter === reverseString("type")) + return sorter === "type" + ? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t) + : userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t); - if (sorter === "verification" || sorter === reverseString("verification")) - return sorter === "verification" - ? a.isVerified.toString().localeCompare(b.isVerified.toString()) - : b.isVerified.toString().localeCompare(a.isVerified.toString()); + if (sorter === "verification" || sorter === reverseString("verification")) + return sorter === "verification" + ? a.isVerified.toString().localeCompare(b.isVerified.toString()) + : b.isVerified.toString().localeCompare(a.isVerified.toString()); - if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) { - if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) - return sorter === "expiryDate" ? -1 : 1; - if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) - return sorter === "expiryDate" ? 1 : -1; - if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) - return 0; - if ( - moment(a.subscriptionExpirationDate).isAfter( - b.subscriptionExpirationDate - ) - ) - return sorter === "expiryDate" ? -1 : 1; - if ( - moment(b.subscriptionExpirationDate).isAfter( - a.subscriptionExpirationDate - ) - ) - return sorter === "expiryDate" ? 1 : -1; - return 0; - } + if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) { + if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1; + if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1; + if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0; + if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1; + if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1; + return 0; + } - if (sorter === "country" || sorter === reverseString("country")) { - if ( - !a.demographicInformation?.country && - b.demographicInformation?.country - ) - return sorter === "country" ? -1 : 1; - if ( - a.demographicInformation?.country && - !b.demographicInformation?.country - ) - return sorter === "country" ? 1 : -1; - if ( - !a.demographicInformation?.country && - !b.demographicInformation?.country - ) - return 0; + if (sorter === "country" || sorter === reverseString("country")) { + if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1; + if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1; + if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0; - return sorter === "country" - ? a.demographicInformation!.country.localeCompare( - b.demographicInformation!.country - ) - : b.demographicInformation!.country.localeCompare( - a.demographicInformation!.country - ); - } + return sorter === "country" + ? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country) + : b.demographicInformation!.country.localeCompare(a.demographicInformation!.country); + } - if (sorter === "phone" || sorter === reverseString("phone")) { - if (!a.demographicInformation?.phone && b.demographicInformation?.phone) - return sorter === "phone" ? -1 : 1; - if (a.demographicInformation?.phone && !b.demographicInformation?.phone) - return sorter === "phone" ? 1 : -1; - if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) - return 0; + if (sorter === "phone" || sorter === reverseString("phone")) { + if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1; + if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1; + if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0; - return sorter === "phone" - ? a.demographicInformation!.phone.localeCompare( - b.demographicInformation!.phone - ) - : b.demographicInformation!.phone.localeCompare( - a.demographicInformation!.phone - ); - } + return sorter === "phone" + ? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone) + : b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone); + } - if (sorter === "employment" || sorter === reverseString("employment")) { - const aSortingItem = - a.type === "corporate" - ? a.demographicInformation?.position - : a.demographicInformation?.employment; - const bSortingItem = - b.type === "corporate" - ? b.demographicInformation?.position - : b.demographicInformation?.employment; + if (sorter === "employment" || sorter === reverseString("employment")) { + const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment; + const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment; - if (!aSortingItem && bSortingItem) - return sorter === "employment" ? -1 : 1; - if (aSortingItem && !bSortingItem) - return sorter === "employment" ? 1 : -1; - if (!aSortingItem && !bSortingItem) return 0; + if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1; + if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1; + if (!aSortingItem && !bSortingItem) return 0; - return sorter === "employment" - ? aSortingItem!.localeCompare(bSortingItem!) - : bSortingItem!.localeCompare(aSortingItem!); - } + return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!); + } - if (sorter === "gender" || sorter === reverseString("gender")) { - if (!a.demographicInformation?.gender && b.demographicInformation?.gender) - return sorter === "employment" ? -1 : 1; - if (a.demographicInformation?.gender && !b.demographicInformation?.gender) - return sorter === "employment" ? 1 : -1; - if ( - !a.demographicInformation?.gender && - !b.demographicInformation?.gender - ) - return 0; + if (sorter === "gender" || sorter === reverseString("gender")) { + if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1; + if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1; + if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0; - return sorter === "gender" - ? a.demographicInformation!.gender.localeCompare( - b.demographicInformation!.gender - ) - : b.demographicInformation!.gender.localeCompare( - a.demographicInformation!.gender - ); - } + return sorter === "gender" + ? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender) + : b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender); + } - if (sorter === "companyName" || sorter === reverseString("companyName")) { - const aCorporateName = getUserCompanyName(a, users, groups); - const bCorporateName = getUserCompanyName(b, users, groups); - if (!aCorporateName && bCorporateName) - return sorter === "companyName" ? -1 : 1; - if (aCorporateName && !bCorporateName) - return sorter === "companyName" ? 1 : -1; - if (!aCorporateName && !bCorporateName) return 0; + if (sorter === "companyName" || sorter === reverseString("companyName")) { + const aCorporateName = getUserCompanyName(a, users, groups); + const bCorporateName = getUserCompanyName(b, users, groups); + if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1; + if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1; + if (!aCorporateName && !bCorporateName) return 0; - return sorter === "companyName" - ? aCorporateName.localeCompare(bCorporateName) - : bCorporateName.localeCompare(aCorporateName); - } + return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName); + } - return a.id.localeCompare(b.id); - }; + return a.id.localeCompare(b.id); + }; - const { rows: filteredRows, renderSearch } = useListSearch( - searchFields, - displayUsers - ); + const {rows: filteredRows, renderSearch} = useListSearch(searchFields, displayUsers); - const table = useReactTable({ - data: filteredRows, - columns: (!showDemographicInformation - ? defaultColumns - : demographicColumns) as any, - getCoreRowModel: getCoreRowModel(), - }); + const table = useReactTable({ + data: filteredRows, + columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any, + getCoreRowModel: getCoreRowModel(), + }); - const downloadExcel = () => { - const csv = exportListToExcel(filteredRows, users, groups); + const downloadExcel = () => { + const csv = exportListToExcel(filteredRows, users, groups); - const element = document.createElement("a"); - const file = new Blob([csv], { type: "text/csv" }); - element.href = URL.createObjectURL(file); - element.download = "users.csv"; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - }; + const element = document.createElement("a"); + const file = new Blob([csv], {type: "text/csv"}); + element.href = URL.createObjectURL(file); + element.download = "users.csv"; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + }; - const viewStudentFilter = (x: User) => x.type === "student"; - const viewTeacherFilter = (x: User) => x.type === "teacher"; - const belongsToAdminFilter = (x: User) => { - if (!selectedUser) return false; - return groups - .filter( - (g) => - g.admin === selectedUser.id || - g.participants.includes(selectedUser.id) - ) - .flatMap((g) => g.participants) - .includes(x.id); - }; + const viewStudentFilter = (x: User) => x.type === "student"; + const viewTeacherFilter = (x: User) => x.type === "teacher"; + const belongsToAdminFilter = (x: User) => { + if (!selectedUser) return false; + return groups + .filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id)) + .flatMap((g) => g.participants) + .includes(x.id); + }; - const viewStudentFilterBelongsToAdmin = (x: User) => - x.type === "student" && belongsToAdminFilter(x); - const viewTeacherFilterBelongsToAdmin = (x: User) => - x.type === "teacher" && belongsToAdminFilter(x); + const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x); + const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x); - const renderUserCard = (selectedUser: User) => { - const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin); - const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin); - return ( -
- 0 - ? () => { - appendUserFilters({ - id: "view-students", - filter: viewStudentFilter, - }); - appendUserFilters({ - id: "belongs-to-admin", - filter: belongsToAdminFilter, - }); + const renderUserCard = (selectedUser: User) => { + const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin); + const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin); + return ( +
+ 0 + ? () => { + appendUserFilters({ + id: "view-students", + filter: viewStudentFilter, + }); + appendUserFilters({ + id: "belongs-to-admin", + filter: belongsToAdminFilter, + }); - router.push("/list/users"); - } - : undefined - } - onViewTeachers={ - (selectedUser.type === "corporate" || - selectedUser.type === "student") && - teachersFromAdmin.length > 0 - ? () => { - appendUserFilters({ - id: "view-teachers", - filter: viewTeacherFilter, - }); - appendUserFilters({ - id: "belongs-to-admin", - filter: belongsToAdminFilter, - }); + router.push("/list/users"); + } + : undefined + } + onViewTeachers={ + (selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0 + ? () => { + appendUserFilters({ + id: "view-teachers", + filter: viewTeacherFilter, + }); + appendUserFilters({ + id: "belongs-to-admin", + filter: belongsToAdminFilter, + }); - router.push("/list/users"); - } - : undefined - } - onViewCorporate={ - selectedUser.type === "teacher" || selectedUser.type === "student" - ? () => { - appendUserFilters({ - id: "view-corporate", - filter: (x: User) => x.type === "corporate", - }); - appendUserFilters({ - id: "belongs-to-admin", - filter: (x: User) => - groups - .filter((g) => g.participants.includes(selectedUser.id)) - .flatMap((g) => [g.admin, ...g.participants]) - .includes(x.id), - }); + router.push("/list/users"); + } + : undefined + } + onViewCorporate={ + selectedUser.type === "teacher" || selectedUser.type === "student" + ? () => { + appendUserFilters({ + id: "view-corporate", + filter: (x: User) => x.type === "corporate", + }); + appendUserFilters({ + id: "belongs-to-admin", + filter: (x: User) => + groups + .filter((g) => g.participants.includes(selectedUser.id)) + .flatMap((g) => [g.admin, ...g.participants]) + .includes(x.id), + }); - router.push("/list/users"); - } - : undefined - } - onClose={(shouldReload) => { - setSelectedUser(undefined); - if (shouldReload) reload(); - }} - user={selectedUser} - /> -
- ); - }; + router.push("/list/users"); + } + : undefined + } + onClose={(shouldReload) => { + setSelectedUser(undefined); + if (shouldReload) reload(); + }} + user={selectedUser} + /> +
+ ); + }; - return ( - <> - {renderHeader && renderHeader(displayUsers.length)} -
- setSelectedUser(undefined)} - > - {selectedUser && renderUserCard(selectedUser)} - -
-
- {renderSearch()} - -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} -
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} -
-
-
- - ); + return ( + <> + {renderHeader && renderHeader(displayUsers.length)} +
+ setSelectedUser(undefined)}> + {selectedUser && renderUserCard(selectedUser)} + +
+
+ {renderSearch()} + +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + +
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+
+
+ + ); } diff --git a/src/pages/(generation)/LevelGeneration.tsx b/src/pages/(generation)/LevelGeneration.tsx index b6cb9013..fb692173 100644 --- a/src/pages/(generation)/LevelGeneration.tsx +++ b/src/pages/(generation)/LevelGeneration.tsx @@ -86,7 +86,6 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelPart; difficulty: Dif axios .get(`/api/exam/level/generate/level?${url.toString()}`) .then((result) => { - console.log({data: result.data}); playSound(typeof result.data === "string" ? "error" : "check"); if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again."); setExam(result.data); From 10a32437561d73992f1ceea03edc65475dfc0bfa Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Tue, 23 Jul 2024 14:43:24 +0100 Subject: [PATCH 3/3] Updated it to work with the new canges --- src/pages/(exam)/ExamPage.tsx | 2 +- src/pages/record.tsx | 1001 +++++++++++++++------------------ src/utils/evaluation.ts | 2 +- 3 files changed, 454 insertions(+), 551 deletions(-) diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx index 52a81e5e..3e3a8a7c 100644 --- a/src/pages/(exam)/ExamPage.tsx +++ b/src/pages/(exam)/ExamPage.tsx @@ -357,7 +357,7 @@ export default function ExamPage({page}: Props) { exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID, - index === 0 ? 1 : 2, + index + 1, ); }), ) diff --git a/src/pages/record.tsx b/src/pages/record.tsx index fb468dfb..1a934a6a 100644 --- a/src/pages/record.tsx +++ b/src/pages/record.tsx @@ -1,614 +1,517 @@ /* eslint-disable @next/next/no-img-element */ import Head from "next/head"; -import { withIronSessionSsr } from "iron-session/next"; -import { sessionOptions } from "@/lib/session"; -import { Stat, User } from "@/interfaces/user"; -import { useEffect, useState } from "react"; +import {withIronSessionSsr} from "iron-session/next"; +import {sessionOptions} from "@/lib/session"; +import {Stat, User} from "@/interfaces/user"; +import {useEffect, useState} from "react"; import useStats from "@/hooks/useStats"; -import { convertToUserSolutions, groupByDate } from "@/utils/stats"; +import {convertToUserSolutions, groupByDate} from "@/utils/stats"; import moment from "moment"; import useUsers from "@/hooks/useUsers"; import useExamStore from "@/stores/examStore"; -import { Module } from "@/interfaces"; -import { ToastContainer } from "react-toastify"; -import { useRouter } from "next/router"; -import { uniqBy } from "lodash"; -import { getExamById } from "@/utils/exams"; -import { sortByModule } from "@/utils/moduleUtils"; +import {Module} from "@/interfaces"; +import {ToastContainer} from "react-toastify"; +import {useRouter} from "next/router"; +import {uniqBy} from "lodash"; +import {getExamById} from "@/utils/exams"; +import {sortByModule} from "@/utils/moduleUtils"; import Layout from "@/components/High/Layout"; import clsx from "clsx"; -import { calculateBandScore } from "@/utils/score"; -import { - BsBook, - BsClipboard, - BsClock, - BsHeadphones, - BsMegaphone, - BsPen, - BsPersonDash, - BsPersonFillX, - BsXCircle, -} from "react-icons/bs"; +import {calculateBandScore} from "@/utils/score"; +import {BsBook, BsClipboard, BsClock, BsHeadphones, BsMegaphone, BsPen, BsPersonDash, BsPersonFillX, BsXCircle} from "react-icons/bs"; import Select from "@/components/Low/Select"; import useGroups from "@/hooks/useGroups"; -import { shouldRedirectHome } from "@/utils/navigation.disabled"; +import {shouldRedirectHome} from "@/utils/navigation.disabled"; import useAssignments from "@/hooks/useAssignments"; -import { uuidv4 } from "@firebase/util"; -import { usePDFDownload } from "@/hooks/usePDFDownload"; +import {uuidv4} from "@firebase/util"; +import {usePDFDownload} from "@/hooks/usePDFDownload"; import useRecordStore from "@/stores/recordStore"; -export const getServerSideProps = withIronSessionSsr(({ req, res }) => { - const user = req.session.user; +export const getServerSideProps = withIronSessionSsr(({req, res}) => { + const user = req.session.user; - if (!user || !user.isVerified) { - return { - redirect: { - destination: "/login", - permanent: false, - }, - }; - } + if (!user || !user.isVerified) { + return { + redirect: { + destination: "/login", + permanent: false, + }, + }; + } - if (shouldRedirectHome(user)) { - return { - redirect: { - destination: "/", - permanent: false, - }, - }; - } + if (shouldRedirectHome(user)) { + return { + redirect: { + destination: "/", + permanent: false, + }, + }; + } - return { - props: { user: req.session.user }, - }; + return { + props: {user: req.session.user}, + }; }, sessionOptions); const defaultSelectableCorporate = { - value: "", - label: "All", + value: "", + label: "All", }; -export default function History({ user }: { user: User }) { - const [statsUserId, setStatsUserId] = useRecordStore((state) => [ - state.selectedUser, - state.setSelectedUser, - ]); - // const [statsUserId, setStatsUserId] = useState(user.id); - const [groupedStats, setGroupedStats] = useState<{ [key: string]: Stat[] }>(); - const [filter, setFilter] = useState< - "months" | "weeks" | "days" | "assignments" - >(); - const { assignments } = useAssignments({}); +export default function History({user}: {user: User}) { + const [statsUserId, setStatsUserId] = useRecordStore((state) => [state.selectedUser, state.setSelectedUser]); + // const [statsUserId, setStatsUserId] = useState(user.id); + const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>(); + const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">(); + const {assignments} = useAssignments({}); - const { users } = useUsers(); - const { stats, isLoading: isStatsLoading } = useStats(statsUserId); - const { groups: allGroups } = useGroups(); + const {users} = useUsers(); + const {stats, isLoading: isStatsLoading} = useStats(statsUserId); + const {groups: allGroups} = useGroups(); - const groups = allGroups.filter((x) => x.admin === user.id); + const groups = allGroups.filter((x) => x.admin === user.id); - const setExams = useExamStore((state) => state.setExams); - const setShowSolutions = useExamStore((state) => state.setShowSolutions); - const setUserSolutions = useExamStore((state) => state.setUserSolutions); - const setSelectedModules = useExamStore((state) => state.setSelectedModules); - const setInactivity = useExamStore((state) => state.setInactivity); - const setTimeSpent = useExamStore((state) => state.setTimeSpent); - const router = useRouter(); - const renderPdfIcon = usePDFDownload("stats"); + const setExams = useExamStore((state) => state.setExams); + const setShowSolutions = useExamStore((state) => state.setShowSolutions); + const setUserSolutions = useExamStore((state) => state.setUserSolutions); + const setSelectedModules = useExamStore((state) => state.setSelectedModules); + const setInactivity = useExamStore((state) => state.setInactivity); + const setTimeSpent = useExamStore((state) => state.setTimeSpent); + const router = useRouter(); + const renderPdfIcon = usePDFDownload("stats"); - useEffect(() => { - if (stats && !isStatsLoading) { - setGroupedStats( - groupByDate( - stats.filter((x) => { - if ( - (x.module === "writing" || x.module === "speaking") && - !x.isDisabled && - !x.solutions.every((y) => Object.keys(y).includes("evaluation")) - ) - return false; - return true; - }) - ) - ); - } - }, [stats, isStatsLoading]); + useEffect(() => { + if (stats && !isStatsLoading) { + setGroupedStats( + groupByDate( + stats.filter((x) => { + if ( + (x.module === "writing" || x.module === "speaking") && + !x.isDisabled && + !x.solutions.every((y) => Object.keys(y).includes("evaluation")) + ) + return false; + return true; + }), + ), + ); + } + }, [stats, isStatsLoading]); - // useEffect(() => { - // // just set this initially - // if (!statsUserId) setStatsUserId(user.id); - // }, []); + // useEffect(() => { + // // just set this initially + // if (!statsUserId) setStatsUserId(user.id); + // }, []); - const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => { - setFilter((prev) => (prev === value ? undefined : value)); - }; + const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => { + setFilter((prev) => (prev === value ? undefined : value)); + }; - const filterStatsByDate = (stats: { [key: string]: Stat[] }) => { - if (filter && filter !== "assignments") { - const filterDate = moment() - .subtract({ [filter as string]: 1 }) - .format("x"); - const filteredStats: { [key: string]: Stat[] } = {}; + const filterStatsByDate = (stats: {[key: string]: Stat[]}) => { + if (filter && filter !== "assignments") { + const filterDate = moment() + .subtract({[filter as string]: 1}) + .format("x"); + const filteredStats: {[key: string]: Stat[]} = {}; - Object.keys(stats).forEach((timestamp) => { - if (timestamp >= filterDate) - filteredStats[timestamp] = stats[timestamp]; - }); + Object.keys(stats).forEach((timestamp) => { + if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp]; + }); - return filteredStats; - } + return filteredStats; + } - if (filter && filter === "assignments") { - const filteredStats: { [key: string]: Stat[] } = {}; + if (filter && filter === "assignments") { + const filteredStats: {[key: string]: Stat[]} = {}; - Object.keys(stats).forEach((timestamp) => { - if ( - stats[timestamp] - .map((s) => s.assignment === undefined) - .includes(false) - ) - filteredStats[timestamp] = [ - ...stats[timestamp].filter((s) => !!s.assignment), - ]; - }); + Object.keys(stats).forEach((timestamp) => { + if (stats[timestamp].map((s) => s.assignment === undefined).includes(false)) + filteredStats[timestamp] = [...stats[timestamp].filter((s) => !!s.assignment)]; + }); - return filteredStats; - } + return filteredStats; + } - return stats; - }; + return stats; + }; - const formatTimestamp = (timestamp: string) => { - const date = moment(parseInt(timestamp)); - const formatter = "YYYY/MM/DD - HH:mm"; + const formatTimestamp = (timestamp: string) => { + const date = moment(parseInt(timestamp)); + const formatter = "YYYY/MM/DD - HH:mm"; - return date.format(formatter); - }; + return date.format(formatter); + }; - const aggregateScoresByModule = ( - stats: Stat[] - ): { module: Module; total: number; missing: number; correct: number }[] => { - const scores: { - [key in Module]: { total: number; missing: number; correct: number }; - } = { - reading: { - total: 0, - correct: 0, - missing: 0, - }, - listening: { - total: 0, - correct: 0, - missing: 0, - }, - writing: { - total: 0, - correct: 0, - missing: 0, - }, - speaking: { - total: 0, - correct: 0, - missing: 0, - }, - level: { - total: 0, - correct: 0, - missing: 0, - }, - }; + const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => { + const scores: { + [key in Module]: {total: number; missing: number; correct: number}; + } = { + reading: { + total: 0, + correct: 0, + missing: 0, + }, + listening: { + total: 0, + correct: 0, + missing: 0, + }, + writing: { + total: 0, + correct: 0, + missing: 0, + }, + speaking: { + total: 0, + correct: 0, + missing: 0, + }, + level: { + total: 0, + correct: 0, + missing: 0, + }, + }; - stats.forEach((x) => { - scores[x.module!] = { - total: scores[x.module!].total + x.score.total, - correct: scores[x.module!].correct + x.score.correct, - missing: scores[x.module!].missing + x.score.missing, - }; - }); + stats.forEach((x) => { + scores[x.module!] = { + total: scores[x.module!].total + x.score.total, + correct: scores[x.module!].correct + x.score.correct, + missing: scores[x.module!].missing + x.score.missing, + }; + }); - return Object.keys(scores) - .filter((x) => scores[x as Module].total > 0) - .map((x) => ({ module: x as Module, ...scores[x as Module] })); - }; + return Object.keys(scores) + .filter((x) => scores[x as Module].total > 0) + .map((x) => ({module: x as Module, ...scores[x as Module]})); + }; - const customContent = (timestamp: string) => { - if (!groupedStats) return <>; + const customContent = (timestamp: string) => { + if (!groupedStats) return <>; - const dateStats = groupedStats[timestamp]; - const correct = dateStats.reduce( - (accumulator, current) => accumulator + current.score.correct, - 0 - ); - const total = dateStats.reduce( - (accumulator, current) => accumulator + current.score.total, - 0 - ); - const aggregatedScores = aggregateScoresByModule(dateStats).filter( - (x) => x.total > 0 - ); - const assignmentID = dateStats.reduce( - (_, current) => current.assignment as any, - "" - ); - const assignment = assignments.find((a) => a.id === assignmentID); - const isDisabled = dateStats.some((x) => x.isDisabled); + const dateStats = groupedStats[timestamp]; + const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0); + const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0); + const aggregatedScores = aggregateScoresByModule(dateStats).filter((x) => x.total > 0); + const assignmentID = dateStats.reduce((_, current) => current.assignment as any, ""); + const assignment = assignments.find((a) => a.id === assignmentID); + const isDisabled = dateStats.some((x) => x.isDisabled); - const aggregatedLevels = aggregatedScores.map((x) => ({ - module: x.module, - level: calculateBandScore(x.correct, x.total, x.module, user.focus), - })); + const aggregatedLevels = aggregatedScores.map((x) => ({ + module: x.module, + level: calculateBandScore(x.correct, x.total, x.module, user.focus), + })); - const { timeSpent, inactivity, session } = dateStats[0]; + const {timeSpent, inactivity, session} = dateStats[0]; - const selectExam = () => { - const examPromises = uniqBy(dateStats, "exam").map((stat) => { - console.log({ stat }); - return getExamById(stat.module, stat.exam); - }); + const selectExam = () => { + const examPromises = uniqBy(dateStats, "exam").map((stat) => { + console.log({stat}); + return getExamById(stat.module, stat.exam); + }); - Promise.all(examPromises).then((exams) => { - if (exams.every((x) => !!x)) { - if (!!timeSpent) setTimeSpent(timeSpent); - if (!!inactivity) setInactivity(inactivity); + if (isDisabled) return; - setUserSolutions(convertToUserSolutions(dateStats)); - setShowSolutions(true); - setExams(exams.map((x) => x!).sort(sortByModule)); - setSelectedModules( - exams - .map((x) => x!) - .sort(sortByModule) - .map((x) => x!.module) - ); - router.push("/exercises"); - } - }); - }; + Promise.all(examPromises).then((exams) => { + if (exams.every((x) => !!x)) { + if (!!timeSpent) setTimeSpent(timeSpent); + if (!!inactivity) setInactivity(inactivity); - const textColor = clsx( - correct / total >= 0.7 && "text-mti-purple", - correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red", - correct / total < 0.3 && "text-mti-rose" - ); + setUserSolutions(convertToUserSolutions(dateStats)); + setShowSolutions(true); + setExams(exams.map((x) => x!).sort(sortByModule)); + setSelectedModules( + exams + .map((x) => x!) + .sort(sortByModule) + .map((x) => x!.module), + ); + router.push("/exercises"); + } + }); + }; - const content = ( - <> -
-
- {formatTimestamp(timestamp)} -
- {!!timeSpent && ( - - {Math.floor(timeSpent / 60)} minutes - - )} - {!!inactivity && ( - - {Math.floor(inactivity / 60)} minutes - - )} -
-
-
- - Level{" "} - {( - aggregatedLevels.reduce( - (accumulator, current) => accumulator + current.level, - 0 - ) / aggregatedLevels.length - ).toFixed(1)} - - {renderPdfIcon(session, textColor, textColor)} -
-
+ const textColor = clsx( + correct / total >= 0.7 && "text-mti-purple", + correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red", + correct / total < 0.3 && "text-mti-rose", + ); -
-
- {aggregatedLevels.map(({ module, level }) => ( -
- {module === "reading" && } - {module === "listening" && } - {module === "writing" && } - {module === "speaking" && } - {module === "level" && } - {level.toFixed(1)} -
- ))} -
+ const content = ( + <> +
+
+ {formatTimestamp(timestamp)} +
+ {!!timeSpent && ( + + {Math.floor(timeSpent / 60)} minutes + + )} + {!!inactivity && ( + + {Math.floor(inactivity / 60)} minutes + + )} +
+
+
+ + Level{" "} + {(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)} + + {renderPdfIcon(session, textColor, textColor)} +
+
- {assignment && ( - - Assignment: {assignment.name}, Teacher:{" "} - {users.find((u) => u.id === assignment.assigner)?.name} - - )} -
- - ); +
+
+ {aggregatedLevels.map(({module, level}) => ( +
+ {module === "reading" && } + {module === "listening" && } + {module === "writing" && } + {module === "speaking" && } + {module === "level" && } + {level.toFixed(1)} +
+ ))} +
- return ( - <> -
= 0.7 && "hover:border-mti-purple", - correct / total >= 0.3 && - correct / total < 0.7 && - "hover:border-mti-red", - correct / total < 0.3 && "hover:border-mti-rose" - )} - onClick={isDisabled ? () => null : selectExam} - data-tip="This exam is still being evaluated..." - role="button" - > - {content} -
-
= 0.7 && "hover:border-mti-purple", - correct / total >= 0.3 && - correct / total < 0.7 && - "hover:border-mti-red", - correct / total < 0.3 && "hover:border-mti-rose" - )} - data-tip="Your screen size is too small to view previous exams." - role="button" - > - {content} -
- - ); - }; + {assignment && ( + + Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name} + + )} +
+ + ); - const selectableCorporates = [ - defaultSelectableCorporate, - ...users - .filter((x) => x.type === "corporate") - .map((x) => ({ - value: x.id, - label: `${x.name} - ${x.email}`, - })), - ]; + return ( + <> +
= 0.7 && "hover:border-mti-purple", + correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red", + correct / total < 0.3 && "hover:border-mti-rose", + )} + onClick={selectExam} + data-tip="This exam is still being evaluated..." + role="button"> + {content} +
+
= 0.7 && "hover:border-mti-purple", + correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red", + correct / total < 0.3 && "hover:border-mti-rose", + )} + data-tip="Your screen size is too small to view previous exams." + role="button"> + {content} +
+ + ); + }; - const [selectedCorporate, setSelectedCorporate] = useState( - defaultSelectableCorporate.value - ); + const selectableCorporates = [ + defaultSelectableCorporate, + ...users + .filter((x) => x.type === "corporate") + .map((x) => ({ + value: x.id, + label: `${x.name} - ${x.email}`, + })), + ]; - const getUsersList = (): User[] => { - if (selectedCorporate) { - // get groups for that corporate - const selectedCorporateGroups = allGroups.filter( - (x) => x.admin === selectedCorporate - ); + const [selectedCorporate, setSelectedCorporate] = useState(defaultSelectableCorporate.value); - // get the teacher ids for that group - const selectedCorporateGroupsParticipants = - selectedCorporateGroups.flatMap((x) => x.participants); + const getUsersList = (): User[] => { + if (selectedCorporate) { + // get groups for that corporate + const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate); - // // search for groups for these teachers - // const teacherGroups = allGroups.filter((x) => { - // return selectedCorporateGroupsParticipants.includes(x.admin); - // }); + // get the teacher ids for that group + const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants); - // const usersList = [ - // ...selectedCorporateGroupsParticipants, - // ...teacherGroups.flatMap((x) => x.participants), - // ]; - const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => - users.find((y) => y.id === x) - ) as User[]; - return userListWithUsers.filter((x) => x); - } + // // search for groups for these teachers + // const teacherGroups = allGroups.filter((x) => { + // return selectedCorporateGroupsParticipants.includes(x.admin); + // }); - return users || []; - }; + // const usersList = [ + // ...selectedCorporateGroupsParticipants, + // ...teacherGroups.flatMap((x) => x.participants), + // ]; + const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[]; + return userListWithUsers.filter((x) => x); + } - const corporateFilteredUserList = getUsersList(); + return users || []; + }; - const getSelectedUser = () => { - if (selectedCorporate) { - const userInCorporate = corporateFilteredUserList.find( - (x) => x.id === statsUserId - ); - return userInCorporate || corporateFilteredUserList[0]; - } + const corporateFilteredUserList = getUsersList(); - return users.find((x) => x.id === statsUserId) || user; - }; + const getSelectedUser = () => { + if (selectedCorporate) { + const userInCorporate = corporateFilteredUserList.find((x) => x.id === statsUserId); + return userInCorporate || corporateFilteredUserList[0]; + } - const selectedUser = getSelectedUser(); - const selectedUserSelectValue = selectedUser - ? { - value: selectedUser.id, - label: `${selectedUser.name} - ${selectedUser.email}`, - } - : { - value: "", - label: "", - }; - return ( - <> - - Record | EnCoach - - - - - - {user && ( - -
-
- {(user.type === "developer" || user.type === "admin") && ( - <> - + return users.find((x) => x.id === statsUserId) || user; + }; - - + const selectedUser = getSelectedUser(); + const selectedUserSelectValue = selectedUser + ? { + value: selectedUser.id, + label: `${selectedUser.name} - ${selectedUser.email}`, + } + : { + value: "", + label: "", + }; + return ( + <> + + Record | EnCoach + + + + + + {user && ( + +
+
+ {(user.type === "developer" || user.type === "admin") && ( + <> + - x.value === selectedCorporate)} + onChange={(value) => setSelectedCorporate(value?.value || "")} + styles={{ + menuPortal: (base) => ({...base, zIndex: 9999}), + option: (styles, state) => ({ + ...styles, + backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", + color: state.isFocused ? "black" : styles.color, + }), + }}> + - ({ + value: x.id, + label: `${x.name} - ${x.email}`, + }))} + value={selectedUserSelectValue} + onChange={(value) => setStatsUserId(value?.value)} + styles={{ + menuPortal: (base) => ({...base, zIndex: 9999}), + option: (styles, state) => ({ + ...styles, + backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", + color: state.isFocused ? "black" : styles.color, + }), + }} + /> + + )} + {(user.type === "corporate" || user.type === "teacher") && groups.length > 0 && ( + <> + + +