import React, { Component } from 'react';
import {
ScrollView,
StyleSheet, Text, View
} from 'react-native';
import { Button, Slider } from 'react-native-elements';
import SelectionCell from './components/SelectionCell'
import EditField from './components/EditFields';
const styles = StyleSheet.create({
backgroundColorBlue: {
backgroundColor: '#0A4C8D',
margin:40
},
boxTitle: {
borderBottomWidth: 0.3,
padding: 10,
},
boxListHashTag:{
height: 60,
backgroundColor: 'white',
justifyContent: 'center',borderColor: 'gray',
borderWidth: 0.3,
},
container: {
flex: 1,
backgroundColor: '#F1F1F5',
},
containerSlider: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
padding: 10,
borderBottomWidth: 0.3,
borderColor: '#738082',
height: 60,
backgroundColor: 'white',
},
fontSize16: {
fontSize: 16,
},
fontWeight600: {
fontWeight: '600',
},
pT20: {
paddingTop: 20,
},
padding10 : {
padding:10
}
});
//Functions
const formatHashTags = values => {
const transformStringAndArray = values.split(' ');
const deleteBlank = transformStringAndArray.filter(value => {
return value !== '';
});
return deleteBlank.map(value => {
if (value.charAt(0) !== '#') {
const transformValueAndArray = value.split('');
transformValueAndArray.unshift('#');
return transformValueAndArray.join('');
}
return value;
});
};
// Components
const Title = ({title}) => (
<View style={styles.boxTitle}>
<Text style={[styles.fontSize16, styles.fontWeight600]}>{title}</Text>
</View>
);
const Box = ({children}) => <View style={styles.pT20}>{children}</View>;
const CreateListHashTag = ({state}) =>
(
<View>
{
state.hashtags.map((l, i) => (
<View key={i} style={styles.boxListHashTag}>
<Text style={styles.padding10}>{`${l} `}</Text>
</View>
))
}
</View>
);
export default class SearchPosts extends Component {
static navigationOptions = {
title: 'SearchPosts',
};
state = {
subscription: false ,
city:[
{
"city":"marseille",
"lat":"23",
"long":"55"
}
],
value: 0,
hashtags: [],
history: []
};
onSubscriptionChange = subscription => this.setState({subscription});
handleChange = (e) => {
const valueHashtag = e;
this.setState({hashtags:formatHashTags(valueHashtag)});
};
handleClick = () => {
console.log(this.state);
};
render() {
//Desctructuring this
const {
renderSlider,
rendertitle,
renderhashtags,
renderSubscription,
renderButton,
handleClick,
handleChange,
onSubscriptionChange,
renderCity
} = this;
//Desctructuring state
const {value, subscription, hashtag} = this.state;
return (
<>
<ScrollView style={styles.container}>
{renderSubscription({subscription, onSubscriptionChange})}
<Box>
{rendertitle('Localisation')}
{renderCity()}
{renderSlider({value})}
</Box>
{renderhashtags({handleChange, hashtag})}
{rendertitle('Historique')}
{
this.state.hashtags.length>0
?<CreateListHashTag state={this.state}/>
:null
}
</ScrollView>
{renderButton({handleClick})}
</>
);
}
renderSlider = ({value}) => (
<View style={styles.containerSlider}>
<Text style={styles.fontSize16}>Alentours</Text>
<View style={{flex: 1, padding: 5}}>
<Slider
thumbTintColor="#0A4C8D"
minimumValue={0}
maximumValue={100}
value={value}
onValueChange={value => this.setState({value})}
/>
</View>
<Text style={styles.fontSize16}>
Km(s):
{value.toFixed(0)}
</Text>
</View>
)
rendertitle = title => (
<Box>
<Title title={title}/>
</Box>
)
renderhashtags = ({handleChange, hashtag}) => (
<Box>
<EditField
title="Hashtags"
placeholder="#cuisine #Japon ...."
onChangeText={handleChange}
value={hashtag}
/>
</Box>
)
renderButton = ({handleClick}) => (
<View style={{ backgroundColor: '#F1F1F5',}}>
<Button
buttonStyle={styles.backgroundColorBlue}
onPress={() => handleClick()}
title="Rechercher des posts"
/>
</View>
)
renderSubscription = ({subscription, onSubscriptionChange}) => (
<Box>
<SelectionCell
title="Mes abonnement"
type="switch"
data={subscription}
onValueChange={onSubscriptionChange}
/>
</Box>
)
renderCity = () => (
<SelectionCell
title="Ville"
type="chevron"
/>
)
}
import React, { Component } from 'react';
import {
ScrollView,
StyleSheet, Text, View
} from 'react-native';
import { Button, Slider } from 'react-native-elements';
import SelectionCell from './components/SelectionCell'
import EditField from './components/EditFields';
const styles = StyleSheet.create({
backgroundColorBlue: {
backgroundColor: '#0A4C8D',
margin:40
},
boxTitle: {
borderBottomWidth: 0.3,
padding: 10,
},
boxListHashTag:{
height: 60,
backgroundColor: 'white',
justifyContent: 'center',borderColor: 'gray',
borderWidth: 0.3,
},
container: {
flex: 1,
backgroundColor: '#F1F1F5',
},
containerSlider: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
padding: 10,
borderBottomWidth: 0.3,
borderColor: '#738082',
height: 60,
backgroundColor: 'white',
},
fontSize16: {
fontSize: 16,
},
fontWeight600: {
fontWeight: '600',
},
pT20: {
paddingTop: 20,
},
padding10 : {
padding:10
}
});
//Function
const formatHashTags = values => {
const transformStringAndArray = values.split(' ');
const deleteBlank = transformStringAndArray.filter(value => {
return value !== '';
});
return deleteBlank.map(value => {
if (value.charAt(0) !== '#') {
const transformValueAndArray = value.split('');
transformValueAndArray.unshift('#');
return transformValueAndArray.join('');
}
return value;
});
};
// Components
const Title = ({title}) => (
<View style={styles.boxTitle}>
<Text style={[styles.fontSize16, styles.fontWeight600]}>{title}</Text>
</View>
);
const Box = ({children}) => <View style={styles.pT20}>{children}</View>;
export default class SearchPosts extends Component {
static navigationOptions = {
title: 'SearchPosts',
};
state = {
subscription: false ,
city:[
{
"city":"marseille",
"lat":"23",
"long":"55"
}
],
value: 0,
hashtags: [],
history: []
};
onSubscriptionChange = subscription => this.setState({subscription});
handleChange = (e) => {
const valueHashtag = e;
this.setState({hashtags:formatHashTags(valueHashtag)});
};
handleClick = () => {
const ville = this.state.city.map(x => x.city)
const history = [[...this.state.hashtags,...ville]]
this.setState({history:history})
};
render() {
//Desctructuring this
const {
renderSlider,
rendertitle,
renderhashtags,
renderSubscription,
renderButton,
handleClick,
handleChange,
onSubscriptionChange,
renderCity,
renderListHashtag
} = this;
//Desctructuring state
const {value, subscription, hashtag, hashtags} = this.state;
return (
<>
<ScrollView style={styles.container}>
{renderSubscription({subscription, onSubscriptionChange})}
<Box>
{rendertitle('Localisation')}
{renderCity()}
{renderSlider({value})}
</Box>
{renderhashtags({handleChange, hashtag})}
{rendertitle('Historique')}
{renderListHashtag()}
</ScrollView>
{renderButton({handleClick})}
</>
);
}
renderSlider = ({value}) => (
<View style={styles.containerSlider}>
<Text style={styles.fontSize16}>Alentours</Text>
<View style={{flex: 1, padding: 5}}>
<Slider
thumbTintColor="#0A4C8D"
minimumValue={0}
maximumValue={100}
value={value}
onValueChange={value => this.setState({value})}
/>
</View>
<Text style={styles.fontSize16}>
Km(s):
{value.toFixed(0)}
</Text>
</View>
)
rendertitle = title => (
<Box>
<Title title={title}/>
</Box>
)
renderhashtags = ({handleChange, hashtag}) => (
<Box>
<EditField
title="Hashtags"
placeholder="#cuisine #Japon ...."
onChangeText={handleChange}
value={hashtag}
/>
</Box>
)
renderButton = ({handleClick}) => (
<View style={{ backgroundColor: '#F1F1F5',}}>
<Button
buttonStyle={styles.backgroundColorBlue}
onPress={() => handleClick()}
title="Rechercher des posts"
/>
</View>
)
renderSubscription = ({subscription, onSubscriptionChange}) => (
<Box>
<SelectionCell
title="Mes abonnement"
type="switch"
data={subscription}
onValueChange={onSubscriptionChange}
/>
</Box>
)
renderCity = () => (
<SelectionCell
title="Ville"
type="chevron"
/>
)
renderListHashtag = () => (
<View>
{
this.state.history.length > 0 &&
this.state.history.map((l, i) => (
<View key={i} style={styles.boxListHashTag}>
<Text style={styles.padding10}>{`${l} `}</Text>
</View>
))
}
</View>
)
}