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

Added badges for students

Browse Source
This commit is contained in:
Joao Ramos
2024-06-19 23:00:43 +01:00
parent c11906a395
commit d73b6d9d12
1 changed files with 192 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
src/components/Navbar.tsx
View File

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