`Refactor OurAlumni component to fetch alumni data from API and remov…

…e Profile component`

client/src/App.jsx

@@ -23,7 +23,6 @@ export default function App() {
   useEffect(() => {
     // Embed chatbot configuration
     window.embeddedChatbotConfig = {
-      chatbotId: "",
       chatbotId: "dQH5I7s2VhH8olxL6Cy3G",
       domain: "www.chatbase.co",
     };

client/src/components/OurAlumni.jsx

@@ -1,72 +1,38 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import UserCard from "./UserCards";
 import Search from "./Search";
 
-const OurAlumni = () => {
-  const users = [
-    {
-      name: "AbhiShek Rao",
-      email: "[email protected]",
-      avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
-      city: "Gorakhpur",
-      role: "Web Developer",
-      passOut: "MCA 2025",
-      skills: ["JavaScript", "React", "Node.js"],
-      bio: "Passionate web developer with a love for building interactive applications.",
-      worksAt: "TechSoft Pvt. Ltd.",
-    },
-    {
-      name: "Satish Pandey",
-      email: "[email protected]",
-      avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
-      city: "Lucknow",
-      role: "Data Scientist",
-      passOut: "MCA 2024",
-      skills: ["Python", "Machine Learning", "Data Analysis"],
-      bio: "Data scientist with a knack for uncovering insights from data.",
-      worksAt: "DataMinds Corp.",
-    },
-    {
-      name: "Suryam Shrivastav",
-      email: "[email protected]",
-      avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
-      city: "Delhi",
-      role: "UX Designer",
-      passOut: "MCA 2023",
-      skills: ["Figma", "Sketch", "User Research"],
-      bio: "Creative UX designer focused on enhancing user experiences.",
-      worksAt: "DesignHub",
-    },
-    {
-      name: "Suryam Shrivastav",
-      email: "[email protected]",
-      avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
-      city: "Delhi",
-      role: "UX Designer",
-      passOut: "MCA 2023",
-      skills: ["Figma", "Sketch", "User Research"],
-      bio: "Creative UX designer focused on enhancing user experiences.",
-      worksAt: "DesignHub",
-    },
-    {
-      name: "Suryam Shrivastav",
-      email: "[email protected]",
-      avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
-      city: "Delhi",
-      role: "UX Designer",
-      passOut: "MCA 2023",
-      skills: ["Figma", "Sketch", "User Research"],
-      bio: "Creative UX designer focused on enhancing user experiences.",
-      worksAt: "DesignHub",
-    },
-  ];
-
+export const OurAlumni = () => {
+  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 fetchAlumni = async () => {
+    try {
+      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);
+    } catch (error) {
+      console.error("Error fetching alumni data:", error);
+      setLoading(false);
+      setError(error.message);
+    }
+  };
 
-  const [filteredUsers, setFilteredUsers] = useState(users);
+  useEffect(() => {
+    fetchAlumni();
+  }, []);
+
 
   const handleSearch = (query, filter) => {
     const lowerCaseQuery = query.toLowerCase();
-    const filtered = users.filter((user) => {
+    const filtered = alumni.filter((user) => {
       if (filter === "name") {
         return user.name.toLowerCase().includes(lowerCaseQuery);
       } else if (filter === "city") {
@@ -82,24 +48,31 @@ const OurAlumni = () => {
     });
     setFilteredUsers(filtered);
   };
-
+
+  if (loading) {
+    return <p className="text-center">Loading alumni data...</p>;
+  }
+
+  if (error) {
+    return <p className="text-center text-red-500">Error: {error}</p>;
+  }
 
   return (
-      <div className="container mx-auto px-4 pt-4">
-        <h1 className="text-3xl font-bold text-center mb-4">Our Alumni</h1>
-        <Search onSearch={handleSearch} />
-        <div className="flex flex-wrap -mx-4">
-          {filteredUsers.length > 0 ? (
-            filteredUsers.map((user, index) => (
-              <div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8" key={index}>
-                <UserCard user={user} />
-              </div>
-            ))
-          ) : (
-            <p className="text-center w-full">No alumni found.</p>
-          )}
-        </div>
+    <div className="container mx-auto px-4 pt-4">
+      <h1 className="text-3xl font-bold text-center mb-4">Our Alumni</h1>
+      <Search onSearch={handleSearch} />
+      <div className="flex flex-wrap -mx-4">
+        {filteredUsers.length > 0 ? (
+          filteredUsers.map((user, index) => (
+            <div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8" key={index}>
+              <UserCard user={user} />
+            </div>
+          ))
+        ) : (
+          <p className="text-center w-full">No alumni found.</p>
+        )}
       </div>
+    </div>
   );
 };