required filter working

Author: afinn12

pages/index.js

@@ -1,3 +1,4 @@
+
 import { useEffect, useState } from "react";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
@@ -9,13 +10,14 @@ export default function Home() {
   const [jobs, setJobs] = useState([]);
   const [rows, setRows] = useState([]);
   const [expandedRows, setExpandedRows] = useState([]);
+  const [requiredFilter, setRequiredFilter] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
       let data = {};
 
       if (process.env.NODE_ENV === "development") {
-        data = (await import("../job_stats.json")).default;
+        data = (await import("../data/job_stats.json")).default;
       } else {
         const response = await fetch(
           "https://raw.githubusercontent.com/kata-containers/kata-containers.github.io" +
@@ -43,15 +45,25 @@ export default function Home() {
 
   useEffect(() => {
     setLoading(true);
+    // Filter based on required tag.
+    let filteredJobs = jobs;
+    if (requiredFilter){
+      filteredJobs = filteredJobs.filter((job) => job.required);
+    }
 
-    // Create rows to set into table.
-    const rows = jobs.map((job) => ({
-      ...job,
-      weather: getWeatherIndex(job),
-    }));
-    setRows(rows);
+    //Set the rows for the table.
+    setRows(
+      filteredJobs.map((job) => ({
+        name          : job.name,
+        runs          : job.runs,
+        fails         : job.fails,
+        skips         : job.skips,
+        required      : job.required,
+        weather       : getWeatherIndex(job),
+      }))
+    );
     setLoading(false);
-  }, [jobs]);
+  }, [jobs, requiredFilter]);
 
   const toggleRow = (rowData) => {
     const isRowExpanded = expandedRows.includes(rowData);
@@ -66,6 +78,11 @@ export default function Home() {
     setExpandedRows(updatedExpandedRows);
   };
 
+  const buttonClass = (active) => `tab md:px-4 px-2 py-2 border-2 
+    ${active ? "border-blue-500 bg-blue-500 text-white" 
+      : "border-gray-300 bg-white hover:bg-gray-100"}`;
+
+
   // Template for rendering the Name column as a clickable item
   const nameTemplate = (rowData) => {
     return (
@@ -178,9 +195,14 @@ export default function Home() {
           "m-0 h-full p-4 overflow-x-hidden overflow-y-auto bg-surface-ground font-normal text-text-color antialiased select-text"
         }
       >
+        <button 
+              className={buttonClass(requiredFilter)} 
+              onClick={() => setRequiredFilter(!requiredFilter)}>
+              Required Jobs Only
+            </button>
         <div>{renderTable()}</div>
         <div className="mt-4 text-lg">Total Rows: {rows.length}</div>
       </main>
     </div>
   );
-}
+}