[go: up one dir, main page]

0% found this document useful (0 votes)
69 views13 pages

House Component

This document defines components and logic for displaying housing search results in React Native. It includes: - A NoReservationMessage component to display when no results are found - A HousingResultComponent that fetches housing data based on search parameters and displays results - A renderItem function to display each housing result card - State variables to manage loading, search parameters, results data, and modals - Functions to make API calls, handle errors/loading, and navigate to housing detail screens In summary, it defines the UI and logic for displaying housing search results from API data based on user-entered search parameters.

Uploaded by

tekamyanick237
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
69 views13 pages

House Component

This document defines components and logic for displaying housing search results in React Native. It includes: - A NoReservationMessage component to display when no results are found - A HousingResultComponent that fetches housing data based on search parameters and displays results - A renderItem function to display each housing result card - State variables to manage loading, search parameters, results data, and modals - Functions to make API calls, handle errors/loading, and navigate to housing detail screens In summary, it defines the UI and logic for displaying housing search results from API data based on user-entered search parameters.

Uploaded by

tekamyanick237
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

/* eslint-disable prettier/prettier */

/* eslint-disable react-native/no-inline-styles */
import React, { useEffect, useState, useCallback } from 'react';
import { Text, StyleSheet, RefreshControl, TouchableOpacity, View, FlatList,
TextInput, Button } from 'react-native';
import { useNavigation, useIsFocused } from '@react-navigation/native';
import Lottie from 'lottie-react-native';

import MaterialCommunityIcons from


'react-native-vector-icons/MaterialCommunityIcons';

import { Br, Colors, Title, TitleContainer } from '../../../GlobalStyles';


import MainButton from '../../../buttons/MainButton';
import HousingCardGlobal from '../../../HousingCardGlobal';

import BounceOnLoad from '../../../../animations/BounceOnLoad';


import SlideInFromRight from '../../../../animations/SlideInFromRight';

import InternetModal from '../../../modals/InternetModal';


import ErrorOTPModal from '../../../modals/ErrorOTPModal';
import APICallsModal from '../../../modals/APICallsModal';

import * as TextData from '../../../../helpers/[Link]';


import { baseURL, switchDomain } from '../../../../helpers/Config';
import Storage from '../../../../helpers/Storage';
import { postRequest } from '../../../../helpers/Axios';
import * as PathData from '../../../../helpers/[Link]';
import { event } from 'react-native-reanimated';
import filter from '[Link]';

import { RangeSlider } from '@react-native-assets/slider';


import { Column } from 'native-base';

const OfferDetails =
[Link];
const { secondary, primary } = Colors;

const NoReservationMessage = () => {


const navigation = useNavigation();
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<Br s />
<TitleContainer>
<Title>Oops... Aucun résultat</Title>
</TitleContainer>
<Text style={{ fontSize: 15, textAlign: 'center' }}>
Désolé, CoolTrip n'a pas trouvé de logements correspondant à vos
critères.
</Text>

<View style={[Link]}>
<Lottie
source={require('../../../../assets/lotties/[Link]')}
autoPlay loop />
</View >
<MainButton title="Autre reservation" onPress={() =>
[Link]()} />
</View>
);
};

const HousingResultComponent = (props) => {


const navigation = useNavigation();
const isFocused = useIsFocused();
useEffect(() => {
if (isFocused) {
// [Link]('HousingResult Focused');
switchDomain([Link]);
}
}, [isFocused]);
const searchData = props?.searchData;

const [loading, setLoading] = useState(false);


const [fetching, setFetching] = useState(false);
const [searchCurrentPage, setSearchCurrentPage] = useState(1);
const [count, setCount] = useState(0);

const [internetMessage, setinternetMessage] = useState('');


const [isInternetModalVisible, setInternetModalVisible] = useState(false);
const openInternetModal = (message) => {
setinternetMessage(message);
setInternetModalVisible(true);
};
const closeInternetModal = async () => {
setInternetModalVisible(false);
};
const [errorMessage, setErrorMessage] = useState('');
const [isErrorModalVisible, setErrorModalVisible] = useState(false);
const openErrorModal = (message) => {
setErrorMessage(message);
setErrorModalVisible(true);
};
const closeErrorModal = async () => {
setErrorModalVisible(false);
};
const [searchQuery, setSearchQuery] = useState('');
const [finalData, setfinalData] = useState('');
const [nightsNumber, setnightsNumber] = useState('');
const [data, setData] = useState([]);
//const DATA = finalData;

const [min, setMin] = useState(10000);


const [max, setMax] = useState(90000);
const range = [min, max];

const [isVisible, setIsVisible] = useState(false);

const [searchNumberResult, setSearchNumberResult] = useState(0);


// function findMinPrice(fullNightPrice, dayPricePerHour, nightPricePerHour) {
// return [Link](fullNightPrice, dayPricePerHour, nightPricePerHour);
// }

[Link]('DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDD', nightsNumber);

const renderItem = ({ item }) => {

let stars = [];


for (let i = 0; i < [Link]; i++) {
[Link](
<MaterialCommunityIcons key={i} name={'star'} color={secondary}
size={15} style={{}} />
);
}
return (
<>
<SlideInFromRight>
<BounceOnLoad>
<SlideInFromRight>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
// [Link]('Les Offres sont : ',
[Link]);
// [Link]('key: ', [Link]);
function HousingSaver(tab) {
return [Link] === [Link];
}
const userHousing =
[Link](HousingSaver);
//
[Link]('------------------------------------- userHousing',userHousing[0])
[Link]('housingSelectedData', {
HousingId: userHousing[0].id,
HousingTown: userHousing[0].town,
HousingName: userHousing[0].name,
HousingDescription:
userHousing[0].description,
HousingFullNightPrice:
userHousing[0].fullNightPrice,
HousingDayPricePerHour:
userHousing[0].dayPricePerHour,
HousingNightPricePerHour:
userHousing[0].nightPricePerHour,
HousingPrepaymentEnabled:
userHousing[0].prepaymentEnabled,
HousingPrepaymentAmount:
userHousing[0].prepaymentAmount,
HousingAvailabilities:
userHousing[0].availabilities,
HousingProperty: userHousing[0].property,
HousingRate: userHousing[0].rate,
HousingCustomers: userHousing[0].customers,
HousingReviews: userHousing[0].reviews,
HousingOfferCharacteristics:
userHousing[0].offerCharacteristics,
HousingOfferPicture:
userHousing[0].offerPicture,
HousingOfferPictures:
userHousing[0].offerPictures,
HousingOfferSpecificTerms:
userHousing[0].offerSpecificTerms,
HousingPayOnSiteEnabled :
userHousing[0].payOnSiteEnabled,

});
[Link](OfferDetails,
{
housingSelectedData: {
HousingId: userHousing[0].id,
HousingTown: userHousing[0].town,
HousingName: userHousing[0].name,
HousingDescription:
userHousing[0].description,
HousingFullNightPrice:
userHousing[0].fullNightPrice,
HousingDayPricePerHour:
userHousing[0].dayPricePerHour,
HousingNightPricePerHour:
userHousing[0].nightPricePerHour,
HousingPrepaymentEnabled:
userHousing[0].prepaymentEnabled,
HousingPrepaymentAmount:
userHousing[0].prepaymentAmount,
HousingAvailabilities:
userHousing[0].availabilities,
HousingProperty:
userHousing[0].property,
HousingRate: userHousing[0].rate,
HousingCustomers:
userHousing[0].customers,
HousingReviews:
userHousing[0].reviews,
HousingOfferCharacteristics:
userHousing[0].offerCharacteristics,
HousingOfferPicture:
userHousing[0].[Link],
HousingOfferPictures:
userHousing[0].offerPictures,
HousingOfferSpecificTerms:
userHousing[0].offerSpecificTerms,
HousingPayOnSiteEnabled :
userHousing[0].payOnSiteEnabled,

},

searchData: searchData,
nightsNumber: nightsNumber,
});
}}>
<HousingCardGlobal
resultScreen
Pressed={() => {
function HousingSaver(tab) {
return [Link] === [Link];
}
const userHousing =
[Link](HousingSaver);
[Link](OfferDetails,
{
housingSelectedData: {
HousingId: userHousing[0].id,
HousingTown:
userHousing[0].town,
HousingName:
userHousing[0].name,
HousingDescription:
userHousing[0].description,
HousingFullNightPrice:
userHousing[0].fullNightPrice,
HousingDayPricePerHour:
userHousing[0].dayPricePerHour,
HousingNightPricePerHour:
userHousing[0].nightPricePerHour,
HousingPrepaymentEnabled:
userHousing[0].prepaymentEnabled,
HousingPrepaymentAmount:
userHousing[0].prepaymentAmount,
HousingAvailabilities:
userHousing[0].availabilities,
HousingProperty:
userHousing[0].property,
HousingRate:
userHousing[0].rate,
HousingCustomers:
userHousing[0].customers,
HousingReviews:
userHousing[0].reviews,
HousingOfferCharacteristics:
userHousing[0].offerCharacteristics,
HousingOfferPicture:
userHousing[0].[Link],
HousingOfferPictures:
userHousing[0].offerPictures,
HousingOfferSpecificTerms:
userHousing[0].offerSpecificTerms,
HousingPayOnSiteEnabled :
userHousing[0].payOnSiteEnabled,

},

searchData: searchData,
nightsNumber: nightsNumber,
});
}}
// sourceUri={[Link]}
sourceUri={[Link] +
[Link]}
offerName={[Link]}
propertyName={[Link]}
town={[Link]}
rate={[Link] }
customers={[Link]}
reviews={[Link]}
availabilities={([Link](p =>
[Link]))}
price={[Link](p => {
if ([Link] !== null) {
return [Link];
} else { return 0; }
})}
stars={[Link]}
quarter={[Link]}
/>
{/* {[Link](item)} */}
</TouchableOpacity>

</SlideInFromRight>

</BounceOnLoad>
</SlideInFromRight>

</>
);
};

// [Link](date);
// [Link](arrivalCity);
// [Link](searchData)

const retrievedDataFromServer = async () => {


setLoading(true);
if ([Link] === 'normal') {
if ([Link] === 'sieste') {
// [Link]('-----------------', [Link])
// [Link]('-----------------', [Link])
try {
const response = await postRequest('searches',
{
town: [Link],
arrivalDate: [Link],
nightly: false,
maxResults: 500,
});
const housing = [Link];
const totalResults = [Link];
const nights = [Link];
// [Link](totalResults);
setSearchNumberResult(totalResults);
// [Link]('------------------
TETTTTTTSTS-----------------------------', (housing[1].[Link](p =>
[Link])));
const housingData = [Link](item => {
const container = {};
[Link] = item['@id'];
[Link] = totalResults;
[Link] = nights;
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] === '' ? 'Aucune
description sur l\'offre.' : [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link](subitem
=> {
const subContainer = {};
[Link] = subitem['@id'];
// [Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
// [Link] =
[Link];
return subContainer;
});
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] ?
[Link] : null;
[Link] = [Link];
[Link] = [Link];
[Link] =
[Link] ? [Link] : null;

return container;
});
//
[Link](housingData[0].offerCharacteristics[0].characteristic);
// [Link]('------------------
TETTTTTTSTS-----------------------------', housingData[1].[Link](p =>
[Link]));
// [Link](housingData);
setfinalData(housingData);
} catch (error) {
if ([Link](/network/i)) {
openInternetModal('Il semblerait qu\'il y ait un souci lié
à votre connexion internet. Merci de la vérifier et réessayer dans quelques
instants.');
} else {
// [Link]([Link]);
openErrorModal('Une erreur est survenue, veuillez
réessayer. Si l\'erreur persiste, contactez le service client.');
}

} finally {
setLoading(false);
}
} else if ([Link] === 'nuitée') {
try {
const response = await postRequest('searches',
{
town: [Link],
arrivalDate: [Link],
departureDate: [Link],
nightly: true,
maxResults: 500,
});
const housing = [Link];
const totalResults = [Link];
const nights = [Link];
setnightsNumber(nights);
setSearchNumberResult(totalResults);
// [Link](housing[0].availabilities)
const housingData = [Link](item => {
const container = {};
[Link] = item['@id'];
[Link] = totalResults;
[Link] = nights;
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] === '' ? 'Aucune
description sur l\'offre.' : [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link](subitem
=> {
const subContainer = {};
[Link] = subitem['@id'];
// [Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
// [Link] =
[Link];
return subContainer;
});
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] ?
[Link] : null;
[Link] = [Link];
[Link] = [Link];
[Link] =
[Link] ? [Link] : null;
return container;
});
// [Link](housingData[0].offerCharacteristics);
// [Link](extractTags(housingData[1].[Link](p
=> [Link])));
// [Link](housingData);
setfinalData(housingData);
} catch (error) {
if ([Link](/network/i)) {
openInternetModal('Il semblerait qu\'il y ait un souci lié
à votre connexion internet. Merci de la vérifier et réessayer dans quelques
instants.');
} else {
// [Link]([Link]);
openErrorModal('Une erreur est survenue, veuillez
réessayer. Si l\'erreur persiste, contactez le service client.');
}

} finally {
setLoading(false);
}
}
} else if ([Link] === 'byCategory') {
try {
const response = await postRequest('searches/selection',
{
offerType: [Link],
arrivalDate: [Link],
departureDate: [Link],
maxResults: 500,
});
const housing = [Link];
const totalResults = [Link];
const nights = [Link];
setSearchNumberResult(totalResults);
setnightsNumber(nights);
// [Link]('------------------
TETTTTTTSTS-----------------------------', (housing[1].nights);
const housingData = [Link](item => {
const container = {};
[Link] = item['@id'];
[Link] = totalResults;
[Link] = [Link];
[Link] = nights;
[Link] = [Link];
[Link] = [Link] === '' ? 'Aucune
description sur l\'offre.' : [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link](subitem => {
const subContainer = {};
[Link] = subitem['@id'];
// [Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
// [Link] =
[Link];
return subContainer;
});
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] ?
[Link] : null;
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] ?
[Link] : null;
return container;
});
// [Link](housingData[0].offerCharacteristics);
// [Link]('------------------
TETTTTTTSTS-----------------------------', housingData[1].[Link](p =>
[Link]));
// [Link](housingData);
setfinalData(housingData);
} catch (error) {
if ([Link](/network/i)) {
openInternetModal('Il semblerait qu\'il y ait un souci lié à
votre connexion internet. Merci de la vérifier et réessayer dans quelques
instants.');
} else {
// [Link]([Link]);
openErrorModal('Une erreur est survenue, veuillez réessayer. Si
l\'erreur persiste, contactez le service client.');
}

} finally {
setLoading(false);
}
}

};

const _initSearch = () => {


setCount(0);
setSearchCurrentPage(1);
};
const _onRefresh = () => {
_initSearch();
retrievedDataFromServer();
};

useEffect(() => {
retrievedDataFromServer();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const handleSearch = (query, priceRange) => {


priceRange = [min, max];
setSearchQuery(query);
const formattedQuery = [Link]();
const filteredData = filter(finalData, (item) => {
const quarterContains = contains([Link](),
formattedQuery);
const descriptionContains =
contains([Link](), formattedQuery);
const overnightPriceInRange = [Link] >= min &&
[Link] <= max;
const napPriceInRange = [Link](subitem => {
let bookingPrice = [Link];
return bookingPrice >= min && bookingPrice <= max;
});

if ([Link] === 'normal') {


return napPriceInRange ? quarterContains || descriptionContains :
null;
} else {
return overnightPriceInRange ? quarterContains ||
descriptionContains : null;
}
});
setData(filteredData);
};

const contains = (item, query) => {


if ([Link](query)) {
return true;
}
return false;
};

const handleButtonPress = () => {


setIsVisible(!isVisible);
};

return (

<View style={{marginBottom:40}}>

<Br xs />
<InternetModal title="Oops... un souci avec la connexion internet"
message={internetMessage} visible={isInternetModalVisible}
onClose={closeInternetModal} />
<ErrorOTPModal title="Oops..." message={errorMessage}
visible={isErrorModalVisible} onClose={closeErrorModal} />
{loading ?
(<APICallsModal visible={true} title="Recherche d'hébergement en
cours" content="Veuillez patienter quelques instants s'il vous plaît. CoolTrip
recherche des hébergements saisonniers disponibles pour vous." />)
:
<>
<Title HousingResultTitle style={{}}>{searchNumberResult === 1 ?
searchNumberResult + ' hébergement trouvé' : searchNumberResult > 1 ?
searchNumberResult + ' hébergements trouvés' : searchNumberResult === 0 ? '' :
''}</Title>
<View>
<TouchableOpacity onPress={handleButtonPress}
style={[Link]}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 16, fontWeight: '600',
marginRight: 2}}>{ isVisible ? 'Retirer filtres' : 'Filtres'}</Text>
<MaterialCommunityIcons name={'filter'} color={'black'}
size={18} style={{}} />
</View>
</TouchableOpacity>
</View>
{isVisible && <View>
<TextInput
placeholder="Localisation: ex: Hotel Bonamoussadi"
clearButtonMode="always"
style={[Link]}
autoCapitalize="none"
autoCorrect={false}
value={searchQuery}
onChangeText={(query) => handleSearch(query, {min: min,
max: max})}
/>
<Br xs />
<View style={[Link]}>
<TextInput
style={[Link]}
value={min}
placeholder={`Prix min: ${min}`}
placeholderTextColor={'black'}
keyboardType="numeric"
editable={false}
/>
<Br xs />
<TextInput
style={[Link]}
value={max}
placeholder={`Prix max: ${max}`}
placeholderTextColor={'black'}
keyboardType="numeric"
editable={false}
/>
</View>
<RangeSlider
range={range}
minimumValue={2000}
maximumValue={100000}
step={1000}
minimumRange={10000}
crossingAllowed={false}
outboundColor="#23AAE2"
inboundColor="#C1EEFF"
thumbTintColor="#556062"
inverted={false}
enabled={true}
trackHeight={4}
thumbSize={15}
thumbImage={undefined}
slideOnTap={true}
onValueChange={(value) => {
setMin(value[0]);
setMax(value[1]);

handleSearch(searchQuery, {min: value[0], max:


value[1]});
}}
style={{marginBottom: 10}}
/>
</View>}
<FlatList
initialNumToRender={10}
showsVerticalScrollIndicator={false}
removeClippedSubviews={true}
ListEmptyComponent={<NoReservationMessage />}
data={ [Link] === 0 ? finalData : data }
renderItem={renderItem}
keyExtractor={item => [Link] + [Link]}
refreshControl={<RefreshControl
refreshing={fetching}
onRefresh={_onRefresh} />
}
/>
</>
}
</View>
);
};

const styles = [Link]({


container: {
flex: 1,
backgroundColor: primary,
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: 350,
height: 350,
resizeMode: 'contain',
},
lottiecontainer: {
width: 250,
height: 250,
resizeMode: 'contain',
},
activityIndicator: {
alignItems: 'center',
height: 80,
},
searchBox: {
paddingHorizontal: 20,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 8,
},
horizontalContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: 16,
gap: 16,
},
minInput:{
width: '50%',
height: 40,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 20,
paddingVertical: 10,
},
filter: {
paddingVertical: 12,
},
});

export default HousingResultComponent;

You might also like