64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { useQuery } from 'react-query'
|
||
|
|
import { getStudents } from '../../api/students'
|
||
|
|
|
||
|
|
const TableHeader = (props: { children: React.ReactNode }) => (
|
||
|
|
<th className="px-4 py-2 font-medium text-left text-gray-900 whitespace-nowrap">
|
||
|
|
{props.children}
|
||
|
|
</th>
|
||
|
|
)
|
||
|
|
|
||
|
|
const Students = () => {
|
||
|
|
const { isLoading, data: students } = useQuery('students', () =>
|
||
|
|
getStudents(),
|
||
|
|
)
|
||
|
|
if (isLoading) {
|
||
|
|
return <div>Ładowanie</div>
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<button className="bg-green-400 p-3 rounded-lg text-white font-bold hover:bg-green-300">
|
||
|
|
Dodaj nowego studenta
|
||
|
|
</button>
|
||
|
|
<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">
|
||
|
|
<thead>
|
||
|
|
<tr className="bg-gray-50">
|
||
|
|
<TableHeader>Imie</TableHeader>
|
||
|
|
<TableHeader>Nazwisko</TableHeader>
|
||
|
|
<TableHeader>Indeks</TableHeader>
|
||
|
|
<TableHeader>Zapisany</TableHeader>
|
||
|
|
<TableHeader>Tryb</TableHeader>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y divide-gray-100">
|
||
|
|
{students?.data?.students?.map(
|
||
|
|
({ first_name, last_name, index, group, mode }) => (
|
||
|
|
<tr>
|
||
|
|
<td className="px-4 py-2 font-medium text-gray-900 whitespace-nowrap">
|
||
|
|
{first_name}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-2 text-gray-700 whitespace-nowrap">
|
||
|
|
{last_name}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-2 text-gray-700 whitespace-nowrap">
|
||
|
|
{index}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-2 text-gray-700 whitespace-nowrap">
|
||
|
|
{group === null ? 'Nie' : 'Tak'}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-2 text-gray-700 whitespace-nowrap">
|
||
|
|
{mode ? 'stacjonarny' : 'niestacjonarny'}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Students
|