Add filters filters for new buttons to filter out the internships on the basis of role and industry

src/Component/Documetation/Internship/InternPage.jsx

@@ -1,17 +1,27 @@
 /** @format */
 
 import "./internpage.css";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import PaginatedItems from "../../pagination";
+import internshipsData from "../../../DB/DataBase.json";
 
 let InternPage = () => {
   // Dispatch and Subscribe
-  const button = document.querySelectorAll("viewMore");
   const ref = useRef(null);
 
+  const [internships, setInternships] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
   const [currentData, setCurrentData] = useState([]);
   const [pageSummary, setPageSummary] = useState("");
-  // console.log(currentData)
+  const [roleFilter, setRoleFilter] = useState("");
+  const [industryFilter, setIndustryFilter] = useState("");
+
+  useEffect(() => {
+    if (currentData.length === 0 || (!roleFilter && !industryFilter)) {
+      setCurrentData(internshipsData.slice(0, 12)); // Adjust the number as needed
+      console.log("Default internships shown due to no matches:", currentData);
+    }
+  }, [currentData]);
 
   const monthAbbreviations = {
     january: "Jan",
@@ -25,38 +35,133 @@ let InternPage = () => {
     september: "Sep",
     october: "Oct",
     november: "Nov",
-    december: "Dec"
-};
+    december: "Dec",
+  };
 
   function shortmonth(month) {
     let montharr;
     const dashRegex = /[\u2013\u2014\-]/;
     if (month.match(dashRegex)) {
-      montharr = month.split(dashRegex).map(month => month.trim());
-
+      montharr = month.split(dashRegex).map((month) => month.trim());
     }
     if (month.includes("/")) {
-      montharr=month.split("/")
+      montharr = month.split("/");
     }
     if (montharr) {
-      let shortedmonth=montharr.map(months=>monthAbbreviations[(months.toLowerCase().trim())])
+      let shortedmonth = montharr.map(
+        (months) => monthAbbreviations[months.toLowerCase().trim()]
+      );
       if (shortedmonth[0] !== undefined) {
-        return shortedmonth.join("/")
-
+        return shortedmonth.join("/");
       }
     }
-    return month
+    return month;
+  }
+
+  useEffect(() => {
+    console.log("Initial internships data:", internshipsData);
+    if (internshipsData && internshipsData.length > 0) {
+      setInternships(internshipsData);
+      const defaultData = internshipsData.slice(0, 12); // Show 12 items initially
+      console.log("Default Data:", defaultData);
+      setFilteredData(defaultData);
+      setCurrentData(defaultData);
+      setPageSummary(
+        `Showing 1 to ${Math.min(12, defaultData.length)} results out of ${
+          internshipsData.length
+        }`
+      );
+    } else {
+      console.error("Internships data is empty or not loaded correctly");
+    }
+  }, []);
+
+  useEffect(() => {
+    handleFilter();
+  }, [roleFilter, industryFilter]);
+
+  function handleFilter() {
+    console.log("Applying filters...");
+    console.log("Role Filter:", roleFilter);
+    console.log("Industry Filter:", industryFilter);
+
+    let filtered = internships;
+
+    if (roleFilter) {
+      filtered = filtered.filter(
+        (internship) =>
+          internship.role &&
+          internship.role.toLowerCase() === roleFilter.toLowerCase()
+      );
+      console.log("After role filter:", filtered);
+    }
+
+    if (industryFilter) {
+      filtered = filtered.filter(
+        (internship) =>
+          internship.industry &&
+          internship.industry.toLowerCase() === industryFilter.toLowerCase()
+      );
+      console.log("After industry filter:", filtered);
+    }
+
+    // Check if filtered data is empty
+    if (filtered.length === 0) {
+      setCurrentData([]); // Set current data to an empty array
+      setPageSummary("No internships are available matching your criteria.");
+    } else {
+      setFilteredData(filtered);
+      setCurrentData(filtered.slice(0, 6)); // Adjust the number as needed
+      setPageSummary(
+        `Showing 1 to ${Math.min(6, filtered.length)} results out of ${
+          filtered.length
+        }`
+      );
+    }
   }
 
   return (
     <div style={{ background: "black" }}>
       <p className="page-summary">{pageSummary}</p>
+      <div className="filterContainer">
+        <select
+          className="filterSelect"
+          value={roleFilter}
+          onChange={(e) => setRoleFilter(e.target.value)}
+        >
+          <option value="">Select Role</option>
+          <option value="Web Developer">Web Developer</option>
+          <option value="Java Developer">Java Developer</option>
+          <option value="Software Developer">Software Developer</option>
+          <option value="Sales">Sales</option>
+          <option value="Mentor">Mentor</option>
+          <option value="Other">Other</option>
+        </select>
 
-      <div className="internBox">
-        {currentData.map((item, index) => {
-          return (
+        <select
+          className="filterSelect"
+          value={industryFilter}
+          onChange={(e) => setIndustryFilter(e.target.value)}
+        >
+          <option value="">Select Industry/Sector</option>
+          <option value="Education">Education</option>
+          <option value="Technology">Technology</option>
+          <option value="Finance">Finance</option>
+          <option value="Marketing">Marketing</option>
+          <option value="Others">Others</option>
+        </select>
+      </div>
+
+      {currentData.length === 0 ? (
+        <p style={{ color: "white", textAlign: "center", margin: "20px" }}>
+          No internships available matching your criteria. Please try different
+          filters.
+        </p>
+      ) : (
+        <div className="internBox">
+          {currentData.map((item, index) => (
             <div className="BoxContent" key={index}>
-              <img className="ApiImg" key={index} src={item.image} alt="" />
+              <img className="ApiImg" src={item.image} alt="" />
               <h2 className="InternTitle" ref={ref}>
                 {item.internship_name}
               </h2>
@@ -65,28 +170,21 @@ let InternPage = () => {
                 <div className="duration">{shortmonth(item.duration)}</div>
               </div>
               <p className="desc">{item.description}</p>
-              {/* ----------write logic for this */}
-              {/* <div className="fullBox">
-              <h5 className='company_name'>{item.company_name}</h5>
-              <h5 className='Stipend'>{item.award}</h5>
-              <h5 className='internship_type'>{item.internship_type}</h5>
-              <button className='ApplyButton'>Apply Now ✅</button>
-            </div> */}
-
               <button
                 className="viewMore"
                 id="btn"
-                style={{ cursor: "none" }}
+                style={{ cursor: "pointer" }}
                 ref={ref}
                 onClick={() => {
                   window.open(item.link);
-                }}>
+                }}
+              >
                 Apply Now
               </button>
             </div>
-          );
-        })}
-      </div>
+          ))}
+        </div>
+      )}
 
       <PaginatedItems
         setCurrentData={setCurrentData}

src/Component/Documetation/Internship/internpage.css

@@ -112,9 +112,6 @@ body {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
 
-.BoxContent {
-    /* position: relative; */
-}
 
 .MoreDetails {
     position: absolute;
@@ -235,6 +232,63 @@ body {
     color: blueviolet;
     padding: 15px 10%;
 }
+.filterContainer {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.filterSelect {
+    padding: 10px;
+    border: 2px solid rgb(190, 21, 228);
+    border-radius: 5px;
+    background-color: transparent;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    transition: border 0.3s, background-color 0.3s, color 0.3s;
+}
+
+.filterSelect:focus {
+    outline: none;
+    border-color: rgb(230, 153, 244); /* Bright purple on focus */
+    background-color: rgba(190, 21, 228, 0.2);
+}
+
+.filterSelect option {
+
+    background-color: black;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+}
+.filterSelect option:hover,
+.filterSelect option:checked {
+    background-color: rgba(190, 21, 228, 0.8);
+    color: black;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.filterButton {
+    padding: 10px 20px;
+    border: 2px solid rgb(190, 21, 228);
+    border-radius: 5px;
+    background-color: transparent;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    cursor: pointer;
+    transition: color 0.3s, background-color 0.3s, border 0.3s;
+}
+
+.filterButton:hover {
+    background-color: rgb(230, 153, 244);
+    color: black;
+    border: 2px solid white;
+}
 
 /* @mediaQwery */
 
@@ -289,3 +343,9 @@ body {
         grid-template-columns: repeat(3, 1fr);
     }
 }
+@media screen and (max-width: 600px) {
+    .filterSelect {
+        width: 100%;
+        padding: 10px;
+    }
+}