[ORG-125] Attended button in participants list

organizator/app/(tabs)/manage/[id].tsx

@@ -5,10 +5,11 @@ import FontAwesome from "@expo/vector-icons/FontAwesome";
 import styled from "styled-components/native";
 import Toast from "react-native-toast-message";
 import { router, useLocalSearchParams } from "expo-router";
-import { Dialog } from "react-native-simple-dialogs";
+import { ConfirmDialog, Dialog } from "react-native-simple-dialogs";
 import LoadingPage from "../../../components/LodingPage";
 import { getToken, removeToken } from "../../../utils/sessionCalls";
 import {
+  attendApplication,
   getParticipants,
   updateApplicationStatus,
 } from "../../../utils/api/axiosApplications";
@@ -42,7 +43,7 @@ const Username = styled(Text)`
 const ButtonAndRole = styled(View)`
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 10px;
   align-items: center;
 `;
 
@@ -80,6 +81,7 @@ export default function Id() {
   const [userToUpdate, setUserToUpdate] = useState<string | null>(null);
   const [idToUpdate, setIdToUpdate] = useState<string | null>(null);
   const [isAdmin, setIsAdmin] = useState(false);
+  const [isOrganizer, setIsOrganizer] = useState(false);
   const [applications, setApplications] = useState<
     ParticipantsInformation[] | null
   >(null);
@@ -88,6 +90,11 @@ export default function Id() {
     ParticipantsInformation[] | null
   >(null);
   const [trigger, setTrigger] = useState(false);
+  const [showAttendAlert, setShowAttendAlert] = useState(false);
+  const [userToAttend, setUserToAttend] = useState("");
+  const [idApplicationToAttend, setIdApplicationToAttend] = useState<
+    string | null
+  >(null);
   const [stats, setStats] = useState({
     all: 0,
     confirmed: 0,
@@ -159,6 +166,10 @@ export default function Id() {
     });
     fetchAdminFunction().then((response) => {
       setIsAdmin(response.role === UserRoles.ORGANIZER_ADMIN);
+      setIsOrganizer(
+        response.role === UserRoles.ORGANIZER ||
+          response.role === UserRoles.ORGANIZER_ADMIN,
+      );
     });
   }, [trigger]);
 
@@ -214,6 +225,48 @@ export default function Id() {
     });
   };
 
+  const attendEvent = () => {
+    const fetchData = async () => {
+      const token = await getToken();
+      return attendApplication(token || "", idApplicationToAttend || "");
+    };
+
+    fetchData().then((response) => {
+      if (response.error) {
+        if (
+          response.error === "Unauthorized" ||
+          response.error === "Invalid token"
+        ) {
+          removeToken();
+          router.replace("/login");
+        } else {
+          setShowAttendAlert(false);
+          setUserToAttend("");
+          setIdApplicationToAttend(null);
+          Toast.show({
+            type: "error",
+            text1: "Error",
+            text2: `${response.error}`,
+            visibilityTime: 3000,
+            autoHide: true,
+          });
+        }
+      } else {
+        Toast.show({
+          type: "success",
+          text1: "Attended",
+          text2: `The user ${userToAttend} is attending`,
+          visibilityTime: 3000,
+          autoHide: true,
+        });
+        setShowAttendAlert(false);
+        setUserToAttend("");
+        setIdApplicationToAttend(null);
+        setTrigger(!trigger);
+      }
+    });
+  };
+
   return (
     <Container>
       <ScrollView contentContainerStyle={{ padding: 25 }}>
@@ -440,6 +493,19 @@ export default function Id() {
                             <FontAwesome name="send" size={18} />
                           </Pressable>
                         )}
+                      {isOrganizer && application.status === "Confirmed" && (
+                        <Pressable
+                          onPress={() => {
+                            setUserToAttend(
+                              `${application.user.first_name} ${application.user.last_name}`,
+                            );
+                            setIdApplicationToAttend(application.id);
+                            setShowAttendAlert(true);
+                          }}
+                        >
+                          <FontAwesome name="sign-in" size={18} />
+                        </Pressable>
+                      )}
                     </ButtonAndRole>
                   </UserLine>
                 ))}
@@ -499,6 +565,54 @@ export default function Id() {
           />
         </View>
       </Dialog>
+
+      <ConfirmDialog
+        title={`${userToAttend} is going to attend the event`}
+        message="Make sure you are marking the correct user, this action cannot be undone"
+        onTouchOutside={() => setShowAttendAlert(false)}
+        visible={showAttendAlert}
+        negativeButton={{
+          title: "Cancel",
+          onPress: () => {
+            setShowAttendAlert(false);
+            setIdApplicationToAttend(null);
+            setUserToAttend("");
+          },
+          titleStyle: {
+            color: "red",
+            fontSize: 20,
+          },
+          style: {
+            backgroundColor: "transparent",
+            paddingHorizontal: 10,
+          },
+        }}
+        positiveButton={{
+          title: "Confirm!",
+          onPress: () => {
+            attendEvent();
+            console.log("Attend event");
+            setShowAttendAlert(false);
+            setIdApplicationToAttend(null);
+            setUserToAttend("");
+          },
+          titleStyle: {
+            color: "blue",
+            fontSize: 20,
+          },
+          style: {
+            backgroundColor: "transparent",
+            paddingHorizontal: 10,
+          },
+        }}
+        contentInsetAdjustmentBehavior="automatic"
+        onRequestClose={() => {
+          setShowAttendAlert(false);
+          setIdApplicationToAttend(null);
+          setUserToAttend("");
+        }}
+      />
+
       <Toast />
     </Container>
   );

organizator/utils/api/axiosApplications.ts

@@ -182,3 +182,25 @@ export async function confirmApplication(
     };
   }
 }
+
+export async function attendApplication(
+  token: string,
+  applicationId: string,
+): Promise<confirmApplicationResponse> {
+  try {
+    await axios({
+      method: "post",
+      url: `${applicationsAPI}/attend/${applicationId}`,
+      headers: {
+        Authorization: `${token}`,
+      },
+    });
+    return {
+      error: null,
+    };
+  } catch (error: any) {
+    return {
+      error: error.response.data,
+    };
+  }
+}

organizator/utils/util-functions.ts

@@ -234,6 +234,7 @@ export function getColorForApplicationStatus(st: string): string {
   if (st === "Confirmed") return "#6cd27b";
   if (st === "Invalid") return "#867f7f";
   if (st === "Wait list") return "#b694f5";
+  if (st === "Attended") return "#9df5ae";
 
   return "#000000";
 }

organizator_api/app/applications/infrastructure/http/views.py

@@ -292,6 +292,8 @@ def attend_application(request: HttpRequest, application_id: uuid.UUID) -> HttpR
     except OnlyAuthorizedToOrganizer:
         return HttpResponse(status=401, content="Only authorized to organizer")
     except ApplicationCanNotBeAttended:
-        return HttpResponse(status=422, content="Application can not be confirmed")
+        return HttpResponse(
+            status=422, content="Application should be in confirmed status"
+        )
 
     return HttpResponse(status=200, content="Application is correctly attended")

organizator_api/tests/applications/infrastructure/http/test_view_attend_application.py

@@ -126,7 +126,7 @@ def test__given_a_valid_organizer_token_and_a_application_in_wait_list_status__w
 
         # Then
         self.assertEqual(response.status_code, 422)
-        self.assertEqual(response.content, b"Application can not be confirmed")
+        self.assertEqual(response.content, b"Application should be in confirmed status")
 
     def test__given_a_valid_organizer_token_and_a_application_in_confirmed_status__when_attend_application__then_application_is_attended(
         self,