Integrate groups endpoints in frontend

This commit is contained in:
adam-skowronek 2022-06-13 20:03:34 +02:00
parent f6b0d7bc2f
commit fcc894aba9
3 changed files with 63 additions and 108 deletions

View File

@ -1,50 +1,36 @@
import axiosInstance from './axiosInstance' import axiosInstance from './axiosInstance'
import { Leader } from './leaders' import { Leader } from './leaders'
import { Student } from './students'
type OrderType = 'asc' | 'desc' export interface CreateGroup {
interface GroupResponse {
max_pages: number
groups: Group[]
}
export interface Group {
id: number
name: string
project_supervisor: Leader
points_for_first_term: number
points_for_second_term: number
}
export interface GroupPost {
name: string name: string
project_supervisor_id: number project_supervisor_id: number
students: number[] students: number[]
} }
export interface Group {
cdyd_kod: string
id: number
name: string
points_for_first_term: number
points_for_second_term: number
project_supervisor: Leader
prz_kod: string
tzaj_kod: string
}
export const getGroups = ( export const getGroups = (
params: Partial<{ params: Partial<{
name: string
page: number page: number
per_page: number per_page: number
}> = {}, name: string
}>,
) => ) =>
axiosInstance.get<GroupResponse>( axiosInstance.get<{ max_pages: number; groups: Group[] }>(
'http://127.0.0.1:5000/api/coordinator/groups', 'http://127.0.0.1:5000/api/coordinator/groups/',
{ params }, {
params,
},
) )
export const createGroup = (payload: Group) => export const createGroup = (payload: CreateGroup) =>
axiosInstance.post('http://127.0.0.1:5000/api/coordinator/groups/', payload) axiosInstance.post('http://127.0.0.1:5000/api/coordinator/groups/', payload)
export const uploadGroups = (payload: FormData) =>
axiosInstance.post(
'http://127.0.0.1:5000/api/coordinator/groups/upload/',
payload,
)
export const deleteGroup = (payload: Number) =>
axiosInstance.delete(
'http://127.0.0.1:5000/api/coordinator/groups/'+payload.toString()+'/',
)

View File

@ -1,11 +1,11 @@
import { useState } from 'react' import { useState } from 'react'
import { Controller, useForm } from 'react-hook-form' import { Controller, NestedValue, useForm } from 'react-hook-form'
import { useQuery, useMutation } from 'react-query' import { useMutation, useQuery } from 'react-query'
import { getStudents } from '../../api/students' import { getStudents } from '../../api/students'
import { createGroup, CreateGroup } from '../../api/groups'
import InputError from '../../components/InputError' import InputError from '../../components/InputError'
import Select from 'react-select' import Select from 'react-select'
import { getLeaders } from '../../api/leaders' import { getLeaders } from '../../api/leaders'
import { createGroup, Group } from '../../api/groups'
type SelectValue = { type SelectValue = {
value: string | number value: string | number
@ -18,33 +18,10 @@ const AddGroup = () => {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset,
control, control,
} = useForm<{ } = useForm<CreateGroup & { students: NestedValue<number[]> }>({
name: string
project_supervisor_id: any
students: any
}>({
mode: 'onBlur', mode: 'onBlur',
}) })
const { mutate: mutateCreateGroup } = useMutation(
'createStudent',
(payload: any) => createGroup(payload),
{
onSuccess: () => {
reset()
setIsAlertVisible(true)
},
},
)
const onSubmit = (data: any) => {
data.project_supervisor_id = data.project_supervisor_id.value
data.students = data.students.map((st: any) => st.value)
mutateCreateGroup(data)
console.log(data)
}
const [studentOptions, setStudentOptions] = useState<SelectValue[]>([])
const { isLoading: areStudentsLoading } = useQuery( const { isLoading: areStudentsLoading } = useQuery(
'students', 'students',
@ -62,26 +39,40 @@ const AddGroup = () => {
}, },
}, },
) )
const [leadersOptions, setLeadersOptions] = useState<SelectValue[]>([])
const { isLoading: areLeadersLoading } = useQuery( const { isLoading: areLeadersLoading } = useQuery(
'project_supervisors', 'leaders',
() => getLeaders({ per_page: 1000 }), () => getLeaders({ per_page: 1000 }),
{ {
onSuccess: (data) => { onSuccess: (data) => {
setLeadersOptions( setSupervisorOptions(
data?.data.project_supervisors.map(({ id, first_name, last_name }) => { data?.data.project_supervisors.map(
return { ({ id, first_name, last_name }) => ({
value: id, value: id,
label: `${first_name} ${last_name}`, label: `${first_name} ${last_name}`,
}
}), }),
),
) )
}, },
}, },
) )
const { mutate: mutateCreateGroup } = useMutation(
'createGroup',
(payload: CreateGroup) => createGroup(payload),
{
onSuccess: () => {
setIsAlertVisible(true)
},
},
)
const onSubmit = (data: CreateGroup) => {
mutateCreateGroup(data)
}
const [studentOptions, setStudentOptions] = useState<SelectValue[]>([])
const [supervisorOptions, setSupervisorOptions] = useState<SelectValue[]>([])
if (areStudentsLoading || areLeadersLoading) { if (areStudentsLoading || areLeadersLoading) {
return <>Ładowanie</> return <>Ładowanie</>
} }
@ -120,9 +111,9 @@ const AddGroup = () => {
rules={{ required: true }} rules={{ required: true }}
render={({ field: { onChange, onBlur } }) => ( render={({ field: { onChange, onBlur } }) => (
<Select <Select
options={leadersOptions} options={supervisorOptions}
placeholder="Wybierz opiekuna" placeholder="Wybierz opiekuna"
onChange={(val) => onChange(val)} onChange={(val) => onChange(val?.value)}
onBlur={onBlur} onBlur={onBlur}
styles={{ styles={{
control: (styles) => ({ control: (styles) => ({
@ -152,7 +143,9 @@ const AddGroup = () => {
options={studentOptions} options={studentOptions}
placeholder="Wybierz studentów" placeholder="Wybierz studentów"
isMulti isMulti
onChange={onChange} onChange={(values) =>
onChange(values.map((value) => value.value))
}
onBlur={onBlur} onBlur={onBlur}
styles={{ styles={{
control: (styles) => ({ control: (styles) => ({

View File

@ -1,44 +1,18 @@
import { useEffect, useState } from 'react'
import { useQuery } from 'react-query' import { useQuery } from 'react-query'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { getGroups, deleteGroup } from '../../api/groups' import { getGroups } from '../../api/groups'
const Groups = () => { const Groups = () => {
let navigate = useNavigate() let navigate = useNavigate()
const [page, setPage] = useState(1)
const [perPage, setPerPage] = useState(10)
const perPageOptions = [ const { isLoading: areGroupsLoading, data: groups } = useQuery(
{ ['groups'],
value: 10, () => getGroups({ per_page: 1000 }),
label: '10 rekordów',
},
{
value: 20,
label: '20 rekordów',
},
{
value: 50,
label: '50 rekordów',
},
{
value: 1000,
label: 'Pokaż wszystkie',
},
]
const {
isLoading: isGroupsLoading,
data: groups,
refetch: refetchGroups,
} = useQuery(['groups', page, perPage], () =>
getGroups({ page, per_page: perPage }),
) )
useEffect(() => { if (areGroupsLoading) {
setPage(1) return <div>Ładowanie</div>
}, [perPage]) }
return ( return (
<div> <div>
<button <button
@ -58,7 +32,7 @@ const Groups = () => {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-gray-100">
{groups?.data?.groups.map( {groups?.data?.groups?.map(
({ ({
id, id,
name, name,
@ -68,7 +42,9 @@ const Groups = () => {
}) => ( }) => (
<tr key={id}> <tr key={id}>
<td>{name}</td> <td>{name}</td>
<td>{project_supervisor.first_name + ' ' + project_supervisor.last_name}</td> <td>
{`${project_supervisor.first_name} ${project_supervisor.last_name}`}
</td>
<td>{points_for_first_term}</td> <td>{points_for_first_term}</td>
<td>{points_for_second_term}</td> <td>{points_for_second_term}</td>
</tr> </tr>