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
coderdojobraga · Jul 4, 2023 · ed3d7fe · ed3d7fe
1 parent 87f89a1
commit ed3d7fe
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 53 deletions.
diff --git a/apps/app/components/Availability/index.tsx 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 (
+    <>
+      <Row style={{ display: "flex", justifyContent: "space-between" }}>
+        <Title level={2}>{title}</Title>
+        <Switch
+          defaultChecked={available}
+          style={{ float: "right" }}
+          onClick={(_) => setAvailable(!available)}
+        />
+      </Row>
+      <List
+        itemLayout="vertical"
+        dataSource={mentors}
+        renderItem={(mentor: any) => (
+          <List.Item style={{ cursor: "pointer" }}>
+            <Link href={`/profile/mentor/${mentor.id}`}>
+              <List.Item.Meta
+                avatar={<Avatar size={64} src={mentor.photo} />}
+                title={`${mentor.first_name} ${mentor.last_name}`}
+                description={mentor.notes ? `Notas: ${mentor.notes}` : ""}
+              />
+            </Link>
+          </List.Item>
+        )}
+      />
+    </>
+  );
+}
+
+export default Availability;
diff --git 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<any[]>([]);
   const [enrolledNinjas, setEnrolledNinjas] = useState([]);
+  const [availableMentors, setAvailableMentors] = useState<any[]>([]);
+  const [unavailableMentors, setUnavailableMentors] = useState<any[]>([]);
+  const [available, setAvailable] = useState<boolean>(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 (
     <AppLayout>
       <Title level={2}>Detalhes do evento</Title>
@@ -57,27 +59,25 @@ function EventPage() {
         />
       </Row>
       <Divider />
-      <Col>
-        <Title level={2}>Mentores disponíveis</Title>
-        <List
-          itemLayout="vertical"
-          dataSource={mentors}
-          renderItem={(mentor: any) => (
-            <List.Item>
-              <Link href={`/profile/mentor/${mentor.id}`}>
-                <List.Item.Meta
-                  avatar={<Avatar size={64} src={mentor.photo} />}
-                  title={`${mentor.first_name} ${mentor.last_name}`}
-                  description={mentor.notes ? `Notas: ${mentor.notes}` : ""}
-                />
-              </Link>
-              <div style={{ fontWeight: "500" }}>
-                {mentor.is_available ? "Disponível" : "Não disponível"}
-              </div>
-            </List.Item>
-          )}
-        />
-      </Col>
+      <>
+        {available ? (
+          <Availability
+            title="Mentores disponíveis"
+            buttonTitle="Mentores indisponíveis"
+            mentors={availableMentors}
+            available={available}
+            setAvailable={setAvailable}
+          />
+        ) : (
+          <Availability
+            title="Mentores indisponíveis"
+            buttonTitle="Mentores disponíveis"
+            mentors={unavailableMentors}
+            available={available}
+            setAvailable={setAvailable}
+          />
+        )}
+      </>
       <Divider />
       <Col>
         <Title level={2}>Ninjas inscritos</Title>

diff --git 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() {
             <>
               <Row>
                 <Input.TextArea
-                  placeholder="Alguma nota sobre a tua disponibilidade? Escreve-a aqui"
+                  placeholder="Alguma nota sobre a tua disponibilidade? Escreve-a aqui. Atenção a tua nota será visível para todos os mentores."
                   style={{ width: "50%" }}
                   rows={6}
                   autoSize={{ minRows: 6, maxRows: 18 }}
@@ -332,22 +333,21 @@ function EventPage() {
         <Divider />
         {role === EUser.Mentor ? (
           <>
-            <Title level={2}>Mentores disponíveis</Title>
-            <List
-              itemLayout="vertical"
-              dataSource={availableMentors}
-              renderItem={(mentor: any) => (
-                <List.Item style={{ cursor: "pointer" }}>
-                  <Link href={`/profile/mentor/${mentor.id}`}>
-                    <List.Item.Meta
-                      avatar={<Avatar size={64} src={mentor.photo} />}
-                      title={`${mentor.first_name} ${mentor.last_name}`}
-                      description={mentor.notes ? `Notas: ${mentor.notes}` : ""}
-                    />
-                  </Link>
-                </List.Item>
-              )}
-            />
+            {available ? (
+              <Availability
+                title="Mentores disponíveis"
+                mentors={availableMentors}
+                available={available}
+                setAvailable={setAvailable}
+              />
+            ) : (
+              <Availability
+                title="Mentores indisponíveis"
+                mentors={unavailableMentors}
+                available={available}
+                setAvailable={setAvailable}
+              />
+            )}
           </>
         ) : (
           <>

diff --git 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;