SP-9 Dodanie filtrowania studentów bez grypy

frontend/src/views/coordinator/Students.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useMutation, useQuery } from 'react-query'
 import { getStudents, uploadStudents } from '../../api/students'
 
@@ -30,28 +30,44 @@ const Students = () => {
     mutateUpload(payload)
   }
 
+  const [state, setState] = useState({
+    showGroupless: false
+  });
+
   if (isStudentsLoading) {
     return <div>Ładowanie</div>
   }
   return (
     <div>
-      <button className="bg-green-400 p-3 rounded-lg text-white font-extrabold hover:bg-green-300">
-        Dodaj nowego studenta
-      </button>
-      <label
-        className="ml-4 text-green-400 font-extrabold rounded-lg border-2 p-3 border-green-400 hover:border-green-300 cursor-pointer"
-        htmlFor="file"
-      >
-        Importuj
-      </label>
-      <input
-        type="file"
-        id="file"
-        name="avatar"
-        accept=".csv"
-        className="hidden"
-        onChange={handleOnChange}
-      />
+      <div className="flex items-center">
+        <button className="bg-green-400 p-3 rounded-lg text-white font-extrabold hover:bg-green-300">
+          Dodaj nowego studenta
+        </button>
+        <label
+          className="ml-4 text-green-400 font-extrabold rounded-lg border-2 p-3 border-green-400 hover:border-green-300 cursor-pointer"
+          htmlFor="file"
+        >
+          Importuj
+        </label>
+        <input
+          type="file"
+          id="file"
+          name="avatar"
+          accept=".csv"
+          className="hidden"
+          onChange={handleOnChange}
+        />
+        <label className="ml-auto">
+          <span className="slider round">Tylko niezapisani</span>
+          <input type="checkbox"
+            className="m-2 checked: bg-black-400"
+            onChange={() => setState({
+              ...state,
+              showGroupless: !state.showGroupless
+            })}
+          />
+        </label>
+      </div>
 
       <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
         <table className="min-w-full text-sm divide-y divide-gray-200">
@@ -65,7 +81,9 @@ const Students = () => {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100">
-            {students?.data?.students?.map(
+            {students?.data?.students?.filter(
+              (st) => (st.group === null || !state.showGroupless)
+            ).map(
               ({ first_name, last_name, index, group, mode }) => (
                 <tr key={index}>
                   <td className="px-4 py-2 font-medium text-gray-900 whitespace-nowrap">