Add export button

frontend/src/api/students.ts

@@ -40,7 +40,15 @@ export const uploadStudents = (payload: FormData) =>
     payload,
   )
 
-export const deleteStudent = (payload: Number) =>
+export const deleteStudent = (index: number) =>
   axiosInstance.delete(
-    'http://127.0.0.1:5000/api/coordinator/students/'+payload.toString()+'/',
+    `http://127.0.0.1:5000/api/coordinator/students/${index}/`,
+  )
+
+export const downloadStudents = () =>
+  axiosInstance.post(
+    'http://127.0.0.1:5000/api/coordinator/students/download/',
+    {
+      responseType: 'blob',
+    },
   )

frontend/src/views/coordinator/Students.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import { useMutation, useQuery } from 'react-query'
 import { useNavigate } from 'react-router-dom'
-import { getStudents, uploadStudents, deleteStudent } from '../../api/students'
+import {
+  getStudents,
+  uploadStudents,
+  deleteStudent,
+  downloadStudents,
+} from '../../api/students'
 import classNames from 'classnames'
 
 const Students = () => {
@@ -38,6 +43,21 @@ const Students = () => {
     getStudents({ page, per_page: perPage, mode }),
   )
 
+  const { mutate: mutateDownload } = useMutation(
+    'downloadStudents',
+    () => downloadStudents(),
+    {
+      onSuccess: (res) => {
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', 'students_list.csv')
+        document.body.appendChild(link)
+        link.click()
+      },
+    },
+  )
+
   const { mutate: mutateUpload } = useMutation(
     'uploadStudents',
     (payload: FormData) => uploadStudents(payload),
@@ -46,6 +66,14 @@ const Students = () => {
     },
   )
 
+  const { mutate: mutateDelete } = useMutation(
+    'deleteStudent',
+    (index: number) => deleteStudent(index),
+    {
+      onSuccess: () => refetchStudents(),
+    },
+  )
+
   const handleOnChange = (event: any) => {
     const file = event.target.files[0]
     const payload = new FormData()
@@ -60,7 +88,7 @@ const Students = () => {
   return (
     <div>
       <div className="flex items-center justify-between flex-col gap-3 md:flex-row md:gap-0">
-        <div>
+        <div className="flex gap-3">
           <button
             className="btn btn-success btn-xs md:btn-md"
             onClick={() => navigate('/coordinator/add-student')}
@@ -68,7 +96,7 @@ const Students = () => {
             Dodaj nowego studenta
           </button>
           <label
-            className="ml-4 btn btn-success btn-xs md:btn-md btn-outline"
+            className="btn btn-success btn-xs md:btn-md btn-outline"
             htmlFor="file"
           >
             Importuj
@@ -81,6 +109,12 @@ const Students = () => {
             className="hidden"
             onChange={handleOnChange}
           />
+          <button
+            className="btn btn-xs md:btn-md"
+            onClick={() => mutateDownload()}
+          >
+            Eksportuj
+          </button>
         </div>
         <div className="flex">
           <select className="select select-xs md:select-md select-bordered mr-3">
@@ -135,7 +169,9 @@ const Students = () => {
                       <td>{index}</td>
                       <td>{group === null ? 'Nie' : 'Tak'}</td>
                       <td>{mode ? 'stacjonarny' : 'niestacjonarny'}</td>
-                      <td><button onClick={() => deleteStudent(index).then(() => refetchStudents())}>X</button></td>
+                      <td>
+                        <button onClick={() => mutateDelete(index)}>X</button>
+                      </td>
                     </tr>
                   ))}
               </tbody>