merge: main

Author: ruilopesm

README.md

@@ -38,7 +38,7 @@ documentation](https://nextjs.org/docs/deployment) for more details.
 <img src=".github/brand/cesium-DARK.svg#gh-light-mode-only" width="300">
 <img src=".github/brand/cesium-LIGHT.svg#gh-dark-mode-only" width="300">
 
-Copyright (c) 2023, CeSIUM.
+Copyright (c) 2024, CeSIUM.
 
 This project is licensed under the MIT License - see the [LICENSE][license]
 file for details.

components/Badge/index.tsx

@@ -1,13 +1,13 @@
 import Link from "next/link";
-import { AllHTMLAttributes, ReactEventHandler, useState } from "react";
+import { AllHTMLAttributes, memo, useState } from "react";
 
 interface BadgeProps
   extends Omit<AllHTMLAttributes<HTMLDivElement>, "id" | "name" | "type"> {
   name: string;
   id: string | number;
   avatar: string;
   tokens: string | number;
-  owned?: boolean;
+  owned: boolean;
   disableLink?: boolean;
   disableOwnedHighlight?: boolean;
 }
@@ -23,21 +23,9 @@ const Badge: React.FC<BadgeProps> = ({
   ...rest
 }) => {
   const [badgeLoaded, setBadgeLoaded] = useState(false);
-  const [fallbackRan, setFallbackRan] = useState(false);
+  const [badge404, setBadge404] = useState(false);
 
-  const highlightBadge = owned || !disableOwnedHighlight || !badgeLoaded;
-
-  const imageOnError: ReactEventHandler<HTMLImageElement> = (e) => {
-    // prevent infinite loop fallback
-    if (fallbackRan) {
-      setBadgeLoaded(true);
-      return;
-    }
-
-    setBadgeLoaded(false);
-    e.currentTarget.src = "/images/badges/badge-not-found.svg";
-    setFallbackRan(true);
-  };
+  const highlightBadge = owned || disableOwnedHighlight || !badgeLoaded;
 
   return (
     <div
@@ -51,11 +39,19 @@ const Badge: React.FC<BadgeProps> = ({
         <div className="flex aspect-square w-full select-none items-center justify-center">
           {!badgeLoaded && <BadgeSkeleton />}
 
+          {badge404 && (
+            <img src={"/images/badges/badge-not-found.svg"} alt={name} />
+          )}
+
           <img
             src={avatar}
             alt={name}
             onLoad={() => setBadgeLoaded(true)}
-            onError={imageOnError}
+            onError={() => {
+              setBadge404(true);
+              setBadgeLoaded(true);
+            }}
+            hidden={!badgeLoaded || badge404}
           />
         </div>
 
@@ -68,7 +64,7 @@ const Badge: React.FC<BadgeProps> = ({
   );
 };
 
-export default Badge;
+export default memo(Badge);
 
 const BadgeSkeleton = () => {
   return (

components/Layout/Layout.tsx

@@ -20,7 +20,7 @@ const roleNavigations = {
     "identifier",
   ],
   admin: ["scanner", "visitors", "badges", "leaderboard", "users", "events"],
-  staff: ["badges", "leaderboard", "prizes", "identifier"],
+  staff: ["badges", "leaderboard", "prizes", "identifier", "cv"],
 };
 
 type LayoutProps = {

components/Navbar/index.jsx

@@ -30,6 +30,7 @@ const userNavigation = (type) => {
         { name: "Leaderboard", slug: "/staff/leaderboard" },
         { name: "Give Badges", slug: "/staff/badges" },
         { name: "Give Prizes", slug: "/staff/prizes" },
+        { name: "Upload CV", slug: "/staff/cv" },
       ];
     case USER.ROLES.SPONSOR:
       return [

components/Notification/Notification.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+
+interface INotificationProps {
+  title: string;
+  onClose: () => void;
+}
+
+const Notification: React.FC<INotificationProps> = ({ title, onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="fixed right-4 top-0 z-50 h-16 w-72">
+      <div className="pointer-events-auto min-w-full overflow-hidden rounded-lg bg-quinary shadow-lg ring-1 ring-black ring-opacity-5 ">
+        <div className="min-w-full p-4 ">
+          <div className="flex items-start">
+            <div className="flex-shrink-0"></div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p className="text-md font-medium text-white">{title}</p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                onClick={onClose}
+                className="inline-flex rounded-md bg-quinary text-white hover:text-primary focus:outline-none"
+              >
+                <span className="sr-only">Close</span>
+                <span className="h-5 w-5">X</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Notification;

components/Notification/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Notification";

components/ResetPassword/index.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { resetPassword } from "@lib/api";
+import Notification from "@components/Notification";
+
+export default function ResetPassword(user: any) {
+  const [showNotification, setShowNotification] = useState(false);
+
+  const onResetPassword = (user: any) => {
+    resetPassword(user.email)
+      .then((_) => {
+        setShowNotification(true);
+      })
+      .catch((_) => {
+        setShowNotification(false);
+      });
+  };
+
+  const handleNotificationClose = () => {
+    setShowNotification(false);
+  };
+
+  return (
+    <>
+      <button
+        className="inline-block h-auto pl-6 pb-5 text-quinary underline"
+        onClick={(e) => {
+          e.preventDefault();
+          onResetPassword(user);
+        }}
+      >
+        Reset Password
+      </button>
+      {showNotification && (
+        <Notification
+          title="Password reset email sent"
+          onClose={handleNotificationClose}
+        />
+      )}
+    </>
+  );
+}