From ed3d7fedf0ae23d8a700954791fea454b28bc806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <93675410+MarioRodrigues10@users.noreply.github.com> Date: Tue, 4 Jul 2023 12:51:00 +0100 Subject: [PATCH] Show unavailabilities in event page (#174) * Show unavailabilities to an event * Implement suggestions * Update some stuff * Improve some code * Create component to remove duplicated code * Remove duplicated function * Rename function * Use Switch antd component --- apps/app/components/Availability/index.tsx | 42 ++++++++++++++ apps/app/pages/admin/event/[id].tsx | 58 +++++++++---------- apps/app/pages/event/[id].tsx | 46 +++++++-------- .../lib/availabilities/availabilities.ts | 2 +- 4 files changed, 95 insertions(+), 53 deletions(-) create mode 100644 apps/app/components/Availability/index.tsx diff --git a/apps/app/components/Availability/index.tsx b/apps/app/components/Availability/index.tsx new file mode 100644 index 00000000..031cc4ec --- /dev/null +++ b/apps/app/components/Availability/index.tsx @@ -0,0 +1,42 @@ +import { Avatar, List, Row, Switch, Typography } from "antd"; +import Link from "next/link"; + +const { Title } = Typography; + +function Availability({ + title, + buttonTitle, + mentors, + available, + setAvailable, +}: any) { + return ( + <> + + {title} + setAvailable(!available)} + /> + + ( + + + } + title={`${mentor.first_name} ${mentor.last_name}`} + description={mentor.notes ? `Notas: ${mentor.notes}` : ""} + /> + + + )} + /> + + ); +} + +export default Availability; diff --git a/apps/app/pages/admin/event/[id].tsx b/apps/app/pages/admin/event/[id].tsx index e0abdbec..5a5d08cc 100644 --- a/apps/app/pages/admin/event/[id].tsx +++ b/apps/app/pages/admin/event/[id].tsx @@ -2,13 +2,14 @@ import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { withAuth } from "~/components/Auth"; -import { Avatar, Col, Divider, List, Row, Typography } from "antd"; +import { Avatar, Button, Col, Divider, List, Row, Typography } from "antd"; import { useEvent } from "~/hooks/events"; import AppLayout from "~/layouts/AppLayout"; import Event from "~/components/Event"; import Belt from "~/components/Belt"; +import Availability from "~/components/Availability"; import { notifyError, notifyInfo } from "~/components/Notification"; -import { getAvailableMentors, getEnrolledNinjas } from "bokkenjs"; +import { getEnrolledNinjas, getMentorsAvailabilities } from "bokkenjs"; const { Title } = Typography; @@ -17,16 +18,18 @@ function EventPage() { const { id: event_id } = router.query; const { data: event, isLoading } = useEvent(event_id as string); - - const [mentors, setMentors] = useState([]); const [enrolledNinjas, setEnrolledNinjas] = useState([]); + const [availableMentors, setAvailableMentors] = useState([]); + const [unavailableMentors, setUnavailableMentors] = useState([]); + const [available, setAvailable] = useState(true); useEffect(() => { - getAvailableMentors(event_id as string) + getMentorsAvailabilities(event_id as string) .then((response: any) => { - setMentors(response.data); + setAvailableMentors(response.availabilities); + setUnavailableMentors(response.unavailabilities); }) - .catch((error) => { + .catch((_error) => { notifyError( "Ocorreu um erro", "Não foi possível obter os mentores disponíveis" @@ -44,7 +47,6 @@ function EventPage() { ); }); }, [event_id]); - return ( Detalhes do evento @@ -57,27 +59,25 @@ function EventPage() { /> - - Mentores disponíveis - ( - - - } - title={`${mentor.first_name} ${mentor.last_name}`} - description={mentor.notes ? `Notas: ${mentor.notes}` : ""} - /> - -
- {mentor.is_available ? "Disponível" : "Não disponível"} -
- - )} - /> - + <> + {available ? ( + + ) : ( + + )} + Ninjas inscritos diff --git a/apps/app/pages/event/[id].tsx b/apps/app/pages/event/[id].tsx index fd17ea2a..a39c2261 100644 --- a/apps/app/pages/event/[id].tsx +++ b/apps/app/pages/event/[id].tsx @@ -19,14 +19,15 @@ import { useEvent } from "~/hooks/events"; import AppLayout from "~/layouts/AppLayout"; import Event from "~/components/Event"; import Belt from "~/components/Belt"; +import Availability from "~/components/Availability"; import { notifyError, notifyInfo } from "~/components/Notification"; import { EUser, createAvailability, createEnrollment, getAvailabilities, - getAvailableMentors, getEnrolledNinjas, + getMentorsAvailabilities, getNinjas, updateAvailability, } from "bokkenjs"; @@ -53,15 +54,15 @@ function EventPage() { const [ninjas, setNinjas] = useState([]); const [selectedNinjas, setSelectedNinjas] = useState([]); const [enrolledNinjas, setEnrolledNinjas] = useState([]); + const [unavailableMentors, setUnavailableMentors] = useState([]); + const [available, setAvailable] = useState(true); useEffect(() => { if (role === EUser.Mentor) { - getAvailableMentors(event_id as string) + getMentorsAvailabilities(event_id as string) .then((response: any) => { - setMentors(response.data); - setAvailableMentors( - response.data.filter((mentor: any) => mentor.is_available) - ); + setAvailableMentors(response.availabilities); + setUnavailableMentors(response.unavailabilities); }) .catch((_error) => { notifyError( @@ -244,7 +245,7 @@ function EventPage() { <> {role === EUser.Mentor ? ( <> - Mentores disponíveis - ( - - - } - title={`${mentor.first_name} ${mentor.last_name}`} - description={mentor.notes ? `Notas: ${mentor.notes}` : ""} - /> - - - )} - /> + {available ? ( + + ) : ( + + )} ) : ( <> diff --git a/packages/bokkenjs/lib/availabilities/availabilities.ts b/packages/bokkenjs/lib/availabilities/availabilities.ts index a50b84f6..0a7bde96 100644 --- a/packages/bokkenjs/lib/availabilities/availabilities.ts +++ b/packages/bokkenjs/lib/availabilities/availabilities.ts @@ -6,7 +6,7 @@ export async function getAvailabilities(event_id: string) { return response.data; } -export async function getAvailableMentors(event_id: string) { +export async function getMentorsAvailabilities(event_id: string) { const response = await API.get(`/api/events/${event_id}/availabilities`); return response.data;