From d73b6d9d12e81c8f21a5598d5c9b4057c998939b Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Wed, 19 Jun 2024 23:00:43 +0100
Subject: [PATCH] Added badges for students

---
 src/components/Navbar.tsx | 283 ++++++++++++++++++++++++++------------
 1 file changed, 192 insertions(+), 91 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 02f82022..6c1320e5 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,118 +1,219 @@
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
-import {useRouter} from "next/router";
-import {BsList, BsQuestionCircle, BsQuestionCircleFill} from "react-icons/bs";
+import { preventNavigation } from "@/utils/navigation.disabled";
+import { useRouter } from "next/router";
+import { BsList, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import {useEffect, useState} from "react";
-import {Type} from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { useEffect, useState } from "react";
+import { Type } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
-import {isUserFromCorporate} from "@/utils/groups";
+import { isUserFromCorporate } from "@/utils/groups";
 import Button from "./Low/Button";
 import Modal from "./Modal";
 import Input from "./Low/Input";
 import TicketSubmission from "./High/TicketSubmission";
+import { Module } from "@/interfaces";
+import Badge from "./Low/Badge";
 
+import {
+  BsArrowRepeat,
+  BsBook,
+  BsCheck,
+  BsCheckCircle,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsXCircle,
+} from "react-icons/bs";
 interface Props {
-	user: User;
-	navDisabled?: boolean;
-	focusMode?: boolean;
-	onFocusLayerMouseEnter?: () => void;
-	path: string;
+  user: User;
+  navDisabled?: boolean;
+  focusMode?: boolean;
+  onFocusLayerMouseEnter?: () => void;
+  path: string;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
-	const [isMenuOpen, setIsMenuOpen] = useState(false);
-	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
-	const [isTicketOpen, setIsTicketOpen] = useState(false);
+export default function Navbar({
+  user,
+  path,
+  navDisabled = false,
+  focusMode = false,
+  onFocusLayerMouseEnter,
+}: Props) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [disablePaymentPage, setDisablePaymentPage] = useState(true);
+  const [isTicketOpen, setIsTicketOpen] = useState(false);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const disableNavigation = preventNavigation(navDisabled, focusMode);
+  const disableNavigation = preventNavigation(navDisabled, focusMode);
 
-	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.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
-	};
+    if (today.add(1, "days").isAfter(momentDate))
+      return "!bg-mti-red-ultralight border-mti-red-light";
+    if (today.add(3, "days").isAfter(momentDate))
+      return "!bg-mti-rose-ultralight border-mti-rose-light";
+    if (today.add(7, "days").isAfter(momentDate))
+      return "!bg-mti-orange-ultralight border-mti-orange-light";
+  };
 
-	const showExpirationDate = () => {
-		if (!user.subscriptionExpirationDate) return false;
+  const showExpirationDate = () => {
+    if (!user.subscriptionExpirationDate) return false;
 
-		const momentDate = moment(user.subscriptionExpirationDate);
-		const today = moment(new Date());
+    const momentDate = moment(user.subscriptionExpirationDate);
+    const today = moment(new Date());
 
-		return today.add(7, "days").isAfter(momentDate);
-	};
+    return today.add(7, "days").isAfter(momentDate);
+  };
 
-	useEffect(() => {
-		if (user.type !== "student" && user.type !== "teacher") return setDisablePaymentPage(false);
-		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
-	}, [user]);
+  useEffect(() => {
+    if (user.type !== "student" && user.type !== "teacher")
+      return setDisablePaymentPage(false);
+    isUserFromCorporate(user.id).then((result) =>
+      setDisablePaymentPage(result)
+    );
+  }, [user]);
 
-	return (
-		<>
-			<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
-				<TicketSubmission user={user} page={router.asPath} onClose={() => setIsTicketOpen(false)} />
-			</Modal>
+  const badges = [
+      {
+        module: "reading",
+        icon: () => <BsBook className="h-4 w-4 text-white" />,
+        achieved: user.levels.reading >= user.desiredLevels.reading,
+      },
 
-			{user && (
-				<MobileMenu disableNavigation={disableNavigation} path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />
-			)}
-			<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
-				<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
-					<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
-					<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
-				</Link>
-				<div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
-					{/* OPEN TICKET SYSTEM */}
-					<button
-						className={clsx(
-							"border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
-							"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20",
-						)}
-						data-tip="Submit a help/feedback ticket"
-						onClick={() => setIsTicketOpen(true)}>
-						<BsQuestionCircleFill />
-					</button>
+      {
+        module: "listening",
+        icon: () => <BsHeadphones className="h-4 w-4 text-white" />,
+        achieved: user.levels.listening >= user.desiredLevels.listening,
+      },
+      {
+        module: "writing",
+        icon: () => <BsPen className="h-4 w-4 text-white" />,
+        achieved: user.levels.writing >= user.desiredLevels.writing,
+      },
+      {
+        module: "speaking",
+        icon: () => <BsMegaphone className="h-4 w-4 text-white" />,
+        achieved: user.levels.speaking >= user.desiredLevels.speaking,
+      },
+      {
+        module: "level",
+        icon: () => <BsClipboard className="h-4 w-4 text-white" />,
+        achieved: user.levels.level >= user.desiredLevels.level,
+      },
+    ];
 
-					{showExpirationDate() && (
-						<Link
-							href={!!user.subscriptionExpirationDate && !disablePaymentPage ? "/payment" : ""}
-							data-tip="Expiry date"
-							className={clsx(
-								"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
-								"tooltip tooltip-bottom transition duration-300 ease-in-out",
-								!user.subscriptionExpirationDate
-									? "bg-mti-green-ultralight border-mti-green-light"
-									: expirationDateColor(user.subscriptionExpirationDate),
-								"border-mti-gray-platinum bg-white",
-							)}>
-							{!user.subscriptionExpirationDate && "Unlimited"}
-							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-						</Link>
-					)}
-					<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
-						<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
-						<span className="-md:hidden text-right">
-							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-							{USER_TYPE_LABELS[user.type]}
-						</span>
-					</Link>
-					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
-						<BsList className="text-mti-purple-light h-8 w-8" />
-					</div>
-				</div>
-				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-			</header>
-		</>
-	);
+  return (
+    <>
+      <Modal
+        isOpen={isTicketOpen}
+        onClose={() => setIsTicketOpen(false)}
+        title="Submit a ticket"
+      >
+        <TicketSubmission
+          user={user}
+          page={router.asPath}
+          onClose={() => setIsTicketOpen(false)}
+        />
+      </Modal>
+
+      {user && (
+        <MobileMenu
+          disableNavigation={disableNavigation}
+          path={path}
+          isOpen={isMenuOpen}
+          onClose={() => setIsMenuOpen(false)}
+          user={user}
+        />
+      )}
+      <header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
+        <Link
+          href={disableNavigation ? "" : "/"}
+          className=" flex items-center gap-8 md:px-8"
+        >
+          <img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
+          <h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
+        </Link>
+        <div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
+          {user.type === "student" &&
+            badges.map((badge) => (
+              <div
+                key={badge.module}
+                className={`${badge.achieved ? `bg-ielts-${badge.module}`: 'bg-mti-gray-anti-flash'} flex h-8 w-8 items-center justify-center rounded-full`}
+              >
+                {badge.icon()}
+              </div>
+            ))}
+          {/* OPEN TICKET SYSTEM */}
+          <button
+            className={clsx(
+              "border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
+              "hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20"
+            )}
+            data-tip="Submit a help/feedback ticket"
+            onClick={() => setIsTicketOpen(true)}
+          >
+            <BsQuestionCircleFill />
+          </button>
+
+          {showExpirationDate() && (
+            <Link
+              href={
+                !!user.subscriptionExpirationDate && !disablePaymentPage
+                  ? "/payment"
+                  : ""
+              }
+              data-tip="Expiry date"
+              className={clsx(
+                "flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
+                "tooltip tooltip-bottom transition duration-300 ease-in-out",
+                !user.subscriptionExpirationDate
+                  ? "bg-mti-green-ultralight border-mti-green-light"
+                  : expirationDateColor(user.subscriptionExpirationDate),
+                "border-mti-gray-platinum bg-white"
+              )}
+            >
+              {!user.subscriptionExpirationDate && "Unlimited"}
+              {user.subscriptionExpirationDate &&
+                moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+            </Link>
+          )}
+          <Link
+            href={disableNavigation ? "" : "/profile"}
+            className="-md:hidden flex items-center justify-end gap-6"
+          >
+            <img
+              src={user.profilePicture}
+              alt={user.name}
+              className="h-10 w-10 rounded-full object-cover"
+            />
+            <span className="-md:hidden text-right">
+              {user.type === "corporate"
+                ? `${user.corporateInformation?.companyInformation.name} |`
+                : ""}{" "}
+              {user.name} | {USER_TYPE_LABELS[user.type]}
+            </span>
+          </Link>
+          <div
+            className="cursor-pointer md:hidden"
+            onClick={() => setIsMenuOpen(true)}
+          >
+            <BsList className="text-mti-purple-light h-8 w-8" />
+          </div>
+        </div>
+        {focusMode && (
+          <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+        )}
+      </header>
+    </>
+  );
 }