From a3dddd3751bb71b0a00c20ddff48dfc64decc21d Mon Sep 17 00:00:00 2001
From: adam-skowronek <adasko8@st.amu.edu.pl>
Date: Mon, 13 Jun 2022 19:48:52 +0200
Subject: [PATCH] Add registrations view

---
 frontend/src/App.tsx                      | 10 ++++-
 frontend/src/api/enrollment.ts            | 21 +++++++++++
 frontend/src/views/student/Enrollment.tsx | 45 +++++++++++++++++++++++
 frontend/src/views/student/Student.tsx    | 15 ++++++++
 4 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/api/enrollment.ts
 create mode 100644 frontend/src/views/student/Enrollment.tsx
 create mode 100644 frontend/src/views/student/Student.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 99dfbf8..193bd43 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import './App.css'
 import AddGroup from './views/coordinator/AddGroup'
 import AddStudent from './views/coordinator/AddStudent'
@@ -10,6 +10,8 @@ import Groups from './views/coordinator/Groups'
 import Leaders from './views/coordinator/Leaders'
 import Students from './views/coordinator/Students'
 import Login from './views/Login'
+import Enrollment from './views/student/Enrollment'
+import Student from './views/student/Student'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -26,7 +28,7 @@ function App() {
         <Routes>
           <Route index element={<Login />} />
           <Route path="coordinator" element={<Coordinator />}>
-            <Route index element={<Students />} />
+            <Route index element={<Navigate to="students" />} />
             <Route path="groups" element={<Groups />} />
             <Route path="students" element={<Students />} />
             <Route path="leaders" element={<Leaders />} />
@@ -34,6 +36,10 @@ function App() {
             <Route path="add-group" element={<AddGroup />} />
             <Route path="add-leader" element={<AddLeader />} />
           </Route>
+          <Route path="student" element={<Student />}>
+            <Route index element={<Navigate to="enrollment" />} />
+            <Route path="enrollment" element={<Enrollment />} />
+          </Route>
         </Routes>
       </QueryClientProvider>
     </div>
diff --git a/frontend/src/api/enrollment.ts b/frontend/src/api/enrollment.ts
new file mode 100644
index 0000000..0c130d2
--- /dev/null
+++ b/frontend/src/api/enrollment.ts
@@ -0,0 +1,21 @@
+import axiosInstance from './axiosInstance'
+
+export const getEnrollmentList = (
+  params: Partial<{
+    page: number
+    per_page: number
+    name: string
+  }>,
+) =>
+  axiosInstance.get<{
+    max_pages: number
+    project_supervisors: {
+      available_groups: number
+      first_name: string
+      last_name: string
+      email: string
+      mode: boolean
+    }[]
+  }>('http://127.0.0.1:5000/api/students/registrations/', {
+    params,
+  })
diff --git a/frontend/src/views/student/Enrollment.tsx b/frontend/src/views/student/Enrollment.tsx
new file mode 100644
index 0000000..b98a2e7
--- /dev/null
+++ b/frontend/src/views/student/Enrollment.tsx
@@ -0,0 +1,45 @@
+import { useQuery } from 'react-query'
+import { getEnrollmentList } from '../../api/enrollment'
+
+const Enrollment = () => {
+  const { isLoading, data: enrollmentData } = useQuery(['enrollment'], () =>
+    getEnrollmentList({ per_page: 1000 }),
+  )
+  if (isLoading) {
+    return <div>Ładowanie</div>
+  }
+  return (
+    <div>
+      <div className="flex items-center"></div>
+      <h2>Opiekunowie</h2>
+      <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
+        <table className="min-w-full table table-compact">
+          <thead>
+            <tr className="bg-gray-50">
+              <th>Imię</th>
+              <th>Nazwisko</th>
+              <th>Email</th>
+              <th>Tryb</th>
+              <th>Wolne miejsca</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {enrollmentData?.data?.project_supervisors?.map(
+              ({ first_name, last_name, email, mode, available_groups }) => (
+                <tr key={email}>
+                  <td>{first_name}</td>
+                  <td>{last_name}</td>
+                  <td>{email}</td>
+                  <td>{mode ? 'stacjonarny' : 'niestacjonarny'}</td>
+                  <td>{available_groups}</td>
+                </tr>
+              ),
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default Enrollment
diff --git a/frontend/src/views/student/Student.tsx b/frontend/src/views/student/Student.tsx
new file mode 100644
index 0000000..ebbcf38
--- /dev/null
+++ b/frontend/src/views/student/Student.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom'
+import TopBar from '../../components/TopBar'
+
+const Student = () => {
+  return (
+    <>
+      <TopBar routes={[{ name: 'Zapisy', path: '/student/enrollment' }]} />
+      <div className="m-10">
+        <Outlet />
+      </div>
+    </>
+  )
+}
+
+export default Student