From 503c4c383aba02f58272b9e4a2b65f8ebb43989e Mon Sep 17 00:00:00 2001 From: Jesper Wrang Date: Sat, 13 Jan 2018 11:34:10 +0100 Subject: [PATCH] Better structure for seperating pages and components --- src/js/App.js | 24 +- src/js/components/About.js | 42 --- src/js/components/Menu.js | 4 +- src/js/components/StatusBox.js | 4 +- src/js/components/Thread.js | 73 ----- src/js/index.js | 7 +- src/js/pages/About.js | 40 +++ src/js/{components => pages}/Subreddit.js | 2 +- src/js/pages/Thread.js | 70 +++++ src/js/pages/index.js | 3 + src/js/reddit/index.js | 307 +++++++++++++++++++++- 11 files changed, 431 insertions(+), 145 deletions(-) delete mode 100644 src/js/components/About.js delete mode 100644 src/js/components/Thread.js create mode 100644 src/js/pages/About.js rename src/js/{components => pages}/Subreddit.js (55%) create mode 100644 src/js/pages/Thread.js create mode 100644 src/js/pages/index.js diff --git a/src/js/App.js b/src/js/App.js index eb8dfca..e1f4096 100644 --- a/src/js/App.js +++ b/src/js/App.js @@ -2,27 +2,20 @@ import React from 'react' import { BrowserRouter, Switch, - Route + Route, + IndexRoute } from 'react-router-dom' -// Pages import Menu from 'components/Menu' -import About from 'components/About' -import Thread from 'components/Thread' +import {About, Thread, Subreddit} from 'pages' export default class App extends React.Component { constructor(props) { super(props) - this.state = { - statusText: null, - statusImage: null - } - - this.onStatusChange = this.onStatusChange.bind(this) } - handleStatusChange(text, image) { + handleStatusChange(text, image) { this.setState({ statusText: text, statusImage: image @@ -33,14 +26,11 @@ export default class App extends React.Component { return ( <> - + - + - - {/* - - */} + diff --git a/src/js/components/About.js b/src/js/components/About.js deleted file mode 100644 index c1a9384..0000000 --- a/src/js/components/About.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - -export default class About extends React.Component { - render () { - return ( -
-
-

About

-

Display removed (by mods) and deleted (by users) comments/threads from Reddit.

-

- Usage: Drag this bookmarklet - Removeddit - to your bookmark bar and use it to get from reddit to removeddit. -

- Alternatively you can manually replace the reddit in the URL to removeddit. -
- E.g. https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/ -

-

- Created by Jesper Wrang and uses Jason Baumgartner service for getting removed comments. -

-

TODO

-
    -
  • Collapsing comments
    • -
  • Get removed selftext of thread
    • -
  • Subreddits!
    • -
  • Maybe for specific users
    • -
-

Links/Contact

-

For feedback and bug reports:

-
    -
  • email: removeddit (at) gmail.com
    • -
  • reddit: /u/JubbeArt
    • -
-

- Code on Github. -

-
-
- ) - } -} \ No newline at end of file diff --git a/src/js/components/Menu.js b/src/js/components/Menu.js index 430ac33..1980d4c 100644 --- a/src/js/components/Menu.js +++ b/src/js/components/Menu.js @@ -1,4 +1,5 @@ import React from 'react' +import {Link} from 'react-router-dom' import StatusBox from 'components/StatusBox' export default class Menu extends React.Component { @@ -11,11 +12,10 @@ export default class Menu extends React.Component { - + ) } diff --git a/src/js/components/StatusBox.js b/src/js/components/StatusBox.js index 971b5c0..f69d5d1 100644 --- a/src/js/components/StatusBox.js +++ b/src/js/components/StatusBox.js @@ -5,9 +5,9 @@ export default class StatusBox extends React.Component { return (
{this.props.text && -

{this.props.text}

} +

{lol}

} {this.props.image && - } + }
) } diff --git a/src/js/components/Thread.js b/src/js/components/Thread.js deleted file mode 100644 index 144a1fb..0000000 --- a/src/js/components/Thread.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react' -import {prettyScore, statusImages, redditThumbnails} from 'utils' - -export default class Thread extends React.Component { - constructor() { - super() - - this.state = { - url: '', - thumbnailWidth: 70, - thumbnailHeight: 70, - thumbnail: '', - position: 0, - score: 0 - } - } - - handleStateChange(text, image) { - this.props.onStateChange(text, image) - } - - render () { - const url = this.props.url.replace('reddit.com', 'removeddit.com') - let thumbnail - const thumbnailWidth = this.state.thumbnail_width ? this.state.thumbnail_width * 0.5 : 70 - const thumbnailHeight = this.state.thumbnail_height ? this.state.thumbnail_height * 0.5 : 70 - - if(redditThumbnails.includes(this.state.thumbnail)) { - thumbnail = - } else { - thumbnail = ( - - - - ) - } - - return ( -
- {this.state.position && - {this.state.position}} -
-
-
{prettyScore(this.state.score)}
-
-
- {thumbnail} -
- - {this.state.title} - {thread.link_flair_text && - {this.state.link_flair_text}} - ({this.state.domain}) -
- submitted {prettyDate(this.state.created_utc)} by - {this.state.author} - {/* <% if(Reddit.isAll){ %> - to /r/<%= thread.subreddit %> - <% } %> */} -
- -
-
- ) - } -} \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index a9b9911..4297f28 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -7,9 +7,4 @@ import App from './App' ReactDOM.render( , document.getElementById("app") -) - - -// import Reddit from './reddit' - -// Reddit.comments(1,2).then(() => console.log('lololololololol')) +) \ No newline at end of file diff --git a/src/js/pages/About.js b/src/js/pages/About.js new file mode 100644 index 0000000..c1721a9 --- /dev/null +++ b/src/js/pages/About.js @@ -0,0 +1,40 @@ +import React from 'react' + +export default (props) => { + return ( +
+
+

About

+

Display removed (by mods) and deleted (by users) comments/threads from Reddit.

+

+ Usage: Drag this bookmarklet + Removeddit + to your bookmark bar and use it to get from reddit to removeddit. +

+ Alternatively you can manually replace the reddit in the URL to removeddit. +
+ E.g. https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/ +

+

+ Created by Jesper Wrang and uses Jason Baumgartner service for getting removed comments. +

+

TODO

+
    +
  • Collapsing comments
    • +
  • Get removed selftext of thread
    • +
  • Subreddits!
    • +
  • Maybe for specific users
    • +
+

Links/Contact

+

For feedback and bug reports:

+
    +
  • email: removeddit (at) gmail.com
    • +
  • reddit: /u/JubbeArt
    • +
+

+ Code on Github. +

+
+
+ ) +} \ No newline at end of file diff --git a/src/js/components/Subreddit.js b/src/js/pages/Subreddit.js similarity index 55% rename from src/js/components/Subreddit.js rename to src/js/pages/Subreddit.js index ba0ebc2..76efb05 100644 --- a/src/js/components/Subreddit.js +++ b/src/js/pages/Subreddit.js @@ -1,6 +1,6 @@ import React from 'react' -export default class Thread extends React.Component { +export default class Subreddit extends React.Component { render() { return

Subreddit

} diff --git a/src/js/pages/Thread.js b/src/js/pages/Thread.js new file mode 100644 index 0000000..dd3e73f --- /dev/null +++ b/src/js/pages/Thread.js @@ -0,0 +1,70 @@ +import React from 'react' +import {prettyScore, statusImages, redditThumbnails} from 'utils' + +export default class Thread extends React.Component { + constructor(props) { + super(props) + + this.state = { + url: '', + thumbnailWidth: 70, + thumbnailHeight: 70, + thumbnail: '', + position: 0, + score: 0 + } + } + + render () { + // const url = this.props.url.replace('reddit.com', 'removeddit.com') + // let thumbnail + // const thumbnailWidth = this.state.thumbnail_width ? this.state.thumbnail_width * 0.5 : 70 + // const thumbnailHeight = this.state.thumbnail_height ? this.state.thumbnail_height * 0.5 : 70 + + // if(redditThumbnails.includes(this.state.thumbnail)) { + // thumbnail = + // } else { + // thumbnail = ( + // + // + // + // ) + // } + + return ( +

Lol

+ //
+ // {this.state.position && + // {this.state.position}} + //
+ //
+ //
{prettyScore(this.state.score)}
+ //
+ //
+ // {thumbnail} + //
+ + // {this.state.title} + // {thread.link_flair_text && + // {this.state.link_flair_text}} + // ({this.state.domain}) + //
+ // submitted {prettyDate(this.state.created_utc)} by + // {this.state.author} + // {/* <% if(Reddit.isAll){ %> + // to /r/<%= thread.subreddit %> + // <% } %> */} + //
+ // + //
+ //
+ ) + } +} \ No newline at end of file diff --git a/src/js/pages/index.js b/src/js/pages/index.js new file mode 100644 index 0000000..99a7260 --- /dev/null +++ b/src/js/pages/index.js @@ -0,0 +1,3 @@ +export {default as About} from './About' +export {default as Subreddit} from './Subreddit' +export {default as Thread} from './Thread' \ No newline at end of file diff --git a/src/js/reddit/index.js b/src/js/reddit/index.js index 12b3ee8..98d89ee 100644 --- a/src/js/reddit/index.js +++ b/src/js/reddit/index.js @@ -35,5 +35,308 @@ const fetchToken = () => { export default { comments(subreddit, threadID) { return fetchToken() - } -} \ No newline at end of file + } +} + +// Reddit.fetchToken() +// .then(function(){ +// return Promise.all([ +// fetch(URLs.thread, Reddit.init) +// .then(Fetch2.json) +// .then(ThreadHTML.createThread) +// .catch(function(error) { +// return Promise.reject("Could not get thread from Reddit"); +// }), + +// fetch(URLs.pushshiftIDs) +// .then(Fetch2.json) +// .then(_.property("data")) +// .catch(function(error) { +// return Promise.reject("Could not get removed comment IDs"); +// }), +// ]) +// }) +// .then(function(results) { +// var thread = results[0]; +// Comments.allIDs = results[1]; + +// Status.loading("Loading comments from reddit..."); +// HandleIDs.normal(thread); +// return HandleIDs.morechildren() +// .catch(function(error){ +// return Promise.reject("Could not get comments from Reddit (moreChildren)"); +// }); +// }) +// .then(function(){ +// return Promise.all(_.map(_.uniq(Comments.countinuethread), function(id) { +// return fetch(URLs.thread+"/_/"+id.split("_")[1], Reddit.init) +// .then(Fetch2.json) +// .catch(function(error){ return Promise.reject("Could not get comments from Reddit (continueThisThread)") }) +// })) +// .catch(function(error){ +// return Promise.reject("Could not get comments from Reddit (continueThisThread)"); +// }); +// }) +// .then(function(smallerThreads){ +// _.forEach(smallerThreads, function(thread){ +// HandleIDs.normal(thread); +// }) +// Status.loading("Getting removed comments..."); +// HandleIDs.removed(); +// ThreadHTML.createCommentInfo(Comments.removed.length); +// return Fetch2.multiple(URLs.format(URLs.pushshiftComments, Comments.removed), null, "data") +// .catch(function(error){ +// return Promise.reject("Could not get removed comments"); +// }); +// }) +// .then(function(removedComments){ +// Status.loading("Generating comments..."); +// return Comments.generate(removedComments); +// }) +// .then(function(){ +// Status.success(); +// }) +// .catch(function(error) { +// if(_.includes(_.toLower(error), "error")) { +// Status.error(error); +// } else { +// Status.error("Error: "+error); +// } +// }); +// } +// }})(); + +// // ------------------------------------------------------------------------------ +// // ----------------------- Store and genrates comments -------------------------- +// // ------------------------------------------------------------------------------ +// var Comments = (function() { +// var totalComments; +// var lookup = {}; +// var toBeCreated = []; + +// var getParentComments = function(toLookup){ +// var newCommentsToLookup = []; +// var commentsToFetch = []; + +// _.forEach(toLookup, function(id){ +// var parentID = lookup[id].parent_id.split("_")[1]; + +// if(parentID === Reddit.threadID) {} // Has no parent (is parent of thread) +// else if(_.includes(Comments.toBeCreated, parentID)) {} // Parent already exists, do nothing +// else if(_.includes(newCommentsToLookup, parentID)) {} // Parent already exists (this iteration) +// else if(_.has(lookup, parentID)) { +// newCommentsToLookup.push(parentID); +// } else{ +// commentsToFetch.push(parentID); +// } + +// Comments.toBeCreated.push(id); +// }); + +// return new Promise(function(resolve, reject){ +// if(_.uniq(commentsToFetch).length !== 0) { +// fetch(URLs.singleComments + _.join(_.map(_.uniq(commentsToFetch),function(comments){ +// return "t1_" + comments; +// })), Reddit.init) +// .then(Fetch2.json) +// .then(function(json){ +// _.forEach(json.data.children, function(comment) { +// lookup[comment.data.id] = comment.data; +// newCommentsToLookup.push(comment.data.id); +// }); +// }) +// .then(function(){ +// resolve(); +// }); + +// } else { +// resolve(); +// } +// }) +// .then(function(){ +// if(newCommentsToLookup.length !== 0) { +// return getParentComments(newCommentsToLookup) +// } +// }); + +// }; + +// return { +// ids: [], // The comments we found +// morechildren: [], +// countinuethread: [], + +// allIDs: [], // All the comments that we were suppose to find +// removed: [], +// deleted: [], +// toBeCreated: toBeCreated, +// lookup: lookup, + +// getTotalComments: function() { return totalComments; }, +// setTotalComments: function(total) { totalComments = total; }, + +// getRoot: function() { +// if(Reddit.permalink !== undefined && Reddit.permalink === "") { +// return Reddit.threadID; +// } + +// if(Reddit.permalink === undefined) { +// return Reddit.threadID; +// } + +// if(_.has(Comments.lookup, Reddit.permalink)) { +// return Comments.lookup[Reddit.permalink].parent_id.split("_")[1]; +// } +// return ""; +// }, +// generate: function(removedComments) { +// removedComments.forEach(function(comment){ +// if(_.includes(Comments.deleted, comment.id)) { +// comment["deleted"] = true; +// } else { +// comment["removed"] = true; +// } + +// Comments.lookup[comment.id] = comment; +// }); + +// Comments.removed = _.map(removedComments, function(comment){ +// return comment.id; +// }); + +// return getParentComments(Comments.removed) +// .then(function(){ +// ThreadHTML.createCommentSection(); +// ThreadHTML.createComments(); +// }) +// } +// }})(); + + + +// // ------------------------------------------------------------------------------ +// // ----------------- Handle comments from different requests -------------------- +// // ------------------------------------------------------------------------------ +// var HandleIDs = (function(){ +// var normal = function(thread){ +// return _.flatten(_.map(thread[1].data.children, Extract.normal)) +// }; + +// var morechildren = function(){ +// return Promise.all(_.map(_.uniq(Comments.morechildren), function(idArray){ +// return Fetch2.multiple(URLs.format(URLs.moreChildren, idArray), Reddit.init); +// })) +// .then(function(responseArrays){ +// Comments.morechildren.length = 0; +// _.forEach(responseArrays, function(responseArray){ +// _.forEach(responseArray, function(response){ +// _.forEach(response.jquery[10][3][0], function(comment){ +// Extract.normal(comment); +// }) +// }); +// }); +// }).then(function(){ +// if(Comments.morechildren.length !== 0) { +// return morechildren(); +// } +// }); +// }; + +// var removed = function(){ +// Comments.removed = _.difference(Comments.allIDs, Comments.ids); + +// Comments.ids.forEach(function(id){ +// if(! _.has(Comments.lookup, id)) { +// return; +// } + +// if(Comments.lookup[id].body === "[removed]") { +// Comments.removed.push(id); +// } else if (Comments.lookup[id].body === "[deleted]"){ +// Comments.removed.push(id); +// Comments.deleted.push(id); +// } +// }); + +// Comments.removed = _.uniq(Comments.removed); +// }; + +// return { +// normal: normal, +// morechildren: morechildren, +// removed: removed +// }; +// })(); + + +// // ------------------------------------------------------------------------------ +// // ----------------------- Extract ID from comments ----------------------------- +// // ------------------------------------------------------------------------------ +// var Extract = (function(){ +// var normal = function(comment){ +// var data = comment.data; + +// if(comment.kind == "more") { // "Show more"-comment +// if(data.id === "_") { // = "continue this thread" comment +// Comments.countinuethread.push(data.parent_id); +// } else if(data.children.length < data.count){ // "Load more"-comment (that is missing some of its children) +// Comments.morechildren.push(data.children); +// } +// Comments.ids.push.apply(Comments.ids, data.children); +// } else { // Normal comment +// if(data.replies) { +// data.replies.data.children.forEach(function(child){ +// normal(child); +// }); +// delete data.replies; +// } + +// Comments.ids.push(data.id); +// Comments.lookup[data.id] = data; +// } +// }; + +// return { +// normal: normal +// }; +// })(); + + +// // ------------------------------------------------------------------------------ +// // ---------------------------- Generating HTML --------------------------------- +// // ------------------------------------------------------------------------------ + + +// var createComments = function(){ +// var commentsToCreate = _.sortBy(_.uniq(Comments.toBeCreated), function(id) { +// return Comments.lookup[id].score; +// }); + +// var createdComments = [Comments.getRoot()]; +// var didSomething = false; + +// while(commentsToCreate.length > 0) { +// didSomething = false; + +// for(var i = commentsToCreate.length - 1; i >= 0; i--) { +// var id = commentsToCreate[i]; +// var parentID = Comments.lookup[id].parent_id.split("_")[1]; + +// if(_.includes(createdComments, parentID)) { +// document.getElementById(parentID).appendChild(createComment(Comments.lookup[id])); +// createdComments.push(id); +// commentsToCreate.splice(i, 1); +// didSomething = true; +// } +// } + +// // Fail safe (parents missing for the rest of the comments, shouldn't happend but oh well :D) +// if(!didSomething) { +// console.error("Didn't generate all comments correctly"); +// break; +// } +// } +// }; + + + \ No newline at end of file