From b2998a1f7b64f93ffd9ae90f85ca0581015d589a Mon Sep 17 00:00:00 2001
From: bezvershenko <lbezvershenkoo@yandex.ru>
Date: Tue, 12 Mar 2019 21:54:03 +0400
Subject: Add 'pull-to-refresh' in ListView and ArticleView Add host's constant
 for backend ip-address

---
 frontend/app/screens/articles/article.js | 167 ++++++++++++++++++-------------
 1 file changed, 95 insertions(+), 72 deletions(-)

(limited to 'frontend/app/screens/articles/article.js')

diff --git a/frontend/app/screens/articles/article.js b/frontend/app/screens/articles/article.js
index 059ab44..aedeb1d 100644
--- a/frontend/app/screens/articles/article.js
+++ b/frontend/app/screens/articles/article.js
@@ -1,94 +1,117 @@
 import React from 'react';
 import axios from 'axios';
-
-
 import {
-  ScrollView,
-  Image,
-  View,
-  TouchableOpacity,
+    ScrollView,
+    Image,
+    View,
+    RefreshControl,
 } from 'react-native';
+
 import {
-  RkCard,
-  RkText,
-  RkStyleSheet,
+    RkCard,
+    RkText,
+    RkStyleSheet,
 } from 'react-native-ui-kitten';
 import {
-  Avatar,
-  SocialBar,
+    Avatar,
+    SocialBar,
 } from '../../components';
 import NavigationType from '../../config/navigation/propTypes';
+import {HOST} from '../../constants'
 
 
 export class Article extends React.Component {
-  state = {
-    article: {},
-    mounted: false,
-  };
+    state = {
+        article: {},
+        mounted: false,
+        refreshing: false,
+    };
 
-  static propTypes = {
-    navigation: NavigationType.isRequired,
-  };
-  static navigationOptions = {
-    title: 'Current problem'.toUpperCase(),
-  };
+    static propTypes = {
+        navigation: NavigationType.isRequired,
+    };
+    static navigationOptions = {
+        title: 'Current problem'.toUpperCase(),
+    };
+
+
+    componentWillMount() {
+        this.makeRemoteRequest()
+    }
 
+    makeRemoteRequest = () => {
+        const articleId = this.props.navigation.getParam('id', 1);
+        console.log(articleId);
 
-  componentWillMount() {
-    const articleId = this.props.navigation.getParam('id', 1);
-    console.log(articleId);
+        axios.get(`${HOST}/api/articles/${articleId}`)
+            .then(res => {
+                this.setState({
+                    article: res.data,
+                    mounted: true,
+                    refreshing: false,
+                });
+                console.log(this.state.article);
+            });
+    };
 
-    axios.get(`http://192.168.1.43:8000/api/articles/${articleId}`)
-      .then(res => {
+    handleRefresh = () => {
         this.setState({
-          article: res.data,
-          mounted: true,
-        });
-        console.log(this.state.article);
-      });
-  }
-
-  render() {
-    if (this.state.mounted) {
-      return (
-        <ScrollView style={styles.root}>
-          <RkCard rkType='article'>
-            <Image
-              rkCardImg
-              source={{
-              uri: `${this.state.article.image.toString()
-                .replace('http://127.0.0.1:8000/', '')}`,
-            }}
-            />
-            <View rkCardHeader>
-              <View>
-                <RkText style={styles.title} rkType='header4'>{this.state.article.title}</RkText>
-              </View>
-
-
-            </View>
-            <View rkCardContent>
-              <View>
-                <RkText rkType='primary3 bigLine'>{this.state.article.text}</RkText>
-              </View>
-            </View>
-            <View rkCardFooter>
-              <SocialBar comments={this.state.article.n_comments} is_solved={this.state.article.is_solved ? 'Solved' : "Doesn't solved"}/>
-            </View>
-          </RkCard>
-        </ScrollView>
-
-      );
+            refreshing: true,
+        }, () => {
+            setTimeout(() => {
+                this.makeRemoteRequest()
+            }, 500)
+
+        })
+    };
+
+
+    render() {
+        if (this.state.mounted) {
+            return (
+                <ScrollView style={styles.root} refreshControl={
+                    <RefreshControl
+                        refreshing={this.state.refreshing}
+                        onRefresh={this.handleRefresh}
+                    />}>
+                    <RkCard rkType='article'>
+                        <Image
+                            rkCardImg
+                            source={{
+                                uri: `${this.state.article.image.toString()
+                                    .replace('http://127.0.0.1:8000/', '')}`,
+                            }}
+                        />
+                        <View rkCardHeader>
+                            <View>
+                                <RkText style={styles.title} rkType='header4'>{this.state.article.title}</RkText>
+                            </View>
+
+
+                        </View>
+                        <View rkCardContent>
+                            <View>
+                                <RkText rkType='primary3 bigLine'>{this.state.article.text}</RkText>
+                            </View>
+                        </View>
+                        <View rkCardFooter>
+                            <SocialBar comments={this.state.article.n_comments}
+                                       is_solved={this.state.article.is_solved ? 'Solved' : "Doesn't solved"}/>
+                        </View>
+                    </RkCard>
+                </ScrollView>
+
+            );
+        }
+        return null;
     }
-    return null;
-  }
 }
 
 const styles = RkStyleSheet.create(theme => ({
-  root: {
-    backgroundColor: theme.colors.screen.base,
-  },
-  title: {
-    marginBottom: 5,
-  },
+    root: {
+        backgroundColor: theme.colors.screen.base,
+    },
+    title: {
+        marginBottom: 5,
+    },
 }));
-- 
cgit v1.2.3