7 files changed, 505 insertions, 0 deletions
diff --git a/frontend/app/screens/articles/article.js b/frontend/app/screens/articles/article.js
new file mode 100644
index 0000000..059ab44
--- /dev/null
+++ b/frontend/app/screens/articles/article.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import axios from 'axios';
+
+
+import {
+  ScrollView,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkCard,
+  RkText,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import {
+  Avatar,
+  SocialBar,
+} from '../../components';
+import NavigationType from '../../config/navigation/propTypes';
+
+
+export class Article extends React.Component {
+  state = {
+    article: {},
+    mounted: false,
+  };
+
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Current problem'.toUpperCase(),
+  };
+
+
+  componentWillMount() {
+    const articleId = this.props.navigation.getParam('id', 1);
+    console.log(articleId);
+
+    axios.get(`http://192.168.1.43:8000/api/articles/${articleId}`)
+      .then(res => {
+        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>
+
+      );
+    }
+    return null;
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  title: {
+    marginBottom: 5,
+  },
+}));
diff --git a/frontend/app/screens/articles/articles1.js b/frontend/app/screens/articles/articles1.js
new file mode 100644
index 0000000..47049b4
--- /dev/null
+++ b/frontend/app/screens/articles/articles1.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  FlatList,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkText,
+  RkCard, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { SocialBar } from '../../components';
+import { data } from '../../data';
+import NavigationType from '../../config/navigation/propTypes';
+
+const moment = require('moment');
+
+export class Articles1 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Article List'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getArticles(),
+  };
+
+  extractItemKey = (item) => `${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='backImg'>
+        <Image rkCardImg source={item.photo} />
+        <View rkCardImgOverlay rkCardContent style={styles.overlay}>
+          <RkText rkType='header2 inverseColor'>{item.header}</RkText>
+          <RkText rkType='secondary2 inverseColor'>{moment().add(item.time, 'seconds').fromNow()}</RkText>
+          <View rkCardFooter style={styles.footer}>
+            <SocialBar rkType='leftAligned' />
+          </View >
+        </View>
+      </RkCard>
+    </TouchableOpacity>
+  );
+
+  render = () => (
+    <FlatList
+      data={this.state.data}
+      renderItem={this.renderItem}
+      keyExtractor={this.extractItemKey}
+      style={styles.root}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  overlay: {
+    justifyContent: 'flex-end',
+  },
+  footer: {
+    width: 240,
+  },
+}));
diff --git a/frontend/app/screens/articles/articles2.js b/frontend/app/screens/articles/articles2.js
new file mode 100644
index 0000000..0d48812
--- /dev/null
+++ b/frontend/app/screens/articles/articles2.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  FlatList,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkText,
+  RkCard, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import axios from 'axios';
+import { SocialBar } from '../../components';
+import NavigationType from '../../config/navigation/propTypes';
+
+
+export class Articles2 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Problems List'.toUpperCase(),
+  };
+
+  state = {
+    articles: [],
+  };
+
+  componentDidMount() {
+    axios.get('http://192.168.1.43:8000/api/articles')
+      .then(res => {
+        this.setState({
+          articles: res.data,
+        });
+
+      });
+  }
+
+  extractItemKey = (item) => `${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>
+  );
+
+  render = () => (
+    <FlatList
+      data={this.state.articles}
+      renderItem={this.renderItem}
+      keyExtractor={this.extractItemKey}
+      style={styles.container}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.screen.scroll,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+  },
+  card: {
+    marginVertical: 8,
+  },
+  time: {
+    marginTop: 5,
+  },
+}));
diff --git a/frontend/app/screens/articles/articles3.js b/frontend/app/screens/articles/articles3.js
new file mode 100644
index 0000000..e5eda4e
--- /dev/null
+++ b/frontend/app/screens/articles/articles3.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  FlatList,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkText,
+  RkCard, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { SocialBar } from '../../components';
+import { data } from '../../data';
+import NavigationType from '../../config/navigation/propTypes';
+
+const moment = require('moment');
+
+export class Articles3 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Article List'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getArticles(),
+  };
+
+  extractItemKey = (item) => `${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 style={styles.card}>
+        <View rkCardHeader>
+          <View>
+            <RkText rkType='header4'>{item.header}</RkText>
+            <RkText rkType='secondary2 hintColor'>{moment().add(item.time, 'seconds').fromNow()}</RkText>
+          </View>
+        </View>
+        <Image rkCardImg source={item.photo} />
+        <View style={styles.footer} rkCardFooter>
+          <SocialBar />
+        </View >
+      </RkCard>
+    </TouchableOpacity>
+  );
+
+  render = () => (
+    <FlatList
+      data={this.state.data}
+      renderItem={this.renderItem}
+      keyExtractor={this.extractItemKey}
+      style={styles.container}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.screen.scroll,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  card: {
+    marginVertical: 8,
+  },
+  footer: {
+    paddingTop: 16,
+  },
+  time: {
+    marginTop: 5,
+  },
+}));
diff --git a/frontend/app/screens/articles/articles4.js b/frontend/app/screens/articles/articles4.js
new file mode 100644
index 0000000..1f08ba1
--- /dev/null
+++ b/frontend/app/screens/articles/articles4.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  FlatList,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkText,
+  RkCard,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { SocialBar } from '../../components';
+import { data } from '../../data';
+import NavigationType from '../../config/navigation/propTypes';
+
+
+export class Articles4 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Article List'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getArticles(),
+  };
+
+  extractItemKey = (item) => `${item.id}`;
+
+  renderItem = ({ item }) => (
+    <TouchableOpacity
+      delayPressIn={70}
+      activeOpacity={0.8}
+      onPress={() => this.props.navigation.navigate('Article', { id: item.id })}>
+      <RkCard rkType='horizontal' style={styles.card}>
+        <Image rkCardImg source={item.photo} />
+        <View rkCardContent>
+          <RkText numberOfLines={1} rkType='header6'>{item.header}</RkText>
+          <RkText rkType='secondary6 hintColor'>
+            {`${item.user.firstName} ${item.user.lastName}`}
+          </RkText>
+          <RkText style={styles.post} numberOfLines={2} rkType='secondary1'>{item.text}</RkText>
+        </View>
+        <View rkCardFooter>
+          <SocialBar rkType='space' showLabel />
+        </View >
+      </RkCard>
+    </TouchableOpacity>
+  );
+
+  render = () => (
+    <View>
+      <FlatList
+        data={this.state.data}
+        renderItem={this.renderItem}
+        keyExtractor={this.extractItemKey}
+        style={styles.container}
+      />
+    </View>
+  );
+}
+
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.screen.scroll,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+  },
+  card: {
+    marginVertical: 8,
+  },
+  post: {
+    marginTop: 13,
+  },
+}));
diff --git a/frontend/app/screens/articles/blogposts.js b/frontend/app/screens/articles/blogposts.js
new file mode 100644
index 0000000..3ce4565
--- /dev/null
+++ b/frontend/app/screens/articles/blogposts.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  FlatList,
+  View,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkCard, RkStyleSheet,
+  RkText,
+} from 'react-native-ui-kitten';
+import { Avatar } from '../../components';
+import { data } from '../../data';
+import NavigationType from '../../config/navigation/propTypes';
+
+const moment = require('moment');
+
+export class Blogposts extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Blogposts'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getArticles('post'),
+  };
+
+  extractItemKey = (item) => `${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='blog' style={styles.card}>
+        <Image rkCardImg source={item.photo} />
+        <View rkCardHeader style={styles.content}>
+          <RkText style={styles.section} rkType='header4'>{item.title}</RkText>
+        </View>
+        <View rkCardContent>
+          <View>
+            <RkText rkType='primary3 mediumLine' numberOfLines={2}>{item.text}</RkText>
+          </View>
+        </View>
+        <View rkCardFooter>
+          <View style={styles.userInfo}>
+            <Avatar style={styles.avatar} rkType='circle small' img={item.user.photo} />
+            <RkText rkType='header6'>{`${item.user.firstName} ${item.user.lastName}`}</RkText>
+          </View>
+          <RkText rkType='secondary2 hintColor'>{moment().add(item.time, 'seconds').fromNow()}</RkText>
+        </View>
+      </RkCard>
+    </TouchableOpacity>
+  );
+
+  render = () => (
+    <FlatList
+      data={this.state.data}
+      renderItem={this.renderItem}
+      keyExtractor={this.extractItemKey}
+      style={styles.container}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.screen.scroll,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+  },
+  card: {
+    marginVertical: 8,
+  },
+  userInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatar: {
+    marginRight: 17,
+  },
+}));
diff --git a/frontend/app/screens/articles/index.js b/frontend/app/screens/articles/index.js
new file mode 100644
index 0000000..115d2ac
--- /dev/null
+++ b/frontend/app/screens/articles/index.js
@@ -0,0 +1,6 @@
+export * from './articles1';
+export * from './articles2';
+export * from './articles3';
+export * from './articles4';
+export * from './blogposts';
+export * from './article';