prehistoric-systems/removeddit
1
0
Fork 0
mirror of https://github.com/gurnec/removeddit.git synced 2026-03-11 08:54:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Thread html template is now in react

Browse source
This commit is contained in:
Jesper Wrang 2018-01-10 22:23:59 +01:00
parent e7efb16bea
commit df46b5bde9
7 changed files with 91 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
js/functions.js
View file

@ -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;
}
};
})();

2
jst/elasticComments.jst
View file

@ -7,5 +7,5 @@
"_source":[
"author","body","created_utc","parent_id","score"
],
"size":50
"size":5
}

1
src/js/App.js
View file

@ -18,6 +18,7 @@ export default class App extends React.Component {
<Switch>
<IndexRoute component={Thread} />
<Route path='/about' component={About}/>
<Route path='/r/:subreddit/comments' component={Thread}/>
{/* <Route path='/:board/:pageNr' component={Board} />
<Route path='/:board/thread/:thread' component={Thread}/>
<Route component={Home} /> */}

16
src/js/components/Menu.js
View file

@ -4,19 +4,19 @@ export default class Menu extends React.Component {
render () {
return (
<header>
<div id="header">
<div id='header'>
<h1>
<a href="/">Removeddit</a>
<Link to='/'>Removeddit</Link>
</h1>
<nav>
<a href="/r/all">subreddit</a>
<a href="/r/bestof/comments/7c8jof/">thread</a>
<a href="/about/">about</a>
<Link to='/r/all'>subreddit</Link>
<Link to='/r/bestof/comments/7c8jof/'>thread</Link>
<Link to='/about/'>about</Link>
</nav>
</div>
<div id="status">
<p id="status-text"></p>
<img id="status-image" src="/images/loading.gif"/>
<div id='status'>
<p id='status-text'></p>
<img id='status-image' src='/images/loading.gif'/>
</div>
</header>
)

77
src/js/components/Thread.js
View file

@ -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 = <a href={url} className='thumbnail thumbnail-<%= thread.thumbnail%>'></a>
} else {
thumbnail = (
<a href={url}>
<img className='thumbnail' src={this.props.thread.thumbnail} width='<%= thumbnailWidth %>' height='<%= thumbnailHeight %>'/>
</a>
)
}
return (
<div class="thread">
<div className='thread'>
{this.props.threadPosition &&
<span class="post-rank">{this.props.threadPosition}</span>
}
<div class="thread-score-box">
<div class="vote upvote"></div>
<div class="thread-score"><%= Format.prettyScore(thread.score) %></div>
<div class="vote downvote"></div>
<span className='post-rank'>{this.props.threadPosition}</span>}
<div className='thread-score-box'>
<div className='vote upvote'></div>
<div className='thread-score'>{prettyScore(this.props.thread.score)}</div>
<div className='vote downvote'></div>
</div>
<% var url = _.replace(thread.url, "https://www.reddit.com", "https://www.removeddit.com");
{thumbnail}
<div className='thread-content'>
if(_.includes(["self", "default", "image", "nsfw"], thread.thumbnail)) { %>
<a href="<%= url %>" class="thumbnail thumbnail-<%= thread.thumbnail%>"></a>
<% } else {
var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140) * 0.5;
var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140) * 0.5;
%> <a href="<%= url %>">
<img class="thumbnail" src="<%= thread.thumbnail %>" width="<%= thumbnailWidth %>" height="<%= thumbnailHeight %>">
</a>
<% } %>
<div class="thread-content">
<a class="thread-title" href="<%= url %>"><%= thread.title %></a>
<% if(!_.isNil(thread.link_flair_text)){ %>
<span class="link-flair"><%= thread.link_flair_text %></span>
<% } %>
<span class="domain">(<%= thread.domain %>)</span>
<div class="thread-info">
submitted <span class="thread-time"><%= Format.prettyDate(thread.created_utc) %></span> by
<a class="thread-author author" href="https://www.reddit.com/user/<%= thread.author %>"><%= thread.author %></a>
<% if(Reddit.isAll){ %>
to <a class="subreddit-link author" href="/r/<%= thread.subreddit %>">/r/<%= thread.subreddit %></a>
<% } %>
<a className='thread-title' href={this.props.url}>{this.props.thread.title}</a>
{thread.link_flair_text &&
<span className='link-flair'>{this.props.thread.link_flair_text}</span>}
<span className='domain'>({this.props.thread.domain})</span>
<div className='thread-info'>
submitted <span className='thread-time'>{prettyDate(this.props.thread.created_utc)}</span> by
<a className='thread-author author' href={`https://www.reddit.com/user/${this.props.thread.author}`}>{this.props.thread.author}</a>
{/* <% if(Reddit.isAll){ %>
to <a className='subreddit-link author' href='/r/<%= thread.subreddit %>'>/r/<%= thread.subreddit %></a>
<% } %> */}
</div>
<div class="total-comments">
<a class="grey-link" href="<%= thread.permalink %>">
<b><%= thread.num_comments %> comments</b>
<div className='total-comments'>
<a className='grey-link' href='<%= thread.permalink %>'>
<b>{this.props.thread.num_comments} comments</b>
</a>
<a class="grey-link" href="https://www.reddit.com<%= thread.permalink %>">
<a className='grey-link' href={`https://www.reddit.com${this.props.thread.permalink}`}>
<b>reddit</b>
</a>
</div>
</div>
</div>
)
)
}
}

0
js/libraries/snuownd.js → src/js/libraries/snuownd.js
View file

40
src/js/utils.js Normal file
View file

@ -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
}