From 0f0af30d52f26e247da9931732e7f3adebb03f79 Mon Sep 17 00:00:00 2001 From: feruz Date: Tue, 7 Jan 2020 05:57:28 +0200 Subject: [PATCH] drafts sorting issue, hooks --- src/providers/esteem/esteem.js | 6 +- .../drafts/container/draftsContainer.js | 122 ++++++------- src/screens/drafts/screen/draftsScreen.js | 166 +++++++++--------- 3 files changed, 137 insertions(+), 157 deletions(-) diff --git a/src/providers/esteem/esteem.js b/src/providers/esteem/esteem.js index 4276bcc01..bde06665e 100644 --- a/src/providers/esteem/esteem.js +++ b/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 diff --git a/src/screens/drafts/container/draftsContainer.js b/src/screens/drafts/container/draftsContainer.js index b00badf0b..f59a583f3 100644 --- a/src/screens/drafts/container/draftsContainer.js +++ b/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 ( - - ); - } -} + return dateB > dateA ? 1 : -1; + }); + + return ( + + ); +}; const mapStateToProps = state => ({ currentAccount: state.account.currentAccount, diff --git a/src/screens/drafts/screen/draftsScreen.js b/src/screens/drafts/screen/draftsScreen.js index e93dfa8fe..567e3e717 100644 --- a/src/screens/drafts/screen/draftsScreen.js +++ b/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 ( @@ -85,80 +88,75 @@ class DraftsScreen extends Component { ); }; - _getTabItem = (data, type) => ( + const _getTabItem = (data, type) => ( item._id} removeClippedSubviews={false} - renderItem={({ item }) => this._renderItem(item, type)} - ListEmptyComponent={this._renderEmptyContent()} + renderItem={({ item }) => _renderItem(item, type)} + ListEmptyComponent={_renderEmptyContent()} /> ); - render() { - const { drafts, schedules, intl, moveScheduleToDraft } = this.props; - const { selectedId } = this.state; + return ( + + - return ( - - ( + + )} + > + - - ( - - )} + style={styles.tabbarItem} > - - {this._getTabItem(drafts, 'drafts')} - - - {this._getTabItem(schedules, 'schedules')} - - - (this.ActionSheet = o)} - title={intl.formatMessage({ - id: 'alert.move_question', + {_getTabItem(drafts, 'drafts')} + + { - index === 0 && moveScheduleToDraft(selectedId); - }} - /> - - ); - } -} + style={styles.tabbarItem} + > + {_getTabItem(schedules, 'schedules')} + + + { + index === 0 && moveScheduleToDraft(selectedId); + }} + /> + + ); +}; export default injectIntl(DraftsScreen); /* eslint-enable */