From e992dd942510aee76667878d2fd2fe935fb72a60 Mon Sep 17 00:00:00 2001 From: JubbeArt Date: Sat, 28 Jul 2018 16:36:40 +0200 Subject: [PATCH] Added loading / success status for subreddits --- .babelrc | 5 +- TODO | 7 ++ dist/index.html | 6 +- package.json | 5 ++ src/api/removeddit/index.js | 4 + src/pages/common/Header.js | 13 +++- src/pages/common/StatusBox.js | 13 ---- src/pages/subreddit/index.js | 63 ++++++++-------- src/sass/common.sass | 1 + src/sass/index.sass | 2 - src/state/index.js | 10 +-- webpack.config.js | 2 +- yarn.lock | 135 ++++++++++++++++++++++++++++++++-- 13 files changed, 199 insertions(+), 67 deletions(-) create mode 100644 TODO delete mode 100644 src/pages/common/StatusBox.js diff --git a/.babelrc b/.babelrc index cd75116..1f686e3 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,7 @@ { "presets": ["env", "react"], - "plugins": ["transform-object-rest-spread"] + "plugins": [ + "transform-object-rest-spread", + "transform-class-properties" + ] } \ No newline at end of file diff --git a/TODO b/TODO new file mode 100644 index 0000000..af3ec57 --- /dev/null +++ b/TODO @@ -0,0 +1,7 @@ +update readme + +update header links active (NavLinks) + +make sort/filter state local + +old.removeddit.com \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index d85dd09..1e38dfb 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,11 +7,11 @@ - - + +
- + \ No newline at end of file diff --git a/package.json b/package.json index c254e71..7b1e4db 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ "url": "https://github.com/JubbeArt/removeddit/issues" }, "homepage": "https://github.com/JubbeArt/removeddit#readme", + "standard": { + "parser": "babel-eslint" + }, "scripts": { "start": "webpack-dev-server --mode development", "build-dev": "webpack --mode development", @@ -37,7 +40,9 @@ "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", + "babel-eslint": "^8.2.6", "babel-loader": "^7.1.5", + "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", diff --git a/src/api/removeddit/index.js b/src/api/removeddit/index.js index 1377851..c3651d1 100644 --- a/src/api/removeddit/index.js +++ b/src/api/removeddit/index.js @@ -1,6 +1,10 @@ const baseURL = 'https://removeddit.com/api' export const getRemovedThreadIDs = (subreddit = '', page = 1) => { + if (subreddit.toLowerCase() === 'all') { + subreddit = '' + } + return window.fetch(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`) .then(response => response.json()) } diff --git a/src/pages/common/Header.js b/src/pages/common/Header.js index 96cc729..ef855ff 100644 --- a/src/pages/common/Header.js +++ b/src/pages/common/Header.js @@ -1,8 +1,8 @@ import React from 'react' import { Link } from 'react-router-dom' -import StatusBox from './StatusBox' +import { connect } from '../../state' -export default () => ( +const Header = props => (
- +
+ {props.global.state.statusText && +

{props.global.state.statusText}

} + {props.global.state.statusImage && + status} +
) + +export default connect(Header) diff --git a/src/pages/common/StatusBox.js b/src/pages/common/StatusBox.js deleted file mode 100644 index a7a048a..0000000 --- a/src/pages/common/StatusBox.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import {connect} from '../../state' - -const StatusBox = props => ( -
- {props.text && -

{props.gloabl.state.statusText}

} - {props.image && - status} -
-) - -export default connect(StatusBox) diff --git a/src/pages/subreddit/index.js b/src/pages/subreddit/index.js index 1a52aac..27e2de0 100644 --- a/src/pages/subreddit/index.js +++ b/src/pages/subreddit/index.js @@ -3,39 +3,35 @@ import { Link } from 'react-router-dom' import { getRemovedThreadIDs } from '../../api/removeddit' import { getThreads } from '../../api/reddit' import Post from '../common/Post' +import {connect} from '../../state' -const getSubredditForAPI = props => { - const { subreddit = 'all' } = props.match.params - if (subreddit.toLowerCase() === 'all') { - return '' - } - return subreddit.toLowerCase() -} - -export default class Subreddit extends React.Component { - constructor (props) { - super(props) - - this.state = { - threads: [], - subreddit: '' - } +class Subreddit extends React.Component { + state = { + threads: [], + loading: true } componentDidMount () { - this.getRemovedThreads(this.props) + const { subreddit = 'all' } = this.props.match.params + this.getRemovedThreads(subreddit) } - componentWillReceiveProps (nextProps) { - const newSubreddit = getSubredditForAPI(nextProps) + // Check if the subreddit has changed in the url, and fetch threads accordingly + componentDidUpdate (prevProps) { + const { subreddit: newSubreddit = 'all' } = this.props.match.params + const { subreddit = 'all' } = prevProps.match.params - if (this.state.subreddit !== newSubreddit) { - this.getRemovedThreads(nextProps) + if (subreddit !== newSubreddit) { + this.getRemovedThreads(newSubreddit) } } - getRemovedThreads (props) { - const subreddit = getSubredditForAPI(props) + // Download thread IDs from removeddit API, then thread info from reddit API + getRemovedThreads (subreddit) { + document.title = `/r/${subreddit}` + this.setState({ threads: [], loading: true }) + this.props.global.setLoading('Loading removed threads...') + getRemovedThreadIDs(subreddit) .then(threadIDs => getThreads(threadIDs)) .then(threads => { @@ -43,29 +39,34 @@ export default class Subreddit extends React.Component { thread.removed = true thread.selftext = '' }) - this.setState({ threads, subreddit }) + this.setState({ threads, loading: false }) + this.props.global.setSuccess() }) } render () { const { subreddit = 'all' } = this.props.match.params - const subredditLink = `/r/${subreddit}` + const noThreadsFound = this.state.threads.length === 0 && !this.state.loading return (
- {subredditLink} + /r/{subreddit} - reddit + reddit - ceddit + ceddit
{ - this.state.threads.map(thread => ( - - )) + noThreadsFound + ?

No removed threads found for /r/{subreddit}

+ : this.state.threads.map(thread => ( + + )) } ) } } + +export default connect(Subreddit) diff --git a/src/sass/common.sass b/src/sass/common.sass index 48d7db9..9a0fea4 100644 --- a/src/sass/common.sass +++ b/src/sass/common.sass @@ -6,6 +6,7 @@ html, body .main margin: 15px + color: white .removed background-color: $removed diff --git a/src/sass/index.sass b/src/sass/index.sass index 5f9c58c..4e8c9b8 100644 --- a/src/sass/index.sass +++ b/src/sass/index.sass @@ -1,5 +1,3 @@ - - @import colors @import common @import header diff --git a/src/state/index.js b/src/state/index.js index 21037ff..6d39d9e 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -44,19 +44,19 @@ class GlobalState extends Container { this.setState({commentFilter: filterType}) } - setErrorText (text) { + setError (text) { this.setState({statusText: text, statusImage: '/images/error.png'}) } - setSuccessText (text) { - this.setState({statusText: text, statusImage: '/images/done.png'}) + setSuccess () { + this.setState({statusText: '', statusImage: '/images/success.png'}) } - setLoadingText (text) { + setLoading (text) { this.setState({statusText: text, statusImage: '/images/loading.gif'}) } - clearStatusText () { + clearStatus () { this.setState({statusText: '', statusImage: undefined}) } } diff --git a/webpack.config.js b/webpack.config.js index 8cc3233..a6ff7ba 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,4 @@ -const path = require('path'); +const path = require('path') module.exports = { entry: [ diff --git a/yarn.lock b/yarn.lock index c44e385..ee336e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,82 @@ # yarn lockfile v1 +"@babel/code-frame@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9" + dependencies: + "@babel/highlight" "7.0.0-beta.44" + +"@babel/generator@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42" + dependencies: + "@babel/types" "7.0.0-beta.44" + jsesc "^2.5.1" + lodash "^4.2.0" + source-map "^0.5.0" + trim-right "^1.0.1" + +"@babel/helper-function-name@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd" + dependencies: + "@babel/helper-get-function-arity" "7.0.0-beta.44" + "@babel/template" "7.0.0-beta.44" + "@babel/types" "7.0.0-beta.44" + +"@babel/helper-get-function-arity@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15" + dependencies: + "@babel/types" "7.0.0-beta.44" + +"@babel/helper-split-export-declaration@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc" + dependencies: + "@babel/types" "7.0.0-beta.44" + +"@babel/highlight@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5" + dependencies: + chalk "^2.0.0" + esutils "^2.0.2" + js-tokens "^3.0.0" + +"@babel/template@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f" + dependencies: + "@babel/code-frame" "7.0.0-beta.44" + "@babel/types" "7.0.0-beta.44" + babylon "7.0.0-beta.44" + lodash "^4.2.0" + +"@babel/traverse@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966" + dependencies: + "@babel/code-frame" "7.0.0-beta.44" + "@babel/generator" "7.0.0-beta.44" + "@babel/helper-function-name" "7.0.0-beta.44" + "@babel/helper-split-export-declaration" "7.0.0-beta.44" + "@babel/types" "7.0.0-beta.44" + babylon "7.0.0-beta.44" + debug "^3.1.0" + globals "^11.1.0" + invariant "^2.2.0" + lodash "^4.2.0" + +"@babel/types@7.0.0-beta.44": + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757" + dependencies: + esutils "^2.0.2" + lodash "^4.2.0" + to-fast-properties "^2.0.0" + "@webassemblyjs/ast@1.5.13": version "1.5.13" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25" @@ -441,6 +517,17 @@ babel-core@^6.26.0, babel-core@^6.26.3: slash "^1.0.0" source-map "^0.5.7" +babel-eslint@^8.2.6: + version "8.2.6" + resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.6.tgz#6270d0c73205628067c0f7ae1693a9e797acefd9" + dependencies: + "@babel/code-frame" "7.0.0-beta.44" + "@babel/traverse" "7.0.0-beta.44" + "@babel/types" "7.0.0-beta.44" + babylon "7.0.0-beta.44" + eslint-scope "3.7.1" + eslint-visitor-keys "^1.0.0" + babel-generator@^6.26.0: version "6.26.1" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90" @@ -587,6 +674,10 @@ babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" +babel-plugin-syntax-class-properties@^6.8.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de" + babel-plugin-syntax-exponentiation-operator@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" @@ -615,6 +706,15 @@ babel-plugin-transform-async-to-generator@^6.22.0: babel-plugin-syntax-async-functions "^6.8.0" babel-runtime "^6.22.0" +babel-plugin-transform-class-properties@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac" + dependencies: + babel-helper-function-name "^6.24.1" + babel-plugin-syntax-class-properties "^6.8.0" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + babel-plugin-transform-es2015-arrow-functions@^6.22.0: version "6.22.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221" @@ -958,6 +1058,10 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0: lodash "^4.17.4" to-fast-properties "^1.0.3" +babylon@7.0.0-beta.44: + version "7.0.0-beta.44" + resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d" + babylon@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" @@ -1979,6 +2083,13 @@ eslint-plugin-standard@~3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-3.0.1.tgz#34d0c915b45edc6f010393c7eef3823b08565cf2" +eslint-scope@3.7.1: + version "3.7.1" + resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" + dependencies: + esrecurse "^4.1.0" + estraverse "^4.1.1" + eslint-scope@^3.7.1: version "3.7.3" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535" @@ -2546,7 +2657,7 @@ global-modules-path@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.1.0.tgz#923ec524e8726bb0c1a4ed4b8e21e1ff80c88bbb" -globals@^11.0.1: +globals@^11.0.1, globals@^11.1.0: version "11.7.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673" @@ -2919,7 +3030,7 @@ interpret@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4: +invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -3188,14 +3299,14 @@ js-base64@^2.1.8: version "2.4.6" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.6.tgz#1d49f618bef43630cd191f4e122447acfdb947d8" +js-tokens@^3.0.0, js-tokens@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" + "js-tokens@^3.0.0 || ^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" -js-tokens@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" - js-yaml@^3.9.1: version "3.12.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1" @@ -3211,6 +3322,10 @@ jsesc@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b" +jsesc@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe" + jsesc@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" @@ -3372,7 +3487,7 @@ lodash.mergewith@^4.6.0: version "4.6.1" resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927" -lodash@^4.0.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10: +lodash@^4.0.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@~4.17.10: version "4.17.10" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" @@ -4959,7 +5074,7 @@ source-map@^0.4.2: dependencies: amdefine ">=0.0.4" -source-map@^0.5.6, source-map@^0.5.7: +source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -5260,6 +5375,10 @@ to-fast-properties@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" +to-fast-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" + to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"