Merge branch 'development' of github.com:esteemapp/esteem-mobile into bugfix/post-display

src/components/editorElements/index.js

@@ -1,6 +1,5 @@
 import SummaryArea from './summaryArea/view/summaryAreaView';
 import TagArea from './tagArea/view/tagAreaView';
-import TextArea from './textArea/view/textAreaView';
 import TitleArea from './titleArea/view/titleAreaView';
 
-export { SummaryArea, TagArea, TextArea, TitleArea };
+export { SummaryArea, TagArea, TitleArea };

src/components/editorElements/textArea/view/textAreaStyles.js

@@ -1,8 +0,0 @@
-import EStyleSheet from 'react-native-extended-stylesheet';
-
-export default EStyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 16,
-  },
-});

src/components/editorElements/textArea/view/textAreaView.js

@@ -1,25 +0,0 @@
-import React, { PureComponent } from 'react';
-// Constants
-
-// Components
-import { MarkdownEditor } from '../../../markdownEditor';
-
-export default class TextAreaView extends PureComponent {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-
-  render() {
-    return <MarkdownEditor {...this.props} />;
-  }
-}

src/components/editorElements/titleArea/view/titleAreaStyles.js

@@ -8,5 +8,6 @@ export default EStyleSheet.create({
     fontFamily: '$editorFont',
     textAlignVertical: 'top',
     paddingVertical: 0,
+    backgroundColor: '$primaryBackgroundColor',
   },
 });

src/components/leaderboard/view/leaderboardStyles.js

@@ -30,4 +30,7 @@ export default EStyleSheet.create({
     marginBottom: 10,
     fontFamily: '$primaryFont',
   },
+  listContentContainer: {
+    paddingBottom: 60,
+  },
 });

src/components/leaderboard/view/leaderboardView.js

@@ -70,6 +70,7 @@ class LeaderboardView extends PureComponent {
             ListEmptyComponent={<ListPlaceHolder />}
             onRefresh={() => fetchLeaderBoard()}
             renderItem={({ item, index }) => this._renderItem(item, index)}
+            contentContainerStyle={styles.listContentContainer}
           />
         </View>
       </Fragment>

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -14,6 +14,7 @@ export default EStyleSheet.create({
     paddingBottom: 0, // On android side, textinput has default padding
     paddingHorizontal: 16,
     color: '$primaryBlack',
+    backgroundColor: '$primaryBackgroundColor',
     fontFamily: '$editorFont',
     textAlignVertical: 'top',
   },

src/components/markdownEditor/view/markdownPreviewStyles.js

@@ -1,7 +1,6 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  view: {},
   codeBlock: {
     fontFamily: 'Courier',
     fontWeight: '500',

src/components/notification/view/notificationStyles.js

@@ -18,4 +18,7 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     flex: 1,
   },
+  listContentContainer: {
+    paddingBottom: 60,
+  },
 });

src/components/notification/view/notificationView.js

@@ -175,6 +175,7 @@ class NotificationView extends PureComponent {
               onEndReached={() => getActivities(null, selectedFilter, true)}
               ListFooterComponent={this._renderFooterLoading}
               ListEmptyComponent={<ListPlaceHolder />}
+              contentContainerStyle={styles.listContentContainer}
               refreshControl={
                 <RefreshControl
                   refreshing={isNotificationRefreshing}

src/components/points/view/pointsStyles.js

@@ -119,8 +119,9 @@ export default EStyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    backgroundColor: '$primaryBackgroundColor',
+  },
-    marginBottom: 60,
+  scrollContentContainer: {
+    paddingBottom: 60,
   },
   popoverDetails: {
     flexDirection: 'row',

src/components/points/view/pointsView.js

@@ -101,6 +101,7 @@ class PointsView extends Component {
             <ScrollView
               style={styles.scrollContainer}
               refreshControl={this.refreshControl({ isDarkTheme })}
+              contentContainerStyle={styles.scrollContentContainer}
             >
               <View style={styles.pointsWrapper}>
                 <Text onPress={this._showDropdown} style={styles.pointText}>

src/components/posts/view/postsStyles.js

@@ -32,4 +32,7 @@ export default EStyleSheet.create({
     width: 193,
     height: 189,
   },
+  placeholderWrapper: {
+    flex: 1,
+  },
 });

src/components/posts/view/postsView.js

@@ -51,6 +51,9 @@ const PostsView = ({
   const [isNoPost, setIsNoPost] = useState(false);
   const [promotedPosts, setPromotedPosts] = useState([]);
   const [scrollOffsetY, setScrollOffsetY] = useState(0);
+  const [selectedFilterValue, setSelectedFilterValue] = useState(
+    filterOptionsValue && filterOptionsValue[selectedFilterIndex],
+  );
   const intl = useIntl();
 
   useEffect(() => {
@@ -62,8 +65,6 @@ const PostsView = ({
       };
       fetchPromotePost();
       _loadPosts();
-      setRefreshing(false);
-      setIsLoading(false);
     }
   }, [
     _getPromotePosts,
@@ -81,8 +82,6 @@ const PostsView = ({
       setPosts([]);
       setStartAuthor('');
       setStartPermlink('');
-      setRefreshing(false);
-      setIsLoading(false);
       setSelectedFilterIndex(selectedOptionIndex || 0);
       setIsNoPost(false);
 
@@ -102,20 +101,21 @@ const PostsView = ({
 
   useEffect(() => {
     if (!startAuthor && !startPermlink) {
-      _loadPosts(
+      _loadPosts(selectedFilterValue);
-        filterOptions && filterOptions.length > 0 && filterOptionsValue[selectedFilterIndex],
-      );
     }
   }, [
     _loadPosts,
     filterOptions,
     filterOptionsValue,
-    selectedFilterIndex,
+    selectedFilterValue,
     startAuthor,
     startPermlink,
   ]);
 
   const _handleOnDropdownSelect = async index => {
+    if (filterOptions && filterOptions.length > 0) {
+      await setSelectedFilterValue(filterOptionsValue[index]);
+    }
     setSelectedFilterIndex(index);
     setPosts([]);
     setStartPermlink('');
@@ -145,25 +145,26 @@ const PostsView = ({
   }, [currentAccountUsername]);
 
   const _loadPosts = useCallback(
-    async type => {
+    type => {
-      if (isLoading) {
+      if (
+        isLoading ||
+        !isConnected ||
+        (!isLoggedIn && type === 'feed') ||
+        (!isLoggedIn && type === 'blog')
+      ) {
         return;
-      } else {
-        setIsLoading(true);
       }
 
-      const filter =
+      if (!isConnected && (refreshing || isLoading)) {
-        type ||
-        (filterOptions && filterOptions.length > 0 && filterOptionsValue[selectedFilterIndex]);
-      let options;
-      const limit = 3;
-
-      if (!isConnected) {
         setRefreshing(false);
         setIsLoading(false);
-        return null;
+        return;
       }
 
+      const filter = type || selectedFilterValue;
+      let options;
+      const limit = 3;
+
       if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') {
         options = {
           tag,
@@ -202,7 +203,7 @@ const PostsView = ({
                 }
               }
 
-              if (posts.length < 5) {
+              if (posts.length < 5 && pageType !== 'profiles') {
                 setFeedPosts(_posts);
               }
 
@@ -233,8 +234,7 @@ const PostsView = ({
               }
               // Promoted post end
 
-              if (refreshing) {
+              if (!refreshing) {
-              } else if (!refreshing) {
                 setStartAuthor(result[result.length - 1] && result[result.length - 1].author);
                 setStartPermlink(result[result.length - 1] && result[result.length - 1].permlink);
               }
@@ -252,16 +252,16 @@ const PostsView = ({
     },
     [
       currentAccountUsername,
-      filterOptions,
-      filterOptionsValue,
       getFor,
       isConnected,
       isLoading,
+      isLoggedIn,
       nsfw,
+      pageType,
       posts,
       promotedPosts,
       refreshing,
-      selectedFilterIndex,
+      selectedFilterValue,
       setFeedPosts,
       startAuthor,
       startPermlink,
@@ -295,7 +295,7 @@ const PostsView = ({
   };
 
   const _renderEmptyContent = () => {
-    if (getFor === 'feed' && isLoginDone && !isLoggedIn) {
+    if ((selectedFilterValue === 'feed' || selectedFilterValue === 'blog') && !isLoggedIn) {
       return (
         <NoPost
           imageStyle={styles.noImage}
@@ -324,10 +324,10 @@ const PostsView = ({
     }
 
     return (
-      <Fragment>
+      <View style={styles.placeholderWrapper}>
         <PostCardPlaceHolder />
         <PostCardPlaceHolder />
-      </Fragment>
+      </View>
     );
   };
 
@@ -369,7 +369,7 @@ const PostsView = ({
               )
             }
             keyExtractor={(content, i) => `${get(content, 'permlink', '')}${i.toString()}`}
-            onEndReached={_loadPosts}
+            onEndReached={() => _loadPosts()}
             removeClippedSubviews
             refreshing={refreshing}
             onRefresh={_handleOnRefreshPosts}

src/components/profile/profileStyles.js

@@ -60,4 +60,7 @@ export default EStyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 5,
   },
+  scrollContentContainer: {
+    paddingBottom: 60,
+  },
 });

src/components/profile/profileView.js

@@ -197,7 +197,10 @@ class ProfileView extends PureComponent {
               style={styles.commentsTabBar}
             >
               {comments && comments.length > 0 ? (
-                <ScrollView onScroll={this._handleOnScroll}>
+                <ScrollView
+                  onScroll={this._handleOnScroll}
+                  contentContainerStyle={styles.scrollContentContainer}
+                >
                   <Comments
                     isProfilePreview
                     comments={comments}

src/components/spinGame/spinGameStyles.js

@@ -12,9 +12,10 @@ export default EStyleSheet.create({
     alignItems: 'center',
   },
   count: {
-    fontSize: 72,
+    fontSize: 60,
     fontWeight: '700',
     color: '$primaryDarkGray',
+    height: 60,
   },
   countDesc: {
     color: '$primaryDarkGray',

src/components/textInput/view/textInputStyles.js

@@ -15,6 +15,5 @@ export default EStyleSheet.create({
   input: {
     flex: 1,
     minHeight: 50,
-    backgroundColor: '$primaryWhiteLightBackground',
   },
 });

src/components/upvote/view/upvoteView.js

@@ -213,12 +213,16 @@ class UpvoteView extends Component {
     } = this.props;
     const { isVoting, amount, sliderValue, isVoted, isShowDetails, downvote } = this.state;
 
-    let iconName = 'ios-arrow-dropup';
+    let iconName = 'upcircleo';
-    let iconType;
+    let iconType = 'AntDesign';
+    let downVoteIconName = 'downcircleo';
 
     if (isVoted) {
       iconName = 'upcircle';
-      iconType = 'AntDesign';
+    }
+
+    if (isDownVoted) {
+      downVoteIconName = 'downcircle';
     }
 
     const _percent = `${downvote ? '-' : ''}${(sliderValue * 100).toFixed(0)}%`;
@@ -253,8 +257,8 @@ class UpvoteView extends Component {
                     <Icon
                       style={[styles.upvoteIcon, isDownVoted && { color: '#ec8b88' }]}
                       active={!isLoggedIn}
-                      iconType={isDownVoted ? 'AntDesign' : iconType}
+                      iconType={iconType}
-                      name={isDownVoted ? 'downcircle' : iconName}
+                      name={isDownVoted ? downVoteIconName : iconName}
                     />
                   </View>
                 )}
@@ -328,7 +332,7 @@ class UpvoteView extends Component {
                         size={20}
                         style={[styles.upvoteIcon, { color: '#007ee5' }]}
                         active={!isLoggedIn}
-                        iconType={iconType}
+                        iconType="AntDesign"
                         name={iconName}
                       />
                     </TouchableOpacity>
@@ -356,7 +360,7 @@ class UpvoteView extends Component {
                         style={[styles.upvoteIcon, { color: '#ec8b88' }]}
                         active={!isLoggedIn}
                         iconType="AntDesign"
-                        name="downcircle"
+                        name={downVoteIconName}
                       />
                     </TouchableOpacity>
                   </Fragment>

src/components/wallet/view/walletStyles.js

@@ -38,4 +38,7 @@ export default EStyleSheet.create({
   scrollView: {
     backgroundColor: '$primaryLightBackground',
   },
+  scrollContentContainer: {
+    paddingBottom: 60,
+  },
 });

src/components/wallet/view/walletView.js

@@ -73,6 +73,7 @@ class WalletView extends PureComponent {
                 colors={['#fff']}
               />
             }
+            contentContainerStyle={styles.scrollContentContainer}
           >
             {!walletData ? (
               <Fragment>

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import 'react-native-gesture-handler';
 import { Provider, connect } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { IntlProvider } from 'react-intl';
 import { useScreens } from 'react-native-screens';
-
 import { flattenMessages } from './utils/flattenMessages';
 import messages from './config/locales';
 

src/screens/editor/container/editorContainer.js

@@ -96,9 +96,9 @@ class EditorContainer extends Component {
         this.setState({
           isEdit,
           draftPost: {
-            title: post.title,
+            title: get(post, 'title', ''),
-            body: post.markdownBody,
+            body: get(post, 'markdownBody', ''),
-            tags: post.json_metadata.tags,
+            tags: get(post, 'json_metadata.tags', []),
           },
         });
       }
@@ -129,9 +129,9 @@ class EditorContainer extends Component {
         if (result) {
           this.setState({
             draftPost: {
-              body: result.body,
+              body: get(result, 'body', ''),
-              title: result.title,
+              title: get(result, 'title', ''),
-              tags: result.tags.split(','),
+              tags: get(result, 'tags', '').split(','),
             },
           });
         }

src/screens/editor/screen/editorScreen.js

@@ -14,6 +14,7 @@ import {
   TextArea,
   SummaryArea,
   PostForm,
+  MarkdownEditor,
 } from '../../../components';
 
 // Styles
@@ -73,7 +74,9 @@ class EditorScreen extends Component {
       isRemoveTag: true,
     });
 
-    if (initialEditor) initialEditor();
+    if (initialEditor) {
+      initialEditor();
+    }
   };
 
   _handleOnPressPreviewButton = () => {
@@ -229,7 +232,7 @@ class EditorScreen extends Component {
               intl={intl}
             />
           )}
-          <TextArea
+          <MarkdownEditor
             componentID="body"
             draftBody={fields && fields.body}
             handleOnTextChange={this._setWordsCount}