fix: Badgedex

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 (

layout/Attendee/Badgedex/Badgedex.tsx

@@ -83,6 +83,7 @@ function Badgedex() {
           </div>
         </div>
       </div>
+
       <div className="mt-8 grid grid-cols-1 gap-x-10 gap-y-5 text-white xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
         {currentBadges.map((badge) => (
           <Badge

layout/Staff/Badges/Badges.tsx

@@ -86,29 +86,29 @@ function Badges() {
         </div>
       ) : (
         <>
-          <div className="pt-10 text-white xl:flex xl:flex-auto">
-            <div className="flex flex-auto space-x-5">
-              <p className="mb-10 select-none text-2xl font-bold xl:mb-0">
-                Filter by
-              </p>
-
+          <div className="border-slate-400 pt-10 text-white xl:flex xl:flex-auto">
+            <div className="m-auto flex flex-auto select-none space-x-5">
+              <p className="mb-10 text-2xl font-bold xl:mb-0">Filter by</p>
               <Filter onChange={updateFilter} />
             </div>
-            <div className="relative mt-1 rounded-md shadow-sm">
-              <input
-                type="text"
-                value={searchInput}
-                placeholder="Search by name"
-                onChange={(e) => {
-                  setSearchInput(e.target.value);
-                }}
-                name="search"
-                id="search"
-                className="mt-1 w-full rounded-full border-2 border-pink-500 py-2 pl-3 pr-10 text-sm text-black focus:border-pink-500"
-              />
+            <div className="flex w-auto font-bold lg:w-1/2 xl:w-auto">
+              <div className="flex w-full select-none flex-row-reverse gap-x-8">
+                <input
+                  type="text"
+                  value={searchInput}
+                  placeholder="Search by name"
+                  onChange={(e) => {
+                    setSearchInput(e.target.value);
+                  }}
+                  name="search"
+                  id="search"
+                  className="mt-1 w-full rounded-full border-2 border-quinary py-2 pl-3 pr-10 text-sm text-black outline-none focus:border-quinary/50"
+                />
+              </div>
             </div>
           </div>
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+
+          <div className="mt-8 grid grid-cols-1 gap-x-10 gap-y-5 text-white xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
             {allBadges
               .filter((badge) => badge.type == filter || filter == null)
               .filter(
@@ -123,7 +123,7 @@ function Badges() {
                   name={badge.name}
                   avatar={badge.avatar}
                   tokens={badge.tokens}
-                  owned={badge.owned}
+                  owned={true}
                   disableLink={true}
                   disableOwnedHighlight={true}
                   onClick={() => handleBadgeSelected(badge)}