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 ++++++++++++++++-------------
 frontend/app/screens/articles/articles2.js | 143 +++++++++++++-----------
 2 files changed, 176 insertions(+), 134 deletions(-)

(limited to 'frontend/app/screens/articles')

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,
+    },
 }));
diff --git a/frontend/app/screens/articles/articles2.js b/frontend/app/screens/articles/articles2.js
index 0d48812..03a78da 100644
--- a/frontend/app/screens/articles/articles2.js
+++ b/frontend/app/screens/articles/articles2.js
@@ -1,84 +1,103 @@
 import React from 'react';
 import {
-  FlatList,
-  Image,
-  View,
-  TouchableOpacity,
+    FlatList,
+    Image,
+    View,
+    TouchableOpacity,
 } from 'react-native';
 import {
-  RkText,
-  RkCard, RkStyleSheet,
+    RkText,
+    RkCard, RkStyleSheet,
 } from 'react-native-ui-kitten';
 import axios from 'axios';
-import { SocialBar } from '../../components';
+import {SocialBar} from '../../components';
 import NavigationType from '../../config/navigation/propTypes';
+import {HOST} from '../../constants'
 
 
 export class Articles2 extends React.Component {
-  static propTypes = {
-    navigation: NavigationType.isRequired,
-  };
-  static navigationOptions = {
-    title: 'Problems List'.toUpperCase(),
-  };
+    static propTypes = {
+        navigation: NavigationType.isRequired,
+    };
+    static navigationOptions = {
+        title: 'Problems List'.toUpperCase(),
+    };
 
-  state = {
-    articles: [],
-  };
+    state = {
+        articles: [],
+        refreshing: false,
+    };
 
-  componentDidMount() {
-    axios.get('http://192.168.1.43:8000/api/articles')
-      .then(res => {
+    componentDidMount() {
+        this.makeRemoteRequest()
+    };
+
+    makeRemoteRequest = () => {
+        axios.get(`${HOST}/api/articles`)
+            .then(res => {
+                this.setState({
+                    articles: res.data,
+                    refreshing: false,
+                });
+
+            });
+    };
+
+    handleRefresh = () =>{
         this.setState({
-          articles: res.data,
-        });
+            refreshing: true,
+        }, () => {
+            setTimeout(()=>{this.makeRemoteRequest()}, 500)
 
-      });
-  }
+        })
+    };
 
-  extractItemKey = (item) => `${item.id}`;
+    extractItemKey = (item) => `${item.id}`;
 
-  onItemPressed = (item) => {
-    this.props.navigation.navigate('Article', { id: item.id });
-  };
+    onItemPressed = (item) => {
+        this.props.navigation.navigate('Article', {id: item.id});
+    };
 
-  renderItem = ({ item }) => (
-    <TouchableOpacity
-      delayPressIn={70}
-      activeOpacity={0.8}
-      onPress={() => this.onItemPressed(item)}>
-      <RkCard rkType='imgBlock' style={styles.card}>
-        <Image rkCardImg source={{ uri: `${item.image.toString().replace('http://127.0.0.1:8000/', '')}` }} />
-        <View rkCardImgOverlay rkCardContent style={styles.overlay}>
-          <RkText rkType='header4 inverseColor'>{item.title}</RkText>
-        </View>
-        <View rkCardFooter>
-          <SocialBar rkType='space' showLabel likes={item.rating} comments={item.n_comments} is_solved={item.is_solved ? 'Solved' : "Doesn't solved"} />
-        </View>
-      </RkCard>
-    </TouchableOpacity>
-  );
+    renderItem = ({item}) => (
+        <TouchableOpacity
+            delayPressIn={70}
+            activeOpacity={0.8}
+            onPress={() => this.onItemPressed(item)}>
+            <RkCard rkType='imgBlock' style={styles.card}>
+                <Image rkCardImg source={{uri: `${item.image.toString().replace('http://127.0.0.1:8000/', '')}`}}/>
+                <View rkCardImgOverlay rkCardContent style={styles.overlay}>
+                    <RkText rkType='header4 inverseColor'>{item.title}</RkText>
+                </View>
+                <View rkCardFooter>
+                    <SocialBar rkType='space' showLabel likes={item.rating} comments={item.n_comments}
+                               is_solved={item.is_solved ? 'Solved' : "Doesn't solved"}/>
+                </View>
+            </RkCard>
+        </TouchableOpacity>
+    );
 
-  render = () => (
-    <FlatList
-      data={this.state.articles}
-      renderItem={this.renderItem}
-      keyExtractor={this.extractItemKey}
-      style={styles.container}
-    />
-  );
+    render = () => (
+        <FlatList
+            data={this.state.articles}
+            renderItem={this.renderItem}
+            keyExtractor={this.extractItemKey}
+            style={styles.container}
+            refreshing={this.state.refreshing}
+            onRefresh={this.handleRefresh}
+        />
+    );
 }
 
 const styles = RkStyleSheet.create(theme => ({
-  container: {
-    backgroundColor: theme.colors.screen.scroll,
-    paddingVertical: 8,
-    paddingHorizontal: 14,
-  },
-  card: {
-    marginVertical: 8,
-  },
-  time: {
-    marginTop: 5,
-  },
+    container: {
+        backgroundColor: theme.colors.screen.scroll,
+        paddingVertical: 8,
+        paddingHorizontal: 14,
+    },
+    card: {
+        marginVertical: 8,
+    },
+    time: {
+        marginTop: 5,
+    },
 }));
-- 
cgit v1.2.3