drafts sorting issue, hooks

src/providers/esteem/esteem.js

@@ -26,7 +26,9 @@ export const getCurrencyTokenRate = (currency, token) =>
 /**
  * @params username
  */
-export const getDrafts = data =>
+export const getDrafts = username => api.get(`/drafts/${username}`).then(resp => resp.data);
+
+/*export const getDrafts = data =>
   new Promise((resolve, reject) => {
     api
       .get(`/drafts/${data}`)
@@ -38,7 +40,7 @@ export const getDrafts = data =>
         reject(error);
       });
   });
-
+*/
 /**
  * @params username
  * @params draftID

src/screens/drafts/container/draftsContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { Alert } from 'react-native';
 import { injectIntl } from 'react-intl';
@@ -23,91 +23,70 @@ import { default as ROUTES } from '../../../constants/routeNames';
 // Component
 import DraftsScreen from '../screen/draftsScreen';
 
-/*
- *            Props Name        Description                                     Value
- *@props -->  props name here   description here                                Value Type Here
- *
- */
+const DraftsContainer = ({ currentAccount, intl, navigation, dispatch }) => {
+  const [drafts, setDrafts] = useState([]);
+  const [schedules, setSchedules] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
 
-class DraftsContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      drafts: [],
-      schedules: [],
-      isLoading: false,
-    };
-  }
-
-  // Component Life Cycle Functions
-  componentDidMount() {
-    this._getDrafts();
-    this._getSchedules();
-  }
+  useEffect(() => {
+    _getDrafts();
+    _getSchedules();
+  }, []);
 
   // Component Functions
 
-  _getSchedules = () => {
-    const { currentAccount, intl } = this.props;
-    this.setState({ isLoading: true });
+  const _getSchedules = () => {
+    setIsLoading(true);
 
     getSchedules(currentAccount.name)
       .then(data => {
-        this.setState({ schedules: this._sortData(data, true), isLoading: false });
+        setSchedules(_sortDataS(data));
+        setIsLoading(false);
       })
       .catch(() => {
         Alert.alert(intl.formatMessage({ id: 'drafts.load_error' }));
-        this.setState({ isLoading: false });
+        setIsLoading(false);
       });
   };
 
-  _getDrafts = () => {
-    const { currentAccount, intl } = this.props;
-    this.setState({ isLoading: true });
+  const _getDrafts = () => {
+    setIsLoading(true);
 
     getDrafts(currentAccount.name)
       .then(data => {
-        this.setState({ drafts: this._sortData(data), isLoading: false });
+        setDrafts(_sortData(data));
+        setIsLoading(false);
       })
       .catch(() => {
         Alert.alert(intl.formatMessage({ id: 'drafts.load_error' }));
-        this.setState({ isLoading: false });
+        setIsLoading(false);
       });
   };
 
-  _removeDraft = id => {
-    const { currentAccount, intl } = this.props;
-
+  const _removeDraft = id => {
     removeDraft(currentAccount.name, id)
       .then(() => {
-        const { drafts } = this.state;
         const newDrafts = [...drafts].filter(draft => draft._id !== id);
-
-        this.setState({ drafts: this._sortData(newDrafts) });
+        setDrafts(_sortData(newDrafts));
       })
       .catch(() => {
         Alert.alert(intl.formatMessage({ id: 'alert.fail' }));
       });
   };
 
-  _removeSchedule = id => {
-    const { currentAccount, intl } = this.props;
-
+  const _removeSchedule = id => {
     removeSchedule(currentAccount.name, id)
       .then(res => {
-        const { schedules } = this.state;
         const newSchedules = [...schedules].filter(schedule => schedule._id !== id);
 
-        this.setState({ schedules: this._sortData(newSchedules, true) });
+        setSchedules(_sortDataS(newSchedules));
       })
       .catch(() => {
         Alert.alert(intl.formatMessage({ id: 'alert.fail' }));
       });
   };
 
-  _moveScheduleToDraft = id => {
-    const { currentAccount, dispatch, intl } = this.props;
-
+  const _moveScheduleToDraft = id => {
     moveSchedule(id, currentAccount.name)
       .then(res => {
         dispatch(
@@ -118,54 +97,55 @@ class DraftsContainer extends Component {
           ),
         );
 
-        this._getDrafts();
-        this._getSchedules();
+        _getDrafts();
+        _getSchedules();
       })
       .catch(() => {
         dispatch(toastNotification(intl.formatMessage({ id: 'alert.fail' })));
       });
   };
 
-  _editDraft = id => {
-    const { navigation } = this.props;
-    const { drafts } = this.state;
+  const _editDraft = id => {
     const selectedDraft = drafts.find(draft => draft._id === id);
 
     navigation.navigate({
       routeName: ROUTES.SCREENS.EDITOR,
       params: {
         draft: selectedDraft,
-        fetchPost: this._getDrafts,
+        fetchPost: _getDrafts,
       },
     });
   };
 
-  _sortData = (data, isSchedule) =>
+  const _sortData = data =>
     data.sort((a, b) => {
-      const dateA = new Date(isSchedule ? a.schedule : a.created).getTime();
-      const dateB = new Date(isSchedule ? a.schedule : b.created).getTime();
+      const dateA = new Date(a.created).getTime();
+      const dateB = new Date(b.created).getTime();
 
       return dateB > dateA ? 1 : -1;
     });
 
-  render() {
-    const { isLoading, drafts, schedules } = this.state;
-    const { currentAccount } = this.props;
+  const _sortDataS = data =>
+    data.sort((a, b) => {
+      const dateA = new Date(a.schedule).getTime();
+      const dateB = new Date(b.schedule).getTime();
 
-    return (
-      <DraftsScreen
-        isLoading={isLoading}
-        editDraft={this._editDraft}
-        currentAccount={currentAccount}
-        drafts={drafts}
-        schedules={schedules}
-        removeDraft={this._removeDraft}
-        moveScheduleToDraft={this._moveScheduleToDraft}
-        removeSchedule={this._removeSchedule}
-      />
-    );
-  }
-}
+      return dateB > dateA ? 1 : -1;
+    });
+
+  return (
+    <DraftsScreen
+      isLoading={isLoading}
+      editDraft={_editDraft}
+      currentAccount={currentAccount}
+      drafts={drafts}
+      schedules={schedules}
+      removeDraft={_removeDraft}
+      moveScheduleToDraft={_moveScheduleToDraft}
+      removeSchedule={_removeSchedule}
+    />
+  );
+};
 
 const mapStateToProps = state => ({
   currentAccount: state.account.currentAccount,

src/screens/drafts/screen/draftsScreen.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-wrap-multilines */
-import React, { Component } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { injectIntl } from 'react-intl';
 import { View, FlatList, Text } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
@@ -17,25 +17,34 @@ import { BasicHeader, TabBar, PostListItem, PostCardPlaceHolder } from '../../..
 import globalStyles from '../../../globalStyles';
 import styles from './draftStyles';
 
-class DraftsScreen extends Component {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
+const DraftsScreen = ({
+  currentAccount,
+  removeDraft,
+  editDraft,
+  removeSchedule,
+  isLoading,
+  intl,
+  drafts,
+  schedules,
+  moveScheduleToDraft,
+}) => {
+  const [selectedId, setSelectedId] = useState(null);
+  const ActionSheetRef = useRef(null);
+  const firstMount = useRef(true);
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedId: null,
-    };
-  }
-
-  // Component Life Cycles
+  useEffect(() => {
+    if (firstMount.current) {
+      firstMount.current = false;
+      return;
+    }
+    if (ActionSheetRef.current) {
+      ActionSheetRef.current.show();
+    }
+  }, [selectedId]);
 
   // Component Functions
 
-  _renderItem = (item, type) => {
-    const { currentAccount, removeDraft, editDraft, removeSchedule } = this.props;
+  const _renderItem = (item, type) => {
     const tags = item.tags ? item.tags.split(/[ ,]+/) : [];
     const tag = tags[0] || '';
     const image = catchDraftImage(item.body);
@@ -52,11 +61,7 @@ class DraftsScreen extends Component {
         image={image ? { uri: catchDraftImage(item.body) } : null}
         username={currentAccount.name}
         reputation={currentAccount.reputation}
-        handleOnPressItem={() =>
-          isSchedules
-            ? this.setState({ selectedId: item._id }, () => this.ActionSheet.show())
-            : editDraft(item._id)
-        }
+        handleOnPressItem={() => (isSchedules ? setSelectedId(item._id) : editDraft(item._id))}
         handleOnRemoveItem={isSchedules ? removeSchedule : removeDraft}
         id={item._id}
         key={item._id}
@@ -64,9 +69,7 @@ class DraftsScreen extends Component {
     );
   };
 
-  _renderEmptyContent = () => {
-    const { isLoading, intl } = this.props;
-
+  const _renderEmptyContent = () => {
     if (isLoading) {
       return (
         <View>
@@ -85,80 +88,75 @@ class DraftsScreen extends Component {
     );
   };
 
-  _getTabItem = (data, type) => (
+  const _getTabItem = (data, type) => (
     <View style={globalStyles.lightContainer}>
       <FlatList
         data={data}
         keyExtractor={item => item._id}
         removeClippedSubviews={false}
-        renderItem={({ item }) => this._renderItem(item, type)}
-        ListEmptyComponent={this._renderEmptyContent()}
+        renderItem={({ item }) => _renderItem(item, type)}
+        ListEmptyComponent={_renderEmptyContent()}
       />
     </View>
   );
 
-  render() {
-    const { drafts, schedules, intl, moveScheduleToDraft } = this.props;
-    const { selectedId } = this.state;
+  return (
+    <View style={globalStyles.container}>
+      <BasicHeader
+        title={intl.formatMessage({
+          id: 'drafts.title',
+        })}
+      />
 
-    return (
-      <View style={globalStyles.container}>
-        <BasicHeader
-          title={intl.formatMessage({
+      <ScrollableTabView
+        style={globalStyles.tabView}
+        renderTabBar={() => (
+          <TabBar
+            style={styles.tabbar}
+            tabUnderlineDefaultWidth={80}
+            tabUnderlineScaleX={2}
+            tabBarPosition="overlayTop"
+          />
+        )}
+      >
+        <View
+          tabLabel={intl.formatMessage({
             id: 'drafts.title',
           })}
-        />
-
-        <ScrollableTabView
-          style={globalStyles.tabView}
-          renderTabBar={() => (
-            <TabBar
-              style={styles.tabbar}
-              tabUnderlineDefaultWidth={80}
-              tabUnderlineScaleX={2}
-              tabBarPosition="overlayTop"
-            />
-          )}
+          style={styles.tabbarItem}
         >
-          <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>
-        <ActionSheet
-          ref={o => (this.ActionSheet = o)}
-          title={intl.formatMessage({
-            id: 'alert.move_question',
+          {_getTabItem(drafts, 'drafts')}
+        </View>
+        <View
+          tabLabel={intl.formatMessage({
+            id: 'schedules.title',
           })}
-          options={[
-            intl.formatMessage({
-              id: 'alert.move',
-            }),
-            intl.formatMessage({
-              id: 'alert.cancel',
-            }),
-          ]}
-          cancelButtonIndex={1}
-          onPress={index => {
-            index === 0 && moveScheduleToDraft(selectedId);
-          }}
-        />
-      </View>
-    );
-  }
-}
+          style={styles.tabbarItem}
+        >
+          {_getTabItem(schedules, 'schedules')}
+        </View>
+      </ScrollableTabView>
+      <ActionSheet
+        ref={ActionSheetRef}
+        title={intl.formatMessage({
+          id: 'alert.move_question',
+        })}
+        options={[
+          intl.formatMessage({
+            id: 'alert.move',
+          }),
+          intl.formatMessage({
+            id: 'alert.cancel',
+          }),
+        ]}
+        cancelButtonIndex={1}
+        onPress={index => {
+          index === 0 && moveScheduleToDraft(selectedId);
+        }}
+      />
+    </View>
+  );
+};
 
 export default injectIntl(DraftsScreen);
 /* eslint-enable */