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,11 +30,16 @@ const Students = () => {
     mutateUpload(payload)
   }
 
+  const [state, setState] = useState({
+    showGroupless: false
+  });
+
   if (isStudentsLoading) {
     return <div>Ładowanie</div>
   }
   return (
     <div>
+      <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>
@@ -52,6 +57,17 @@ const Students = () => {
           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">