From df46b5bde9ba59fd2f7d09923e295c32a134f7e5 Mon Sep 17 00:00:00 2001 From: Jesper Wrang Date: Wed, 10 Jan 2018 22:23:59 +0100 Subject: [PATCH] Thread html template is now in react --- js/functions.js | 39 --------------- jst/elasticComments.jst | 2 +- src/js/App.js | 1 + src/js/components/Menu.js | 16 +++--- src/js/components/Thread.js | 77 +++++++++++++++-------------- {js => src/js}/libraries/snuownd.js | 0 src/js/utils.js | 40 +++++++++++++++ 7 files changed, 91 insertions(+), 84 deletions(-) rename {js => src/js}/libraries/snuownd.js (100%) create mode 100644 src/js/utils.js diff --git a/js/functions.js b/js/functions.js index ad86b40..1d79057 100644 --- a/js/functions.js +++ b/js/functions.js @@ -160,42 +160,3 @@ var GetVars = (function(){ })(); -// For text formatting -var Format = (function () { - var markdown = SnuOwnd.getParser(); -return { - parse: function(text){ - return markdown.render(text) - }, - // UTC -> "Reddit time format" (e.g. 5 hours ago, just now, etc...) - prettyDate: function(createdUTC){ - var currentUTC = Math.floor((new Date()).getTime() / 1000); - var secondDiff = currentUTC - createdUTC; - var dayDiff = Math.floor(secondDiff / 86400); - - if(dayDiff < 0) return ""; - if(dayDiff == 0) { - if(secondDiff < 10) return "just now"; - if(secondDiff < 60) return secondDiff + " seconds ago"; - if(secondDiff < 120) return "a minute ago"; - if(secondDiff < 3600) return Math.floor(secondDiff / 60) + " minutes ago"; - if(secondDiff < 7200) return "an hour ago"; - if(secondDiff < 86400) return Math.floor(secondDiff / 3600) + " hours ago"; - } - if(dayDiff < 7) return dayDiff + " days ago"; - if(dayDiff < 31) return Math.floor(dayDiff / 7) + " weeks ago"; - if(dayDiff < 365) return Math.floor(dayDiff / 30) + " months ago"; - return Math.floor(dayDiff / 365) + " years ago"; - }, - // e.g. 12000 => 12k - prettyScore: function(score) { - if(score >= 100000) { - return (score / 1000).toFixed(0) + "k"; - } else if(score >= 10000) { - return (score / 1000).toFixed(1) + "k"; - } - - return score; - } -}; -})(); \ No newline at end of file diff --git a/jst/elasticComments.jst b/jst/elasticComments.jst index 3ce0232..46141a7 100644 --- a/jst/elasticComments.jst +++ b/jst/elasticComments.jst @@ -7,5 +7,5 @@ "_source":[ "author","body","created_utc","parent_id","score" ], - "size":50 + "size":5 } \ No newline at end of file diff --git a/src/js/App.js b/src/js/App.js index 46c8bfe..0c45bcb 100644 --- a/src/js/App.js +++ b/src/js/App.js @@ -18,6 +18,7 @@ export default class App extends React.Component { + {/* */} diff --git a/src/js/components/Menu.js b/src/js/components/Menu.js index b63c396..32b6440 100644 --- a/src/js/components/Menu.js +++ b/src/js/components/Menu.js @@ -4,19 +4,19 @@ export default class Menu extends React.Component { render () { return (
-
) diff --git a/src/js/components/Thread.js b/src/js/components/Thread.js index 197c009..78e173b 100644 --- a/src/js/components/Thread.js +++ b/src/js/components/Thread.js @@ -1,52 +1,57 @@ import React from 'react' +import {prettyScore} from 'utils' -export default class About extends React.Component { +export default class Thread extends React.Component { render () { + const url = this.props.url.replace('reddit.com', 'removeddit.com') + let thumbnail + let thumbnailWidth = this.props.thread.thumbnail_width ? this.props.thread.thumbnail_width * 0.5 : 70 + let thumbnailHeight = this.props.thread.thumbnail_height ? this.props.thread.thumbnail_height * 0.5 : 70 + + if(['self', 'default', 'image', 'nsfw'].includes(this.props.thread.thumbnail)) { + thumbnail = + } else { + thumbnail = ( + + + + ) + } + + return ( -
+
{this.props.threadPosition && - {this.props.threadPosition} - } -
-
-
<%= Format.prettyScore(thread.score) %>
-
+ {this.props.threadPosition}} +
+
+
{prettyScore(this.props.thread.score)}
+
- <% var url = _.replace(thread.url, "https://www.reddit.com", "https://www.removeddit.com"); + {thumbnail} +
- if(_.includes(["self", "default", "image", "nsfw"], thread.thumbnail)) { %> - - <% } else { - var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140) * 0.5; - var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140) * 0.5; - %> - - - <% } %> -
- - <%= thread.title %> - <% if(!_.isNil(thread.link_flair_text)){ %> - <%= thread.link_flair_text %> - <% } %> - (<%= thread.domain %>) -
- submitted <%= Format.prettyDate(thread.created_utc) %> by - <%= thread.author %> - <% if(Reddit.isAll){ %> - to /r/<%= thread.subreddit %> - <% } %> + {this.props.thread.title} + {thread.link_flair_text && + {this.props.thread.link_flair_text}} + ({this.props.thread.domain}) +
+ submitted {prettyDate(this.props.thread.created_utc)} by + {this.props.thread.author} + {/* <% if(Reddit.isAll){ %> + to /r/<%= thread.subreddit %> + <% } %> */}
-
- - <%= thread.num_comments %> comments +
- ) + ) } } \ No newline at end of file diff --git a/js/libraries/snuownd.js b/src/js/libraries/snuownd.js similarity index 100% rename from js/libraries/snuownd.js rename to src/js/libraries/snuownd.js diff --git a/src/js/utils.js b/src/js/utils.js new file mode 100644 index 0000000..0c00d3d --- /dev/null +++ b/src/js/utils.js @@ -0,0 +1,40 @@ +import SnuOwnd from 'libraries/snuownd.js' + +const markdown = SnuOwnd.getParser() + +// Parse comments +export const parse = text => { + return markdown.render(text) +} + +// UTC -> "Reddit time format" (e.g. 5 hours ago, just now, etc...) +export const prettyDate = createdUTC => { + const currentUTC = Math.floor((new Date()).getTime() / 1000) + const secondDiff = currentUTC - createdUTC + const dayDiff = Math.floor(secondDiff / 86400) + + if(dayDiff < 0) return "" + if(dayDiff == 0) { + if(secondDiff < 10) return "just now" + if(secondDiff < 60) return secondDiff + " seconds ago" + if(secondDiff < 120) return "a minute ago" + if(secondDiff < 3600) return Math.floor(secondDiff / 60) + " minutes ago" + if(secondDiff < 7200) return "an hour ago" + if(secondDiff < 86400) return Math.floor(secondDiff / 3600) + " hours ago" + } + if(dayDiff < 7) return dayDiff + " days ago" + if(dayDiff < 31) return Math.floor(dayDiff / 7) + " weeks ago" + if(dayDiff < 365) return Math.floor(dayDiff / 30) + " months ago" + return Math.floor(dayDiff / 365) + " years ago" +} + +// Reddit format for scores, e.g. 12000 => 12k +export const prettyScore = score => { + if(score >= 100000) { + return (score / 1000).toFixed(0) + "k" + } else if(score >= 10000) { + return (score / 1000).toFixed(1) + "k" + } + + return score +} \ No newline at end of file