Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react'
- import { Text, View, Image, FlatList, Dimensions, ActivityIndicator, StyleSheet } from 'react-native'
- import { Container, CardItem, Card, Left, Fab, Button, Icon } from 'native-base'
- import { withNavigation } from 'react-navigation'
- import Axios from 'axios';
- import AsyncStorage from '@react-native-community/async-storage';
- import { ScrollView } from 'react-native-gesture-handler';
- import Header1 from '../component/Header1';
- const styles = StyleSheet.create({
- button1: {
- marginVertical: 10,
- marginHorizontal: 10,
- alignItems: 'center',
- justifyContent: 'center',
- width: Dimensions.get('window').width * 1 / 5,
- backgroundColor: '#ddfffb',
- },
- text1: {
- color: '#ffffff',
- }
- })
- class Home extends Component {
- constructor(props) {
- super(props)
- this.state = {
- data: [],
- isLogin: '',
- page: 1,
- refreshing: false,
- loading: false,
- category: '',
- isHidden: false
- }
- }
- getDataStory = () => {
- try {
- const getStory = async () => await Axios.get(`https://glints-redu.herokuapp.com/api/stories/paginate?page=${this.state.page}`, {
- headers: {
- 'Content-Type': 'application/json',
- }
- })
- this.setState({ loading: true });
- getStory()
- .then(res => {
- this.setState({
- data: [...this.state.data, ...res.data.data.docs],
- refreshing: false,
- loading: false
- })
- })
- .catch(err => {
- })
- } catch (e) { }
- }
- renderFooter = () => {
- if (!this.state.loading) return null;
- return (
- <View
- style={{
- paddingVertical: 20,
- borderTopWidth: 1,
- borderColor: "#CED0CE"
- }}
- >
- <ActivityIndicator animating size="large" />
- </View>
- );
- }
- componentDidMount() {
- this.getDataStory()
- console.log(this.state.page)
- this.userIsSignIn()
- setInterval(this.userIsSignIn, 1000)
- }
- handleEnd = () => {
- this.setState(state => ({ page: state.page + 1 }), () => this.getDataStory());
- };
- userIsSignIn = async () => {
- const data = await AsyncStorage.getItem('@token')
- this.setState({ isLogin: data })
- }
- handleRefresh = () => {
- this.setState(
- {
- page: 1,
- refreshing: true,
- data: []
- },
- () => {
- this.getDataStory();
- }
- );
- };
- hideView = () => { this.setState({ isHidden: true }) }
- revealView = () => { this.setState({ isHidden: false }) }
- render() {
- if (this.state.isLogin !== 'null') {
- return (
- <Container style={{ backgroundColor: '#faffff' }}>
- <Header1 />
- <ScrollView
- onScroll={this.hideView}
- horizontal={true}
- style={{
- marginVertical: 10,
- }}
- >
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'hutan' })}>
- <Text>Hutan</Text>
- </Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
- <Text>Kota</Text></Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'pantai' })}>
- <Text>Pantai</Text></Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'sejarah' })}>
- <Text>Sejarah</Text></Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
- <Text>Agama</Text></Button>
- </ScrollView>
- <FlatList
- data={this.state.data}
- renderItem={({ item }) => (
- <View
- key={item._id}
- style={{ alignItems: 'center', justifyContent: 'center' }}>
- <Card
- style={{
- marginVertical: 10,
- borderRadius: 200 / 12,
- width: Dimensions.get('window').width * 0.95,
- }}>
- <CardItem
- button
- onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id })}
- style={{ borderRadius: 200 / 12 }}>
- <Text
- style={{
- fontSize: 18,
- fontFamily: 'Roboto',
- fontWeight: 'bold',
- color: '#015249'
- }}
- > {item.title} </Text>
- </CardItem>
- <CardItem
- cardBody
- button
- onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id, photo: item._user.photo.secure_url })}
- style={{ marginHorizontal: 10 }}
- >
- <Image
- style={{
- width: '100%',
- height: 300,
- borderRadius: 200 / 12,
- }}
- source={{ uri: item.photo ? item.photo.secure_url : null }}
- />
- </CardItem>
- <CardItem
- button
- onPress={() => { this.props.navigation.navigate('UserDataById', { id: item._user._id }) }}
- style={{ borderRadius: 200 / 12 }}
- >
- <Left>
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
- <Image
- style={{
- width: 25,
- height: 25,
- borderRadius: 25 / 2
- }}
- source={{ uri: item._user.photo.secure_url }}
- />
- <Text
- style={{
- fontSize: 15,
- fontFamily: 'Roboto',
- fontWeight: 'bold',
- }}
- > {item._user.name} </Text>
- </View>
- </Left>
- </CardItem>
- </Card>
- </View>
- )}
- keyExtractor={item => item._id}
- onEndReached={this.handleEnd}
- onEndReachedThreshold={0.01}
- onRefresh={this.handleRefresh}
- refreshing={this.state.refreshing}
- // ListHeaderComponent={this.renderHeader}
- ListFooterComponent={this.renderFooter}
- />
- <Fab
- style={{
- backgroundColor: '#22cade',
- }}
- onPress={() => this.props.navigation.navigate('AddStory')}>
- <Icon name="add" />
- </Fab>
- </Container>
- )
- } else
- return (
- <Container style={{ backgroundColor: '#faffff' }}>
- <Header1 />
- <ScrollView
- onScroll={this.hideView}
- horizontal={true}
- style={{
- marginVertical: 10,
- }}
- >
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'hutan' })}>
- <Text>Hutan</Text>
- </Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
- <Text>Kota</Text></Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'pantai' })}>
- <Text>Pantai</Text></Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'sejarah' })}>
- <Text>Sejarah</Text></Button>
- <Button
- small
- bordered
- rounded
- style={styles.button1
- }
- onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
- <Text>Agama</Text></Button>
- </ScrollView>
- <FlatList
- data={this.state.data}
- renderItem={({ item }) => (
- <View
- key={item._id}
- style={{ alignItems: 'center', justifyContent: 'center' }}>
- <Card
- style={{
- marginVertical: 10,
- borderRadius: 200 / 12,
- width: Dimensions.get('window').width * 0.95,
- }}>
- <CardItem
- button
- onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id })}
- style={{ borderRadius: 200 / 12 }}>
- <Text
- style={{
- fontSize: 18,
- fontFamily: 'Roboto',
- fontWeight: 'bold',
- color: '#015249'
- }}
- > {item.title} </Text>
- </CardItem>
- <CardItem
- cardBody
- button
- onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id, photo: item._user.photo.secure_url })}
- style={{ marginHorizontal: 10 }}
- >
- <Image
- style={{
- width: '100%',
- height: 300,
- borderRadius: 200 / 12,
- }}
- source={{ uri: item.photo ? item.photo.secure_url : null }}
- />
- </CardItem>
- <CardItem
- button
- onPress={() => { this.props.navigation.navigate('UserDataById', { id: item._user._id }) }}
- style={{ borderRadius: 200 / 12 }}
- >
- <Left>
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
- <Image
- style={{
- width: 25,
- height: 25,
- borderRadius: 25 / 2
- }}
- source={{ uri: item._user.photo.secure_url }}
- />
- <Text
- style={{
- fontSize: 15,
- fontFamily: 'Roboto',
- fontWeight: 'bold',
- }}
- > {item._user.name} </Text>
- </View>
- </Left>
- </CardItem>
- </Card>
- </View>
- )}
- keyExtractor={item => item._id}
- onEndReached={this.handleEnd}
- onEndReachedThreshold={0.01}
- onRefresh={this.handleRefresh}
- refreshing={this.state.refreshing}
- // ListHeaderComponent={this.renderHeader}
- ListFooterComponent={this.renderFooter}
- />
- </Container>)
- }
- }
- export default withNavigation(Home)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement