Initial commit/

8 files changed, 810 insertions, 0 deletions

diff --git a/frontend/app/screens/social/contacts.js b/frontend/app/screens/social/contacts.js
new file mode 100644
index 0000000..8eaacae
--- /dev/null
+++ b/frontend/app/screens/social/contacts.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  FlatList,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import _ from 'lodash';
+import {
+  RkStyleSheet,
+  RkText,
+  RkTextInput,
+} from 'react-native-ui-kitten';
+import { data } from '../../data';
+import { Avatar } from '../../components/avatar';
+import { FontAwesome } from '../../assets/icons';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class Contacts extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Contacts'.toUpperCase(),
+  };
+
+  state = {
+    data: {
+      original: data.getUsers(),
+      filtered: data.getUsers(),
+    },
+  };
+
+  extractItemKey = (item) => `${item.id}`;
+
+  onSearchInputChanged = (event) => {
+    const pattern = new RegExp(event.nativeEvent.text, 'i');
+    const contacts = _.filter(this.state.data.original, contact => {
+      const filterResult = {
+        firstName: contact.firstName.search(pattern),
+        lastName: contact.lastName.search(pattern),
+      };
+      return filterResult.firstName !== -1 || filterResult.lastName !== -1 ? contact : undefined;
+    });
+    this.setState({
+      data: {
+        original: this.state.data.original,
+        filtered: contacts,
+      },
+    });
+  };
+
+  onItemPressed = (item) => {
+    this.props.navigation.navigate('ProfileV1', { id: item.id });
+  };
+
+  renderItem = ({ item }) => (
+    <TouchableOpacity onPress={() => this.onItemPressed(item)}>
+      <View style={styles.container}>
+        <Avatar rkType='circle' style={styles.avatar} img={item.photo} />
+        <RkText>{`${item.firstName} ${item.lastName}`}</RkText>
+      </View>
+    </TouchableOpacity>
+  );
+
+  renderSeparator = () => (
+    <View style={styles.separator} />
+  );
+
+  renderHeaderLabel = () => (
+    <RkText rkType='awesome'>{FontAwesome.search}</RkText>
+  );
+
+  renderHeader = () => (
+    <View style={styles.searchContainer}>
+      <RkTextInput
+        autoCapitalize='none'
+        autoCorrect={false}
+        onChange={this.onSearchInputChanged}
+        label={this.renderHeaderLabel()}
+        rkType='row'
+        placeholder='Search'
+      />
+    </View>
+  );
+
+  render = () => (
+    <FlatList
+      style={styles.root}
+      data={this.state.data.filtered}
+      renderItem={this.renderItem}
+      ListHeaderComponent={this.renderHeader}
+      ItemSeparatorComponent={this.renderSeparator}
+      keyExtractor={this.extractItemKey}
+      enableEmptySections
+    />
+  )
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  searchContainer: {
+    backgroundColor: theme.colors.screen.bold,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    height: 60,
+    alignItems: 'center',
+  },
+  container: {
+    flexDirection: 'row',
+    padding: 16,
+    alignItems: 'center',
+  },
+  avatar: {
+    marginRight: 16,
+  },
+  separator: {
+    flex: 1,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: theme.colors.border.base,
+  },
+}));
diff --git a/frontend/app/screens/social/feed.js b/frontend/app/screens/social/feed.js
new file mode 100644
index 0000000..3de46f2
--- /dev/null
+++ b/frontend/app/screens/social/feed.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  FlatList,
+  View,
+  Image,
+} from 'react-native';
+import {
+  RkCard,
+  RkText, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { Avatar } from '../../components/avatar';
+import { SocialBar } from '../../components/socialBar';
+import { data } from '../../data';
+
+const moment = require('moment');
+
+export class Feed extends React.Component {
+  static navigationOptions = {
+    title: 'Feed'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getArticles('post'),
+  };
+
+  extractItemKey = (item) => `${item.id}`;
+
+  renderItem = ({ item }) => (
+    <RkCard style={styles.card}>
+      <View rkCardHeader>
+        <Avatar
+          rkType='small'
+          style={styles.avatar}
+          img={item.user.photo}
+        />
+        <View>
+          <RkText rkType='header4'>{`${item.user.firstName} ${item.user.lastName}`}</RkText>
+          <RkText rkType='secondary2 hintColor'>{moment().add(item.time, 'seconds').fromNow()}</RkText>
+        </View>
+      </View>
+      <Image rkCardImg source={item.photo} />
+      <View rkCardContent>
+        <RkText rkType='primary3'>{item.text}</RkText>
+      </View>
+      <View rkCardFooter>
+        <SocialBar />
+      </View >
+    </RkCard>
+  );
+
+  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: 10,
+  },
+  card: {
+    marginVertical: 8,
+  },
+  avatar: {
+    marginRight: 16,
+  },
+}));
diff --git a/frontend/app/screens/social/index.js b/frontend/app/screens/social/index.js
new file mode 100644
index 0000000..bd66176
--- /dev/null
+++ b/frontend/app/screens/social/index.js
@@ -0,0 +1,7 @@
+export * from './profile1';
+export * from './profile2';
+export * from './profile3';
+export * from './profileSettings';
+export * from './notifications';
+export * from './contacts';
+export * from './feed';
diff --git a/frontend/app/screens/social/notifications.js b/frontend/app/screens/social/notifications.js
new file mode 100644
index 0000000..c397d17
--- /dev/null
+++ b/frontend/app/screens/social/notifications.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  FlatList,
+  View,
+  Image,
+} from 'react-native';
+import { RkStyleSheet, RkText } from 'react-native-ui-kitten';
+import { Avatar } from '../../components';
+import { data } from '../../data';
+
+const moment = require('moment');
+
+export class Notifications extends React.Component {
+  static navigationOptions = {
+    title: 'Notifications',
+  };
+
+  state = {
+    data: data.getNotifications(),
+  };
+
+  extractItemKey = (item) => `${item.id}`;
+
+  renderAttachment = (item) => {
+    const hasAttachment = item.attach !== undefined;
+    return hasAttachment ? <View /> : <Image style={styles.attachment} source={item.attach} />;
+  };
+
+  renderItem = ({ item }) => (
+    <View style={styles.container}>
+      <Avatar
+        img={item.user.photo}
+        rkType='circle'
+        style={styles.avatar}
+        badge={item.type}
+      />
+      <View style={styles.content}>
+        <View style={styles.mainContent}>
+          <View style={styles.text}>
+            <RkText>
+              <RkText rkType='header6'>{`${item.user.firstName} ${item.user.lastName}`}</RkText>
+              <RkText rkType='primary2'> {item.description}</RkText>
+            </RkText>
+          </View>
+          <RkText
+            rkType='secondary5 hintColor'>{moment().add(item.time, 'seconds').fromNow()}
+          </RkText>
+        </View>
+        {this.renderAttachment(item)}
+      </View>
+    </View>
+  );
+
+  render = () => (
+    <FlatList
+      style={styles.root}
+      data={this.state.data}
+      renderItem={this.renderItem}
+      keyExtractor={this.extractItemKey}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderColor: theme.colors.border.base,
+    alignItems: 'flex-start',
+  },
+  avatar: {},
+  text: {
+    marginBottom: 5,
+  },
+  content: {
+    flex: 1,
+    marginLeft: 16,
+    marginRight: 0,
+  },
+  mainContent: {
+    marginRight: 60,
+  },
+  img: {
+    height: 50,
+    width: 50,
+    margin: 0,
+  },
+  attachment: {
+    position: 'absolute',
+    right: 0,
+    height: 50,
+    width: 50,
+  },
+}));
diff --git a/frontend/app/screens/social/profile1.js b/frontend/app/screens/social/profile1.js
new file mode 100644
index 0000000..1f3ec09
--- /dev/null
+++ b/frontend/app/screens/social/profile1.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+} from 'react-native';
+import {
+  RkText,
+  RkButton, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { Avatar } from '../../components/avatar';
+import { Gallery } from '../../components/gallery';
+import { data } from '../../data/';
+import formatNumber from '../../utils/textUtils';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class ProfileV1 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'User Profile'.toUpperCase(),
+  };
+
+  state = {
+    data: undefined,
+  };
+
+  constructor(props) {
+    super(props);
+    const id = this.props.navigation.getParam('id', 1);
+    this.state.data = data.getUser(id);
+  }
+
+  render = () => (
+    <ScrollView style={styles.root}>
+      <View style={[styles.header, styles.bordered]}>
+        <Avatar img={this.state.data.photo} rkType='big' />
+        <RkText rkType='header2'>{`${this.state.data.firstName} ${this.state.data.lastName}`}</RkText>
+      </View>
+      <View style={[styles.userInfo, styles.bordered]}>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{this.state.data.postCount}</RkText>
+          <RkText rkType='secondary1 hintColor'>Posts</RkText>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{formatNumber(this.state.data.followersCount)}</RkText>
+          <RkText rkType='secondary1 hintColor'>Followers</RkText>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{this.state.data.followingCount}</RkText>
+          <RkText rkType='secondary1 hintColor'>Following</RkText>
+        </View>
+      </View>
+      <View style={styles.buttons}>
+        <RkButton style={styles.button} rkType='clear link'>FOLLOW</RkButton>
+        <View style={styles.separator} />
+        <RkButton style={styles.button} rkType='clear link'>MESSAGE</RkButton>
+      </View>
+      <Gallery items={this.state.data.images} />
+    </ScrollView>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  header: {
+    alignItems: 'center',
+    paddingTop: 25,
+    paddingBottom: 17,
+  },
+  userInfo: {
+    flexDirection: 'row',
+    paddingVertical: 18,
+  },
+  bordered: {
+    borderBottomWidth: 1,
+    borderColor: theme.colors.border.base,
+  },
+  section: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  space: {
+    marginBottom: 3,
+  },
+  separator: {
+    backgroundColor: theme.colors.border.base,
+    alignSelf: 'center',
+    flexDirection: 'row',
+    flex: 0,
+    width: 1,
+    height: 42,
+  },
+  buttons: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+  },
+  button: {
+    flex: 1,
+    alignSelf: 'center',
+  },
+}));
diff --git a/frontend/app/screens/social/profile2.js b/frontend/app/screens/social/profile2.js
new file mode 100644
index 0000000..1636910
--- /dev/null
+++ b/frontend/app/screens/social/profile2.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+} from 'react-native';
+import {
+  RkText,
+  RkButton, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import {
+  Avatar,
+  Gallery,
+} from '../../components';
+import { data } from '../../data';
+import { FontIcons } from '../../assets/icons';
+import formatNumber from '../../utils/textUtils';
+
+export class ProfileV2 extends React.Component {
+  static navigationOptions = {
+    title: 'User Profile'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getUser(),
+  };
+
+  render = () => (
+    <ScrollView style={styles.root}>
+      <View style={[styles.header, styles.bordered]}>
+        <View style={styles.row}>
+          <View style={styles.buttons}>
+            <RkButton style={styles.button} rkType='icon circle'>
+              <RkText rkType='moon large primary'>{FontIcons.profile}</RkText>
+            </RkButton>
+          </View>
+          <Avatar img={this.state.data.photo} rkType='big' />
+          <View style={styles.buttons}>
+            <RkButton style={styles.button} rkType='icon circle'>
+              <RkText rkType='moon large primary'>{FontIcons.mail}</RkText>
+            </RkButton>
+          </View>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header2'>{`${this.state.data.firstName} ${this.state.data.lastName}`}</RkText>
+        </View>
+      </View>
+      <View style={styles.userInfo}>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{this.state.data.postCount}</RkText>
+          <RkText rkType='secondary1 hintColor'>Posts</RkText>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{formatNumber(this.state.data.followersCount)}</RkText>
+          <RkText rkType='secondary1 hintColor'>Followers</RkText>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{this.state.data.followingCount}</RkText>
+          <RkText rkType='secondary1 hintColor'>Following</RkText>
+        </View>
+      </View>
+      <Gallery items={this.state.data.images} />
+    </ScrollView>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  header: {
+    paddingTop: 25,
+    paddingBottom: 17,
+  },
+  row: {
+    flexDirection: 'row',
+
+  },
+  userInfo: {
+    flexDirection: 'row',
+    paddingVertical: 18,
+  },
+  bordered: {
+    borderBottomWidth: 1,
+    borderColor: theme.colors.border.base,
+  },
+  section: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  space: {
+    marginBottom: 3,
+  },
+  separator: {
+    backgroundColor: theme.colors.border.base,
+    alignSelf: 'center',
+    flexDirection: 'row',
+    flex: 0,
+    width: 1,
+    height: 42,
+  },
+  buttons: {
+    flex: 1,
+  },
+  button: {
+    marginTop: 27.5,
+    alignSelf: 'center',
+  },
+}));
diff --git a/frontend/app/screens/social/profile3.js b/frontend/app/screens/social/profile3.js
new file mode 100644
index 0000000..985dc1e
--- /dev/null
+++ b/frontend/app/screens/social/profile3.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+} from 'react-native';
+import {
+  RkStyleSheet,
+  RkText,
+} from 'react-native-ui-kitten';
+import {
+  Avatar,
+  Gallery,
+  GradientButton,
+} from '../../components';
+import { data } from '../../data';
+import formatNumber from '../../utils/textUtils';
+
+export class ProfileV3 extends React.Component {
+  static navigationOptions = {
+    title: 'User Profile'.toUpperCase(),
+  };
+
+  state = {
+    data: data.getUser(),
+  };
+
+  render = () => (
+    <ScrollView style={styles.root}>
+      <View style={[styles.header, styles.bordered]}>
+        <Avatar img={this.state.data.photo} rkType='big' />
+        <RkText rkType='header2'>{`${this.state.data.firstName} ${this.state.data.lastName}`}</RkText>
+        <GradientButton style={styles.button} text='FOLLOW' />
+      </View>
+
+      <View style={styles.userInfo}>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{this.state.data.postCount}</RkText>
+          <RkText rkType='secondary1 hintColor'>Posts</RkText>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{formatNumber(this.state.data.followersCount)}</RkText>
+          <RkText rkType='secondary1 hintColor'>Followers</RkText>
+        </View>
+        <View style={styles.section}>
+          <RkText rkType='header3' style={styles.space}>{this.state.data.followingCount}</RkText>
+          <RkText rkType='secondary1 hintColor'>Following</RkText>
+        </View>
+      </View>
+      <Gallery items={this.state.data.images} />
+    </ScrollView>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  header: {
+    alignItems: 'center',
+    paddingTop: 25,
+    paddingBottom: 17,
+  },
+  userInfo: {
+    flexDirection: 'row',
+    paddingVertical: 18,
+  },
+  bordered: {
+    borderBottomWidth: 1,
+    borderColor: theme.colors.border.base,
+  },
+  section: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  space: {
+    marginBottom: 3,
+  },
+  separator: {
+    backgroundColor: theme.colors.border.base,
+    alignSelf: 'center',
+    flexDirection: 'row',
+    flex: 0,
+    width: 1,
+    height: 42,
+  },
+  buttons: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+  },
+  button: {
+    marginTop: 18,
+    alignSelf: 'center',
+    width: 140,
+  },
+
+}));
diff --git a/frontend/app/screens/social/profileSettings.js b/frontend/app/screens/social/profileSettings.js
new file mode 100644
index 0000000..0be1b94
--- /dev/null
+++ b/frontend/app/screens/social/profileSettings.js
@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+  ScrollView,
+  View,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkText,
+  RkTextInput,
+  RkAvoidKeyboard,
+  RkTheme,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { data } from '../../data';
+import {
+  Avatar,
+  SocialSetting,
+  GradientButton,
+} from '../../components';
+import { FontAwesome } from '../../assets/icons';
+
+export class ProfileSettings extends React.Component {
+  static navigationOptions = {
+    title: 'Profile Settings'.toUpperCase(),
+  };
+
+  user = data.getUser();
+
+  state = {
+    firstName: this.user.firstName,
+    lastName: this.user.lastName,
+    email: this.user.email,
+    country: this.user.country,
+    phone: this.user.phone,
+    password: this.user.password,
+    newPassword: this.user.newPassword,
+    confirmPassword: this.user.confirmPassword,
+  };
+
+  onFirstNameInputChanged = (text) => {
+    this.setState({ firstName: text });
+  };
+
+  onLastNameInputChanged = (text) => {
+    this.setState({ lastName: text });
+  };
+
+  onEmailInputChanged = (text) => {
+    this.setState({ email: text });
+  };
+
+  onCountryInputChanged = (text) => {
+    this.setState({ country: text });
+  };
+
+  onPhoneInputChanged = (text) => {
+    this.setState({ phone: text });
+  };
+
+  onPasswordInputChanged = (text) => {
+    this.setState({ password: text });
+  };
+
+  onNewPasswordInputChanged = (text) => {
+    this.setState({ newPassword: text });
+  };
+
+  onConfirmPasswordInputChanged = (text) => {
+    this.setState({ confirmPassword: text });
+  };
+
+  render = () => (
+    <ScrollView style={styles.root}>
+      <RkAvoidKeyboard>
+        <View style={styles.header}>
+          <Avatar img={this.user.photo} rkType='big' />
+        </View>
+        <View style={styles.section}>
+          <View style={[styles.row, styles.heading]}>
+            <RkText rkType='header6 primary'>INFO</RkText>
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='First Name'
+              value={this.state.firstName}
+              rkType='right clear'
+              onChangeText={this.onFirstNameInputChanged}
+            />
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='Last Name'
+              value={this.state.lastName}
+              onChangeText={this.onLastNameInputChanged}
+              rkType='right clear'
+            />
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='Email'
+              value={this.state.email}
+              onChangeText={this.onEmailInputChanged}
+              rkType='right clear'
+            />
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='Country'
+              value={this.state.country}
+              onChangeText={this.onCountryInputChanged}
+              rkType='right clear'
+            />
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='Phone'
+              value={this.state.phone}
+              onChangeText={this.onPhoneInputChanged}
+              rkType='right clear'
+            />
+          </View>
+        </View>
+        <View style={styles.section}>
+          <View style={[styles.row, styles.heading]}>
+            <RkText rkType='primary header6'>CHANGE PASSWORD</RkText>
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='Old Password'
+              value={this.state.password}
+              rkType='right clear'
+              secureTextEntry
+              onChangeText={this.onPasswordInputChanged}
+            />
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='New Password'
+              value={this.state.newPassword}
+              rkType='right clear'
+              secureTextEntry
+              onChangeText={this.onNewPasswordInputChanged}
+            />
+          </View>
+          <View style={styles.row}>
+            <RkTextInput
+              label='Confirm Password'
+              value={this.state.confirmPassword}
+              rkType='right clear'
+              secureTextEntry
+              onChangeText={this.onConfirmPasswordInputChanged}
+            />
+          </View>
+        </View>
+        <View style={styles.section}>
+          <View style={[styles.row, styles.heading]}>
+            <RkText rkType='primary header6'>CONNECT YOUR ACCOUNT</RkText>
+          </View>
+          <View style={styles.row}>
+            <SocialSetting name='Twitter' icon={FontAwesome.twitter} tintColor={RkTheme.current.colors.twitter} />
+          </View>
+          <View style={styles.row}>
+            <SocialSetting name='Google' icon={FontAwesome.google} tintColor={RkTheme.current.colors.google} />
+          </View>
+          <View style={styles.row}>
+            <SocialSetting name='Facebook' icon={FontAwesome.facebook} tintColor={RkTheme.current.colors.facebook} />
+          </View>
+        </View>
+        <GradientButton rkType='large' style={styles.button} text='SAVE' />
+      </RkAvoidKeyboard>
+    </ScrollView>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  header: {
+    backgroundColor: theme.colors.screen.neutral,
+    paddingVertical: 25,
+  },
+  section: {
+    marginVertical: 25,
+  },
+  heading: {
+    paddingBottom: 12.5,
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 17.5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+    alignItems: 'center',
+  },
+  button: {
+    marginHorizontal: 16,
+    marginBottom: 32,
+  },
+}));