post view convert to the hook

src/components/posts/view/postsView.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-wrap-multilines */
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment, useEffect, useCallback } from 'react';
 import { FlatList, View, ActivityIndicator, RefreshControl } from 'react-native';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { withNavigation } from 'react-navigation';
 import { get, isEqual, unionWith } from 'lodash';
 
@@ -19,78 +19,104 @@ import { ThemeContainer } from '../../../containers';
 import styles from './postsStyles';
 import { default as ROUTES } from '../../../constants/routeNames';
 
-class PostsView extends Component {
+const PostsView = ({
-  constructor(props) {
+  filterOptions,
-    super(props);
+  selectedOptionIndex,
-
+  isHideImage,
-    this.state = {
+  handleImagesHide,
-      posts: props.isConnected ? [] : props.feedPosts,
+  feedPosts,
-      startAuthor: '',
+  isConnected,
-      startPermlink: '',
+  currentAccountUsername,
-      refreshing: false,
+  getFor,
-      isLoading: false,
+  tag,
-      isShowFilterBar: true,
+  nsfw,
-      selectedFilterIndex: get(props, 'selectedOptionIndex', 0),
+  setFeedPosts,
-      isNoPost: false,
+  pageType,
-      promotedPosts: [],
+  isLoginDone,
-      scrollOffsetY: 0,
+  isLoggedIn,
-      lockFilterBar: false,
+  handleOnScroll,
-    };
+  navigation,
-  }
+  changeForceLoadPostState,
-
+  forceLoadPost,
-  async componentDidMount() {
+}) => {
-    const { isConnected, pageType } = this.props;
+  const [posts, setPosts] = useState(isConnected ? [] : feedPosts);
+  const [startAuthor, setStartAuthor] = useState('');
+  const [startPermlink, setStartPermlink] = useState('');
+  const [refreshing, setRefreshing] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isShowFilterBar, setIsShowFilterBar] = useState(true);
+  const [selectedFilterIndex, setSelectedFilterIndex] = useState(selectedOptionIndex || 0);
+  const [isNoPost, setIsNoPost] = useState(false);
+  const [promotedPosts, setPromotedPosts] = useState([]);
+  const [scrollOffsetY, setScrollOffsetY] = useState(0);
+  const intl = useIntl();
 
+  useEffect(() => {
     if (isConnected) {
+      const fetchPromotePost = async () => {
         if (pageType !== 'profiles') {
-        await this._getPromotePosts();
+          await _getPromotePosts();
-      }
-      this._loadPosts();
-    } else {
-      this.setState({
-        refreshing: false,
-        isLoading: false,
-      });
         }
+      };
+      fetchPromotePost();
+      _loadPosts();
+      setRefreshing(false);
+      setIsLoading(false);
     }
+  }, [
+    _getPromotePosts,
+    _loadPosts,
+    changeForceLoadPostState,
+    currentAccountUsername,
+    forceLoadPost,
+    isConnected,
+    pageType,
+    selectedOptionIndex,
+  ]);
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  useEffect(() => {
-    const { currentAccountUsername, changeForceLoadPostState } = this.props;
+    if (forceLoadPost) {
+      setPosts([]);
+      setStartAuthor('');
+      setStartPermlink('');
+      setRefreshing(false);
+      setIsLoading(false);
+      setSelectedFilterIndex(selectedOptionIndex || 0);
+      setIsNoPost(false);
+
+      _loadPosts();
 
-    if (
-      (currentAccountUsername &&
-        currentAccountUsername !== nextProps.currentAccountUsername &&
-        nextProps.currentAccountUsername) ||
-      nextProps.forceLoadPost
-    ) {
-      // Set all initial data (New user new rules)
-      this.setState(
-        {
-          posts: [],
-          startAuthor: '',
-          startPermlink: '',
-          refreshing: false,
-          isLoading: false,
-          selectedFilterIndex: get(nextProps, 'selectedOptionIndex', 0),
-          isNoPost: false,
-        },
-        () => {
-          this._loadPosts();
       if (changeForceLoadPostState) {
         changeForceLoadPostState(false);
       }
-        },
-      );
     }
+  }, [
+    _loadPosts,
+    changeForceLoadPostState,
+    currentAccountUsername,
+    forceLoadPost,
+    selectedOptionIndex,
+  ]);
+
+  useEffect(() => {
+    if (!startAuthor && !startPermlink) {
+      _loadPosts(filterOptions[selectedFilterIndex].toLowerCase());
     }
+  }, [_loadPosts, filterOptions, selectedFilterIndex, startAuthor, startPermlink]);
 
-  _getPromotePosts = async () => {
+  const _handleOnDropdownSelect = async index => {
-    const { currentAccountUsername } = this.props;
+    setSelectedFilterIndex(index);
+    setPosts([]);
+    setStartPermlink('');
+    setStartAuthor('');
+    setIsNoPost(false);
+  };
 
+  const _getPromotePosts = useCallback(async () => {
     await getPromotePosts()
       .then(async res => {
         if (res && res.length) {
-          const promotedPosts = await Promise.all(
+          const _promotedPosts = await Promise.all(
             res.map(item =>
               getPost(
                 get(item, 'author'),
@@ -101,48 +127,33 @@ class PostsView extends Component {
             ),
           );
 
-          this.setState({ promotedPosts });
+          setPromotedPosts(_promotedPosts);
         }
       })
       .catch(() => {});
-  };
+  }, [currentAccountUsername]);
 
-  _loadPosts = async () => {
+  const _loadPosts = useCallback(
-    const {
+    async type => {
-      getFor,
+      const filter =
-      tag,
+        type ||
-      currentAccountUsername,
+        (filterOptions &&
-      nsfw,
+          filterOptions.length > 0 &&
-      setFeedPosts,
+          filterOptions[selectedFilterIndex].toLowerCase());
-      isConnected,
-      filterOptions,
-    } = this.props;
-    const {
-      posts,
-      startAuthor,
-      startPermlink,
-      refreshing,
-      selectedFilterIndex,
-      isLoading,
-      promotedPosts,
-    } = this.state;
-    const filter = filterOptions[selectedFilterIndex].toLowerCase();
       let options;
       const limit = 3;
 
       if (!isConnected) {
-      this.setState({
+        setRefreshing(false);
-        refreshing: false,
+        setIsLoading(false);
-        isLoading: false,
-      });
         return null;
       }
 
-    if (isLoading) {
+      // if (isLoading) {
-      return null;
+      //   return null;
-    }
+      // }
 
-    this.setState({ isLoading: true });
+      setIsLoading(true);
       if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') {
         options = {
           tag,
@@ -213,53 +224,49 @@ class PostsView extends Component {
               // Promoted post end
 
               if (refreshing) {
-              this.setState({
-                posts: _posts,
-              });
               } else if (!refreshing) {
-              this.setState({
+                setStartAuthor(result[result.length - 1] && result[result.length - 1].author);
-                posts: _posts,
+                setStartPermlink(result[result.length - 1] && result[result.length - 1].permlink);
-                startAuthor: result[result.length - 1] && result[result.length - 1].author,
-                startPermlink: result[result.length - 1] && result[result.length - 1].permlink,
-              });
               }
-
+              setPosts(_posts);
-            this.setState({
+              setRefreshing(false);
-              refreshing: false,
+              setIsLoading(false);
-              isLoading: false,
-            });
             }
           } else if (result.length === 0) {
-          this.setState({ isNoPost: true });
+            setIsNoPost(true);
           }
         })
         .catch(() => {
-        this.setState({
+          setRefreshing(false);
-          refreshing: false,
         });
-      });
-  };
-
-  _handleOnRefreshPosts = () => {
-    const { pageType } = this.props;
-
-    this.setState(
-      {
-        refreshing: true,
     },
-      async () => {
+    [
+      currentAccountUsername,
+      filterOptions,
+      getFor,
+      isConnected,
+      nsfw,
+      posts,
+      promotedPosts,
+      refreshing,
+      selectedFilterIndex,
+      setFeedPosts,
+      startAuthor,
+      startPermlink,
+      tag,
+    ],
+  );
+
+  const _handleOnRefreshPosts = async () => {
+    setRefreshing(true);
     if (pageType !== 'profiles') {
-          await this._getPromotePosts();
+      await _getPromotePosts();
     }
 
-        this._loadPosts();
+    _loadPosts();
-      },
-    );
   };
 
-  _renderFooter = () => {
+  const _renderFooter = () => {
-    const { isLoading } = this.state;
-
     if (isLoading) {
       return (
         <View style={styles.flatlistFooter}>
@@ -267,29 +274,15 @@ class PostsView extends Component {
         </View>
       );
     }
+
     return null;
   };
 
-  _handleOnDropdownSelect = async index => {
+  const _handleOnPressLogin = () => {
-    await this.setState({
-      selectedFilterIndex: index,
-      posts: [],
-      startAuthor: '',
-      startPermlink: '',
-      isNoPost: false,
-    });
-    this._loadPosts();
-  };
-
-  _handleOnPressLogin = () => {
-    const { navigation } = this.props;
     navigation.navigate(ROUTES.SCREENS.LOGIN);
   };
 
-  _renderEmptyContent = () => {
+  const _renderEmptyContent = () => {
-    const { intl, getFor, isLoginDone, isLoggedIn, tag } = this.props;
-    const { isNoPost } = this.state;
-
     if (getFor === 'feed' && isLoginDone && !isLoggedIn) {
       return (
         <NoPost
@@ -298,7 +291,7 @@ class PostsView extends Component {
           defaultText={intl.formatMessage({
             id: 'profile.login_to_see',
           })}
-          handleOnButtonPress={this._handleOnPressLogin}
+          handleOnButtonPress={_handleOnPressLogin}
         />
       );
     }
@@ -326,21 +319,16 @@ class PostsView extends Component {
     );
   };
 
-  _handleOnScroll = event => {
+  const _handleOnScroll = event => {
-    const { scrollOffsetY } = this.state;
-    const { handleOnScroll } = this.props;
     const currentOffset = event.nativeEvent.contentOffset.y;
 
     if (handleOnScroll) {
       handleOnScroll();
     }
-    this.setState({ scrollOffsetY: currentOffset });
-    this.setState({ isShowFilterBar: scrollOffsetY > currentOffset || scrollOffsetY <= 0 });
-  };
 
-  render() {
+    setScrollOffsetY(currentOffset);
-    const { refreshing, posts, isShowFilterBar } = this.state;
+    setIsShowFilterBar(scrollOffsetY > currentOffset || scrollOffsetY <= 0);
-    const { filterOptions, selectedOptionIndex, isHideImage, handleImagesHide } = this.props;
+  };
 
   return (
     <View style={styles.container}>
@@ -352,7 +340,7 @@ class PostsView extends Component {
           defaultText={filterOptions[selectedOptionIndex]}
           rightIconName="view-module"
           rightIconType="MaterialIcons"
-            onDropdownSelect={this._handleOnDropdownSelect}
+          onDropdownSelect={_handleOnDropdownSelect}
           onRightIconPress={handleImagesHide}
         />
       )}
@@ -366,21 +354,21 @@ class PostsView extends Component {
           )
         }
         keyExtractor={(content, i) => `${get(content, 'permlink', '')}${i.toString()}`}
-          onEndReached={() => this._loadPosts()}
+        onEndReached={() => _loadPosts()}
         removeClippedSubviews
         refreshing={refreshing}
-          onRefresh={() => this._handleOnRefreshPosts()}
+        onRefresh={_handleOnRefreshPosts}
         onEndThreshold={0}
         initialNumToRender={10}
-          ListFooterComponent={this._renderFooter}
+        ListFooterComponent={_renderFooter}
-          onScrollEndDrag={this._handleOnScroll}
+        onScrollEndDrag={_handleOnScroll}
-          ListEmptyComponent={this._renderEmptyContent}
+        ListEmptyComponent={_renderEmptyContent}
         refreshControl={
           <ThemeContainer>
             {({ isDarkTheme }) => (
               <RefreshControl
                 refreshing={refreshing}
-                  onRefresh={this._handleOnRefreshPosts}
+                onRefresh={_handleOnRefreshPosts}
                 progressBackgroundColor="#357CE6"
                 tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
                 titleColor="#fff"
@@ -392,7 +380,6 @@ class PostsView extends Component {
       />
     </View>
   );
-  }
+};
-}
 
-export default withNavigation(injectIntl(PostsView));
+export default withNavigation(PostsView);