feat: announcements added to the Home screen (#140)

* feat: frontend refont with annoucements added on Home screen

* feat: announcement first try

* feat: announcement first try

* fix: handle events onPress

* test: added all tests

* fix: duplicate lines

* fix: delete duplicate

* fix: final

* fix: resolved sonarCloud issues with imports

__test__/components/EventCard/EventCard.test.tsx

@@ -3,7 +3,10 @@ import { render } from '@testing-library/react-native'
 import EventCard from '../../../components/EventCard/EventCard'
 import React from 'react'
 import { Event } from '../../../types'
+
 import { Point } from 'react-native-maps'
+import { View } from 'react-native'
+
 
 
 describe('EventCard', () => {
@@ -41,7 +44,9 @@ describe('EventCard', () => {
     }
 
     const {getByText } = render(
-        <EventCard event={event} />
+        <View>
+            {EventCard(event)}
+        </View>
     )
     expect(getByText(event.title)).toBeTruthy()
     expect(getByText(event.location)).toBeTruthy()

__test__/components/TabBar/TabBar.test.tsx

@@ -63,7 +63,7 @@ describe("TabBar", () => {
     await act(async () => {
       fireEvent.press(home)
       await waitFor(() => {
-        expect(getByText("Show on the Map")).toBeTruthy()
+        expect(getByText("Map View")).toBeTruthy()
       })
     })
 

__test__/screens/Home/AnnouncementScreen.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import AnnouncementScreen from '../../../screens/Home/AnnouncementScreen/AnnouncementScreen'
+import AnnouncementCard from '../../../components/AnnoucementCard/AnnouncementCard'
+
+// Import your AnnouncementScreen component
+
+// Mock any external components not relevant for the test
+jest.mock('react-native-gesture-handler', () => ({
+  // eslint-disable-next-line react/prop-types
+  TouchableOpacity: ({ children, onPress }) => <div onClick={onPress}>{children}</div>
+}))
+jest.mock("@expo/vector-icons", () => ({
+  Ionicons: () => "Ionicon"
+}))
+jest.mock('../../../components/AnnoucementCard/AnnouncementCard', () => 'AnnouncementCard')
+describe('AnnouncementScreen', () => {
+
+  it('renders correctly', async () => {
+    const { getByText, debug } = render(
+
+        <AnnouncementScreen />
+
+    )
+    debug()
+    // Verify that the screen renders future announcements
+    expect(getByText('Future Announcements')).toBeTruthy()
+  }),
+  it('rendre card correclty', async () => {
+      const announcement = {
+        uid: '1',
+        title: 'Spring Festival',
+        location: 'Community Park',
+        description: 'Annual community gathering',
+        date: '2023-05-10',
+        interests: ['Music', 'Food', 'Games']
+      }
+
+      const component = render(<AnnouncementCard {...announcement} />)
+      expect(component).toBeTruthy()
+  } 
+)
+})

__test__/screens/Home/HomeScreen.test.tsx

@@ -1,5 +1,5 @@
 
-import { render, fireEvent } from '@testing-library/react-native'
+import { render, fireEvent, waitFor } from '@testing-library/react-native'
 import HomeScreen from '../../../screens/Home/HomeScreen'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import React from 'react'
@@ -34,6 +34,16 @@ jest.mock('@react-navigation/native', () => {
   }
 })
 
+jest.mock('../../../firebase/ManageEvents', () => ({
+  getAllFutureEvents: jest.fn(() => Promise.resolve([
+    { id: '1', title: 'Future Event 1', date: '2024-01-01' },
+    { id: '2', title: 'Future Event 2', date: '2024-01-02' }
+  ])),
+  getAllPastEvents: jest.fn(() => Promise.resolve([
+    { id: '3', title: 'Past Event 1', date: '2022-01-01' },
+    { id: '4', title: 'Past Event 2', date: '2022-01-02' }
+  ]))
+}))
 describe('HomeScreen', () => {
 
     it('renders the Home screen', () => {
@@ -45,32 +55,40 @@ describe('HomeScreen', () => {
         expect(component).toBeTruthy()
     })
 
-    // it('filters events based on search input', () => {
-    //     const { getByText, getByPlaceholderText, queryByText } = render(
-    //       <SafeAreaProvider>
-    //         <HomeScreen />
-    //       </SafeAreaProvider>
-    //     )
-
-    //     fireEvent.changeText(getByPlaceholderText('Search...'), 'Balelek')
-    //     expect(getByText('Balelek 2023')).toBeTruthy()
-    //     expect(queryByText('Event 2')).toBeNull()
-    //     expect(queryByText('')).toBeNull()
-    //     expect(queryByText('Abc')).toBeNull()
-
-    //     fireEvent.changeText(getByPlaceholderText('Search...'), '')
-    //     expect(getByText('Event 2')).toBeTruthy()
-    // })
+    it('filters events based on search input', async () => {
+        const { getByText, getByPlaceholderText } = render(
+          <SafeAreaProvider>
+            <HomeScreen />
+          </SafeAreaProvider>
+        )
+
+        await waitFor(() => {
+          fireEvent.changeText(getByPlaceholderText('Search...'), 'Past Event')
+          expect(getByText('Past Event 2')).toBeTruthy()
 
-    // it('displays correct event details', () => {
-    //     const { getByText } = render(
-    //       <SafeAreaProvider>
-    //         <HomeScreen />
-    //       </SafeAreaProvider>
-    //     )
-    //     expect(getByText('Balelek 2023')).toBeTruthy()
-    //     expect(getByText('2023-04-04')).toBeTruthy()
-    // })
+          fireEvent.changeText(getByPlaceholderText('Search...'), '')
+          expect(getByText('Past Event 1')).toBeTruthy()
+
+          fireEvent.press(getByText('Map View'))
+          expect(getByText('Map View')).toBeTruthy()
+        })
+    })
+
+    it('displays correct event details', async () => {
+        const component= render(
+          <SafeAreaProvider>
+            <HomeScreen />
+          </SafeAreaProvider>
+        )
+        await waitFor(() => {
+
+          //expect(getByText('Balelek 2023')).toBeTruthy()
+          //expect(getByText('2023-04-04')).toBeTruthy()
+
+        })
+        expect(component).toBeTruthy()
+
+    })
 
     it('keyboard disapear if we click aside', () => {
         const { getByPlaceholderText } = render(

__test__/screens/Settings/SettingsScreen.test.tsx

@@ -44,7 +44,6 @@ describe("SettingsScreen", () => {
 
     // Assert that the menu items are rendered
     const menuItemTexts = [
-      "CREATE EVENT",
       "LANGUAGE",
       "NOTIFICATIONS",
       "HELP",

assets/colors/colors.ts

@@ -9,3 +9,4 @@ export const transparent = "transparent"
 export const lightPeach = "#FBF9F1"
 export const green = "green"
 export const gray = "gray"
+export const defautlBackgroundColor = "white"

components/AnnoucementCard/AnnouncementCard.tsx

@@ -0,0 +1,20 @@
+
+import { styles } from "./styles"
+import React,{ View, Text }  from "react-native"
+import { Announcement } from "../../types/Annoucements"
+
+
+const AnnouncementCard = (announcement: Announcement) => {
+  return (
+    <View style={styles.cardContainer}>
+      <Text style={styles.title}>
+        {announcement.title}
+      </Text>
+        <Text style={styles.category}>
+            {announcement.interests.join("- ")}
+        </Text>
+    </View>
+  )
+}
+
+export default AnnouncementCard

components/AnnoucementCard/styles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native'
+import { lightGray, lightPeach, peach, shadowColor} from '../../assets/colors/colors'
+
+export const styles = StyleSheet.create({
+    cardContainer: {
+        backgroundColor: lightPeach,
+        borderColor: peach,
+        borderRadius: 10,
+        borderWidth: 1,
+        margin: 10,
+        padding: 20,
+        shadowColor: shadowColor,
+        shadowOffset: {
+            height: 2,
+            width: 0,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+    },
+    category: {
+        color: lightGray,
+        fontSize: 14,
+        fontStyle: "italic",
+
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 5,
+    },
+
+
+})

components/EventCard/EventCard.tsx

@@ -1,13 +1,10 @@
-import { View, Text, Image } from "react-native"
+
 import { styles } from "./styles"
-import React from "react"
+import React , { View, Text, Image }from "react-native"
 import { Event } from "../../types/Event"
 
-interface EventCardProps {
-  event: Event
-}
 
-const EventCard = ({ event }: EventCardProps) => {
+const EventCard = (event : Event) => {
 
   const displayDate = event.date instanceof Date ? event.date.toLocaleDateString("en-US", {
     year: 'numeric',

navigation/Main/MainStackNavigator.tsx

@@ -19,6 +19,7 @@ import MapsScreen from "../../screens/Maps/EventMap"
 import { AddContactScreen } from "../../screens/AddContact/AddContactScreen"
 import { isNewUser, storeInitialUserData } from "../../firebase/Registration"
 import { RegistrationContext } from "../../contexts/RegistrationContext"
+import EventScreen from "../../screens/Home/EventScreen/EventScreen"
 
 const Stack = createStackNavigator()
 
@@ -89,7 +90,7 @@ const MainStackNavigator: React.FC = () => {
     >
       <Stack.Navigator
         initialRouteName={
-          user ? (fillOutProfile ? "UpdateProfile" : "HomeTabs") : "Onboarding"
+          user ? ( "HomeTabs") : "Onboarding"
         }
       >
         {user ? (
@@ -140,6 +141,17 @@ const MainStackNavigator: React.FC = () => {
               component={EventCreationScreen}
               options={{ headerShown: false }}
             />
+            <Stack.Screen
+              name="EventScreen"
+              component={EventScreen}
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen
+              name="AnnouncementScreen"
+              component={MapsScreen}
+              options={{ headerShown: false }}
+            />
+
           </>
         ) : (
           <>