diff --git a/app/src/Navigation/MainNavigation/GivenHelps/index.jsx b/app/src/Navigation/MainNavigation/GivenHelps/index.jsx index ee3350c8..f47e3e56 100644 --- a/app/src/Navigation/MainNavigation/GivenHelps/index.jsx +++ b/app/src/Navigation/MainNavigation/GivenHelps/index.jsx @@ -16,7 +16,11 @@ export const NavigationGivenHelps = () => { screenOptions={screenOptions} > {isEntity ? OngGivenHelps() : UserGivenHelps()} - + ); }; @@ -28,6 +32,10 @@ const OngGivenHelps = () => ( const UserGivenHelps = () => ( <> - + ); diff --git a/app/src/Navigation/MainNavigation/screenOptions.js b/app/src/Navigation/MainNavigation/screenOptions.js index 73e2e153..4d11ae31 100644 --- a/app/src/Navigation/MainNavigation/screenOptions.js +++ b/app/src/Navigation/MainNavigation/screenOptions.js @@ -13,7 +13,7 @@ export const screenOptions = ({ route }) => { ...fonts.body, color: colors.dark, fontSize: RFValue(14, 640), - width: Dimensions.get('screen').width * 0.3, + width: Dimensions.get('screen').width * 0.25, textAlign: 'center', }; const style = focused @@ -29,12 +29,10 @@ export const screenOptions = ({ route }) => { shadowColor: 'transparent', borderBottomWidth: 1, borderColor: '#BCCBCA', - paddingHorizontal: 8, }, tabBarIndicatorStyle: { backgroundColor: colors.primary.DEFAULT, - borderRadius: 16, - padding: 1, + borderRadius: 100, }, }; }; diff --git a/app/src/components/molecules/MyActivitiesFlatList/index.jsx b/app/src/components/molecules/MyActivitiesFlatList/index.jsx new file mode 100644 index 00000000..e5bd9625 --- /dev/null +++ b/app/src/components/molecules/MyActivitiesFlatList/index.jsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { FlatList, TouchableOpacity } from 'react-native'; +import MyRequestCard from '../../MyRequestCard'; + +export function MyActivitiesFlatList({ + data, + loadOnGoingActivity, + navigation, + setConfirmationModalVisible, + setHelpToDelete, + renderItem, + type, +}) { + const [isRefreshing, setIsRefreshing] = useState(false); + + const navigateProps = { + offer: { + screen: 'myOfferHelpDescription', + routeId: 'HelpOffer', + }, + help: { + screen: 'myRequestHelpDescription', + routeId: 'Help', + }, + }; + + const renderCards = ({ item }) => { + const possibleInterestedList = + type == 'help' + ? item.possibleHelpers + : [...item.possibleHelpedUsers, ...item.helpedUserId]; + return ( + + navigation.navigate(navigateProps[type].screen, { + helpId: item._id, + routeId: navigateProps[type].routeId, + }) + } + > + + + ); + }; + + return ( + item._id} + refreshing={isRefreshing} + onRefresh={() => loadOnGoingActivity(setIsRefreshing)} + /> + ); +} diff --git a/app/src/pages/ActivitiesPages/History/index.jsx b/app/src/pages/ActivitiesPages/History/index.jsx index 4a2a1455..244726f7 100644 --- a/app/src/pages/ActivitiesPages/History/index.jsx +++ b/app/src/pages/ActivitiesPages/History/index.jsx @@ -1,5 +1,5 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { View, ScrollView } from 'react-native'; +import React, { useCallback, useContext, useState } from 'react'; +import { View } from 'react-native'; import { UserContext } from '../../../store/contexts/userContext'; import styles from '../styles'; import callService from '../../../services/callService'; @@ -8,22 +8,25 @@ import NoHelps from '../../../components/NoHelps'; import HistoricCard from '../../../components/HistoricCard'; import { TouchableOpacity } from 'react-native-gesture-handler'; import { LoadingContext } from '../../../store/contexts/loadingContext'; +import { MyActivitiesFlatList } from '../../../components/molecules/MyActivitiesFlatList'; +import { useFocusEffect } from '@react-navigation/native'; -const OfferHelpPage = ({ navigation }) => { +const OfferHelpPage = ({ navigation, route }) => { const { user } = useContext(UserContext); const { isLoading, setIsLoading } = useContext(LoadingContext); const [myOfferedHelp, setMyOfferedHelps] = useState([]); - useEffect(() => { - const unsubscribe = navigation.addListener('focus', () => { - getHelps(); - }); - return unsubscribe; - }, [navigation]); + useFocusEffect( + useCallback(() => { + if (route.params.shouldUpdate) { + getHelps(setIsLoading); + } + }, [route.params.shouldUpdate]), + ); - async function getHelps() { - setIsLoading(true); + async function getHelps(loadingSetter) { + loadingSetter(true); const filteredHelps = await callService( helpService, 'getHelpMultipleStatus', @@ -32,32 +35,30 @@ const OfferHelpPage = ({ navigation }) => { if (!filteredHelps.error) { setMyOfferedHelps(filteredHelps); } - setIsLoading(false); + loadingSetter(false); + navigation.setParams({ shouldUpdate: false }); } const renderHelpRequestsList = () => { if (myOfferedHelp.length > 0) { return ( - - {myOfferedHelp.map((help) => { - return ( - - navigation.navigate( - 'myOfferHelpDescription', - { - helpId: help._id, - routeId: 'Help', - }, - ) - } - > - - - ); - })} - + ( + + navigation.navigate('myOfferHelpDescription', { + helpId: item._id, + routeId: 'Help', + }) + } + > + + + )} + loadOnGoingActivity={getHelps} + /> ); } else { return ( diff --git a/app/src/pages/ActivitiesPages/MyOfferedHelp/index.jsx b/app/src/pages/ActivitiesPages/MyOfferedHelp/index.jsx index 46c5a10f..2fb72ffc 100644 --- a/app/src/pages/ActivitiesPages/MyOfferedHelp/index.jsx +++ b/app/src/pages/ActivitiesPages/MyOfferedHelp/index.jsx @@ -1,16 +1,15 @@ -import React, { useState, useContext, useCallback } from 'react'; -import { View, ScrollView, TouchableOpacity } from 'react-native'; -import MyRequestHelpCard from '../../../components/MyRequestCard'; +import React, { useState, useContext, useEffect } from 'react'; +import { View } from 'react-native'; import { UserContext } from '../../../store/contexts/userContext'; import helpService from '../../../services/Help'; import styles from '../styles'; import NoHelps from '../../../components/NoHelps'; -import { useFocusEffect } from '@react-navigation/native'; import callService from '../../../services/callService'; import PlusIconTextButton from '../../../components/PlusIconTextButton'; import createInteraction from '../../../utils/createInteraction'; import { LoadingContext } from '../../../store/contexts/loadingContext'; import { Dialog } from '../../../components/molecules/Dialog'; +import { MyActivitiesFlatList } from '../../../components/molecules/MyActivitiesFlatList'; export default function HelpsFinished({ navigation }) { const { user, userPosition } = useContext(UserContext); @@ -20,15 +19,14 @@ export default function HelpsFinished({ navigation }) { const [confirmationModalVisible, setConfirmationModalVisible] = useState(false); const [helpToDelete, setHelpToDelete] = useState(null); + const [shouldUpdate, setShouldUpdate] = useState(true); - useFocusEffect( - useCallback(() => { - loadOnGoingOffers(); - }, [navigation]), - ); + useEffect(() => { + if (shouldUpdate) loadOnGoingOffers(setIsLoading); + }, []); - async function loadOnGoingOffers() { - setIsLoading(true); + async function loadOnGoingOffers(loadingSetter) { + loadingSetter(true); const { _id: userId } = user; const resFinished = await callService(helpService, 'listHelpOffer', [ userId, @@ -38,11 +36,11 @@ export default function HelpsFinished({ navigation }) { if (!resFinished.error) { setFinishedHelpList(resFinished); } - setIsLoading(false); + loadingSetter(false); + setShouldUpdate(false); } async function excludeHelp() { - setIsLoading(true); const validDeleteRequest = await callService( helpService, 'deleteHelp', @@ -54,45 +52,25 @@ export default function HelpsFinished({ navigation }) { }); setFinishedHelpList(updatedArray); } - setIsLoading(false); setConfirmationModalVisible(false); + setShouldUpdate(true); } const renderHelpList = () => { if (finishedHelpList.length > 0) { return ( - - - {finishedHelpList.map((help) => { - return ( - - navigation.navigate( - 'myOfferHelpDescription', - { - helpId: help._id, - routeId: 'HelpOffer', - }, - ) - } - > - - - ); - })} - - + + + ); } else { return ; diff --git a/app/src/pages/ActivitiesPages/MyRequestedHelp/index.jsx b/app/src/pages/ActivitiesPages/MyRequestedHelp/index.jsx index 2fb4e6e1..eea202d9 100644 --- a/app/src/pages/ActivitiesPages/MyRequestedHelp/index.jsx +++ b/app/src/pages/ActivitiesPages/MyRequestedHelp/index.jsx @@ -1,9 +1,7 @@ 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 helpService from '../../../services/Help'; -import { useFocusEffect } from '@react-navigation/native'; import NoHelps from '../../../components/NoHelps'; import callService from '../../../services/callService'; import styles from '../styles'; @@ -11,8 +9,10 @@ import PlusIconTextButton from '../../../components/PlusIconTextButton'; import createInteraction from '../../../utils/createInteraction'; import { LoadingContext } from '../../../store/contexts/loadingContext'; import { Dialog } from '../../../components/molecules/Dialog'; +import { MyActivitiesFlatList } from '../../../components/molecules/MyActivitiesFlatList'; +import { useFocusEffect } from '@react-navigation/native'; -const MyRequestedHelp = ({ navigation }) => { +const MyRequestedHelp = ({ navigation, route }) => { const { user } = useContext(UserContext); const { isLoading, setIsLoading } = useContext(LoadingContext); @@ -23,13 +23,13 @@ const MyRequestedHelp = ({ navigation }) => { useFocusEffect( useCallback(() => { - loadOnGoingHelps(); - }, [navigation]), + if (route.params.shouldUpdate) loadOnGoingHelps(setIsLoading); + }, [route.params.shouldUpdate]), ); - async function loadOnGoingHelps() { + async function loadOnGoingHelps(loadingSetter) { const { _id: userId } = user; - setIsLoading(true); + loadingSetter(true); const filteredHelps = await callService( helpService, 'getHelpMultipleStatus', @@ -38,7 +38,8 @@ const MyRequestedHelp = ({ navigation }) => { if (!filteredHelps.error) { setMyRequestedHelps(filteredHelps); } - setIsLoading(false); + loadingSetter(false); + navigation.setParams({ shouldUpdate: false }); } async function excludeHelp() { @@ -56,41 +57,24 @@ const MyRequestedHelp = ({ navigation }) => { } setIsLoading(false); setConfirmationModalVisible(false); + navigation.setParams({ shouldUpdate: true }); } const renderMyRequestsHelpList = () => { if (myRequestedHelps.length > 0) { return ( - - - {myRequestedHelps.map((help) => ( - - navigation.navigate( - 'myRequestHelpDescription', - { - helpId: help._id, - routeId: 'Help', - }, - ) - } - > - - - ))} - - + + + ); } else { return ; diff --git a/app/src/pages/ActivitiesPages/styles.js b/app/src/pages/ActivitiesPages/styles.js index b3f12b1f..f7786ed1 100644 --- a/app/src/pages/ActivitiesPages/styles.js +++ b/app/src/pages/ActivitiesPages/styles.js @@ -11,8 +11,7 @@ const styles = StyleSheet.create({ }, helpList: { - marginLeft: 15, - marginRight: 15, + paddingHorizontal: 15, marginBottom: 15, }, diff --git a/app/src/pages/AuthPages/Location/index.jsx b/app/src/pages/AuthPages/Location/index.jsx index ad3cce9b..545ff978 100644 --- a/app/src/pages/AuthPages/Location/index.jsx +++ b/app/src/pages/AuthPages/Location/index.jsx @@ -8,7 +8,7 @@ import Button from '../../../components/UI/button'; import showWarningFor from '../../../utils/warningPopUp'; import { userPositionWarningMessage } from '../../../docs/warning'; import texts from './texts.json'; -import { useNavigation } from '@react-navigation/native'; +import { useNavigation, useNavigationState } from '@react-navigation/native'; import campaignService from '../../../services/Campaign'; import helpService from '../../../services/Help'; import callService from '../../../services/callService'; @@ -18,11 +18,14 @@ import { alertSuccess } from '../../../utils/Alert'; import { Dialog } from '../../../components/molecules/Dialog'; export default function Location({ route }) { const { requestInfo, requestType } = route.params; - const { userPosition, user } = useContext(UserContext); const { isLoading, setIsLoading } = useContext(LoadingContext); const { increaseUserBadge } = useContext(BadgeContext); + const state = useNavigationState((state) => state); + const { routes } = state; + const initialRoute = routes[0].name; + const [markLocation, setMarkerLocation] = useState({ type: 'Point', coordinates: [], @@ -71,7 +74,8 @@ export default function Location({ route }) { navigation, ); alertSuccess(texts[requestType].successText); - if (!badgeResponse?.recentUpdated) navigation.navigate('home'); + if (!badgeResponse?.recentUpdated) + navigation.navigate(initialRoute); } setIsLoading(false); }