[ORG-121] Cancel participation in my events page

organizator/components/CardMyEvents.tsx

@@ -2,7 +2,8 @@ import React from "react";
 // @ts-ignore
 import styled from "styled-components/native";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { Text } from "react-native";
+import { Pressable, Text } from "react-native";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
 import {
   getColorForApplicationStatus,
   parseDate,
@@ -13,6 +14,9 @@ interface CardProps {
   startDate: string;
   headerImage: string;
   status: string;
+  id: string;
+  setShowCancelAlert: (showCancelAlert: boolean) => void;
+  setIdToCancel: (idToCancel: string) => void;
 }
 
 const CardContainer = styled.View<{ isPast: boolean }>`
@@ -88,8 +92,43 @@ const TagStatus = styled.View<{ backgroundColor: string }>`
   text-align: center;
 `;
 
+const ButtonsContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const CancelButton = styled(Pressable)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 30px;
+  margin-top: 20px;
+  border-radius: 20px;
+  gap: 10px;
+  background-color: #a65858;
+  width: 50%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+`;
+
+const CancelButtonText = styled.Text`
+  font-size: 16px;
+  color: white;
+  font-weight: bold;
+`;
+
 export default function CardMyEvents(props: CardProps) {
-  const { title, startDate, headerImage, status } = props;
+  const {
+    title,
+    startDate,
+    headerImage,
+    status,
+    id,
+    setIdToCancel,
+    setShowCancelAlert,
+  } = props;
 
   const isPast = () => startDate < new Date().toISOString();
 
@@ -108,6 +147,21 @@ export default function CardMyEvents(props: CardProps) {
               <Text>{status}</Text>
             </TagStatus>
           </TagContainer>
+          <ButtonsContainer>
+            {status !== "Cancelled" &&
+              status !== "Rejected" &&
+              status !== "Invalid" && (
+                <CancelButton
+                  onPress={() => {
+                    setIdToCancel(id);
+                    setShowCancelAlert(true);
+                  }}
+                >
+                  <FontAwesome name="close" size={16} color="white" />
+                  <CancelButtonText>Cancel</CancelButtonText>
+                </CancelButton>
+              )}
+          </ButtonsContainer>
         </CardTextContainer>
       </CardContainer>
       {isPast() && (

organizator/components/MyEventsPage.tsx

@@ -1,8 +1,13 @@
-import { View } from "react-native";
+import { ScrollView, View } from "react-native";
 // @ts-ignore
 import styled from "styled-components/native";
 import React, { useEffect, useState } from "react";
-import { getMyApplications } from "../utils/api/axiosApplications";
+import Toast from "react-native-toast-message";
+import { ConfirmDialog } from "react-native-simple-dialogs";
+import {
+  cancelApplication,
+  getMyApplications,
+} from "../utils/api/axiosApplications";
 import EmptyPage from "./EmptyPage";
 import { getToken } from "../utils/sessionCalls";
 import LoadingPage from "./LodingPage";
@@ -20,7 +25,12 @@ const CardsContainer = styled(View)`
 
 export default function MyEventsPage() {
   const [loading, setLoading] = useState(true);
-  const [events, setEvents] = useState<ApplicationInformationWithoutUser[]>([]);
+  const [applications, setApplications] = useState<
+    ApplicationInformationWithoutUser[]
+  >([]);
+  const [trigger, setTrigger] = useState(false);
+  const [showCancelAlert, setShowCancelAlert] = useState(false);
+  const [idToCancel, setIdToCancel] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -30,37 +40,107 @@ export default function MyEventsPage() {
 
     fetchData().then((response) => {
       setLoading(false);
-      setEvents(response.applications || []);
+      setApplications(response.applications || []);
     });
-  }, []);
+  }, [trigger]);
+
+  function cancel() {
+    const fetchData = async () => {
+      const t = await getToken();
+      return cancelApplication(t || "", idToCancel);
+    };
+
+    fetchData().then((response) => {
+      if (response.error) {
+        Toast.show({
+          type: "error",
+          text1: "Error",
+          text2: response.error,
+          visibilityTime: 8000,
+        });
+        setShowCancelAlert(false);
+      } else {
+        setTrigger(!trigger);
+        Toast.show({
+          type: "success",
+          text1: "Success",
+          text2: "Your application has been cancelled!",
+          visibilityTime: 8000,
+        });
+        setShowCancelAlert(false);
+      }
+    });
+  }
 
   return (
     <View>
       {loading ? (
         <LoadingPage />
       ) : (
-        <View>
-          {events.length === 0 ? (
+        <ScrollView>
+          {applications.length === 0 ? (
             <EmptyPage
               title="You have no events"
               subtitle="Go back to homepage to see all our available events!"
               image={require("../assets/empty.png")}
             />
           ) : (
             <CardsContainer>
-              {events.map((event: ApplicationInformationWithoutUser) => (
-                <CardMyEvents
-                  key={event.id}
-                  title={event.event.name}
-                  headerImage={event.event.header_image}
-                  startDate={event.event.start_date}
-                  status={event.status}
-                />
-              ))}
+              {applications.map(
+                (application: ApplicationInformationWithoutUser) => (
+                  <CardMyEvents
+                    key={application.id}
+                    title={application.event.name}
+                    headerImage={application.event.header_image}
+                    startDate={application.event.start_date}
+                    status={application.status}
+                    id={application.id}
+                    setIdToCancel={setIdToCancel}
+                    setShowCancelAlert={setShowCancelAlert}
+                  />
+                ),
+              )}
             </CardsContainer>
           )}
-        </View>
+        </ScrollView>
       )}
+      <ConfirmDialog
+        title="Are you sure you want to cancel your application?"
+        message="Are you sure about that? This only way you can request your participation is by contacting the organizers"
+        onTouchOutside={() => setShowCancelAlert(false)}
+        visible={showCancelAlert}
+        negativeButton={{
+          title: "Cancel",
+          onPress: () => {
+            setShowCancelAlert(false);
+          },
+          titleStyle: {
+            color: "red",
+            fontSize: 20,
+          },
+          style: {
+            backgroundColor: "transparent",
+            paddingHorizontal: 10,
+          },
+        }}
+        positiveButton={{
+          title: "Cancel!",
+          onPress: () => {
+            cancel();
+          },
+          titleStyle: {
+            color: "blue",
+            fontSize: 20,
+          },
+          style: {
+            backgroundColor: "transparent",
+            paddingHorizontal: 10,
+          },
+        }}
+        contentInsetAdjustmentBehavior="automatic"
+        onRequestClose={() => setShowCancelAlert(false)}
+      />
+      <Toast />
     </View>
   );
 }

organizator/utils/api/axiosApplications.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import {
   applicationStatusResponse,
+  cancelApplicationResponse,
   CreateNewApplicationResponse,
   GetMyApplicationsResponse,
   GetParticipantsResponse,
@@ -136,3 +137,25 @@ export async function getApplicationStatus(
     };
   }
 }
+
+export async function cancelApplication(
+  token: string,
+  applicationId: string,
+): Promise<cancelApplicationResponse> {
+  try {
+    await axios({
+      method: "post",
+      url: `${applicationsAPI}/cancel/${applicationId}`,
+      headers: {
+        Authorization: `${token}`,
+      },
+    });
+    return {
+      error: null,
+    };
+  } catch (error: any) {
+    return {
+      error: error.response.data,
+    };
+  }
+}

organizator/utils/interfaces/Applications.ts

@@ -62,3 +62,7 @@ export interface applicationStatusResponse {
   readonly status: string | null;
   readonly notApplied: boolean;
 }
+
+export interface cancelApplicationResponse {
+  readonly error: string | null;
+}

organizator_api/app/applications/domain/usecases/cancel_application_use_case.py

@@ -17,7 +17,7 @@ def __init__(self) -> None:
     def execute(self, application_id: uuid.UUID, token: uuid.UUID) -> None:
         application = self.application_repository.get(application_id)
 
-        if application.user.id != token:
+        if application.user.token != token:
             raise ApplicationIsNotFromUser
 
         if (

organizator_api/app/applications/domain/usecases/confirm_application_use_case.py

@@ -17,7 +17,7 @@ def __init__(self) -> None:
     def execute(self, application_id: uuid.UUID, token: uuid.UUID) -> None:
         application = self.application_repository.get(application_id)
 
-        if application.user.id != token:
+        if application.user.token != token:
             raise ApplicationIsNotFromUser
 
         if application.status != ApplicationStatus.INVITED:

organizator_api/app/applications/infrastructure/persistence/orm_applications_respository.py

@@ -96,6 +96,7 @@ def _to_domain_model(self, orm_application: ORMEventApplication) -> Application:
                 date_of_birth=orm_application.user.date_of_birth,
                 study=orm_application.user.study,
                 work=orm_application.user.work,
+                token=orm_application.user.token,
             ),
             event=Event(
                 id=orm_application.event.id,