mirror of
https://github.com/gurnec/removeddit.git
synced 2026-03-11 08:54:27 +00:00
Translated all lodash templates to react
This commit is contained in:
Jesper Wrang
parent
3f9786fda7
commit
7374366726
6 changed files with 101 additions and 71 deletions
|
|
@ -1,25 +1,28 @@
|
|||
// <%
|
||||
// var isRemoved = _.has(comment,"removed");
|
||||
// var isDeleted = _.has(comment,"deleted");
|
||||
import React from 'react'
|
||||
import { prettyScore, prettyDate, parse } from 'utils'
|
||||
|
||||
// var commentCss = "comment comment-" + (isRemoved ? "removed" : (isDeleted ? "deleted" : (comment.depth % 2 == 0 ? "even" : "odd")));
|
||||
// %>
|
||||
|
||||
// <div id="<%= id %>" class="<%= commentCss %>">
|
||||
// <div class="comment-head">
|
||||
// <a href="javascript:void(0)" class="author">[–]</a>
|
||||
// <a href="https://www.reddit.com/user/<%= comment.author %>" class="author comment-author">
|
||||
// <%= comment.author+(isDeleted ? " (deleted by user)" : "") %>
|
||||
// </a>
|
||||
// <span class="comment-score"><%= Format.prettyScore(comment.score) %> point<%= ((comment.score == 1) ? "": "s") %></span>
|
||||
// <span class="comment-time"><%= Format.prettyDate(comment.created_utc) %></span>
|
||||
// </div>
|
||||
// <div class="comment-body">
|
||||
// <%= (comment.body === "[removed]" && isRemoved ? "<p>[likely removed by automoderator]</p>" : Format.parse(comment.body)) %>
|
||||
// </div>
|
||||
// <div class="comment-links">
|
||||
// <a href="/r/<%= Reddit.subreddit %>/comments/<%= Reddit.threadID %>/_/<%= id %>/">permalink</a>
|
||||
// <a href="https://www.reddit.com/r/<%= Reddit.subreddit %>/comments/<%= Reddit.threadID %>/_/<%= id %>/">reddit</a>
|
||||
// </div>
|
||||
// </div>
|
||||
export default (props) => {
|
||||
const commentCss = 'comment comment-' + (props.removed ? 'removed' : (props.deleted ? 'deleted' : (props.depth % 2 == 0 ? 'even' : 'odd')));
|
||||
const innerHTML = (props.body === '[removed]' && props.removed) ? '<p>[removed too quickly to be archived]</p>' : parse(comment.body)
|
||||
const permalink = `/r/${props.subreddit}/comments/${props.threadID}/_/${props.id}/`
|
||||
|
||||
return (
|
||||
<div id={props.id} className={commentCss}>
|
||||
<div className='comment-head'>
|
||||
<a href='javascript:void(0)' className='author'>[–]</a>
|
||||
<a href={`https://www.reddit.com/user/${props.author}`} className='author comment-author'>
|
||||
{props.author}
|
||||
{props.deleted && ' (deleted by user)'}
|
||||
</a>
|
||||
<span className='comment-score'>{prettyScore(props.score)} point{(comment.score !== 1) && 's'}</span>
|
||||
<span className='comment-time'>{prettyDate(props.created_utc)}</span>
|
||||
</div>
|
||||
<div className='comment-body' dangerouslySetInnerHTML={{__html: innerHTML}}></div>
|
||||
<div className='comment-links'>
|
||||
<a href={permalink}>permalink</a>
|
||||
<a href={`https://www.reddit.com${permalink}`}>reddit</a>
|
||||
<a href={`https://snew.github.io${permalink}`}>ceddit</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<div id={props.root}>
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,21 +2,19 @@ import React from 'react'
|
|||
import {Link} from 'react-router-dom'
|
||||
import StatusBox from 'components/StatusBox'
|
||||
|
||||
export default class Menu extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<header>
|
||||
<div id='header'>
|
||||
<h1>
|
||||
<Link to='/'>Removeddit</Link>
|
||||
</h1>
|
||||
<nav>
|
||||
<Link to='/r/all'>/r/all</Link>
|
||||
<Link to='/about/'>about</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<StatusBox />
|
||||
</header>
|
||||
)
|
||||
}
|
||||
export default (props) => {
|
||||
return (
|
||||
<header>
|
||||
<div id='header'>
|
||||
<h1>
|
||||
<Link to='/'>Removeddit</Link>
|
||||
</h1>
|
||||
<nav>
|
||||
<Link to='/r/all'>/r/all</Link>
|
||||
<Link to='/about/'>about</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<StatusBox />
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,14 +1,22 @@
|
|||
// {/* <div id="pagination">
|
||||
// Page:
|
||||
// <% if(start > 1) { %>
|
||||
// <a href="<%= urlBase+1 %>">1</a> ...
|
||||
// <% }
|
||||
import React from 'react'
|
||||
|
||||
// for(var i = start; i <= end; i++) {
|
||||
// if(currentPage === i) { %>
|
||||
// <span><%= i %></span>
|
||||
// <% } else { %>
|
||||
// <a href="<%= urlBase+i %>"><%= i %></a>
|
||||
// <% }
|
||||
// } %>
|
||||
// </div> */}
|
||||
export default (props) => {
|
||||
let pageination = <></>
|
||||
|
||||
for(var i = start; i <= end; i++) {
|
||||
if(currentPage === i) {
|
||||
pageination += <span>{i}</span>
|
||||
} else {
|
||||
pageination += <a href={`${props.url+i}`}>{i}</a>
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div id="pagination">
|
||||
Page:
|
||||
{start > 1 &&
|
||||
<><a href={`${props.url+1}`}>1</a>
|
||||
<span> ...</span></>}
|
||||
{pageination}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,13 +1,22 @@
|
|||
// {/* <div class="subreddit-info">
|
||||
// top post of <a href="https://www.reddit.com/r/<%= subreddit %>">/r/<%= subreddit %></a> from:
|
||||
// <select onchange="Vars.reload(this)">
|
||||
// <option value="hour"<% if(time === "hour"){ %> selected<% } %>>past hour</option>
|
||||
// <option value="12hour"<% if(time === "12hour"){ %> selected<% } %>>past 12 hours</option>
|
||||
// <option value="day"<% if(time === "day"){ %> selected<% } %>>past day</option>
|
||||
// <option value="week"<% if(time === "week"){ %> selected<% } %>>past week</option>
|
||||
// <option value="month"<% if(time === "month"){ %> selected<% } %>>past month</option>
|
||||
// <option value="6month"<% if(time === "6month"){ %> selected<% } %>>past 6 months</option>
|
||||
// <option value="year"<% if(time === "year"){ %> selected<% } %>>past year</option>
|
||||
// <option value="all"<% if(time === "all"){ %> selected<% } %>>all time</option>
|
||||
// </select>
|
||||
// </div> */}
|
||||
import React from 'react'
|
||||
|
||||
export default (props) => {
|
||||
const isSelected = time => props.time == time
|
||||
|
||||
return (
|
||||
<div className='subreddit-info'>
|
||||
top post of <a href={`https://www.reddit.com/r/${props.subreddit}`}>/r/{subreddit}</a> from:
|
||||
{/* <select onchange='Vars.reload(this)'> */}
|
||||
<select>
|
||||
<option value='hour' selected={isSelected('hour')} >past hour</option>
|
||||
<option value='12hour' selected={isSelected('12hour')} >past 12 hours</option>
|
||||
<option value='day' selected={isSelected('day')} >past day</option>
|
||||
<option value='week' selected={isSelected('week')} >past week</option>
|
||||
<option value='month' selected={isSelected('month')} >past month</option>
|
||||
<option value='6month' selected={isSelected('6month')} >past 6 months</option>
|
||||
<option value='year' selected={isSelected('year')} >past year</option>
|
||||
<option value='all' selected={isSelected('all')} >all time</option>
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import React from 'react'
|
||||
|
||||
export default (props) => {
|
||||
{/* <div id="comment-info">
|
||||
removed comments: <%= removedComments %>/<%= totalComments %> (<%= (100 * removedComments / totalComments).toFixed(1) %>%)
|
||||
</div>
|
||||
<div id="comment-sort">sorted by: top</div> */}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id='comment-info'>
|
||||
removed comments: {props.removedComments}/${props.totalComments} ({(100 * removedComments / totalComments).toFixed(1)}%)
|
||||
</div>
|
||||
<div id='comment-sort'>sorted by: top</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue