Merge pull request #309 from esteemapp/markdownToHtml

Markdown to html

src/components/collapsibleCard/view/collapsibleCardView.js

@@ -35,8 +35,13 @@ class CollapsibleCardView extends PureComponent {
 
   componentWillReceiveProps(nextProps) {
     const { isExpanded, moreHeight } = this.props;
+    const { expanded } = this.state;
 
-    if (!nextProps.isExpanded && isExpanded !== nextProps.isExpanded) {
+    if (
+      !nextProps.isExpanded
+      && isExpanded !== nextProps.isExpanded
+      && expanded !== nextProps.isExpanded
+    ) {
       this._toggleOnPress();
     }
 

src/components/postCard/view/postCardView.js

@@ -60,8 +60,6 @@ class PostCard extends Component {
       ? { uri: content.image, priority: FastImage.priority.high }
       : DEFAULT_IMAGE;
     const reblogedBy = content.reblogged_by && content.reblogged_by[0];
-    // repeat icon
-    // text rebloged by ${reblogedBy}
 
     return (
       <View style={styles.post}>

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

@@ -18,6 +18,9 @@ export default EStyleSheet.create({
     left: -16,
     // height: 50,
   },
+  ul: {
+    color: 'red',
+  },
   commentContainer: {
     paddingHorizontal: 0,
     marginTop: 20,

src/components/upvote/container/upvoteContainer.js

@@ -47,13 +47,13 @@ class UpvoteContainer extends PureComponent {
     } = this.props;
     let author;
     let isVoted;
-    let pendingPayoutValue;
     let permlink;
+    let totalPayout;
 
     if (content) {
       ({ author } = content);
       isVoted = content.is_voted;
-      pendingPayoutValue = content.pending_payout_value;
+      totalPayout = content.total_payout;
       ({ permlink } = content);
     }
 
@@ -66,7 +66,7 @@ class UpvoteContainer extends PureComponent {
         isLoggedIn={isLoggedIn}
         isShowPayoutValue={isShowPayoutValue}
         isVoted={isVoted}
-        pendingPayoutValue={pendingPayoutValue}
+        totalPayout={totalPayout}
         permlink={permlink}
         upvotePercent={upvotePercent}
         pinCode={pinCode}

src/components/upvote/view/upvoteView.js

@@ -120,7 +120,7 @@ class UpvoteView extends Component {
   };
 
   render() {
-    const { isLoggedIn, isShowPayoutValue, pendingPayoutValue } = this.props;
+    const { isLoggedIn, isShowPayoutValue, totalPayout } = this.props;
     const {
       isVoting, amount, sliderValue, isVoted,
     } = this.state;
@@ -167,8 +167,8 @@ class UpvoteView extends Component {
                     name={iconName}
                   />
                 )}
-                {isShowPayoutValue && pendingPayoutValue && (
-                <Text style={styles.payoutValue}>{`$${pendingPayoutValue}`}</Text>
+                {isShowPayoutValue && totalPayout && (
+                <Text style={styles.payoutValue}>{`$${totalPayout}`}</Text>
                 )}
               </Fragment>
             </TouchableOpacity>

src/screens/profile/screen/profileScreen.js

@@ -36,7 +36,9 @@ class ProfileScreen extends PureComponent {
   };
 
   _handleOnSummaryExpanded = () => {
-    this.setState({ isSummaryOpen: true });
+    const { isSummaryOpen } = this.state;
+
+    if (!isSummaryOpen) this.setState({ isSummaryOpen: true });
   };
 
   _handleUIChange = (height) => {

src/utils/formatter.js

@@ -25,4 +25,4 @@ export const makeCountFriendly = (value) => {
   return intlFormat(value);
 };
 
-const intlFormat = num => new Intl.NumberFormat().format(Math.round(num * 10) / 10);
+const intlFormat = num => Math.round(num * 10) / 10;

src/utils/markdownToHtml.js

@@ -1,7 +1,7 @@
 import Remarkable from 'remarkable';
-
+// TODO: Refactoring need!
 const md = new Remarkable({ html: true, breaks: true, linkify: true });
-const isVideo = false;
+
 const imgCenterRegex = /([<center>]http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|PNG|GIF|JPG)[</center>]/g;
 const onlyImageLinkRegex = /([\n]http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|PNG|GIF|JPG)/g;
 const onlyImageDoubleLinkRegex = /(\nhttps)(.*)(?=jpg|gif|png|PNG|GIF|JPG|)/g;
@@ -13,12 +13,14 @@ const dTubeRegex = /(https?:\/\/d.tube.#!\/v\/)(\w+)\/(\w+)/g;
 const authorNameRegex = /(^|[^a-zA-Z0-9_!#$%&*@＠\/]|(^|[^a-zA-Z0-9_+~.-\/]))[@＠]([a-z][-\.a-z\d]+[a-z\d])/gi;
 const tagsRegex = /(^|\s|>)(#[-a-z\d]+)/gi;
 const centerRegex = /(<center>)/g;
-const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))(.*)/gim;
+const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico|PNG|GIF|JPG))/g;
 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;
 const aTagRegex = /(<\s*a[^>]*>(.*?)<\s*[/]\s*a>)/g;
+const imgTagRegex = /(<img[^>]*>)/g;
+const iframeRegex = /(?:<iframe[^>]*)(?:(?:\/>)|(?:>.*?<\/iframe>))/g;
 
 export const markDown2Html = (input) => {
   if (!input) {
@@ -38,22 +40,10 @@ export const markDown2Html = (input) => {
     output = createYoutubeIframe(output);
   }
 
-  // if (dTubeRegex.test(output)) {
-  //   output = createDtubeIframe(output);
-  // }
-
-  if (aTagRegex.test(output)) {
-    output = handleATag(output);
+  if (imgTagRegex.test(output)) {
+    output = handleImageTag(output);
   }
 
-  if (pullRightLeftRegex.test(output)) {
-    output = changePullRightLeft(output);
-  }
-
-  // if (imgRegex.test(output)) {
-  //   output = handleImage(output);
-  // }
-
   if (vimeoRegex.test(output)) {
     output = createVimeoIframe(output);
   }
@@ -62,14 +52,6 @@ export const markDown2Html = (input) => {
     output = createVimeoIframe(output);
   }
 
-  if (imgCenterRegex.test(output)) {
-    output = createCenterImage(output);
-  }
-
-  if (onlyImageLinkRegex.test(output)) {
-    output = createImage(output);
-  }
-
   if (centerRegex.test(output)) {
     output = centerStyling(output);
   }
@@ -82,9 +64,17 @@ export const markDown2Html = (input) => {
     output = changeMarkdownImage(output);
   }
 
-  // if (onlyImageDoubleLinkRegex.test(output)) {
-  //   output = createFromDoubleImageLink(output);
-  // }
+  if (iframeRegex.test(output)) {
+    output = handleIframe(output);
+  }
+
+  if (linkRegex.test(output)) {
+    output = handleLinks(output);
+  }
+
+  if (aTagRegex.test(output)) {
+    output = handleATag(output);
+  }
 
   output = md.render(output);
 
@@ -122,6 +112,32 @@ const handleATag = input => input.replace(aTagRegex, (link) => {
     return link;
   }
 
+  if (imgRegex.test(link)) {
+    const imgMatch = link.match(imgRegex)[0];
+
+    if (imgMatch) return `<a src="${imgMatch}">Image</a>`;
+  }
+
+  return link;
+});
+
+const handleLinks = input => input.replace(linkRegex, (link) => {
+  if (link) {
+    if (
+      link
+        .toLowerCase()
+        .trim()
+        .indexOf('https://steemitimages.com/0x0/') === 0
+        || imgRegex.test(link)
+    ) {
+      const imageMatch = link.match(imgRegex);
+
+      if (imageMatch && imageMatch[0]) {
+        return imageBody(imageMatch[0]);
+      }
+    }
+  }
+
   return link;
 });
 
@@ -131,7 +147,7 @@ const changeMarkdownImage = input => input.replace(markdownImageRegex, (link) =>
     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/500x0/${_link}`}">`;
+    return _link;
   }
   return link;
 });
@@ -143,13 +159,13 @@ const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
 
   _link = _link.split('>')[1];
   _link = _link.split('<')[0];
-  return `><img data-href="${`https://img.esteem.app/500x0/${_link}`}" src="${`https://img.esteem.app/500x0/${_link}`}"><`;
+  return `><img data-href="${`https://steemitimages.com/600x0/${_link}`}" src="${`https://steemitimages.com/600x0/${_link}`}"><`;
 });
 
 const changePullRightLeft = input => input.replace(pullRightLeftRegex, (item) => {
   const imageLink = item.match(linkRegex)[0];
 
-  return `<center style="text-align:center;"><img src="${`https://img.esteem.app/500x0/${imageLink}`}"/></center><br>`;
+  return `<center style="text-align:center;"><img src="${`https://steemitimages.com/600x0/${imageLink}`}"/></center><br>`;
 });
 
 const steemitUrlHandle = input => input.replace(postRegex, (link) => {
@@ -161,19 +177,23 @@ 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="${`https://img.esteem.app/300x0/${link}`}" src="${`https://img.esteem.app/500x0/${link}`}">`,
-);
+const createImage = input => input.replace(onlyImageLinkRegex, link => imageBody(link));
 
-const handleImage = input => input.replace(
-  imgRegex,
-  link => `<img data-href="${`https://img.esteem.app/300x0/${link}`}" src="${`https://img.esteem.app/500x0/${link}`}">`,
-);
+const handleImageTag = input => input.replace(imgTagRegex, (imgTag) => {
+  const _imgTag = imgTag.trim();
+  const match = _imgTag.match(imgRegex);
+
+  if (match && match[0]) {
+    return match[0];
+  }
+
+  return imgTag;
+});
 
 const createFromDoubleImageLink = input => input.replace(onlyImageDoubleLinkRegex, (link) => {
   const _link = link.trim();
-  return `<img data-href="https://img.esteem.app/300x0/${_link}" src="https://img.esteem.app/500x0/${_link}">`;
+
+  return imageBody(_link);
 });
 
 const createYoutubeIframe = input => input.replace(youTubeRegex, (link) => {
@@ -190,6 +210,16 @@ const createYoutubeIframe = input => input.replace(youTubeRegex, (link) => {
   return link;
 });
 
+const handleIframe = input => input.replace(iframeRegex, (link) => {
+  const match = link.match(linkRegex);
+
+  if (match && match[0]) {
+    return iframeBody(match[0]);
+  }
+
+  return link;
+});
+
 const createDtubeIframe = input => input.replace(dTubeRegex, (link) => {
   const execLink = dTubeRegex.exec(link);
   const dTubeMatch = link.match(dTubeRegex)[0];
@@ -214,4 +244,4 @@ const createVimeoIframe = input => input.replace(vimeoRegex, (link) => {
 });
 
 const iframeBody = link => `<iframe frameborder='0' allowfullscreen src='${link}'></iframe>`;
-const imageBody = link => `<img data-href="${link}" src="${link}">`;
+const imageBody = link => `<img src="${`https://steemitimages.com/600x0/${link}`}">`;

src/utils/postParser.js

@@ -14,7 +14,6 @@ export const parsePost = (post, currentUserName, isSummary = false) => {
 
   _post.json_metadata = JSON.parse(post.json_metadata);
   _post.image = postImage(post.json_metadata, post.body);
-  _post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(3);
   _post.created = getTimeFromNow(post.created);
   _post.vote_count = post.active_votes.length;
   _post.author_reputation = getReputation(post.author_reputation);
@@ -34,6 +33,8 @@ export const parsePost = (post, currentUserName, isSummary = false) => {
     + parseFloat(_post.total_payout_value)
     + parseFloat(_post.curator_payout_value);
 
+  _post.total_payout = totalPayout.toFixed(3);
+
   const voteRshares = _post.active_votes.reduce((a, b) => a + parseFloat(b.rshares), 0);
   const ratio = totalPayout / voteRshares;