Integrate groups endpoints in frontend

frontend/src/api/groups.ts

@@ -1,50 +1,36 @@
 import axiosInstance from './axiosInstance'
 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
   project_supervisor_id: 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 = (
   params: Partial<{
-    name: string
     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)
-
-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()+'/',
-  )

frontend/src/views/coordinator/AddGroup.tsx

@@ -1,11 +1,11 @@
 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 { createGroup, CreateGroup } from '../../api/groups'
 import InputError from '../../components/InputError'
 import Select from 'react-select'
 import { getLeaders } from '../../api/leaders'
-import { createGroup, Group } from '../../api/groups'
 
 type SelectValue = {
   value: string | number
@@ -18,33 +18,10 @@ const AddGroup = () => {
     register,
     handleSubmit,
     formState: { errors },
-    reset,
     control,
-  } = useForm<{
+  } = useForm<CreateGroup & { students: NestedValue<number[]> }>({
-    name: string
-    project_supervisor_id: any
-    students: any
-  }>({
     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(
     'students',
@@ -62,26 +39,40 @@ const AddGroup = () => {
       },
     },
   )
-
-  const [leadersOptions, setLeadersOptions] = useState<SelectValue[]>([])
-
   const { isLoading: areLeadersLoading } = useQuery(
-    'project_supervisors',
+    'leaders',
     () => getLeaders({ per_page: 1000 }),
     {
       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,
               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) {
     return <>Ładowanie</>
   }
@@ -120,9 +111,9 @@ const AddGroup = () => {
           rules={{ required: true }}
           render={({ field: { onChange, onBlur } }) => (
             <Select
-              options={leadersOptions}
+              options={supervisorOptions}
               placeholder="Wybierz opiekuna"
-              onChange={(val) => onChange(val)}
+              onChange={(val) => onChange(val?.value)}
               onBlur={onBlur}
               styles={{
                 control: (styles) => ({
@@ -152,7 +143,9 @@ const AddGroup = () => {
               options={studentOptions}
               placeholder="Wybierz studentów"
               isMulti
-              onChange={onChange}
+              onChange={(values) =>
+                onChange(values.map((value) => value.value))
+              }
               onBlur={onBlur}
               styles={{
                 control: (styles) => ({

frontend/src/views/coordinator/Groups.tsx

@@ -1,44 +1,18 @@
-import { useEffect, useState } from 'react'
 import { useQuery } from 'react-query'
 import { useNavigate } from 'react-router-dom'
-import { getGroups, deleteGroup } from '../../api/groups'
+import { getGroups } from '../../api/groups'
 
 const Groups = () => {
   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 (
     <div>
       <button
@@ -58,7 +32,7 @@ const Groups = () => {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100">
-            {groups?.data?.groups.map(
+            {groups?.data?.groups?.map(
               ({
                 id,
                 name,
@@ -68,7 +42,9 @@ const Groups = () => {
               }) => (
                 <tr key={id}>
                   <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_second_term}</td>
                 </tr>