created custom filter enhanced posts

src/components/filterBar/view/filterBarStyles.js

@@ -12,8 +12,14 @@ export default EStyleSheet.create({
     },
     zIndex: 99,
   },
+  dropdownWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   filterBarWrapper: {
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'space-between',
   },
   rightIconWrapper: {

src/components/filterBar/view/filterBarView.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 import { Icon } from '../../icon';
 
 // External Components
 import { DropdownButton } from '../../dropdownButton';
 
 // Components
-import { LineBreak } from '../../basicUIElements';
+import { LineBreak, Tag } from '../../basicUIElements';
 
 // Styles
 import styles from './filterBarStyles';
@@ -27,18 +27,23 @@ const FilterBarView = ({
   rightIconName,
   rightIconType,
   selectedOptionIndex,
+  customOption,
 }) => (
   <View style={styles.container}>
     {!isHide && (
       <LineBreak height={38}>
         <View style={styles.filterBarWrapper}>
-          <DropdownButton
-            iconName={dropdownIconName}
-            options={options}
-            defaultText={defaultText}
-            onSelect={onDropdownSelect}
-            selectedOptionIndex={selectedOptionIndex}
-          />
+          <View style={styles.dropdownWrapper}>
+            <DropdownButton
+              iconName={dropdownIconName}
+              options={options}
+              defaultText={defaultText}
+              onSelect={onDropdownSelect}
+              selectedOptionIndex={selectedOptionIndex}
+            />
+            {customOption && <Tag value={customOption} isPin onPress={() => onDropdownSelect(3)} />}
+          </View>
+
           {rightIconName && (
             <TouchableOpacity
               onPress={() => onRightIconPress && onRightIconPress()}

src/components/posts/container/postsContainer.js

@@ -24,6 +24,8 @@ const PostsContainer = ({
   selectedOptionIndex,
   tag,
   nsfw,
+  filterOptionsValue,
+  customOption,
 }) => {
   const dispatch = useDispatch();
 
@@ -57,6 +59,8 @@ const PostsContainer = ({
           selectedOptionIndex={selectedOptionIndex}
           setFeedPosts={_setFeedPosts}
           tag={tag}
+          filterOptionsValue={filterOptionsValue}
+          customOption={customOption}
         />
       )}
     </AccountContainer>

src/components/posts/view/postsView.js

@@ -38,6 +38,8 @@ const PostsView = ({
   navigation,
   changeForceLoadPostState,
   forceLoadPost,
+  filterOptionsValue,
+  customOption,
 }) => {
   const [posts, setPosts] = useState(isConnected ? [] : feedPosts);
   const [startAuthor, setStartAuthor] = useState('');
@@ -100,9 +102,16 @@ const PostsView = ({
 
   useEffect(() => {
     if (!startAuthor && !startPermlink) {
-      _loadPosts(filterOptions[selectedFilterIndex].toLowerCase());
+      _loadPosts(filterOptionsValue[selectedFilterIndex]);
     }
-  }, [_loadPosts, filterOptions, selectedFilterIndex, startAuthor, startPermlink]);
+  }, [
+    _loadPosts,
+    filterOptions,
+    filterOptionsValue,
+    selectedFilterIndex,
+    startAuthor,
+    startPermlink,
+  ]);
 
   const _handleOnDropdownSelect = async index => {
     setSelectedFilterIndex(index);
@@ -135,11 +144,15 @@ const PostsView = ({
 
   const _loadPosts = useCallback(
     async type => {
+      if (isLoading) {
+        return;
+      } else {
+        setIsLoading(true);
+      }
+
       const filter =
         type ||
-        (filterOptions &&
-          filterOptions.length > 0 &&
-          filterOptions[selectedFilterIndex].toLowerCase());
+        (filterOptions && filterOptions.length > 0 && filterOptionsValue[selectedFilterIndex]);
       let options;
       const limit = 3;
 
@@ -149,11 +162,6 @@ const PostsView = ({
         return null;
       }
 
-      // if (isLoading) {
-      //   return null;
-      // }
-
-      setIsLoading(true);
       if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') {
         options = {
           tag,
@@ -243,8 +251,10 @@ const PostsView = ({
     [
       currentAccountUsername,
       filterOptions,
+      filterOptionsValue,
       getFor,
       isConnected,
+      isLoading,
       nsfw,
       posts,
       promotedPosts,
@@ -342,6 +352,7 @@ const PostsView = ({
           rightIconType="MaterialIcons"
           onDropdownSelect={_handleOnDropdownSelect}
           onRightIconPress={handleImagesHide}
+          customOption={customOption}
         />
       )}
 

src/components/profile/profileView.js

@@ -15,7 +15,7 @@ import { TabBar } from '../tabBar';
 import { Wallet } from '../wallet';
 
 // Constants
-import { PROFILE_FILTERS } from '../../constants/options/filters';
+import { PROFILE_FILTERS, PROFILE_FILTERS_VALUE } from '../../constants/options/filters';
 
 // Utils
 import { getFormatedCreatedDate } from '../../utils/time';
@@ -38,13 +38,17 @@ class ProfileView extends PureComponent {
   _handleOnScroll = () => {
     const { isSummaryOpen } = this.state;
 
-    if (isSummaryOpen) this.setState({ isSummaryOpen: false });
+    if (isSummaryOpen) {
+      this.setState({ isSummaryOpen: false });
+    }
   };
 
   _handleOnSummaryExpanded = () => {
     const { isSummaryOpen } = this.state;
 
-    if (!isSummaryOpen) this.setState({ isSummaryOpen: true });
+    if (!isSummaryOpen) {
+      this.setState({ isSummaryOpen: true });
+    }
   };
 
   _handleUIChange = height => {
@@ -156,7 +160,9 @@ class ProfileView extends PureComponent {
                   estimatedWalletValue: 0,
                   oldEstimatedWalletValue: estimatedWalletValue,
                 });
-              } else this.setState({ estimatedWalletValue: oldEstimatedWalletValue });
+              } else {
+                this.setState({ estimatedWalletValue: oldEstimatedWalletValue });
+              }
             }}
           >
             <View
@@ -167,6 +173,7 @@ class ProfileView extends PureComponent {
             >
               <Posts
                 filterOptions={PROFILE_FILTERS}
+                filterOptionsValue={PROFILE_FILTERS_VALUE}
                 selectedOptionIndex={0}
                 pageType="profiles"
                 getFor="blog"

src/constants/options/filters.js

@@ -1,5 +1,8 @@
 export const POPULAR_FILTERS = ['TRENDING', 'HOT', 'NEW', 'PROMOTED'];
+export const POPULAR_FILTERS_VALUE = ['trending', 'hot', 'created', 'promoted'];
+
 export const PROFILE_FILTERS = ['BLOG', 'FEED'];
+export const PROFILE_FILTERS_VALUE = ['blog', 'feed'];
 
 // 'TRENDING',
 // 'HOT',

src/screens/feed/screen/feedScreen.js

@@ -11,7 +11,12 @@ import { AccountContainer } from '../../../containers';
 // Styles
 import styles from './feedStyles';
 
-import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
+import {
+  POPULAR_FILTERS,
+  PROFILE_FILTERS,
+  PROFILE_FILTERS_VALUE,
+  POPULAR_FILTERS_VALUE,
+} from '../../../constants/options/filters';
 
 const FeedScreen = () => {
   return (
@@ -22,9 +27,11 @@ const FeedScreen = () => {
           <SafeAreaView style={styles.container}>
             <Posts
               filterOptions={[...PROFILE_FILTERS, ...POPULAR_FILTERS]}
+              filterOptionsValue={[...PROFILE_FILTERS_VALUE, ...POPULAR_FILTERS_VALUE]}
               getFor={isLoggedIn ? 'feed' : 'trending'}
               selectedOptionIndex={isLoggedIn ? 1 : 2}
               tag={get(currentAccount, 'name')}
+              customOption="HOT"
             />
           </SafeAreaView>
         </Fragment>