Refactored alumni search and display components

abhishekraoas · Feb 7, 2025 · 187b5fa · 187b5fa
1 parent b16a0bc
commit 187b5fa
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 70 deletions.
diff --git a/.env.example b/.env.example
diff --git a/client/src/components/OurAlumni.jsx b/client/src/components/OurAlumni.jsx
@@ -1,60 +1,73 @@
-import React, { useEffect, useState } from "react";
-import UserCard from "./UserCards";
-import Search from "./Search";
+import React, { useEffect, useState } from 'react'
+import UserCard from './UserCards'
+import Search from './Search'
 
 export const OurAlumni = () => {
-  const [alumni, setAlumni] = useState([]);
-  const [filteredUsers, setFilteredUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const [alumni, setAlumni] = useState([])
+  const [filteredUsers, setFilteredUsers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
 
-  const API = "http://localhost:3000/api/alumni";
+  const API = 'http://localhost:3000/api/alumni'
 
   const fetchAlumni = async () => {
     try {
-      const res = await fetch(API);
-      const data = await res.json();
+      const res = await fetch(API)
+      const data = await res.json()
       // console.log(data); // Debug API response
-      setAlumni(data || []); // Adjust based on API structure
-      setFilteredUsers(data || []);
-      setLoading(false);
+      setAlumni(data || []) // Adjust based on API structure
+      setFilteredUsers(data || [])
+      setLoading(false)
     } catch (error) {
-      console.error("Error fetching alumni data:", error);
-      setLoading(false);
-      setError(error.message);
+      console.error('Error fetching alumni data:', error)
+      setLoading(false)
+      setError(error.message)
     }
-  };
+  }
 
   useEffect(() => {
-    fetchAlumni();
-  }, []);
-
+    fetchAlumni()
+  }, [])
 
   const handleSearch = (query, filter) => {
-    const lowerCaseQuery = query.toLowerCase();
+    if (!query.trim()) {
+      setFilteredUsers(alumni) // Show all if query is empty
+      return
+    }
+
+    const lowerCaseQuery = query.toLowerCase()
+
     const filtered = alumni.filter((user) => {
-      if (filter === "name") {
-        return user.name.toLowerCase().includes(lowerCaseQuery);
-      } else if (filter === "city") {
-        return user.city.toLowerCase().includes(lowerCaseQuery);
-      } else if (filter === "skills") {
-        return user.skills.some((skill) =>
-          skill.toLowerCase().includes(lowerCaseQuery)
-        );
-      } else if (filter === "passOut") {
-        return user.passOut.toLowerCase().includes(lowerCaseQuery); // Batch filter logic
+      if (!user) return false // Prevent crashing if user object is null
+
+      const name = user.name || '' // Provide default empty string
+      const city = user.city || ''
+      const skills = user.skills || []
+      const passOut = user.passOut ? String(user.passOut) : ''
+
+      if (filter === 'name') {
+        return name.toLowerCase().includes(lowerCaseQuery)
+      } else if (filter === 'city') {
+        return city.toLowerCase().includes(lowerCaseQuery)
+      } else if (filter === 'skills') {
+        return skills.some((skill) =>
+          skill.toLowerCase().includes(lowerCaseQuery),
+        )
+      } else if (filter === 'passOut') {
+        return passOut.toLowerCase().includes(lowerCaseQuery)
       }
-      return false;
-    });
-    setFilteredUsers(filtered);
-  };
+      return false
+    })
+
+    setFilteredUsers(filtered)
+  }
 
   if (loading) {
-    return <p className="text-center">Loading alumni data...</p>;
+    return <p className="text-center">Loading alumni data...</p>
   }
 
   if (error) {
-    return <p className="text-center text-red-500">Error: {error}</p>;
+    return <p className="text-center text-red-500">Error: {error}</p>
   }
 
   return (
@@ -73,7 +86,7 @@ export const OurAlumni = () => {
         )}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default OurAlumni;
+export default OurAlumni
diff --git a/client/src/components/Search.jsx b/client/src/components/Search.jsx
@@ -1,33 +1,33 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 const Search = ({ onSearch }) => {
   const [query, setQuery] = useState("");
   const [filter, setFilter] = useState("name");
 
-  const handleQueryChange = (e) => {
-    setQuery(e.target.value);
-    onSearch(e.target.value, filter);
-  };
+  useEffect(() => {
+    const delaySearch = setTimeout(() => {
+      onSearch(query.trim(), filter);
+    }, 300); // Debounce search input to avoid too many calls
 
-  const handleFilterChange = (e) => {
-    setFilter(e.target.value);
-    onSearch(query, e.target.value);
-  };
+    return () => clearTimeout(delaySearch);
+  }, [query, filter, onSearch]);
 
   return (
-    <div className="flex justify-center mb-6 rounded-r-[30px]">
+    <div className="flex justify-center mb-6">
+      {/* Search Input */}
       <input
         type="text"
         placeholder="Search alumni..."
         value={query}
-        onChange={handleQueryChange}
-        className="border-none w-full max-w-xl p-[12px] text-[1rem] rounded-l-[30px] bg-[#e0e5ec] shadow-[inset_8px_8px_16px_#b3b9c5,inset_-8px_-8px_16px_#ffffff] outline-none focus:shadow-[inset_8px_8px_16px_#b3b9c5,inset_-8px_-8px_16px_#ffffff,0_0_5px_rgba(81,203,238,1)] transition-all duration-300 ease-in-out"
-        required
+        onChange={(e) => setQuery(e.target.value)}
+        className="border-none w-full max-w-xl p-[12px] text-[1rem] rounded-l-[30px] bg-[#e0e5ec] shadow-[inset_8px_8px_16px_#b3b9c5,inset_-8px_-8px_16px_#ffffff] outline-none focus:shadow-[inset_4px_4px_8px_#b3b9c5,inset_-4px_-4px_8px_#ffffff] transition-all duration-300 ease-in-out"
       />
+
+      {/* Filter Dropdown */}
       <select
         value={filter}
-        onChange={handleFilterChange}
-        className="border-none w-auto p-[12px] rounded-r-[30px] bg-[#e0e5ec] shadow-[inset_8px_8px_16px_#b3b9c5,inset_-8px_-8px_16px_#ffffff] text-[1rem] outline-none focus:shadow-[inset_8px_8px_16px_#b3b9c5,inset_-8px_-8px_16px_#ffffff,0_0_5px_rgba(81,203,238,1)] transition-all duration-300 ease-in-out appearance-none"
+        onChange={(e) => setFilter(e.target.value)}
+        className="border-none w-auto p-[12px] rounded-r-[30px] bg-[#e0e5ec] shadow-[inset_8px_8px_16px_#b3b9c5,inset_-8px_-8px_16px_#ffffff] text-[1rem] outline-none focus:shadow-[inset_4px_4px_8px_#b3b9c5,inset_-4px_-4px_8px_#ffffff] transition-all duration-300 ease-in-out appearance-none cursor-pointer"
       >
         <option value="name">Name</option>
         <option value="city">City</option>

diff --git a/client/src/components/UserCards.jsx b/client/src/components/UserCards.jsx
@@ -2,38 +2,40 @@ import React from "react";
 
 const UserCard = ({ user }) => {
   return (
-    <div className="bg-[#f0f0f3] rounded-2xl shadow-[8px_8px_16px_#d1d1d1,-8px_-8px_16px_#ffffff] p-6 transition-transform transform hover:scale-105">
-      <div className="flex flex-col items-center text-center">
+    <div className="bg-[#e0e5ec] rounded-[20px] p-[25px] shadow-[8px_8px_16px_#b3b9c5,-8px_-8px_16px_#ffffff] max-w-[250px] w-full text-center">
+      <div className="flex flex-col items-center">
 
         {/* Profile Photo */}
         <img
           src={user.profilePhoto}
           alt={user.fullName}
-          className="w-28 h-28 rounded-full shadow-md border-4 border-[#e0e0e0] mb-4"
+          className="w-20 h-20 rounded-full shadow-md border-2 border-[#d1d9e6] mb-3"
         />
 
         {/* Full Name */}
-        <h2 className="text-2xl font-semibold text-gray-900">{user.fullName}</h2>
-        
+        <h2 className="text-[1.3rem] font-bold text-[#333]">{user.fullName}</h2>
+
         {/* Job Role */}
         <p className="text-gray-700 text-sm font-medium">{user.jobRole}</p>
 
         {/* City & Passout Year */}
-        <p className="text-gray-600 text-sm mt-1">
-          📍 {user.city} | 🎓 Passout: {user.passOutYear}
+        <p className="text-gray-600 text-xs mt-1">
+          📍 {user.city} | 🎓 {user.passOutYear}
         </p>
 
         {/* Current Company */}
-        <p className="text-gray-600 text-sm">🏢 Works at: <strong>{user.currentCompany}</strong></p>
+        <p className="text-gray-600 text-xs mt-1">
+          🏢 Work at: {user.currentCompany}
+        </p>
 
         {/* Skills Section */}
-        <div className="mt-4 w-full">
-          <strong className="text-gray-800">Skills:</strong>
-          <div className="flex flex-wrap justify-center gap-2 mt-2">
+        <div className="w-full mt-2">
+          <strong className="text-gray-800 text-xs">Skills:</strong>
+          <div className="flex flex-wrap justify-center gap-1 mt-1">
             {user.skills.map((skill, index) => (
               <span
                 key={index}
-                className="px-3 py-1 text-sm font-medium text-gray-700 bg-[#e0e0e0] rounded-lg shadow-[inset_4px_4px_8px_#d1d1d1,inset_-4px_-4px_8px_#ffffff]"
+                className="px-2 py-1 text-xs font-medium text-gray-700 bg-[#e0e0e0] rounded-lg shadow-[inset_4px_4px_8px_#b3b9c5,inset_-4px_-4px_8px_#ffffff]"
               >
                 {skill}
               </span>