Merge pull request #280 from esteemapp/enhancment/performance

Enhancment/performance

src/components/collapsibleCard/view/collapsibleCardView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, TouchableHighlight, Animated } from 'react-native';
 
 // Constants
@@ -9,7 +9,7 @@ import { ContainerHeader } from '../../containerHeader';
 // eslint-disable-next-line
 import styles from './collapsibleCardStyles';
 
-class CollapsibleCardView extends Component {
+class CollapsibleCardView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    expanded                - For is collapsible open or close declaration prop.

src/components/comments/view/commentsView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, FlatList } from 'react-native';
 
 // Constants
@@ -12,7 +12,7 @@ import { IconButton } from '../../iconButton';
 // Styles
 // import styles from './commentStyles';
 
-class CommentsView extends Component {
+class CommentsView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/commentsDisplay/container/commentsDisplayContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import CommentsDisplayView from '../view/commentsDisplayView';
 
@@ -8,7 +8,7 @@ import CommentsDisplayView from '../view/commentsDisplayView';
  *
  */
 
-class CommentsContainer extends Component {
+class CommentsContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/commentsDisplay/view/commentsDisplayView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { View } from 'react-native';
 
 // Constants
@@ -10,7 +10,7 @@ import { Comments } from '../../comments';
 // Styles
 // import styles from './commentsDisplayStyles';
 
-class CommentsDisplayView extends Component {
+class CommentsDisplayView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/containerHeader/view/containerHeaderView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, Text } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
@@ -9,12 +9,12 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 // Styles
 import styles from './containerHeaderStyles';
 
-class ContainerHeaderView extends Component {
+class ContainerHeaderView extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    title            - Renderable title for header.
-    *
-    */
+   * ------------------------------------------------
+   *   @prop { type }    title            - Renderable title for header.
+   *
+   */
   constructor(props) {
     super(props);
     this.state = {};

src/components/editorElements/summaryArea/view/summaryAreaView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, Text } from 'react-native';
 // Constants
 
@@ -7,7 +7,7 @@ import { View, Text } from 'react-native';
 import styles from './summaryAreaStyles';
 import globalStyles from '../../../../globalStyles';
 
-export default class SummaryAreaView extends Component {
+export default class SummaryAreaView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

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

@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 // Constants
 
 // Components
 import { MarkdownEditor } from '../../../markdownEditor';
 
-export default class TextAreaView extends Component {
+export default class TextAreaView extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    name                - Description....
-    */
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
   constructor(props) {
     super(props);

src/components/header/container/headerContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { withNavigation } from 'react-navigation';
 import { connect } from 'react-redux';
 
@@ -8,9 +8,6 @@ import { connect } from 'react-redux';
 
 // Constants
 
-// Utilities
-import { getReputation } from '../../../utils/user';
-
 // Component
 import HeaderView from '../view/headerView';
 
@@ -20,7 +17,7 @@ import HeaderView from '../view/headerView';
  *
  */
 
-class HeaderContainer extends Component {
+class HeaderContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
@@ -53,11 +50,11 @@ class HeaderContainer extends Component {
     if (isReverse && selectedUser) {
       displayName = selectedUser.display_name;
       username = selectedUser.name;
-      reputation = getReputation(selectedUser.reputation);
+      reputation = selectedUser.reputation;
     } else if (!isReverse) {
       displayName = currentAccount.display_name;
       username = currentAccount.name;
-      reputation = getReputation(currentAccount.reputation);
+      reputation = currentAccount.reputation;
     }
 
     return (

src/components/header/view/headerView.js

@@ -78,7 +78,7 @@ class HeaderView extends Component {
             {displayName && <Text style={styles.title}>{displayName}</Text>}
             <Text style={styles.subTitle}>
               {`@${username}`}
-              {` (${reputation})`}
+              {reputation && ` (${reputation})`}
             </Text>
           </View>
         ) : (

src/components/icon/container/iconContainer.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 // Components
 import Icon from '../view/iconView';
 
-class IconContainer extends Component {
+class IconContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/icon/view/iconView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 
 import { Platform, View, Text } from 'react-native';
 
@@ -12,7 +12,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import styles from './iconStyles';
 
-class IconView extends Component {
+class IconView extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/informationArea/view/informationAreaView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, Text } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
@@ -9,13 +9,13 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 // Styles
 import styles from './informationAreaStyles';
 
-class FormInputView extends Component {
+class FormInputView extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { string }     description       - Description texts.
-    *   @prop { string }     iconName          - For icon render name.
-    *
-    */
+   * ------------------------------------------------
+   *   @prop { string }     description       - Description texts.
+   *   @prop { string }     iconName          - For icon render name.
+   *
+   */
   constructor(props) {
     super(props);
 

src/components/leaderBoard/view/leaderBoardView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
 // Constants
@@ -7,15 +7,15 @@ import { View } from 'react-native';
 
 // Styles
 // eslint-disable-next-line
-import styles from "./leaderBoardStyles";
+import styles from './leaderBoardStyles';
 
 /*
-*            Props Name        Description                                     Value
-*@props -->  props name here   description here                                Value Type Here
-*
-*/
+ *            Props Name        Description                                     Value
+ *@props -->  props name here   description here                                Value Type Here
+ *
+ */
 
-class LeaderBoardView extends Component {
+class LeaderBoardView extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/loginHeader/view/loginHeaderView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View, Text, Image, SafeAreaView,
 } from 'react-native';
@@ -10,7 +10,7 @@ import { LineBreak } from '../../basicUIElements';
 // Styles
 import styles from './loginHeaderStyles';
 
-class LoginHeaderView extends Component {
+class LoginHeaderView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { string }    title            - Title for header string.

src/components/modal/view/modalView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   Modal as ModalBox, View, Text, SafeAreaView,
 } from 'react-native';
@@ -12,7 +12,7 @@ import styles from './modalStyles';
  *
  */
 
-export default class Modal extends Component {
+export default class Modal extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
@@ -50,7 +50,7 @@ export default class Modal extends Component {
           isFullScreen ? styles.fullModal : styles.centerModal,
         ]}
         transparent={isTransparent}
-        animationType={animationType || "fade"}
+        animationType={animationType || 'fade'}
         visible={isOpen}
         onRequestClose={() => this._handleOnClose(this)}
         onShow={() => this._handleOnOpen(this)}

src/components/notification/view/notificationView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { View, ScrollView, FlatList } from 'react-native';
 import { injectIntl } from 'react-intl';
 
@@ -17,7 +17,7 @@ import {
 // Styles
 import styles from './notificationStyles';
 
-class NotificationView extends Component {
+class NotificationView extends PureComponent {
   /* Props
     * ------------------------------------------------
     *   @prop { type }    name                - Description....

src/components/notificationLine/view/notificationLineView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View, Text, Image, TouchableHighlight,
 } from 'react-native';
@@ -12,7 +12,7 @@ import { injectIntl } from 'react-intl';
 // eslint-disable-next-line
 import styles from './notificationLineStyles';
 
-class NotificationLineView extends Component {
+class NotificationLineView extends PureComponent {
   /* Props
     * ------------------------------------------------
     *   @prop { type }    name                - Description....

src/components/numericKeyboard/views/numericKeyboardView.js

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
 import { CircularButton, IconButton } from '../../buttons';
 
 import styles from './numericKeyboardStyles';
 
-class NumericKeyboard extends Component {
+class NumericKeyboard extends PureComponent {
   /* Props
    *   @prop { func }    onPress            - Function will trigger when any button clicked.
    */

src/components/percentBar/view/percentBarView.js

@@ -1,7 +1,5 @@
-import React, { Component } from 'react';
-import {
-  View, Dimensions, Text, TouchableOpacity,
-} from 'react-native';
+import React, { PureComponent } from 'react';
+import { View, Dimensions, Text } from 'react-native';
 
 // Constants
 
@@ -10,7 +8,7 @@ import {
 // Styles
 import styles from './percentBarStyles';
 
-class PercentBarView extends Component {
+class PercentBarView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { string }    barColor                - Bar color proferties

src/components/pinAnimatedInput/views/pinAnimatedInputView.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { Animated } from 'react-native';
 
 // Styles
 import styles from './pinAnimatedInputStyles';
 
-class PinAnimatedInput extends Component {
+class PinAnimatedInput extends PureComponent {
   /* Props
    *
    *   @prop { string }    pin            - Description.

src/components/postButton/container/postButtonContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { withNavigation } from 'react-navigation';
 import { isCollapsePostButton } from '../../../redux/actions/uiAction';
@@ -6,7 +6,7 @@ import { isCollapsePostButton } from '../../../redux/actions/uiAction';
 // Components
 import PostButtonView from '../view/postButtonView';
 
-class PostButtonContainer extends Component {
+class PostButtonContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/postCard/container/postCardContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { withNavigation } from 'react-navigation';
 import { connect } from 'react-redux';
 
@@ -15,7 +15,7 @@ import { default as ROUTES } from '../../../constants/routeNames';
  *
  */
 
-class PostCardContainer extends Component {
+class PostCardContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -24,12 +24,13 @@ class PostCardContainer extends Component {
   }
 
   _handleOnUserPress = (username) => {
-    const { navigation, currentAccount } = this.props;
-    if (currentAccount.name !== username) {
+    const { navigation, currentAccount, content } = this.props;
+    if (content && currentAccount.name !== content.author) {
       navigation.navigate({
         routeName: ROUTES.SCREENS.PROFILE,
         params: {
-          username,
+          username: content.author,
+          reputation: content.author_reputation,
         },
         key: username,
       });

src/components/postCard/view/postCardView.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
-import {
-  Image, TouchableOpacity, Text, View,
-} from 'react-native';
-// import FastImage from 'react-native-fast-image';
+import { TouchableOpacity, Text, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
 import { PostHeaderDescription } from '../../postElements';
 import { PostDropdown } from '../../postDropdown';
 import { Icon } from '../../icon';
@@ -34,10 +32,10 @@ class PostCard extends Component {
   // Component Functions
 
   _handleOnUserPress = () => {
-    const { handleOnUserPress, content } = this.props;
+    const { handleOnUserPress } = this.props;
 
-    if (handleOnUserPress && content) {
-      handleOnUserPress(content.author);
+    if (handleOnUserPress) {
+      handleOnUserPress();
     }
   };
 
@@ -84,7 +82,7 @@ class PostCard extends Component {
             onPress={() => this._handleOnContentPress()}
           >
             {!isHideImage && (
-              <Image source={_image} style={styles.image} defaultSource={DEFAULT_IMAGE} />
+              <FastImage source={_image} style={styles.image} defaultSource={DEFAULT_IMAGE} />
             )}
             <View style={[styles.postDescripton]}>
               <Text style={styles.title}>{content.title}</Text>

src/components/postDropdown/container/postDropdownContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { withNavigation } from 'react-navigation';
 import { Alert } from 'react-native';
@@ -24,7 +24,7 @@ import PostDropdownView from '../view/postDropdownView';
  *
  */
 
-class PostDropdownContainer extends Component {
+class PostDropdownContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/postDropdown/view/postDropdownView.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 // Constants
 // Components
 import { DropdownButton } from '../../dropdownButton';
 
-class PostDropdownView extends Component {
+class PostDropdownView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/postElements/body/view/postBodyView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Dimensions, Linking } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import HTML from 'react-native-html-renderer';
@@ -12,7 +12,7 @@ import { default as ROUTES } from '../../../../constants/routeNames';
 
 const WIDTH = Dimensions.get('window').width;
 
-class PostBody extends Component {
+class PostBody extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/postElements/headerDescription/view/postHeaderDescription.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { withNavigation } from 'react-navigation';
 
@@ -15,7 +15,7 @@ import { default as ROUTES } from '../../../../constants/routeNames';
 // Constants
 const DEFAULT_IMAGE = require('../../../../assets/esteem.png');
 
-class PostHeaderDescription extends Component {
+class PostHeaderDescription extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
@@ -25,7 +25,7 @@ class PostHeaderDescription extends Component {
 
   // Component Functions
   _handleOnUserPress = (username) => {
-    const { navigation, profileOnPress } = this.props;
+    const { navigation, profileOnPress, reputation } = this.props;
 
     if (profileOnPress) {
       profileOnPress(username);
@@ -34,6 +34,7 @@ class PostHeaderDescription extends Component {
         routeName: ROUTES.SCREENS.PROFILE,
         params: {
           username,
+          reputation,
         },
         key: username,
       });

src/components/postElements/tags/view/tagsView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, FlatList } from 'react-native';
 
 // Components
@@ -8,12 +8,12 @@ import { Tag } from '../../../basicUIElements';
 import styles from './tagsStyles';
 
 // Constants
-class TagsView extends Component {
+class TagsView extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
   }
-
+  // TODO: Can be stateless
   // Component Life Cycles
 
   // Component Functions

src/components/postForm/view/postFormView.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 
-class PostFormView extends Component {
+class PostFormView extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/postView/view/postDisplayView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import {
   View, Text, ScrollView, Dimensions,
 } from 'react-native';
@@ -16,7 +16,8 @@ import { CommentsDisplay } from '../../commentsDisplay';
 import styles from './postDisplayStyles';
 
 const HEIGHT = Dimensions.get('window').width;
-class PostDisplayView extends Component {
+
+class PostDisplayView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/posts/container/postsContainer.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'react-redux';
 
 // Component
@@ -13,7 +13,7 @@ import { isCollapsePostButton } from '../../../redux/actions/uiAction';
  *
  */
 
-class PostsContainer extends Component {
+class PostsContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/profileSummary/view/profileSummaryView.js

@@ -1,6 +1,12 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import {
-  View, Image, Text, TouchableOpacity, Dimensions, ActivityIndicator,
+  View,
+  Image,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  ActivityIndicator,
+  Linking,
 } from 'react-native';
 
 // Constants
@@ -17,11 +23,11 @@ import styles from './profileSummaryStyles';
 
 const DEVICE_WIDTH = Dimensions.get('window').width;
 
-class ProfileSummaryView extends Component {
+class ProfileSummaryView extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    name                - Description....
-    */
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
   constructor(props) {
     super(props);
@@ -33,6 +39,9 @@ class ProfileSummaryView extends Component {
   // Component Life Cycles
 
   // Component Functions
+  _handleOnPressLink = (url) => {
+    Linking.openURL(url);
+  };
 
   render() {
     const { isShowPercentText } = this.state;
@@ -67,10 +76,10 @@ class ProfileSummaryView extends Component {
     const rowLength = location
       ? location.length
       : null + link
-        ? link.length
-        : null + date
-          ? date.length
-          : null;
+      ? link.length
+      : null + date
+      ? date.length
+      : null;
 
     const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 15;
     const followButtonIcon = !isFollowing ? 'user-follow' : 'user-unfollow';
@@ -80,7 +89,14 @@ class ProfileSummaryView extends Component {
       <Fragment>
         <View style={[isColumn ? styles.textWithIconWrapperColumn : styles.textWithIconWrapper]}>
           {!!location && <TextWithIcon text={location} iconName="md-navigate" />}
-          {!!link && <TextWithIcon isClickable text={link} iconName="md-globe" />}
+          {!!link && (
+            <TextWithIcon
+              isClickable
+              onPress={() => this._handleOnPressLink(link)}
+              text={link}
+              iconName="md-globe"
+            />
+          )}
           {!!date && <TextWithIcon text={date} iconName="md-calendar" />}
         </View>
         <View />
@@ -114,9 +130,12 @@ class ProfileSummaryView extends Component {
               <TouchableOpacity onPress={() => handleOnFollowsPress(false)}>
                 <View style={styles.followCountWrapper}>
                   <Text style={styles.followCount}>{followerCount}</Text>
-                  <Text style={styles.followText}> {intl.formatMessage({
-                    id: 'profile.follower',
-                  })}</Text>
+                  <Text style={styles.followText}>
+                    {' '}
+                    {intl.formatMessage({
+                      id: 'profile.follower',
+                    })}
+                  </Text>
                 </View>
               </TouchableOpacity>
               <TouchableOpacity onPress={() => handleOnFollowsPress(true)}>

src/components/searchModal/container/searchModalContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { withNavigation } from 'react-navigation';
 
 // Services and Actions
@@ -21,7 +21,7 @@ import SearchModalView from '../view/searchModalView';
  *
  */
 
-class SearchModalContainer extends Component {
+class SearchModalContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

src/components/searchModal/view/searchModalView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View, Text, TextInput, FlatList, TouchableHighlight, SafeAreaView,
 } from 'react-native';
@@ -15,7 +15,7 @@ import { Modal } from '../..';
 // eslint-disable-next-line
 import styles from './searchModalStyles';
 
-class SearchModalView extends Component {
+class SearchModalView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/settingsItem/view/settingsItemView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, Text } from 'react-native';
 
 // Constants
@@ -10,7 +10,7 @@ import { ToggleSwitch } from '../../toggleSwitch';
 // Styles
 import styles from './settingsItemStyles';
 
-class SettingsItemView extends Component {
+class SettingsItemView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/tabBar/view/tabBarView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import {
   Text,
@@ -13,7 +13,7 @@ import {
 // Styles
 import styles from './tabBarStyles';
 
-class TabBar extends Component {
+class TabBar extends PureComponent {
   /* Props
     * ------------------------------------------------ TODO: Fill fallowlines
     *   @prop { type }    name            - Description.

src/components/toggleSwitch/view/toggleSwitchView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, TouchableOpacity, Animated } from 'react-native';
 
 // Constants
@@ -9,7 +9,7 @@ import { View, TouchableOpacity, Animated } from 'react-native';
 // eslint-disable-next-line
 import styles from './toggleSwitchStyles';
 
-class ToggleSwitchView extends Component {
+class ToggleSwitchView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/transaction/container/transactionContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 // Component
 import TransactionView from '../view/transactionView';
@@ -10,7 +10,7 @@ import TransactionView from '../view/transactionView';
  *
  */
 
-class TransactionContainer extends Component {
+class TransactionContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/transaction/view/transactionView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { injectIntl } from 'react-intl';
 
 // Utilities
@@ -9,7 +9,7 @@ import { getTransactionData } from '../../../utils/wallet';
 import { WalletLineItem, Card } from '../../basicUIElements';
 import { CollapsibleCard } from '../../collapsibleCard';
 
-class TransactionView extends Component {
+class TransactionView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/upvote/container/upvoteContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 // Realm
@@ -16,7 +16,7 @@ import UpvoteView from '../view/upvoteView';
  *
  */
 
-class UpvoteContainer extends Component {
+class UpvoteContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/userAvatar/view/userAvatarView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Image } from 'react-native';
 import styles from './userAvatarStyles';
 
@@ -9,23 +9,43 @@ const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
  *   @prop { type }    name                - Description....
  */
 
-const UserAvatarView = ({ username, size, style }) => {
-  const imageSize = size === 'xl' ? 'large' : 'small';
-  const _avatar = username
-    ? { uri: `https://steemitimages.com/u/${username}/avatar/${imageSize}` }
-    : DEFAULT_IMAGE;
-  let _size = 32;
+class UserAvatarView extends Component {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
-  if (size === 'xl') {
-    _size = 64;
+  constructor(props) {
+    super(props);
+    this.state = {};
   }
 
-  return (
-    <Image
-      style={[styles.avatar, style, { width: _size, height: _size, borderRadius: _size / 2 }]}
-      source={_avatar}
-    />
-  );
-};
+  // Component Life Cycles
+  shouldComponentUpdate(nextProps) {
+    return nextProps.username !== this.props.username;
+  }
+  // Component Functions
+
+  render() {
+    const { username, size, style } = this.props;
+    const imageSize = size === 'xl' ? 'large' : 'small';
+    const _avatar = username
+      ? { uri: `https://steemitimages.com/u/${username}/avatar/${imageSize}` }
+      : DEFAULT_IMAGE;
+    let _size = 32;
+
+    if (size === 'xl') {
+      _size = 64;
+    }
+
+    // eslint-disable-next-line
+    return (
+      <Image
+        style={[styles.avatar, style, { width: _size, height: _size, borderRadius: _size / 2 }]}
+        source={_avatar}
+      />
+    );
+  }
+}
 
 export default UserAvatarView;

src/components/votersDisplay/container/votersDisplayContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { withNavigation } from 'react-navigation';
 
 // Services and Actions
@@ -19,7 +19,7 @@ import VotersDisplayView from '../view/votersDisplayView';
  *
  */
 
-class VotersDisplayContainer extends Component {
+class VotersDisplayContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/wallet/view/walletView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
@@ -14,7 +14,7 @@ import { WalletDetailsPlaceHolder } from '../../basicUIElements';
 // Styles
 import styles from './walletStyles';
 
-class WalletView extends Component {
+class WalletView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/components/walletDetails/container/walletDetailsContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 // Component
 import WalletDetailsView from '../view/walletDetailsView';
@@ -10,7 +10,7 @@ import WalletDetailsView from '../view/walletDetailsView';
  *
  */
 
-class WalletContainer extends Component {
+class WalletContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/components/walletDetails/view/walletDetailsView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
 // Constants
@@ -13,7 +13,7 @@ import { vestsToSp } from '../../../utils/conversions';
 // eslint-disable-next-line
 import styles from './walletDetailsStyles';
 
-class WalletDetailsView extends Component {
+class WalletDetailsView extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/providers/steem/dsteem.js

@@ -7,6 +7,7 @@ import { getUnreadActivityCount } from '../esteem/esteem';
 import { decryptKey } from '../../utils/crypto';
 import { parsePosts, parsePost, parseComments } from '../../utils/postParser';
 import { getName, getAvatar } from '../../utils/user';
+import { getReputation } from '../../utils/reputation';
 
 // Constant
 import AUTH_TYPE from '../../constants/authType';
@@ -70,6 +71,7 @@ export const getUser = async (user) => {
     const rcPower = await client.call('rc_api', 'find_rc_accounts', { accounts: [user] });
     const unreadActivityCount = await getUnreadActivityCount({ user });
 
+    account[0].reputation = getReputation(account[0].reputation);
     account[0].username = account[0].name;
     account[0].unread_activity_count = unreadActivityCount;
     account[0].rc_manabar = rcPower.rc_accounts[0].rc_manabar;

src/screens/follows/screen/followsScreen.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View, Text, FlatList, ActivityIndicator,
 } from 'react-native';
@@ -13,7 +13,7 @@ import { UserListItem } from '../../../components/basicUIElements';
 // Utils
 import styles from './followScreenStyles';
 
-class FollowsScreen extends Component {
+class FollowsScreen extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/screens/home/container/homeContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 // Component
@@ -10,7 +10,7 @@ import HomeScreen from '../screen/homeScreen';
  *
  */
 
-class HomeContainer extends Component {
+class HomeContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/screens/launch/screen/launchScreen.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { View, Text } from 'react-native';
 
 // Constants
@@ -9,7 +9,7 @@ import { Logo } from '../../../components';
 
 // import styles from './launchStyles';
 
-class LaunchScreen extends Component {
+class LaunchScreen extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/screens/login/container/loginContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 // Services and Actions
@@ -18,7 +18,7 @@ import LoginScreen from '../screen/loginScreen';
  *
  */
 
-class LoginContainer extends Component {
+class LoginContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/screens/login/screen/loginScreen.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View, Linking, StatusBar, Platform, Alert,
 } from 'react-native';
@@ -19,12 +19,12 @@ import { FormInput } from '../../../components/formInput';
 import { InformationArea } from '../../../components/informationArea';
 import { Login } from '../../../providers/steem/auth';
 import { LoginHeader } from '../../../components/loginHeader';
+import { lookupAccounts } from '../../../providers/steem/dsteem';
 import { MainButton } from '../../../components/mainButton';
+import { Modal } from '../../../components';
 import { TabBar } from '../../../components/tabBar';
 import { TextButton } from '../../../components/buttons';
-import { lookupAccounts } from '../../../providers/steem/dsteem';
 import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
-import { Modal } from '../../../components';
 import SteemConnect from '../../steem-connect/steemConnect';
 
 // Constants
@@ -33,7 +33,7 @@ import { default as ROUTES } from '../../../constants/routeNames';
 // Styles
 import styles from './loginStyles';
 
-class LoginScreen extends Component {
+class LoginScreen extends PureComponent {
   constructor(props) {
     super(props);
 

src/screens/messages/container/messagesContainer.js

@@ -1,13 +1,4 @@
-import React, { Component } from 'react';
-// import { connect } from 'react-redux';
-
-// Services and Actions
-
-// Middleware
-
-// Constants
-
-// Utilities
+import React, { PureComponent } from 'react';
 
 // Component
 import MessagesScreen from '../screen/messagesScreen';
@@ -18,7 +9,7 @@ import MessagesScreen from '../screen/messagesScreen';
  *
  */
 
-class MessagesContainer extends Component {
+class MessagesContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
@@ -29,9 +20,6 @@ class MessagesContainer extends Component {
   // Component Functions
 
   render() {
-    // eslint-disable-next-line
-    //const {} = this.props;
-
     return <MessagesScreen {...this.props} />;
   }
 }

src/screens/messages/screen/messagesScreen.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { injectIntl } from 'react-intl';
 
 // Constants
@@ -11,11 +11,11 @@ import { NoPost } from '../../../components/basicUIElements';
 import styles from './messagesStyle';
 import MESSAGES_IMAGE from '../../../assets/keep_calm.png';
 
-class MessagesScreen extends Component {
+class MessagesScreen extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    name                - Description....
-    */
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
   constructor(props) {
     super(props);

src/screens/notification/screen/notificationScreen.js

@@ -13,7 +13,6 @@ import { NoPost } from '../../../components/basicUIElements';
 
 // Styles
 import MESSAGES_IMAGE from '../../../assets/keep_calm.png';
-import globalStyles from '../../../globalStyles';
 
 class NotificationScreen extends PureComponent {
   constructor(props) {

src/screens/pinCode/screen/pinCodeScreen.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import { NumericKeyboard, PinAnimatedInput } from '../../../components';
@@ -6,7 +6,7 @@ import { UserAvatar } from '../../../components/userAvatar';
 
 import styles from './pinCodeStyles';
 
-class PinCodeScreen extends Component {
+class PinCodeScreen extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

src/screens/post/screen/postScreen.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 
 // Constants
 
@@ -7,7 +7,7 @@ import { BasicHeader } from '../../../components/basicHeader';
 import { PostDisplay } from '../../../components/postView';
 import { PostDropdown } from '../../../components/postDropdown';
 
-class PostScreen extends Component {
+class PostScreen extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/screens/profile/container/profileContainer.js

@@ -32,6 +32,7 @@ class ProfileContainer extends Component {
       isReady: false,
       isReverseHeader: !!(props.navigation.state && props.navigation.state.params),
       user: null,
+      selectedQuickProfile: null,
     };
   }
 
@@ -46,6 +47,16 @@ class ProfileContainer extends Component {
 
     if (selectedUser) {
       this._loadProfile(selectedUser.username);
+
+      if (selectedUser.username) {
+        const selectedQuickProfile = {
+          reputation: selectedUser.reputation,
+          name: selectedUser.username,
+        };
+
+        this.setState({ selectedQuickProfile });
+      }
+
       this.setState({ isReverseHeader: true });
     } else {
       this._loadProfile(currentAccount.name);
@@ -196,6 +207,14 @@ class ProfileContainer extends Component {
 
     this._fetchProfile(selectedUser);
 
+    this.setState(prevState => ({
+      selectedQuickProfile: {
+        ...prevState.selectedQuickProfile,
+        display_name: user.display_name,
+        reputation: user.reputation,
+      },
+    }));
+
     this.setState(
       {
         user,
@@ -241,6 +260,8 @@ class ProfileContainer extends Component {
       isReverseHeader,
       user,
       username,
+      avatar,
+      selectedQuickProfile,
     } = this.state;
     const { isDarkTheme, isLoggedIn } = this.props;
 
@@ -248,6 +269,8 @@ class ProfileContainer extends Component {
       <Fragment>
         <ProfileScreen
           about={user && user.about && user.about.profile}
+          avatar={avatar}
+          selectedQuickProfile={selectedQuickProfile}
           comments={comments}
           error={error}
           follows={follows}

src/screens/profile/screen/profileScreen.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { View, ScrollView } from 'react-native';
 import { injectIntl } from 'react-intl';
 
@@ -20,7 +20,7 @@ import { getRcPower, getVotingPower } from '../../../utils/manaBar';
 // Styles
 import styles from './profileStyles';
 
-class ProfileScreen extends Component {
+class ProfileScreen extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
@@ -44,6 +44,7 @@ class ProfileScreen extends Component {
       isReverseHeader,
       user,
       username,
+      selectedQuickProfile,
     } = this.props;
     let _about;
     let coverImage;
@@ -69,7 +70,11 @@ class ProfileScreen extends Component {
     }
     return (
       <Fragment>
-        <Header key={user && user.username} selectedUser={user} isReverse={isReverseHeader} />
+        <Header
+          key={selectedQuickProfile && selectedQuickProfile.name}
+          selectedUser={selectedQuickProfile}
+          isReverse={isReverseHeader}
+        />
         <View style={styles.container}>
           {!isReady ? (
             <ProfileSummaryPlaceHolder />

src/screens/settings/screen/settingsScreen.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { ScrollView, View } from 'react-native';
 import { injectIntl } from 'react-intl';
 
@@ -13,7 +13,7 @@ import { SettingsItem } from '../../../components/settingsItem';
 // Styles
 import globalStyles from '../../../globalStyles';
 
-class SettingsScreen extends Component {
+class SettingsScreen extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....

src/screens/steem-connect/steemConnect.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View, WebView, Alert } from 'react-native';
 import { connect } from 'react-redux';
 
@@ -12,7 +12,7 @@ import { login as loginAction, openPinCodeModal } from '../../redux/actions/appl
 // Constants
 import { default as ROUTES } from '../../constants/routeNames';
 
-class SteemConnect extends Component {
+class SteemConnect extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -20,7 +20,7 @@ class SteemConnect extends Component {
     };
   }
 
-  onNavigationStateChange(event) {
+  _onNavigationStateChange = (event) => {
     let accessToken;
     const { dispatch, setPinCodeState, handleOnModalClose } = this.props;
     const { isLoading } = this.state;
@@ -52,7 +52,7 @@ class SteemConnect extends Component {
           });
       }
     }
-  }
+  };
 
   render() {
     return (
@@ -65,7 +65,7 @@ class SteemConnect extends Component {
               steemConnectOptions.redirect_uri,
             )}&scope=${encodeURIComponent(steemConnectOptions.scope)}`,
           }}
-          onNavigationStateChange={this.onNavigationStateChange.bind(this)}
+          onNavigationStateChange={this._onNavigationStateChange}
           ref={(ref) => {
             this.webview = ref;
           }}

src/screens/voters/container/votersContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 // Services and Actions
 
@@ -17,7 +17,7 @@ import VotersScreen from '../screen/votersScreen';
  *
  */
 
-class VotersContainer extends Component {
+class VotersContainer extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};

src/screens/voters/screen/votersScreen.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 import { injectIntl } from 'react-intl';
 
@@ -13,11 +13,11 @@ import { VotersDisplay } from '../../../components/votersDisplay';
 import { isBefore } from '../../../utils/time';
 import globalStyles from '../../../globalStyles';
 
-class VotersScreen extends Component {
+class VotersScreen extends PureComponent {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    name                - Description....
-    */
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
   constructor(props) {
     super(props);

src/utils/markdownToHtml.js

@@ -16,6 +16,9 @@ const centerRegex = /(<center>)/g;
 const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))(.*)/gim;
 const pullRightLeftRegex = /(<div class="[^"]*?pull-[^"]*?">(.*?)(<[/]div>))/g;
 const linkRegex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
+const markdownImageRegex = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g;
+const urlRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gm;
+
 export const markDown2Html = (input) => {
   if (!input) {
     return '';
@@ -34,18 +37,17 @@ export const markDown2Html = (input) => {
     output = createYoutubeIframe(output);
   }
 
-  // Has bug
-  // if (dTubeRegex.test(output)) {
-  //   output = createDtubeIframe(output);
-  // }
+  if (dTubeRegex.test(output)) {
+    output = createDtubeIframe(output);
+  }
 
   if (pullRightLeftRegex.test(output)) {
     output = changePullRightLeft(output);
   }
 
-  if (imgRegex.test(output)) {
-    output = createImage(output);
-  }
+  // if (imgRegex.test(output)) {
+  //   output = createImage(output);
+  // }
 
   if (vimeoRegex.test(output)) {
     output = createVimeoIframe(output);
@@ -59,10 +61,6 @@ export const markDown2Html = (input) => {
     output = createCenterImage(output);
   }
 
-  if (onlyImageDoubleLinkRegex.test(output)) {
-    output = createFromDoubleImageLink(output);
-  }
-
   if (onlyImageLinkRegex.test(output)) {
     output = createImage(output);
   }
@@ -75,6 +73,14 @@ export const markDown2Html = (input) => {
     output = steemitUrlHandle(output);
   }
 
+  if (markdownImageRegex.test(output)) {
+    output = changeMarkdownImage(output);
+  }
+
+  // if (onlyImageDoubleLinkRegex.test(output)) {
+  //   output = createFromDoubleImageLink(output);
+  // }
+
   output = md.render(output);
 
   return output;
@@ -97,6 +103,17 @@ export const replaceTags = input => input.replace(tagsRegex, (tag) => {
 
 export const removeOnlyPTag = input => input;
 
+const changeMarkdownImage = input => input.replace(markdownImageRegex, (link) => {
+  const markdownMatch = link.match(markdownImageRegex);
+  if (markdownMatch[0]) {
+    const firstMarkdownMatch = markdownMatch[0];
+    const _link = firstMarkdownMatch.match(urlRegex)[0];
+
+    return `<img data-href="${`https://img.esteem.app/500x0/${_link}`}" src="${`https://img.esteem.app/400x0/${_link}`}">`;
+  }
+  return link;
+});
+
 const centerStyling = input => input.replace(centerRegex, () => '<center style="text-align:center;">');
 
 const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
@@ -110,7 +127,7 @@ const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
 const changePullRightLeft = input => input.replace(pullRightLeftRegex, (item) => {
   const imageLink = item.match(linkRegex)[0];
 
-  return `<center style="text-align:center;"><img src="${imageLink}"/></center><br>`;
+  return `<center style="text-align:center;"><img src="${`https://img.esteem.app/400x0/${imageLink}`}"/></center><br>`;
 });
 
 const steemitUrlHandle = input => input.replace(postRegex, (link) => {
@@ -122,27 +139,43 @@ const steemitUrlHandle = input => input.replace(postRegex, (link) => {
   return `<a class="markdown-post-link" href="${permlink}" data_tag={${tag}} data_author="${author}">/${permlink}</a>`;
 });
 
-const createImage = input => input.replace(onlyImageLinkRegex, link => `<img data-href="${link}" src="${link}">`);
+const createImage = input => input.replace(
+  onlyImageLinkRegex,
+  link => `<img data-href="${`https://img.esteem.app/300x0/${link}`}" src="${`https://img.esteem.app/400x0/${link}`}">`,
+);
 
 const createFromDoubleImageLink = input => input.replace(onlyImageDoubleLinkRegex, (link) => {
   const _link = link.trim();
-  return `<img data-href="${_link}" src="${_link}">`;
+  return `<img data-href="https://img.esteem.app/300x0/${_link}" src="https://img.esteem.app/300x0/${_link}">`;
 });
 
 const createYoutubeIframe = input => input.replace(youTubeRegex, (link) => {
-  const videoID = link.split('=')[1];
+  const execVideo = youTubeRegex.exec(link);
+  const match = link.match(youTubeRegex);
 
-  const embedLink = `https://www.youtube.com/embed/${videoID}`;
+  if (execVideo[1] && match) {
+    const videoLink = execVideo[1];
+    const embedLink = `https://www.youtube.com/embed/${videoLink}`;
 
-  return iframeBody(embedLink);
+    return iframeBody(embedLink);
+  }
+
+  return link;
 });
 
 const createDtubeIframe = input => input.replace(dTubeRegex, (link) => {
   const execLink = dTubeRegex.exec(link);
+  const dTubeMatch = link.match(dTubeRegex)[0];
 
-  const embedLink = `https://emb.d.tube/#!/${execLink[2]}/${execLink[3]}`;
+  if (execLink[2] && execLink[3]) {
+    const embedLink = `https://emb.d.tube/#!/${execLink[2]}/${execLink[3]}`;
 
-  return iframeBody(embedLink);
+    return iframeBody(embedLink);
+  }
+  if (dTubeMatch) {
+    return iframeBody(dTubeMatch);
+  }
+  return link;
 });
 
 const createVimeoIframe = input => input.replace(vimeoRegex, (link) => {
@@ -153,5 +186,5 @@ const createVimeoIframe = input => input.replace(vimeoRegex, (link) => {
   return iframeBody(embedLink);
 });
 
-const iframeBody = link => `<iframe frameborder='0' src="${link}"></iframe>`;
+const iframeBody = link => `<iframe frameborder='0' allowfullscreen src='${link}'></iframe>`;
 const imageBody = link => `<img data-href="${link}" src="${link}">`;

src/utils/postParser.js

@@ -12,7 +12,7 @@ export const parsePost = (post, currentUserName) => {
   }
 
   post.json_metadata = JSON.parse(post.json_metadata);
-  post.json_metadata.image ? (post.image = post.json_metadata.image[0]) : '';
+  post.image = postImage(post.json_metadata, post.body);
   post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(2);
   post.created = getTimeFromNow(post.created);
   post.vote_count = post.active_votes.length;
@@ -52,6 +52,33 @@ export const parsePost = (post, currentUserName) => {
 
 const isVoted = (activeVotes, currentUserName) => activeVotes.some(v => v.voter === currentUserName && v.percent > 0);
 
+const postImage = (metaData, body) => {
+  const markdownImageRegex = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g;
+  const urlRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gm;
+  const imageRegex = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png)/g;
+  let imageLink;
+
+  if (metaData && metaData.image && metaData.image[0]) {
+    imageLink = metaData.image[0];
+  } else if (body && markdownImageRegex.test(body)) {
+    const markdownMatch = body.match(markdownImageRegex);
+    if (markdownMatch[0]) {
+      const firstMarkdownMatch = markdownMatch[0];
+      imageLink = firstMarkdownMatch.match(urlRegex)[0];
+    }
+  }
+
+  if(!imageLink && imageRegex.test(body)) {
+    const imageMatch = body.match(imageRegex);
+    imageLink = imageMatch[0];
+  }
+
+  if (imageLink) {
+    return `https://img.esteem.app/300x0/${imageLink}`;
+  }
+  return '';
+};
+
 export const protocolUrl2Obj = (url) => {
   let urlPart = url.split('://')[1];
 

src/utils/user.js

@@ -1,5 +1,3 @@
-import { getUserDataWithUsername } from '../realm/realm';
-
 export const getReputation = (input) => {
   if (input === 0) {
     return 25;
@@ -38,10 +36,3 @@ export const getAvatar = about => {
   }
   return null;
 };
-
-// export const formatAccount = account => {
-//   getUserDataWithUsername(account).then(response => {
-//     if (response.length > 0) {
-//     }
-//   });
-// };