From 73743667263e1940e9cbc82bfef3e0ee3ca38a79 Mon Sep 17 00:00:00 2001
From: Jesper Wrang <jesperwrang96@gmail.com>
Date: Sun, 14 Jan 2018 11:57:42 +0100
Subject: [PATCH] Translated all lodash templates to react

---
 src/js/components/Comment.js             | 49 +++++++++++++-----------
 src/js/components/CommentSection.js      |  9 +++++
 src/js/components/Menu.js                | 32 ++++++++--------
 src/js/components/SubredditPagination.js | 34 +++++++++-------
 src/js/components/SubredditSort.js       | 35 ++++++++++-------
 src/js/components/ThreadInfo.js          | 13 ++++---
 6 files changed, 101 insertions(+), 71 deletions(-)

diff --git a/src/js/components/Comment.js b/src/js/components/Comment.js
index 8dbf16a..de15c55 100644
--- a/src/js/components/Comment.js
+++ b/src/js/components/Comment.js
@@ -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>
+	)
+}
\ No newline at end of file
diff --git a/src/js/components/CommentSection.js b/src/js/components/CommentSection.js
index e69de29..0fa0d9d 100644
--- a/src/js/components/CommentSection.js
+++ b/src/js/components/CommentSection.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default (props) => {
+	return (
+		<div id={props.root}>
+			{props.children}
+		</div>
+	)
+}
\ No newline at end of file
diff --git a/src/js/components/Menu.js b/src/js/components/Menu.js
index 7008003..d202c14 100644
--- a/src/js/components/Menu.js
+++ b/src/js/components/Menu.js
@@ -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>
+	)	
 }
\ No newline at end of file
diff --git a/src/js/components/SubredditPagination.js b/src/js/components/SubredditPagination.js
index 85ec6dd..76c734b 100644
--- a/src/js/components/SubredditPagination.js
+++ b/src/js/components/SubredditPagination.js
@@ -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> */}
\ No newline at end of file
+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>
+	)
+}
\ No newline at end of file
diff --git a/src/js/components/SubredditSort.js b/src/js/components/SubredditSort.js
index 79835b5..90830a2 100644
--- a/src/js/components/SubredditSort.js
+++ b/src/js/components/SubredditSort.js
@@ -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> */}
\ No newline at end of file
+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>
+	)
+}
\ No newline at end of file
diff --git a/src/js/components/ThreadInfo.js b/src/js/components/ThreadInfo.js
index f550f3f..751b2e5 100644
--- a/src/js/components/ThreadInfo.js
+++ b/src/js/components/ThreadInfo.js
@@ -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>
+		</>
+	)
 }
\ No newline at end of file