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

Merge branch 'main' into update-listening-format

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-04 14:05:04 +01:00
parent 551faadd28 925250d2c5
commit 73d3922f18
27 changed files with 920 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/(admin)/BatchCodeGenerator.tsx Normal file
View File

@@ -0,0 +1,86 @@
import Button from "@/components/Low/Button";
import {Type} from "@/interfaces/user";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useEffect, useState} from "react";
import {toast} from "react-toastify";
import ShortUniqueId from "short-unique-id";
import {useFilePicker} from "use-file-picker";
export default function BatchCodeGenerator() {
const [emails, setEmails] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(false);
const {openFilePicker, filesContent} = useFilePicker({
accept: ".txt",
multiple: false,
});
useEffect(() => {
if (filesContent.length > 0) {
const file = filesContent[0];
const emails = file.content
.split("\n")
.filter((x) => new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/).test(x));
if (emails.length === 0) {
toast.error("Please upload a .txt file containing e-mails, one per line!");
return;
}
setEmails(emails);
}
}, [filesContent]);
const generateCode = (type: Type) => {
const uid = new ShortUniqueId();
const codes = emails.map(() => uid.randomUUID(6));
setIsLoading(true);
axios
.post("/api/code", {type, codes, emails})
.then(({data, status}) => {
if (data.ok) {
toast.success(`Successfully generated ${capitalize(type)} codes and they have been notified by e-mail!`, {toastId: "success"});
return;
}
if (status === 403) {
toast.error(`You do not have permission to generate ${capitalize(type)} codes!`, {toastId: "forbidden"});
}
})
.catch(({response: {status}}) => {
if (status === 403) {
toast.error(`You do not have permission to generate ${capitalize(type)} codes!`, {toastId: "forbidden"});
return;
}
toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
})
.finally(() => 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">Choose a .txt file containing e-mails</label>
<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
</Button>
<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
<div className="grid grid-cols-2 gap-4">
<Button className="w-48" variant="outline" onClick={() => generateCode("student")} disabled={emails.length === 0 || isLoading}>
Student
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0 || isLoading}>
Teacher
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0 || isLoading}>
Admin
</Button>
<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0 || isLoading}>
Owner
</Button>
</div>
</div>
);
}

2
src/pages/(admin)/CodeGenerator.tsx
View File

@@ -15,7 +15,7 @@ export default function CodeGenerator() {
const code = uid.randomUUID(6);
axios
.post("/api/code", {type, code})
.post("/api/code", {type, codes: [code]})
.then(({data, status}) => {
if (data.ok) {
toast.success(`Successfully generated a ${capitalize(type)} code!`, {toastId: "success"});

49
src/pages/(admin)/Lists/ExamList.tsx
View File

@@ -1,15 +1,17 @@
import {PERMISSIONS} from "@/constants/userPermissions";
import useExams from "@/hooks/useExams";
import useUsers from "@/hooks/useUsers";
import {Module} from "@/interfaces";
import {Exam} from "@/interfaces/exam";
import {Type} from "@/interfaces/user";
import {Type, User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useRouter} from "next/router";
import {BsCheck, BsUpload} from "react-icons/bs";
import {BsCheck, BsTrash, BsUpload} from "react-icons/bs";
import {toast} from "react-toastify";
const CLASSES: {[key in Module]: string} = {
@@ -21,8 +23,8 @@ const CLASSES: {[key in Module]: string} = {
const columnHelper = createColumnHelper<Exam>();
export default function ExamList() {
const {exams} = useExams();
export default function ExamList({user}: {user: User}) {
const {exams, reload} = useExams();
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
@@ -45,6 +47,28 @@ export default function ExamList() {
router.push("/exercises");
};
const deleteExam = async (exam: Exam) => {
if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
axios
.delete(`/api/exam/${exam.module}/${exam.id}`)
.then(() => toast.success(`Deleted the "${exam.id}" exam`))
.catch((reason) => {
if (reason.response.status === 404) {
toast.error("Exam not found!");
return;
}
if (reason.response.status === 403) {
toast.error("You do not have permission to delete this exam!");
return;
}
toast.error("Something went wrong, please try again later.");
})
.finally(reload);
};
const getTotalExercises = (exam: Exam) => {
if (exam.module === "reading" || exam.module === "listening") {
return exam.parts.flatMap((x) => x.exercises).length;
@@ -75,11 +99,18 @@ export default function ExamList() {
id: "actions",
cell: ({row}: {row: {original: Exam}}) => {
return (
<div
data-tip="Load exam"
className="cursor-pointer tooltip"
onClick={async () => await loadExam(row.original.module, row.original.id)}>
<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
<div className="flex gap-4">
<div
data-tip="Load exam"
className="cursor-pointer tooltip"
onClick={async () => await loadExam(row.original.module, row.original.id)}>
<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
{PERMISSIONS.examManagement.delete.includes(user.type) && (
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
</div>
);
},

91
src/pages/(admin)/Lists/GroupList.tsx
View File

@@ -15,6 +15,7 @@ import {BsCheck, BsDash, BsPencil, BsPlus, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
import Select from "react-select";
import {uuidv4} from "@firebase/util";
import {useFilePicker} from "use-file-picker";
const columnHelper = createColumnHelper<Group>();
@@ -29,6 +30,41 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
const [name, setName] = useState<string | undefined>(group?.name || undefined);
const [admin, setAdmin] = useState<string>(group?.admin || user.id);
const [participants, setParticipants] = useState<string[]>(group?.participants || []);
const {openFilePicker, filesContent} = useFilePicker({
accept: ".txt",
multiple: false,
});
useEffect(() => {
if (filesContent.length > 0) {
const file = filesContent[0];
const emails = file.content
.toLowerCase()
.split("\n")
.filter((x) => new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/).test(x));
if (emails.length === 0) {
toast.error("Please upload a .txt file containing e-mails, one per line!");
return;
}
const emailUsers = emails.map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
const filteredUsers = emailUsers.filter(
(x) =>
((user.type === "developer" || user.type === "owner" || user.type === "admin") &&
(x?.type === "student" || x?.type === "teacher")) ||
(user.type === "teacher" && x?.type === "student"),
);
setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
toast.success(
user.type !== "teacher"
? "Added all teachers and students found in the file you've provided!"
: "Added all students found in the file you've provided!",
{toastId: "upload-success"},
);
}
}, [filesContent, user.type, users]);
return (
<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
@@ -36,28 +72,38 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required />
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Participants</label>
<Select
placeholder="Participants..."
defaultValue={participants.map((x) => ({
value: x,
label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
}))}
options={users
.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
onChange={(value) => setParticipants(value.map((x) => x.value))}
isMulti
isSearchable
styles={{
control: (styles) => ({
...styles,
backgroundColor: "white",
borderRadius: "999px",
padding: "1rem 1.5rem",
zIndex: "40",
}),
}}
/>
<div className="flex gap-8 w-full">
<Select
className="w-full"
value={participants.map((x) => ({
value: x,
label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
}))}
placeholder="Participants..."
defaultValue={participants.map((x) => ({
value: x,
label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
}))}
options={users
.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
onChange={(value) => setParticipants(value.map((x) => x.value))}
isMulti
isSearchable
styles={{
control: (styles) => ({
...styles,
backgroundColor: "white",
borderRadius: "999px",
padding: "1rem 1.5rem",
zIndex: "40",
}),
}}
/>
<Button className="w-full max-w-[300px]" onClick={openFilePicker} variant="outline">
{filesContent.length === 0 ? "Upload participants .txt file" : filesContent[0].name}
</Button>
</div>
</div>
</div>
<Button
@@ -244,6 +290,7 @@ export default function GroupList({user}: {user: User}) {
if (result) {
setShowDisclosure(false);
setEditingID(undefined);
reload();
}
});
}}

45
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -8,7 +8,7 @@ import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {Fragment} from "react";
import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
const columnHelper = createColumnHelper<User>();
@@ -56,6 +56,27 @@ export default function UserList({user}: {user: User}) {
});
};
const toggleDisableAccount = (user: User) => {
if (
!confirm(
`Are you sure you want to ${user.isDisabled ? "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, isDisabled: !user.isDisabled})
.then(() => {
toast.success(`User ${user.isDisabled ? "enabled" : "disabled"} successfully!`);
reload();
})
.catch(() => {
toast.error("Something went wrong!", {toastId: "update-error"});
});
};
const defaultColumns = [
columnHelper.accessor("name", {
header: "Name",
@@ -141,16 +162,28 @@ export default function UserList({user}: {user: User}) {
</Transition>
</Popover>
)}
{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
{!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
<div
data-tip={row.original.isDisabled ? "Enable User" : "Disable User"}
className="cursor-pointer tooltip"
onClick={() => toggleDisableAccount(row.original)}>
{row.original.isDisabled ? (
<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
) : (
<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
)}
</div>
)}
{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
</div>
);
},

2
src/pages/(admin)/Lists/index.tsx
View File

@@ -48,7 +48,7 @@ export default function Lists({user}: {user: User}) {
<UserList user={user} />
</Tab.Panel>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
<ExamList />
<ExamList user={user} />
</Tab.Panel>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
<GroupList user={user} />

1
src/pages/_app.tsx
View File

@@ -5,6 +5,7 @@ import type {AppProps} from "next/app";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import "react-datepicker/dist/react-datepicker.css";
import {useRouter} from "next/router";
import {useEffect} from "react";
import useExamStore from "@/stores/examStore";

4
src/pages/admin.tsx
View File

@@ -10,6 +10,7 @@ import ExamLoader from "./(admin)/ExamLoader";
import {Tab} from "@headlessui/react";
import clsx from "clsx";
import Lists from "./(admin)/Lists";
import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -58,9 +59,10 @@ export default function Admin() {
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<section className="w-full flex gap-8">
<section className="w-full flex gap-8 justify-between">
<ExamLoader />
<CodeGenerator />
<BatchCodeGenerator />
</section>
<section className="w-full">
<Lists user={user} />

28
src/pages/api/code.ts
View File

@@ -7,6 +7,7 @@ import {sessionOptions} from "@/lib/session";
import {Type} from "@/interfaces/user";
import {PERMISSIONS} from "@/constants/userPermissions";
import {uuidv4} from "@firebase/util";
import {prepareMailer, prepareMailOptions} from "@/email";
const db = getFirestore(app);
@@ -18,7 +19,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return;
}
const {type, code} = req.body as {type: Type; code: string};
const {type, codes, emails} = req.body as {type: Type; codes: string[]; emails?: string[]};
const permission = PERMISSIONS.generateCode[type];
if (!permission.includes(req.session.user.type)) {
@@ -26,8 +27,27 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return;
}
const codeRef = doc(db, "codes", uuidv4());
await setDoc(codeRef, {type, code});
const codePromises = codes.map(async (code, index) => {
const codeRef = doc(db, "codes", code);
await setDoc(codeRef, {type, code});
res.status(200).json({ok: true});
if (emails && emails.length > index) {
const transport = prepareMailer();
const mailOptions = prepareMailOptions(
{
type,
code,
},
[emails[index]],
"EnCoach Registration",
"main",
);
await transport.sendMail(mailOptions);
}
});
Promise.all(codePromises).then(() => {
res.status(200).json({ok: true});
});
}

33
src/pages/api/exam/[module]/[id].ts
View File

@@ -1,15 +1,21 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type {NextApiRequest, NextApiResponse} from "next";
import {app} from "@/firebase";
import {getFirestore, doc, getDoc} from "firebase/firestore";
import {getFirestore, doc, getDoc, deleteDoc} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {PERMISSIONS} from "@/constants/userPermissions";
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "GET") return get(req, res);
if (req.method === "DELETE") return del(req, res);
}
async function get(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
res.status(401).json({ok: false});
return;
@@ -30,3 +36,28 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(404).json(undefined);
}
}
async function del(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
res.status(401).json({ok: false});
return;
}
const {module, id} = req.query as {module: string; id: string};
const docRef = doc(db, module, id);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
if (!PERMISSIONS.examManagement.delete.includes(req.session.user.type)) {
res.status(403).json({ok: false});
return;
}
await deleteDoc(docRef);
res.status(200).json({ok: true});
} else {
res.status(404).json({ok: false});
}
}

19
src/pages/api/register.ts
View File

@@ -3,8 +3,8 @@ import {createUserWithEmailAndPassword, getAuth, sendPasswordResetEmail} from "f
import {app} from "@/firebase";
import {sessionOptions} from "@/lib/session";
import {withIronSessionApiRoute} from "iron-session/next";
import {getFirestore, getDoc, doc, setDoc} from "firebase/firestore";
import {DemographicInformation} from "@/interfaces/user";
import {getFirestore, getDoc, doc, setDoc, deleteDoc} from "firebase/firestore";
import {DemographicInformation, Type} from "@/interfaces/user";
const auth = getAuth(app);
const db = getFirestore(app);
@@ -26,7 +26,15 @@ const DEFAULT_LEVELS = {
};
async function login(req: NextApiRequest, res: NextApiResponse) {
const {email, password} = req.body as {email: string; password: string; demographicInformation: DemographicInformation};
const {email, password, code} = req.body as {email: string; password: string; code: string; demographicInformation: DemographicInformation};
const codeRef = await getDoc(doc(db, "codes", code));
if (!codeRef.exists()) {
res.status(400).json({error: "Invalid Code!"});
return;
}
const codeData = codeRef.data() as {code: string; type: Type};
createUserWithEmailAndPassword(auth, email, password)
.then(async (userCredentials) => {
@@ -38,12 +46,13 @@ async function login(req: NextApiRequest, res: NextApiResponse) {
desiredLevels: DEFAULT_DESIRED_LEVELS,
levels: DEFAULT_LEVELS,
bio: "",
isFirstLogin: true,
isFirstLogin: codeData.type === "student",
focus: "academic",
type: "student",
type: codeData.type,
};
await setDoc(doc(db, "users", userId), user);
await deleteDoc(codeRef.ref);
req.session.user = {...user, id: userId};
await req.session.save();

54
src/pages/record.tsx
View File

@@ -19,6 +19,8 @@ import Layout from "@/components/High/Layout";
import clsx from "clsx";
import {calculateBandScore} from "@/utils/score";
import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import Select from "react-select";
import useGroups from "@/hooks/useGroups";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -40,12 +42,13 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
export default function History({user}: {user: User}) {
const [selectedUser, setSelectedUser] = useState<User>(user);
const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
const [filter, setFilter] = useState<"months" | "weeks" | "days">();
const {users, isLoading: isUsersLoading} = useUsers();
const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
const {users} = useUsers();
const {stats, isLoading: isStatsLoading} = useStats(statsUserId);
const {groups} = useGroups(user.id);
const setExams = useExamStore((state) => state.setExams);
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
@@ -218,22 +221,39 @@ export default function History({user}: {user: User}) {
{user && (
<Layout user={user}>
<div className="w-full flex justify-between items-center">
<div className="w-fit">
{!isUsersLoading && user.type !== "student" && (
<>
<select
className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
{users.map((x) => (
<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
{x.name}
</option>
))}
</select>
</>
<div className="w-3/4">
{(user.type === "developer" || user.type === "owner") && (
<Select
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
{(user.type === "admin" || user.type === "teacher") && groups.length > 0 && (
<Select
options={users
.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
</div>
<div className="flex gap-4">
<div className="flex gap-4 w-full justify-end">
<button
className={clsx(
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",

23
src/pages/register.tsx
View File

@@ -11,12 +11,23 @@ import axios from "axios";
import {Divider} from "primereact/divider";
import {useRouter} from "next/router";
import clsx from "clsx";
import {NextPageContext} from "next";
import {NextRequest, NextResponse} from "next/server";
export default function Register() {
export const getServerSideProps = (context: any) => {
const {code} = context.query;
return {
props: {code},
};
};
export default function Register({code: queryCode}: {code: string}) {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [code, setCode] = useState(queryCode || "");
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
@@ -40,6 +51,7 @@ export default function Register() {
name,
email,
password,
code,
profilePicture: "/defaultAvatar.png",
})
.then((response) => {
@@ -52,6 +64,12 @@ export default function Register() {
toast.error("There is already a user with that e-mail!");
return;
}
if (error.response.status === 400) {
toast.error("The provided code is invalid!");
return;
}
toast.error("There was something wrong, please try again!");
})
.finally(() => setIsLoading(false));
@@ -95,10 +113,11 @@ export default function Register() {
defaultValue={confirmPassword}
required
/>
<Input type="text" name="code" onChange={(e) => setCode(e)} placeholder="Enter your registration code" defaultValue={code} required />
<Button
className="lg:mt-8 w-full"
color="purple"
disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword}>
disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || !code}>
Create account
</Button>
</form>

203
src/pages/stats.tsx
View File

@@ -1,24 +1,13 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
import {ArcElement, LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip} from "chart.js";
import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
import {LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip, LineController} from "chart.js";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {useEffect, useState} from "react";
import useStats from "@/hooks/useStats";
import {
averageScore,
totalExams,
totalExamsByModule,
groupBySession,
groupByModule,
formatModuleAverageScoreStats,
calculateModuleAverageScoreStats,
} from "@/utils/stats";
import {averageScore, totalExamsByModule, groupBySession, groupByModule} from "@/utils/stats";
import useUser from "@/hooks/useUser";
import Sidebar from "@/components/Sidebar";
import Diagnostic from "@/components/Diagnostic";
import {ToastContainer} from "react-toastify";
import {capitalize} from "lodash";
import {Module} from "@/interfaces";
@@ -27,8 +16,13 @@ import Layout from "@/components/High/Layout";
import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {Chart} from "react-chartjs-2";
import useUsers from "@/hooks/useUsers";
import Select from "react-select";
import useGroups from "@/hooks/useGroups";
import DatePicker from "react-datepicker";
import moment from "moment";
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, Legend, Tooltip);
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"];
@@ -52,19 +46,30 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
export default function Stats() {
const {user} = useUser({redirectTo: "/login"});
const {stats} = useStats(user?.id);
const [statsUserId, setStatsUserId] = useState<string>();
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(new Date());
const totalExamsData = {
labels: MODULE_ARRAY.map((x) => capitalize(x)),
datasets: [
{
label: "Total exams",
data: MODULE_ARRAY.map((x) => totalExamsByModule(stats, x)),
backgroundColor: ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"],
},
],
};
const {user} = useUser({redirectTo: "/login"});
const {users} = useUsers();
const {groups} = useGroups(user?.id);
const {stats} = useStats(statsUserId);
const {stats: userStats} = useStats(user?.id);
useEffect(() => {
if (user) setStatsUserId(user.id);
}, [user]);
useEffect(() => {
if (stats && stats.length > 0) {
const sortedStats = stats.sort((a, b) => a.date - b.date);
const firstStat = sortedStats.shift()!;
setStartDate(moment.unix(firstStat.date).toDate());
console.log(stats.filter((x) => moment.unix(x.date).isAfter(startDate)));
console.log(stats.filter((x) => moment.unix(x.date).isBefore(endDate)));
}
}, [stats]);
const calculateTotalScorePerSession = () => {
const groupedBySession = groupBySession(stats);
@@ -115,7 +120,7 @@ export default function Stats() {
</Head>
<ToastContainer />
{user && (
<Layout user={user}>
<Layout user={user} className="gap-8">
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
<div className="flex flex-col gap-4 py-4 w-full">
@@ -143,7 +148,7 @@ export default function Stats() {
<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{Object.keys(groupBySession(stats)).length}</span>
<span className="font-bold text-xl">{Object.keys(groupBySession(userStats)).length}</span>
<span className="font-normal text-base text-mti-gray-dim">Exams</span>
</div>
</div>
@@ -152,7 +157,7 @@ export default function Stats() {
<BsPencil className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{stats.length}</span>
<span className="font-bold text-xl">{userStats.length}</span>
<span className="font-normal text-base text-mti-gray-dim">Exercises</span>
</div>
</div>
@@ -161,7 +166,7 @@ export default function Stats() {
<BsStar className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span>
<span className="font-bold text-xl">{averageScore(userStats)}%</span>
<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
</div>
</div>
@@ -170,6 +175,53 @@ export default function Stats() {
</section>
{stats.length > 0 && (
<section className="flex flex-col gap-3">
<div className="w-full flex justify-between gap-8 items-center">
<>
{(user.type === "developer" || user.type === "owner") && (
<Select
className="w-full"
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
{(user.type === "admin" || user.type === "teacher") && groups.length > 0 && (
<Select
className="w-full"
options={users
.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
</>
<DatePicker
dateFormat="dd/MM/yyyy"
startDate={startDate}
endDate={endDate}
selectsRange
filterDate={(date) => !moment(date).isSameOrBefore(moment(startDate))}
onChange={([initialDate, finalDate]) => {
setStartDate(initialDate);
setEndDate(finalDate);
}}
/>
</div>
<div className="flex gap-4 flex-wrap">
{/* Exams per module */}
<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
@@ -240,12 +292,86 @@ export default function Stats() {
</div>
</div>
<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
{/* Module Score */}
<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Module Score Bands</span>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{user.levels.reading}</span> of{" "}
<span className="font-medium">{user.desiredLevels.reading}</span>
</span>
<span className="text-xs">Reading</span>
</div>
<ProgressBar
color="reading"
percentage={(user.levels.reading * 100) / user.desiredLevels.reading}
label=""
className="h-1"
/>
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{user.levels.listening}</span> of{" "}
<span className="font-medium">{user.desiredLevels.listening}</span>
</span>
<span className="text-xs">Listening</span>
</div>
<ProgressBar
color="listening"
percentage={(user.levels.listening * 100) / user.desiredLevels.listening}
label=""
className="h-1"
/>
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{user.levels.writing}</span> of{" "}
<span className="font-medium">{user.desiredLevels.writing}</span>
</span>
<span className="text-xs">Writing</span>
</div>
<ProgressBar
color="writing"
percentage={(user.levels.writing * 100) / user.desiredLevels.writing}
label=""
className="h-1"
/>
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{user.levels.speaking}</span> of{" "}
<span className="font-medium">{user.desiredLevels.speaking}</span>
</span>
<span className="text-xs">Speaking</span>
</div>
<ProgressBar
color="speaking"
percentage={(user.levels.speaking * 100) / user.desiredLevels.speaking}
label=""
className="h-1"
/>
</div>
</div>
</div>
{/* Total Score Band per Session */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Total Score Band per Session</span>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index),
labels: Object.keys(
groupBySession(
stats.filter(
(x) => moment.unix(x.date).isAfter(startDate) && moment.unix(x.date).isBefore(endDate),
),
),
).map((_, index) => index),
datasets: [
{
type: "line",
@@ -262,12 +388,19 @@ export default function Stats() {
/>
</div>
<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
{/* Module Score Band per Session */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Module Score Band per Session</span>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index),
labels: Object.keys(
groupBySession(
stats.filter(
(x) => moment.unix(x.date).isAfter(startDate) && moment.unix(x.date).isBefore(endDate),
),
),
).map((_, index) => index),
datasets: [
...MODULE_ARRAY.map((module, index) => ({
type: "line" as const,