schedules part 1 created

src/globalStyles.js

@@ -62,7 +62,7 @@ export default EStyleSheet.create({
     color: '$iconColor',
     alignSelf: 'center',
     fontSize: 16,
-    marginLeft: 16,
+    marginTop: 20,
     fontWeight: '500',
   },
 });

src/screens/drafts/container/draftsContainer.js

@@ -4,7 +4,7 @@ import { Alert } from 'react-native';
 import { injectIntl } from 'react-intl';
 
 // Services and Actions
-import { getDrafts, removeDraft } from '../../../providers/esteem/esteem';
+import { getDrafts, removeDraft, getSchedules } from '../../../providers/esteem/esteem';
 
 // Middleware
 
@@ -27,6 +27,7 @@ class DraftsContainer extends Component {
     super(props);
     this.state = {
       drafts: [],
+      schedules: [],
       isLoading: false,
     };
   }
@@ -37,6 +38,23 @@ class DraftsContainer extends Component {
   }
 
   // Component Functions
+
+  _getSchedules = () => {
+    const { currentAccount, intl } = this.props;
+    this.setState({ isLoading: true });
+
+    getSchedules(currentAccount.name)
+      .then((data) => {
+        this.setState({ schedules: this._sortData(data) });
+      })
+      .catch(() => {
+        Alert.alert(intl.formatMessage({ id: 'drafts.load_error' }));
+      })
+      .finally(() => {
+        this.setState({ isLoading: false });
+      });
+  };
+
   _getDrafts = () => {
     const { currentAccount, intl } = this.props;
     this.setState({ isLoading: true });
@@ -90,7 +108,7 @@ class DraftsContainer extends Component {
   });
 
   render() {
-    const { isLoading, drafts } = this.state;
+    const { isLoading, drafts, schedules } = this.state;
     const { currentAccount } = this.props;
 
     return (
@@ -99,6 +117,7 @@ class DraftsContainer extends Component {
         editDraft={this._editDraft}
         currentAccount={currentAccount}
         drafts={drafts}
+        schedules={schedules}
         removeDraft={this._removeDraft}
       />
     );

src/screens/drafts/screen/draftStyles.js

@@ -0,0 +1,27 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  tabView: {
+    alignSelf: 'center',
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  tabbar: {
+    alignSelf: 'center',
+    height: 40,
+    backgroundColor: '$primaryBackgroundColor',
+    shadowOpacity: 0.2,
+    shadowColor: '$shadowColor',
+    shadowOffset: { height: 4 },
+    zIndex: 99,
+    borderBottomColor: '$shadowColor',
+    borderBottomWidth: 0.1,
+  },
+  tabbarItem: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+    minWidth: '$deviceWidth',
+  },
+  tabs: {
+    flex: 1,
+  },
+});

src/screens/drafts/screen/draftsScreen.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
 import { View, FlatList, Text } from 'react-native';
+import ScrollableTabView from '@esteemapp/react-native-scrollable-tab-view';
 
 // Utils
 import { getPostSummary } from '../../../utils/formatter';
@@ -11,9 +12,11 @@ import { catchDraftImage } from '../../../utils/image';
 import { BasicHeader } from '../../../components/basicHeader';
 import { PostListItem } from '../../../components/postListItem';
 import { PostCardPlaceHolder } from '../../../components/basicUIElements';
+import { TabBar } from '../../../components/tabBar';
 
 // Styles
 import globalStyles from '../../../globalStyles';
+import styles from './draftStyles';
 
 class DraftsScreen extends Component {
   /* Props
@@ -53,18 +56,13 @@ class DraftsScreen extends Component {
     );
   };
 
-  render() {
-    const { drafts, isLoading, intl } = this.props;
-    const isNoDrafts = drafts && drafts.length === 0;
+  _getTabItem = (data, type) => {
+    const { isLoading, intl } = this.props;
+    const isNoItem = (data && data.length === 0) || !data;
 
     return (
-      <View style={isNoDrafts ? globalStyles.container : globalStyles.lightContainer}>
-        <BasicHeader
-          title={intl.formatMessage({
-            id: 'drafts.title',
-          })}
-        />
-        {isNoDrafts && !isLoading && (
+      <View style={globalStyles.lightContainer}>
+        {isNoItem && !isLoading && (
           <Text style={globalStyles.hintText}>
             {intl.formatMessage({
               id: 'drafts.empty_list',
@@ -77,15 +75,60 @@ class DraftsScreen extends Component {
             <PostCardPlaceHolder />
           </View>
         ) : (
-          <FlatList
-            data={drafts}
-            keyExtractor={item => item._id}
-            removeClippedSubviews={false}
-            renderItem={({ item }) => this._renderItem(item)}
-          />
+          !isNoItem && (
+            <FlatList
+              data={data}
+              keyExtractor={item => item._id}
+              removeClippedSubviews={false}
+              renderItem={({ item }) => this._renderItem(item)}
+            />
+          )
         )}
       </View>
     );
+  };
+
+  render() {
+    const { drafts, schedules, intl } = this.props;
+
+    return (
+      <View style={globalStyles.container}>
+        <BasicHeader
+          title={intl.formatMessage({
+            id: 'drafts.title',
+          })}
+        />
+
+        <ScrollableTabView
+          style={styles.tabView}
+          renderTabBar={() => (
+            <TabBar
+              style={styles.tabbar}
+              tabUnderlineDefaultWidth={80}
+              tabUnderlineScaleX={2}
+              tabBarPosition="overlayTop"
+            />
+          )}
+        >
+          <View
+            tabLabel={intl.formatMessage({
+              id: 'drafts.title',
+            })}
+            style={styles.tabbarItem}
+          >
+            {this._getTabItem(drafts, 'drafts')}
+          </View>
+          <View
+            tabLabel={intl.formatMessage({
+              id: 'schedules.title',
+            })}
+            style={styles.tabbarItem}
+          >
+            {this._getTabItem(schedules, 'schedules')}
+          </View>
+        </ScrollableTabView>
+      </View>
+    );
   }
 }
 

src/utils/postParser.js

@@ -2,7 +2,6 @@
 import { markDown2Html } from './markdownToHtml';
 import { getPostSummary } from './formatter';
 import { getReputation } from './reputation';
-import { getTimeFromNow } from './time';
 
 export const parsePosts = (posts, currentUserName, isSummary) => (!posts ? null : posts.map(post => parsePost(post, currentUserName, isSummary)));