[ORG-67] Authorize calls from frontend (edit, create and delete event) (

#68)

* make buttons for filtering smaller

* add authorized

* delete is covered by the authorization

* is reloading the page everytime it goes to homepage

* edit call is now authorized

* Fix input warning

organizator/__tests__/__snapshots__/input-components-test.js.snap

@@ -79,7 +79,6 @@ exports[`renders correctly a input with label and value 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]
@@ -171,7 +170,6 @@ exports[`renders correctly a input with label and value and error 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]
@@ -256,7 +254,6 @@ exports[`renders correctly a input with label and value that is disabled 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]
@@ -348,7 +345,6 @@ exports[`renders correctly a input with label and value that is password 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]
@@ -468,7 +464,6 @@ exports[`renders correctly a input with label and value that is required 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]
@@ -558,7 +553,6 @@ exports[`renders correctly a input with only label 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]
@@ -648,7 +642,6 @@ exports[`renders correctly a input with value and icon 1`] = `
             "marginRight": 10,
           },
           {
-            "outlineStyle": "none",
             "padding": 10,
           },
         ]

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

@@ -128,15 +128,16 @@ export default function EventPage() {
   }, []);
 
   const deleteThisEvent = () => {
-    // @ts-ignore
-    deleteEvent(id)
-      .then(() => {
-        setShowAlert(false);
-        router.replace("/");
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+    const fetchData = async () => {
+      const token = await getToken();
+      // @ts-ignore
+      return deleteEvent(token || "", id);
+    };
+
+    fetchData().then(() => {
+      setShowAlert(false);
+      router.back();
+    });
   };
 
   const handleOnChange = (text: string, input: string) => {
@@ -199,7 +200,14 @@ export default function EventPage() {
     if (isValid) {
       setLoading(true);
       // @ts-ignore
-      updateEvent(inputs, id).then((response) => {
+
+      const fetchData = async () => {
+        const token = await getToken();
+        // @ts-ignore
+        return updateEvent(token || "", inputs, id);
+      };
+
+      fetchData().then((response) => {
         if (response.error) {
           Toast.show({
             type: "error",

organizator/app/(tabs)/(home)/create.tsx

@@ -8,13 +8,13 @@ import LoadingPage from "../../../components/LodingPage";
 import Input from "../../../components/Input";
 import Button from "../../../components/ButtonWithIcon";
 import { createEvent } from "../../../utils/api/axiosEvents";
-import { createEventResponse } from "../../../utils/interfaces/Events";
 import {
   checkDate,
   checkDateRange,
   checkURL,
   dateToPlainString,
 } from "../../../utils/util-functions";
+import { getToken } from "../../../utils/sessionCalls";
 
 const Container = styled(SafeAreaView)`
   background-color: white;
@@ -148,7 +148,12 @@ export default function CreatePage() {
 
   const createTheEvent = () => {
     setLoading(true);
-    createEvent(inputs).then((response: createEventResponse) => {
+    const fetchData = async () => {
+      const token = await getToken();
+      return createEvent(token || "", inputs);
+    };
+
+    fetchData().then((response) => {
       setLoading(false);
       if (response.error) {
         Toast.show({
@@ -157,7 +162,7 @@ export default function CreatePage() {
           text2: response.error,
         });
       } else {
-        router.replace("/");
+        router.back();
       }
     });
   };

organizator/app/(tabs)/(home)/index.tsx

@@ -4,6 +4,7 @@ import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import styled from "styled-components/native";
 import { router } from "expo-router";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { useIsFocused } from "@react-navigation/native";
 import { EventAllInformation } from "../../../utils/interfaces/Events";
 import { getAllUpcomingEvents } from "../../../utils/api/axiosEvents";
 import Card from "../../../components/Card";
@@ -55,6 +56,7 @@ export default function Home() {
   const [loading, setLoading] = React.useState(true);
   const [events, setEvents] = React.useState<EventAllInformation[]>([]);
   const [isAdmin, setIsAdmin] = React.useState(false);
+  const isFocused = useIsFocused();
 
   useEffect(() => {
     const fetchData = async () => getAllUpcomingEvents();
@@ -71,7 +73,7 @@ export default function Home() {
     fetchAdminFunction().then((response) => {
       setIsAdmin(response.role === UserRoles.ORGANIZER_ADMIN);
     });
-  }, []);
+  }, [isFocused]);
 
   return (
     <Container>

organizator/components/FilterButtons.tsx

@@ -5,13 +5,12 @@ import FontAwesome from "@expo/vector-icons/FontAwesome";
 
 const ButtonContainer = styled(Pressable)<{ color: string; active: boolean }>`
   height: 30px;
-  padding: 0 20px;
+  padding: 0 18px;
   width: auto;
   border: 2px solid ${(props: { color: string }) => props.color};
   background-color: ${(props: { color: string; active: boolean }) =>
     props.active ? props.color : "transparent"};
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-  margin: 10px;
+  margin: 0 5px;
   justify-content: center;
   align-items: center;
   border-radius: 20px;

organizator/components/Input.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, TextInput, TextInputProps } from "react-native";
+import { View, Text, TextInput, TextInputProps, Platform } from "react-native";
 // @ts-ignore
 import styled from "styled-components/native";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
@@ -102,7 +102,11 @@ export default function Input(props: InputProps) {
         {iconName && <InputIcon name={iconName} disabled={disabled} />}
         <InputStyled
           disabled={disabled}
-          style={{ outlineStyle: "none", padding: 10 }}
+          style={[
+            Platform.OS === "web"
+              ? { outlineStyle: "none", padding: 10 }
+              : { padding: 10 },
+          ]}
           onFocus={() => {
             if (!disabled) setIsFocused(true);
           }}

organizator/utils/api/axiosEvents.ts

@@ -55,12 +55,16 @@ export async function getEventById(eventId: string): Promise<getEventResponse> {
 }
 
 export async function deleteEvent(
+  token: string,
   eventId: string,
 ): Promise<deleteEventResponse> {
   try {
     await axios({
       method: "post",
       url: `${eventsAPI}/delete/${eventId}`,
+      headers: {
+        Authorization: token,
+      },
     });
     return {
       error: null,
@@ -73,6 +77,7 @@ export async function deleteEvent(
 }
 
 export async function createEvent(
+  token: string,
   eventInformation: CreateEventProps,
 ): Promise<createEventResponse> {
   try {
@@ -88,6 +93,9 @@ export async function createEvent(
         header_image: eventInformation.headerImage,
         url: eventInformation.url,
       },
+      headers: {
+        Authorization: token,
+      },
     });
     return {
       error: null,
@@ -100,6 +108,7 @@ export async function createEvent(
 }
 
 export async function updateEvent(
+  token: string,
   eventInformation: UpdateEventProps,
   eventId: string,
 ): Promise<updateEventResponse> {
@@ -115,6 +124,9 @@ export async function updateEvent(
         location: eventInformation.location,
         url: eventInformation.url,
       },
+      headers: {
+        Authorization: token,
+      },
     });
     return {
       error: null,