232 - Atualização da lista de pedidos no mapa

app/colors.js

@@ -22,6 +22,8 @@ module.exports = {
         100: 'rgba(228, 113, 113, 0.1)',
         200: 'rgba(228, 113, 113, 0.2)',
         300: 'rgba(228, 113, 113, 0.3)',
+        400: 'rgba(228, 113, 113, 0.4)',
+        500: 'rgba(228, 113, 113, 0.5)',
         darker: '#681111',
     },
     black: {

app/src/components/CustomMap/index.jsx

@@ -6,6 +6,7 @@ import { useFocusEffect } from '@react-navigation/native';
 export default function CustomMap({
     children,
     initialRegion,
+    setHelpListVisible,
     animateToRegion,
     showsMyLocationButton = true,
 }) {
@@ -26,8 +27,14 @@ export default function CustomMap({
             initialRegion={initialRegion}
             className="w-full h-full"
             showsUserLocation={true}
-            showsTraffic={false}
             customMapStyle={mapstyle.day.map}
+            onRegionChange={() =>
+                setHelpListVisible && setHelpListVisible(false)
+            }
+            onRegionChangeComplete={() =>
+                setHelpListVisible && setHelpListVisible(true)
+            }
+            showsTraffic={false}
             showsMyLocationButton={showsMyLocationButton}
         >
             {children}

app/src/components/HelpList/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './styles';
+import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
+import { ActivityCard } from '../organisms/ActivityCard';
+import colors from '../../../colors';
+import { Icon } from 'react-native-elements';
+
+export default function HelpList({
+    helps,
+    filterModalVisible,
+    setFilterModalVisible,
+}) {
+    const renderHelpList = () => {
+        return (
+            <FlatList
+                data={helps}
+                keyExtractor={(item) => item._id}
+                showsHorizontalScrollIndicator={false}
+                horizontal
+                style={{ marginHorizontal: 8 }}
+                renderItem={({ item, index }) => {
+                    const isRiskGroup = !!item.user.riskGroup.length;
+                    return (
+                        <ActivityCard
+                            variant="help"
+                            count={index + 1}
+                            id={item._id}
+                            isRiskGroup={isRiskGroup}
+                            ownerId={item.ownerId}
+                            title={item.title}
+                            description={item.description}
+                            badges={item.categories}
+                            distance={item.distance}
+                            creationDate={item.creationDate}
+                            userId={item.user._id}
+                        />
+                    );
+                }}
+            />
+        );
+    };
+
+    return (
+        <View style={styles.helpListContainer}>
+            <TouchableOpacity
+                style={styles.filter}
+                onPress={() => {
+                    setFilterModalVisible(!filterModalVisible);
+                }}
+            >
+                <Icon
+                    name="filter"
+                    type="font-awesome"
+                    color={colors.black.DEFAULT}
+                    size={20}
+                />
+            </TouchableOpacity>
+            {helps.length > 0 && renderHelpList()}
+        </View>
+    );
+}

app/src/components/HelpList/styles.js

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+
+import colors from '../../../assets/styles/colorVariables';
+import fonts from '../../../assets/styles/fontVariable';
+
+export default StyleSheet.create({
+    helpListContainer: {
+        width: '100%',
+        marginBottom: 16,
+        paddingHorizontal: 8,
+    },
+
+    listContent: {
+        width: '90%',
+        alignSelf: 'center',
+    },
+
+    buttonStyle: {
+        padding: 10,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    iconDescription: {
+        paddingHorizontal: 16,
+        color: '#fff',
+        fontWeight: '700',
+    },
+    scrollStyle: {
+        paddingBottom: 15,
+    },
+    emptyListText: {
+        ...fonts.title,
+        color: colors.light,
+        marginTop: 10,
+    },
+    emptyListImage: {
+        resizeMode: 'contain',
+        width: 100,
+        height: 100,
+    },
+    emptyList: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        marginTop: 60,
+    },
+
+    filter: {
+        width: 48,
+        height: 48,
+        backgroundColor: '#F7EF6E',
+        padding: 16,
+        borderRadius: 100,
+        elevation: 5,
+        marginBottom: 8,
+        alignSelf: 'flex-end',
+    },
+});

app/src/components/organisms/ActivityCard/index.jsx

@@ -25,6 +25,7 @@ export const ActivityCard = ({
     id,
     creationDate,
     ownerId,
+    size = 'regular'
 }) => {
     const { getActitivtieById } = useContext(ActivitiesContext);
     const { handleShowModal } = useContext(ActivityBottomSheetContext);
@@ -34,6 +35,14 @@ export const ActivityCard = ({
     const isNewActivity = isRecentDate(creationDate);
     const isTheSameUser = user._id == ownerId;
 
+    const sizeVariants = {
+        small: 'w-56',
+        regular: 'w-72',
+        large: 'w-80',
+    };
+
+    const selectedSize = sizeVariants[size];
+
     const activitiesVariants = {
         help: {
             translation: 'Pedido',
@@ -48,8 +57,8 @@ export const ActivityCard = ({
     const selectedVariant = activitiesVariants[variant];
     const icon = getActivityIcon(variant);
     const color = {
-        font: isRiskGroup ? 'text-danger' : 'text-primary-400',
-        icon: isRiskGroup ? colors.danger : colors.primary[400],
+        font: isRiskGroup ? 'text-danger-300' : 'text-primary-400',
+        icon: isRiskGroup ? colors.danger[300] : colors.primary[400],
     };
 
     const handlePress = async () => {
@@ -73,7 +82,7 @@ export const ActivityCard = ({
 
     return (
         <Pressable
-            className="rounded-2xl shadow-md shadow-black p-4 mr-2 ml-1 bg-white w-72 h-40"
+            className={`rounded-2xl shadow-md shadow-black m-2 ml-1 bg-white p-4 h-40 ${selectedSize}`}
             onPress={handlePress}
             android_ripple={{
                 color: colors.gray.DEFAULT,

app/src/pages/ActivitiesPages/History/index.jsx

@@ -6,8 +6,9 @@ import callService from '../../../services/callService';
 import helpService from '../../../services/Help';
 import NoHelps from '../../../components/NoHelps';
 import HistoricCard from '../../../components/HistoricCard';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
 import { LoadingContext } from '../../../store/contexts/loadingContext';
+import { ActivityCard } from '../../../components/organisms/ActivityCard';
 
 const OfferHelpPage = ({ navigation }) => {
     const { user } = useContext(UserContext);
@@ -38,26 +39,26 @@ const OfferHelpPage = ({ navigation }) => {
     const renderHelpRequestsList = () => {
         if (myOfferedHelp.length > 0) {
             return (
-                <ScrollView>
-                    {myOfferedHelp.map((help) => {
-                        return (
-                            <TouchableOpacity
-                                key={help._id}
-                                onPress={() =>
-                                    navigation.navigate(
-                                        'myOfferHelpDescription',
-                                        {
-                                            helpId: help._id,
-                                            routeId: 'Help',
-                                        },
-                                    )
-                                }
-                            >
-                                <HistoricCard object={help} />
-                            </TouchableOpacity>
-                        );
-                    })}
-                </ScrollView>
+                <FlatList
+                    data={myOfferedHelp}
+                    style={{ marginHorizontal: 8, marginTop: 8 }}
+                    renderItem={({ item, index }) => (
+                        <ActivityCard
+                            variant={item.type}
+                            id={item._id}
+                            ownerId={item.ownerId}
+                            count={index + 1}
+                            title={item.title}
+                            description={item.description}
+                            badges={item.categories}
+                            distance={item.distance}
+                            creationDate={item.creationDate}
+                            userId={item.ownerId}
+                            size='large'
+                        />
+                    )}
+                    keyExtractor={(item) => item._id}
+                />
             );
         } else {
             return (

app/src/pages/ActivitiesPages/MyCampaigns/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useCallback } from 'react';
-import { View, ScrollView, TouchableOpacity } from 'react-native';
-import MyRequestCard from '../../../components/MyRequestCard';
+import { View } from 'react-native';
 import { UserContext } from '../../../store/contexts/userContext';
 import styles from '../styles';
 import NoHelps from '../../../components/NoHelps';
@@ -11,6 +10,8 @@ import PlusIconTextButton from '../../../components/PlusIconTextButton';
 import createInteraction from '../../../utils/createInteraction';
 import { LoadingContext } from '../../../store/contexts/loadingContext';
 import { Dialog } from '../../../components/molecules/Dialog';
+import { FlatList } from 'react-native-gesture-handler';
+import { ActivityCard } from '../../../components/organisms/ActivityCard';
 
 export default function CampaignsFinished({ navigation }) {
     const { isLoading, setIsLoading } = useContext(LoadingContext);
@@ -63,50 +64,26 @@ export default function CampaignsFinished({ navigation }) {
     const renderCampaignList = () => {
         if (finishedCampaignList.length > 0) {
             return (
-                <ScrollView>
-                    <View style={styles.campaignList}>
-                        {finishedCampaignList.map((campaign) => {
-                            if (campaign.ownerId === user._id) {
-                                return (
-                                    <TouchableOpacity
-                                        // Botão que leva para a page de Descrição
-                                        key={campaign._id}
-                                        onPress={() =>
-                                            navigation.navigate(
-                                                'campaignDescription',
-                                                {
-                                                    campaign,
-                                                },
-                                            )
-                                        }
-                                    >
-                                        {/* Tirar isEntityUser depois */}
-                                        <MyRequestCard
-                                            object={campaign}
-                                            isEntityUser={true}
-                                            setConfirmationModalVisible={
-                                                setConfirmationModalVisible
-                                            }
-                                            setSelectedHelp={
-                                                setCampaignToDelete
-                                            }
-                                        />
-                                    </TouchableOpacity>
-                                );
-                            } else {
-                                return (
-                                    <NoHelps
-                                        key={campaign._id}
-                                        title={
-                                            'Você não possui nenhuma campanha criada'
-                                        }
-                                    />
-                                );
-                            }
-                        })}
-                        {/*TODO: O `if` foi adicionado porque as ajudas estavam aparecendo mesmo se voce nao for dono... Rever essa logica para uma mais escalavel.*/}
-                    </View>
-                </ScrollView>
+                <FlatList
+                    data={finishedCampaignList}
+                    style={{ marginHorizontal: 8, marginTop: 8 }}
+                    renderItem={({ item, index }) => (
+                        <ActivityCard
+                            variant={item.type}
+                            id={item._id}
+                            ownerId={item.ownerId}
+                            count={index + 1}
+                            title={item.title}
+                            description={item.description}
+                            badges={item.categories}
+                            distance={item.distance}
+                            creationDate={item.creationDate}
+                            userId={item.ownerId}
+                            size='large'
+                        />
+                    )}
+                    keyExtractor={(item) => item._id}
+                />
             );
         } else {
             return (