created draft screen and crated post item now working on style

src/components/comments/view/commentsView.js

@@ -58,7 +58,6 @@ class CommentsView extends PureComponent {
                   date={item.created}
                   name={item.author}
                   reputation={item.author_reputation}
-                  avatar={item.avatar}
                   size={avatarSize || 24}
                 />
                 <View

src/components/postCard/view/postCardView.js

@@ -61,7 +61,6 @@ class PostCard extends Component {
       <View style={styles.post}>
         <View style={styles.bodyHeader}>
           <PostHeaderDescription
-            avatar={content && content.avatar}
             date={content.created}
             isHideImage={isHideImage}
             name={content.author}

src/components/postElements/headerDescription/view/postHeaderDescription.js

@@ -6,7 +6,7 @@ import FastImage from 'react-native-fast-image';
 
 // Components
 import { Tag, TextWithIcon } from '../../../basicUIElements';
-
+import { UserAvatar } from '../../../userAvatar';
 // Styles
 import styles from './postHeaderDescriptionStyles';
 
@@ -52,18 +52,11 @@ class PostHeaderDescription extends PureComponent {
 
   render() {
     const {
-      avatar, date, isHideImage, name, reputation, size, tag, tagOnPress,
+      date, isHideImage, name, reputation, size, tag, tagOnPress,
     } = this.props;
     const { reblogedBy } = this.state;
 
     const _reputationText = `(${reputation})`;
-    let _avatar;
-
-    if (isHideImage) {
-      _avatar = null;
-    } else {
-      _avatar = avatar && { uri: avatar };
-    }
 
     return (
       <View style={styles.container}>
@@ -71,10 +64,11 @@ class PostHeaderDescription extends PureComponent {
           style={styles.avatarNameWrapper}
           onPress={() => this._handleOnUserPress(name)}
         >
-          {_avatar && (
+          {!isHideImage && (
-            <FastImage
+            <UserAvatar
               style={[styles.avatar, { width: size, height: size, borderRadius: size / 2 }]}
-              source={_avatar}
+              disableSize
+              username={name}
               defaultSource={DEFAULT_IMAGE}
             />
           )}

src/components/postListItem/index.js

@@ -0,0 +1,4 @@
+import PostListItem from './view/postListItemView';
+
+export { PostListItem };
+export default PostListItem;

src/components/postListItem/view/postListItemStyles.js

@@ -0,0 +1,52 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    padding: 0,
+    marginRight: 0,
+    marginLeft: 0,
+    marginVertical: 5,
+    backgroundColor: '$primaryBackgroundColor',
+    shadowOpacity: 0.2,
+    shadowColor: '$shadowColor',
+    elevation: 0.1,
+  },
+  body: {
+    marginHorizontal: 9,
+  },
+  image: {
+    margin: 0,
+    alignItems: 'center',
+    alignSelf: 'center',
+    height: 200,
+    width: '$deviceWidth - 16',
+    borderRadius: 8,
+    backgroundColor: '$primaryLightGray',
+  },
+  postDescripton: {
+    flexDirection: 'column',
+    paddingHorizontal: 8,
+    paddingVertical: 16,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '$primaryBlack',
+  },
+  summary: {
+    fontSize: 16,
+    color: '$primaryDarkGray',
+  },
+  header: {
+    backgroundColor: '$primaryBackgroundColor',
+    flexDirection: 'row',
+    marginTop: 16,
+    marginHorizontal: 12,
+    marginBottom: 12,
+  },
+  rightItem: {
+    // position: 'absolute',
+    // right: -10,
+  },
+});

src/components/postListItem/view/postListItemView.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import { PostHeaderDescription } from '../../postElements';
+import { getTimeFromNow } from '../../../utils/time';
+
+// Constants
+
+// Components
+
+// Defaults
+import DEFAULT_IMAGE from '../../../assets/no_image.png';
+
+// Styles
+import styles from './postListItemStyles';
+
+class PostListItemView extends Component {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    const {
+      title, summary, mainTag, username, reputation, created, image,
+    } = this.props;
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <PostHeaderDescription
+            date={getTimeFromNow(created)}
+            name={username}
+            reputation={reputation}
+            size={32}
+            tag={mainTag}
+          />
+          <View style={styles.rightItem}>
+            <Text>icon</Text>
+          </View>
+        </View>
+        <View style={styles.body}>
+          <TouchableOpacity style={[{ flexDirection: 'column' }]}>
+            <FastImage source={image} style={styles.image} defaultSource={DEFAULT_IMAGE} />
+            <View style={[styles.postDescripton]}>
+              <Text style={styles.title}>{title}</Text>
+              <Text style={styles.summary}>{summary}</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default PostListItemView;

src/components/postView/view/postDisplayView.js

@@ -131,7 +131,6 @@ class PostDisplayView extends PureComponent {
                   name={post.author}
                   reputation={post.author_reputation}
                   tag={post.category}
-                  avatar={post.avatar}
                   size={16}
                 />
                 <PostBody body={post.body} />

src/components/userAvatar/view/userAvatarView.js

@@ -27,20 +27,30 @@ class UserAvatarView extends Component {
   // Component Functions
 
   render() {
-    const { username, size, style } = this.props;
+    const {
+      username, size, style, disableSize,
+    } = this.props;
     const imageSize = size === 'xl' ? 'large' : 'small';
+    let _size;
     const _avatar = username
       ? { uri: `https://steemitimages.com/u/${username}/avatar/${imageSize}` }
       : DEFAULT_IMAGE;
-    let _size = 32;
 
-    if (size === 'xl') {
+    if (!disableSize) {
-      _size = 64;
+      _size = 32;
+
+      if (size === 'xl') {
+        _size = 64;
+      }
     }
 
     return (
       <FastImage
-        style={[styles.avatar, style, { width: _size, height: _size, borderRadius: _size / 2 }]}
+        style={[
+          styles.avatar,
+          style,
+          !disableSize && { width: _size, height: _size, borderRadius: _size / 2 },
+        ]}
         source={_avatar}
       />
     );

src/config/locales/en-US.json

@@ -137,5 +137,31 @@
   "post": {
     "reblog_alert": "Are you sure you want to reblog?",
     "reblog_cancel": "Cancel"
+  },
+  "drafts": {
+    "title": "Drafts",
+    "load_error": "Could not load drafts",
+    "empty_list": "Nothing here",
+    "deleted": "Draft deleted"
+  },
+  "schedules": {
+    "title": "Scheduled Posts",
+    "empty_list": "Nothing here",
+    "deleted": "Scheduled post deleted",
+    "move": "Move to drafts",
+    "moved": "Moved to drafts"
+  },
+  "bookmarks": {
+    "title": "Bookmarks",
+    "load_error": "Could not load bookmarks",
+    "empty_list": "Nothing here",
+    "deleted": "Bookmark removed",
+    "search": "Search in bookmarks"
+  },
+  "favorites": {
+    "title": "Favorites",
+    "load_error": "Could not load favorites",
+    "empty_list": "Nothing here",
+    "search": "Search in favorites"
   }
 }

src/config/locales/ru-RU.json

@@ -137,5 +137,37 @@
   "post": {
     "reblog_alert": "Вы уверены, что хотите сделать репост?",
     "reblog_cancel": "Отмена"
+  },
+  "gallery": {
+    "title": "Галерея",
+    "copied": "Ссылка скопирована в буфер обмена",
+    "load_error": "Невозможно загрузить галерею",
+    "empty-list": "Здесь пусто"
+  },
+  "drafts": {
+    "title": "Черновики",
+    "load-error": "Невозможно загрузить черновики",
+    "empty_list": "Здесь пусто",
+    "deleted": "Черновик удалён"
+  },
+  "schedules": {
+    "title": "Отложенные (запланированные) посты",
+    "empty_list": "Здесь пусто",
+    "deleted": "Отложенный пост удалён",
+    "move": "Переместить в черновики",
+    "moved": "Перемещён в черновики"
+  },
+  "bookmarks": {
+    "title": "Закладки",
+    "load-error": "Невозможно загрузить закладки",
+    "empty_list": "Здесь пусто",
+    "deleted": "Закладка удалена",
+    "search": "Поиск по закладкам"
+  },
+  "favorites": {
+    "title": "Избранное",
+    "load_error": "Невозможно загрузить избранное",
+    "empty_list": "Ничего нет",
+    "search": "Поиск по избранному"
   }
 }

src/config/locales/tr-TR.json

@@ -138,6 +138,33 @@
   "post": {
     "reblog_alert": "Reblog yapma istediginize emin misiniz?",
     "reblog_cancel": "Vazgeç"
+  },
+  // TODO: translate here!!!
+  "drafts": {
+    "title": "Taslak",
+    "load_error": "Taslaklar yuklenemedi",
+    "empty_list": "Hicbirsey yok",
+    "deleted": "Taslak silindi"
+  },
+  "schedules": {
+    "title": "Scheduled Posts",
+    "empty_list": "Nothing here",
+    "deleted": "Scheduled post deleted",
+    "move": "Move to drafts",
+    "moved": "Moved to drafts"
+  },
+  "bookmarks": {
+    "title": "Bookmarks",
+    "load_error": "Could not load bookmarks",
+    "empty_list": "Nothing here",
+    "deleted": "Bookmark removed",
+    "search": "Search in bookmarks"
+  },
+  "favorites": {
+    "title": "Favorites",
+    "load_error": "Could not load favorites",
+    "empty_list": "Nothing here",
+    "search": "Search in favorites"
   }
 }
 

src/constants/routeNames.js

@@ -5,6 +5,7 @@ const MODAL_SUFFIX = 'Modal';
 
 export default {
   SCREENS: {
+    DRAFTS: `Drafts${SCREEN_SUFFIX}`,
     EDITOR: `Editor${SCREEN_SUFFIX}`,
     FOLLOWS: `Follows${SCREEN_SUFFIX}`,
     HOME: `Home${SCREEN_SUFFIX}`,

src/constants/sideMenuItems.js

@@ -20,12 +20,12 @@ const authMenuItems = [
   //   icon: 'favorite-border',
   //   id: 'favorites',
   // },
-  // {
+  {
-  //   name: 'Drafts',
+    name: 'Drafts',
-  //   route: 'drafts',
+    route: ROUTES.SCREENS.DRAFTS,
-  //   icon: 'insert-drive-file',
+    icon: 'insert-drive-file',
-  //   id: 'drafts',
+    id: 'drafts',
-  // },
+  },
   // {
   //   name: 'Schedules',
   //   route: 'schedules',

src/globalStyles.js

@@ -50,6 +50,10 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
     height: '$deviceHeight',
   },
+  lightContainer: {
+    backgroundColor: '$primaryLightBackground',
+    flex: 1,
+  },
   settingsContainer: {
     marginLeft: 42,
     marginRight: 32,

src/navigation/routes.js

@@ -8,6 +8,7 @@ import { default as ROUTES } from '../constants/routeNames';
 
 // Screens
 import {
+  Drafts,
   Editor,
   Follows,
   Login,
@@ -78,6 +79,12 @@ const stackNavigatior = createStackNavigator(
         header: () => null,
       },
     },
+    [ROUTES.SCREENS.DRAFTS]: {
+      screen: RootComponent()(Drafts),
+      navigationOptions: {
+        header: () => null,
+      },
+    },
   },
   {
     headerMode: 'none',

src/providers/esteem/esteem.js

@@ -3,9 +3,12 @@ import searchApi from '../../config/search';
 import imageApi from '../../config/imageApi';
 import serverList from '../../config/serverListApi';
 
+/**
+ * @params username
+ */
 export const getDrafts = data => new Promise((resolve, reject) => {
   api
-    .get(`/drafts/${data.username}`)
+    .get(`/drafts/${data}`)
     .then((res) => {
       resolve(res.data);
     })
@@ -14,9 +17,13 @@ export const getDrafts = data => new Promise((resolve, reject) => {
     });
 });
 
+/**
+ * @params username
+ * @params draftID
+ */
 export const removeDraft = data => new Promise((resolve, reject) => {
   api
-    .delete(`/drafts/${data.user}/${data.draftId}`)
+    .delete(`/drafts/${data.username}/${data.draftId}`)
     .then((res) => {
       resolve(res.data);
     })
@@ -25,17 +32,30 @@ export const removeDraft = data => new Promise((resolve, reject) => {
     });
 });
 
+/**
+ * @params username
+ * @params body
+ * @params title
+ * @params tags
+ */
 export const addDraft = data => new Promise((resolve, reject) => {
   api
     .post('/draft', data)
     .then((res) => {
-      resolve(res.data);
+      const { drafts } = res.data;
+      resolve(drafts.pop());
     })
     .catch((error) => {
       reject(error);
     });
 });
 
+/**
+ * @params username
+ * @params body
+ * @params title
+ * @params tags
+ */
 export const updateDraft = data => new Promise((resolve, reject) => {
   api
     .put(`/drafts/${data.username}/${data.draftId}`, {

src/screens/drafts/container/draftsContainer.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Alert } from 'react-native';
+import { injectIntl } from 'react-intl';
+
+// Services and Actions
+import { getDrafts, removeDraft } from '../../../providers/esteem/esteem';
+
+// Middleware
+
+// Constants
+
+// Utilities
+
+// Component
+import DraftsScreen from '../screen/draftsScreen';
+
+/*
+ *            Props Name        Description                                     Value
+ *@props -->  props name here   description here                                Value Type Here
+ *
+ */
+
+class DraftsContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      drafts: [],
+      isLoading: false,
+    };
+  }
+
+  // Component Life Cycle Functions
+  componentDidMount() {
+    this._getDrafts();
+  }
+
+  // Component Functions
+  _getDrafts = () => {
+    const { currentAccount, intl } = this.props;
+    this.setState({ isLoading: true });
+
+    getDrafts(currentAccount.name)
+      .then((data) => {
+        this.setState({ drafts: this._sortData(data) });
+      })
+      .catch(() => {
+        Alert.alert(intl.formatMessage({ id: 'drafts.load_error' }));
+      })
+      .finally(() => {
+        this.setState({ isLoading: false });
+      });
+  };
+
+  _removeDraft = (selectedDraft) => {
+    const { currentAccount, intl } = this.props;
+
+    // getDrafts(currentAccount.name)
+    //   .then((data) => {
+    //     const { drafts } = this.state;
+    //     const newDrafts = [...drafts].filter(draft => draft._id !== item._id);
+
+    //     Alert.alert(intl.formatMessage({ id: 'drafts.deleted' }));
+    //     this.setState({ drafts: this.sortData(newDrafts) });
+    //   })
+    //   .catch(() => {
+    //     Alert.alert(intl.formatMessage({ id: 'alert.fail' }));
+    //   })
+    //   .finally(() => {
+    //     this._getDrafts();
+    //   });
+  };
+
+  _editDraft = () => {
+    alert('edit');
+  };
+
+  _sortData = data => data.sort((a, b) => {
+    const dateA = new Date(a.created).getTime();
+    const dateB = new Date(b.created).getTime();
+
+    return dateB > dateA ? 1 : -1;
+  });
+
+  render() {
+    const { isLoading, drafts } = this.state;
+    const { currentAccount } = this.props;
+
+    return (
+      <DraftsScreen
+        isLoading={isLoading}
+        editDraft={this._editDraft}
+        currentAccount={currentAccount}
+        drafts={drafts}
+        removeDraft={this._removeDraft}
+      />
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  currentAccount: state.account.currentAccount,
+});
+
+export default connect(mapStateToProps)(injectIntl(DraftsContainer));

src/screens/drafts/index.js

@@ -0,0 +1,4 @@
+import Drafts from './container/draftsContainer';
+
+export { Drafts };
+export default Drafts;

src/screens/drafts/screen/draftsScreen.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { injectIntl } from 'react-intl';
+import { View, FlatList, Text } from 'react-native';
+
+// Utils
+import { getPostSummary } from '../../../utils/formatter';
+
+// Constants
+
+// Components
+import { BasicHeader } from '../../../components/basicHeader';
+import { PostListItem } from '../../../components/postListItem';
+// Styles
+import globalStyles from '../../../globalStyles';
+
+class DraftsScreen extends Component {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  _renderItem = (item, index) => {
+    const { currentAccount, removeDraft, editDraft } = this.props;
+    const tags = item.tags ? item.tags.split(/[ ,]+/) : [];
+    const tag = tags[0] || '';
+    // const img = catchEntryImage(item) || noImage;
+    const summary = getPostSummary(item.body, 100);
+
+    return (
+      <PostListItem
+        created={item.created}
+        mainTag={tag}
+        title={item.title}
+        summary={summary}
+        username={currentAccount.name}
+        reputation={currentAccount.reputation}
+        handleOnPressItem={editDraft}
+        handleOnRemoveItem={removeDraft}
+      />
+    );
+  };
+
+  render() {
+    const { drafts, isLoading, intl } = this.props;
+
+    return (
+      <View style={globalStyles.lightContainer}>
+        <BasicHeader
+          title={intl.formatMessage({
+            id: 'drafts.title',
+          })}
+        />
+        {isLoading ? (
+          <Text>Loading daa!</Text>
+        ) : (
+          <FlatList
+            data={drafts}
+            keyExtractor={item => item._id}
+            removeClippedSubviews={false}
+            renderItem={({ item, index }) => this._renderItem(item, index)}
+          />
+        )}
+      </View>
+    );
+  }
+}
+
+export default injectIntl(DraftsScreen);

src/screens/index.js

@@ -1,3 +1,4 @@
+import { Drafts } from './drafts';
 import { Editor } from './editor';
 import { Follows } from './follows';
 import { Home } from './home';
@@ -9,11 +10,12 @@ import { Post } from './post';
 import { Profile } from './profile';
 import { Settings } from './settings';
 import { Voters } from './voters';
-import PinCode from './pinCode';
+import { PinCode } from './pinCode';
 import RootComponent from './root';
 import SteemConnect from './steem-connect/steemConnect';
 
 export {
+  Drafts,
   Editor,
   Follows,
   Home,

src/screens/pinCode/index.js

@@ -1,5 +1,5 @@
 import PinCodeScreen from './screen/pinCodeScreen';
-import PinCodeContainer from './container/pinCodeContainer';
+import PinCode from './container/pinCodeContainer';
 
-export { PinCodeScreen, PinCodeContainer };
+export { PinCodeScreen, PinCode };
-export default PinCodeContainer;
+export default PinCode;

src/themes/darkTheme.js

@@ -6,6 +6,7 @@ export default {
   $primaryBackgroundColor: '#1e2835',
   $primaryLightBackground: '#2e3d51',
   $primaryGrayBackground: '#1e2835',
+  $primaryWhiteLightBackground: '#2e3d51',
   $white: '#1e2835',
   $black: '#000000',
   $primaryBlue: '#357ce6',

src/themes/lightTheme.js

@@ -6,6 +6,7 @@ export default {
   $primaryBackgroundColor: '#FFFFFF',
   $primaryLightBackground: '#f6f6f6',
   $primaryGrayBackground: '#f5f5f5',
+  $primaryWhiteLightBackground: '#ffffff',
   $white: '#FFFFFF',
   $black: '#000000',
   $primaryBlue: '#357ce6',