fix(ActiveMembers.js and Staff.js): added feedback message if search …

…input does not find a match
FrancescoXX · Oct 15, 2023 · 9373549 · 9373549
1 parent e66b985
commit 9373549
Show file tree

Hide file tree

Showing 4 changed files with 1,622 additions and 1,307 deletions.
diff --git a/src/components/ActiveMembers.js b/src/components/ActiveMembers.js
@@ -20,7 +20,9 @@ const ActiveMembers = () => {
     )
     setCurrentUsers(filterdUsers)
   }
+
   const [tab] = useState("Active Members")
+
   return (
     <div className="mt-[3em] flex items-center justify-center">
       <section className="max-w-bodyContainer flex-1 text-center font-bold text-white">
@@ -48,7 +50,8 @@ const ActiveMembers = () => {
             </svg>
           </div>
         </div>
-        <div className="m-2 flex flex-wrap items-center justify-center overflow-y-auto pb-4">
+      {currentUsers.length
+        ? <div className="m-2 flex flex-wrap items-center justify-center overflow-y-auto pb-4">
           {tab === "Active Members"
             ? (
               <GetActivemembers users={currentUsers} />
@@ -57,6 +60,7 @@ const ActiveMembers = () => {
               <Users users={currentUsers} />
               )}
         </div>
+        : <p className="mt-3">User does not exist!</p>}
       </section>
     </div>
   )

diff --git a/src/components/GetActivities.js b/src/components/GetActivities.js
@@ -1,6 +1,7 @@
 import eventList from "../data/events.json"
 import Title from "./Title"
 import { FaTwitter, FaDiscord } from "react-icons/fa"
+import Image from "next/image"
 
 const events = eventList.events
 const styles = "transition-all ease-in cursor-pointer"
@@ -26,7 +27,7 @@ const GetActivities = () => (
                     </span>{" "}
                   </p>
                 </div>
-                <img
+                <Image
                   src={event?.image}
                   alt={event.name}
                   className="w-full mb-4 rounded-md object-contain my-4"

diff --git a/src/components/Staff.js b/src/components/Staff.js
@@ -46,15 +46,21 @@ const Staff = () => {
               </svg>
             </div>
           </div>
-          <div className="m-2 flex flex-wrap items-center justify-center gap-[1.8rem] overflow-y-auto pt-5 pb-4">
-            {tab === "Staff"
-              ? (
-              <GetStaff users={currentUsers} />
-                )
-              : (
-              <Users users={currentUsers} />
-                )}
-          </div>
+          {currentUsers.length
+            ? (
+            <div className="m-2 flex flex-wrap items-center justify-center gap-[1.8rem] overflow-y-auto pt-5 pb-4">
+              {tab === "Staff"
+                ? (
+                <GetStaff users={currentUsers} />
+                  )
+                : (
+                <Users users={currentUsers} />
+                  )}
+            </div>
+              )
+            : (
+            <p className="mt-3">User does not exist!</p>
+              )}
         </section>
       </div>
     </div>