Added the possibility to upload a file containing users to a group

2023-10-03 16:48:52 +01:00
parent 9239068cde
commit 07e73b0d88
10 changed files with 252 additions and 31 deletions
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
    "primereact": "^9.2.3",
    "react": "18.2.0",
    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.18.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-icons": "^4.8.0",
@@ -54,6 +55,7 @@
    "swr": "^2.1.3",
    "tailwind-scrollbar-hide": "^1.1.7",
    "typescript": "4.9.5",
+    "use-file-picker": "^2.1.0",
    "uuid": "^9.0.0",
    "wavesurfer.js": "^6.6.4",
    "zustand": "^4.3.6"
@@ -61,6 +63,7 @@
  "devDependencies": {
    "@types/formidable": "^3.4.0",
    "@types/lodash": "^4.14.191",
+    "@types/react-datepicker": "^4.15.1",
    "@types/uuid": "^9.0.1",
    "@types/wavesurfer.js": "^6.0.6",
    "@wixc3/react-board": "^2.2.0",
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,6 +1,5 @@
 import {User} from "@/interfaces/user";
 import Link from "next/link";
-import {Avatar} from "primereact/avatar";
 import FocusLayer from "@/components/FocusLayer";
 import {preventNavigation} from "@/utils/navigation.disabled";
 import {useRouter} from "next/router";
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -0,0 +1,81 @@
+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 {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));
+
+		axios
+			.post("/api/code", {type, codes})
+			.then(({data, status}) => {
+				if (data.ok) {
+					toast.success(`Successfully generated ${capitalize(type)} codes!`, {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"});
+			});
+	};
+
+	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}>{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}>
+					Student
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0}>
+					Teacher
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0}>
+					Admin
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0}>
+					Owner
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -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"});
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -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,7 +72,13 @@ 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>
+					<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,
@@ -58,6 +100,10 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 								}),
 							}}
 						/>
+						<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
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -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";
--- a/src/pages/admin.tsx
+++ b/src/pages/admin.tsx
@@ -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} />
--- a/src/pages/api/code.ts
+++ b/src/pages/api/code.ts
@@ -18,7 +18,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}

-	const {type, code} = req.body as {type: Type; code: string};
+	const {type, codes} = req.body as {type: Type; codes: string[]};
 	const permission = PERMISSIONS.generateCode[type];

 	if (!permission.includes(req.session.user.type)) {
@@ -26,8 +26,10 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}

+	for (const code of codes) {
 		const codeRef = doc(db, "codes", uuidv4());
 		await setDoc(codeRef, {type, code});
+	}

 	res.status(200).json({ok: true});
 }
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -227,6 +227,13 @@ export default function History({user}: {user: User}) {
 									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 && (
@@ -236,6 +243,13 @@ export default function History({user}: {user: User}) {
 										.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>
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,7 +41,7 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==

-"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0":
  version "7.23.1"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
@@ -912,6 +912,11 @@
    tiny-glob "^0.2.9"
    tslib "^2.4.0"

+"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
  version "1.1.2"
  resolved "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz"
@@ -1201,6 +1206,16 @@
  resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
  integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==

+"@types/react-datepicker@^4.15.1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.1.tgz#a66fee520f2a31f83b45f4ed7f28af7296e11d0c"
+  integrity sha512-6/LthK0pTDBKjjVJqA2ygY3jJsHH7uZXIk8WPQcGHUiFOQLOKIv3krOxFZ2mt3BB3guMB6jVTc6ansQAd0r7xQ==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    "@types/react" "*"
+    date-fns "^2.0.1"
+    react-popper "^2.2.5"
+
 "@types/react-dom@18.0.10":
  version "18.0.10"
  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz"
@@ -1708,7 +1723,7 @@ chownr@^2.0.0:
  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==

-classnames@^2.3.1:
+classnames@^2.2.6, classnames@^2.3.1:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -1874,6 +1889,13 @@ damerau-levenshtein@^1.0.8:
  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==

+date-fns@^2.0.1, date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@4, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
  version "4.3.4"
  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@@ -2485,6 +2507,13 @@ file-entry-cache@^6.0.1:
  dependencies:
    flat-cache "^3.0.4"

+file-selector@0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 fill-range@^7.0.1:
  version "7.0.1"
  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
@@ -3561,7 +3590,7 @@ long@^5.0.0:
  resolved "https://registry.npmjs.org/long/-/long-5.2.3.tgz"
  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==

-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4230,6 +4259,18 @@ react-chartjs-2@^5.2.0:
  resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==

+react-datepicker@^4.18.0:
+  version "4.18.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.18.0.tgz#d66301acc47833d31fa6f46f98781b084106da0e"
+  integrity sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==
+  dependencies:
+    "@popperjs/core" "^2.11.8"
+    classnames "^2.2.6"
+    date-fns "^2.30.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.13.0"
+    react-popper "^2.3.0"
+
 react-dom@18.2.0:
  version "18.2.0"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -4271,6 +4312,11 @@ react-media-recorder@1.6.5:
  resolved "https://registry.npmjs.org/react-media-recorder/-/react-media-recorder-1.6.5.tgz"
  integrity sha512-YcARNZ498jtmOJ+O7GkaokR0DbMNV+YSXB0msAHMZk9wharBuVSWYCXKiIL5JAnR5cs6ebXaOtkkGsM3uIq7Bw==

+react-onclickoutside@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
+  integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
+
 react-phone-number-input@^3.3.6:
  version "3.3.6"
  resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.3.6.tgz#5d2a2bbfb2600c4c0428e4cd4a725d69f40fe2dd"
@@ -4293,6 +4339,14 @@ react-player@^2.12.0:
    prop-types "^15.7.2"
    react-fast-compare "^3.0.1"

+react-popper@^2.2.5, react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-select@^5.7.5:
  version "5.7.5"
  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.5.tgz#d2d0f29994e0f06000147bfb2adf58324926c2fd"
@@ -4880,6 +4934,11 @@ tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.5.0:
  resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"
  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==

+tslib@^2.0.3:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tsutils@^3.21.0:
  version "3.21.0"
  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
@@ -4960,6 +5019,13 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

+use-file-picker@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/use-file-picker/-/use-file-picker-2.1.0.tgz#ff3239413795740c43ca39eac72736a669e88f83"
+  integrity sha512-nZDYyB3wagpbuhCVPNH6ceyok9TGytw7waJV8v80eu5ykEj89uBTv3CyrBd0I1N1m2cBJgKCpVNOjZT0GDrb+Q==
+  dependencies:
+    file-selector "0.2.4"
+
 use-isomorphic-layout-effect@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
@@ -4985,6 +5051,13 @@ uuid@^9.0.0:
  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz"
  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==

+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 wavesurfer.js@^6.6.4:
  version "6.6.4"
  resolved "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-6.6.4.tgz"