Refactor leaders view

frontend/src/views/coordinator/Leaders.tsx

@@ -36,6 +36,14 @@ const Leaders = () => {
     getLeaders({ page, per_page: perPage }),
   )
 
+  const { mutate: mutateDelete } = useMutation(
+    'deleteLeader',
+    (index: number) => deleteLeader(index),
+    {
+      onSuccess: () => refetchLeaders(),
+    },
+  )
+
   useEffect(() => {
     setPage(1)
   }, [perPage])
@@ -79,18 +87,35 @@ const Leaders = () => {
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-100">
-                {leaders?.data?.project_supervisors
+                {leaders?.data?.project_supervisors.map(
-                  .map(({ id, first_name, last_name, email, limit_group, count_group, mode }) => (
+                  ({
+                    id,
+                    first_name,
+                    last_name,
+                    email,
+                    limit_group,
+                    count_groups,
+                    mode,
+                  }) => (
                     <tr key={id}>
                       <td>{first_name}</td>
                       <td>{last_name}</td>
                       <td>{email}</td>
                       <td>{limit_group}</td>
-                      <td>{count_group}</td>
+                      <td>{count_groups}</td>
-                      <td>{mode==0 ? "Stacjonarny" : mode==1 ? "Niestacjonarny" : "Nie/stacjonarny"}</td>
+                      <td>
-                      <td><button onClick={() => deleteLeader(id).then(() => refetchLeaders())}>X</button></td>
+                        {mode == 0
+                          ? 'Stacjonarny'
+                          : mode == 1
+                          ? 'Niestacjonarny'
+                          : 'Nie/stacjonarny'}
+                      </td>
+                      <td>
+                        <button onClick={() => mutateDelete(id)}>X</button>
+                      </td>
                     </tr>
-                  ))}
+                  ),
+                )}
               </tbody>
             </table>
           </div>
@@ -105,7 +130,7 @@ const Leaders = () => {
               </button>
               {[
                 ...Array(
-                    leaders?.data?.max_pages && leaders?.data?.max_pages + 1,
+                  leaders?.data?.max_pages && leaders?.data?.max_pages + 1,
                 ).keys(),
               ]
                 .slice(1)
@@ -135,4 +160,4 @@ const Leaders = () => {
   )
 }
 
-export default Leaders;
+export default Leaders