12 | name && token ? :
13 | }
14 | />
15 | )
16 | }
17 |
18 | ProtectedRoute.propTypes = {
19 | component: PropTypes.elementType,
20 | }
21 |
22 | export default ProtectedRoute
23 |
--------------------------------------------------------------------------------
/src/components/SavedLinkListItem.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | faRedditAlien,
3 | faRedditSquare,
4 | } from '@fortawesome/free-brands-svg-icons'
5 | import {
6 | faArrowUp,
7 | faCalendarAlt,
8 | faCommentAlt,
9 | faLink,
10 | faTrashAlt,
11 | } from '@fortawesome/free-solid-svg-icons'
12 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
13 | import { format, fromUnixTime } from 'date-fns'
14 | import React from 'react'
15 | import { useDispatch, useSelector } from 'react-redux'
16 | import TextTruncate from 'react-text-truncate'
17 | import PropTypes from 'prop-types'
18 | import { unsavePost } from '../redux/actions'
19 |
20 | function SavedLinkListItem({
21 | title,
22 | url,
23 | permalink,
24 | score,
25 | numComments,
26 | createdUtc,
27 | domain,
28 | over18,
29 | subredditNamePrefixed,
30 | id,
31 | }) {
32 | const { token } = useSelector((state) => state.user)
33 | const dispatch = useDispatch()
34 | const unsave = (postID) => {
35 | fetch('/api/unsave', {
36 | method: 'post',
37 | body: JSON.stringify({
38 | id: postID,
39 | token,
40 | }),
41 | })
42 | .then((res) => res.json())
43 | .then(() => {
44 | dispatch(unsavePost({ id }))
45 | })
46 | .catch((err) => console.log(err))
47 | }
48 | return (
49 |
50 |
51 |
52 |
53 |
54 | {score > 100000 ? '100K+' : score}
55 |
56 |
57 |
58 |
59 | {numComments}
60 |
61 |
64 |
107 |
108 |
109 |
113 |
114 | Posted on {format(fromUnixTime(createdUtc), 'd MMM yyy')}
115 |
116 |
117 |
118 | {domain}
119 |
120 |
121 |
22 |
25 | customSearch
26 | ? setSubredditSearchValue(e.target.value)
27 | : setSearchValue(e.target.value)
28 | }
29 | className="appearance-none block w-full bg-white text-gray-700 border border-gray-200 shadow-md rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
30 | id="search-input"
31 | type="text"
32 | placeholder={
33 | customSearch ? 'Search for subreddit title..' : 'Search for title..'
34 | }
35 | />
36 |
37 | )
38 | }
39 |
40 | export default Search
41 |
--------------------------------------------------------------------------------
/src/components/SortingDropdown.jsx:
--------------------------------------------------------------------------------
1 | import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import React from 'react'
4 | import { useDispatch } from 'react-redux'
5 | import { setSortingMethod } from '../redux/actions'
6 |
7 | function SortingDropdown() {
8 | const dispatch = useDispatch()
9 | return (
10 |
11 |
12 |
30 |
31 |
32 |
33 |
34 |
57 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
28 | {pageResults.map((link) => (
29 |
30 | ))}
31 |
32 |
33 |
34 | )
35 | }
36 |
37 | export default AllLinks
38 |
--------------------------------------------------------------------------------
/src/containers/dashboard/content/allSubreddits/AllSubreddits.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useMemo, useState } from 'react'
2 | import { useSelector } from 'react-redux'
3 | import { createSelector } from 'reselect'
4 | import AnchorNavigation from './components/AnchorNavigation'
5 | import SubredditListItem from './components/SubredditListItem'
6 | import { ComponentContext } from '../../../../context/componentContext'
7 |
8 | const linksSelector = (state) => state.saved.links
9 | const subredditSelector = createSelector(linksSelector, (links) =>
10 | links.map((link) => link.subreddit),
11 | )
12 |
13 | function AllSubreddits() {
14 | const [searchResults, setSearchResults] = useState(null)
15 | const duplicateSubreddits = useSelector(subredditSelector)
16 | const subreddits = [...new Set(duplicateSubreddits)].sort((a, b) =>
17 | a.localeCompare(b),
18 | )
19 | const copy = useMemo(() => [...duplicateSubreddits], [duplicateSubreddits])
20 | const {
21 | setHeadingTitle,
22 | setHeadingSort,
23 | subredditSearchValue,
24 | setCustomSearch,
25 | } = useContext(ComponentContext)
26 |
27 | useEffect(() => {
28 | setHeadingTitle('All Subreddits')
29 | setHeadingSort(false)
30 | setCustomSearch(true)
31 | return () => {
32 | setHeadingTitle(null)
33 | setHeadingSort(true)
34 | setCustomSearch(false)
35 | }
36 | }, [])
37 |
38 | const alphabet = [
39 | 'A',
40 | 'B',
41 | 'C',
42 | 'D',
43 | 'E',
44 | 'F',
45 | 'G',
46 | 'H',
47 | 'I',
48 | 'J',
49 | 'K',
50 | 'L',
51 | 'M',
52 | 'N',
53 | 'O',
54 | 'P',
55 | 'Q',
56 | 'R',
57 | 'S',
58 | 'T',
59 | 'U',
60 | 'V',
61 | 'W',
62 | 'X',
63 | 'Y',
64 | 'Z',
65 | '0-9',
66 | ]
67 | const sortedByLetter = alphabet.map((letter) => {
68 | if (letter === '0-9') {
69 | return [letter, [...subreddits.filter((sub) => /\d/.test(sub.charAt(0)))]]
70 | }
71 | return [
72 | letter,
73 | [...subreddits.filter((sub) => sub.toUpperCase().charAt(0) === letter)],
74 | ]
75 | })
76 | useEffect(() => {
77 | const alphabetEffect = [
78 | 'A',
79 | 'B',
80 | 'C',
81 | 'D',
82 | 'E',
83 | 'F',
84 | 'G',
85 | 'H',
86 | 'I',
87 | 'J',
88 | 'K',
89 | 'L',
90 | 'M',
91 | 'N',
92 | 'O',
93 | 'P',
94 | 'Q',
95 | 'R',
96 | 'S',
97 | 'T',
98 | 'U',
99 | 'V',
100 | 'W',
101 | 'X',
102 | 'Y',
103 | 'Z',
104 | '0-9',
105 | ]
106 | if (copy) {
107 | const sortedSubreddits = [...new Set(copy)].sort((a, b) =>
108 | a.localeCompare(b),
109 | )
110 | setSearchResults(
111 | alphabetEffect.map((letter) => [
112 | letter,
113 | [
114 | ...sortedSubreddits
115 | .filter((sub) =>
116 | sub.toLowerCase().includes(subredditSearchValue.toLowerCase()),
117 | )
118 | .filter((link) => {
119 | if (letter === '0-9') {
120 | return /\d/.test(link.charAt(0))
121 | }
122 | return link.toUpperCase().charAt(0) === letter
123 | }),
124 | ],
125 | ]),
126 | )
127 | }
128 | }, [subredditSearchValue, copy])
129 |
130 | useEffect(() => {
131 | if (window.location.hash) {
132 | const id = window.location.hash.replace('#', '')
133 | const element = document.getElementById(id)
134 | element.scrollIntoView({ behavior: 'smooth', block: 'start' })
135 | }
136 | }, [])
137 |
138 | return (
139 |
140 |
141 |
142 | {sortedByLetter && !subredditSearchValue.length
143 | ? sortedByLetter.map((letter) => {
144 | if (letter[1].length) {
145 | return (
146 |
151 | {letter[0]}
152 |
153 | {letter[1].map((sub) => (
154 |
155 | ))}
156 |
157 |
158 | )
159 | }
160 | return null
161 | })
162 | : searchResults.map((letter) => {
163 | if (letter[1].length) {
164 | return (
165 |
170 | {letter[0]}
171 |
172 | {letter[1].map((sub) => (
173 |
174 | ))}
175 |
176 |
177 | )
178 | }
179 | return null
180 | })}
181 |
182 |
183 |
184 |
8 |
25 |
26 | )
27 | }
28 |
29 | AnchorNavigation.propTypes = {
30 | sortedArray: PropTypes.array,
31 | }
32 | export default AnchorNavigation
33 |
--------------------------------------------------------------------------------
/src/containers/dashboard/content/allSubreddits/components/SubredditListItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { NavLink } from 'react-router-dom'
3 | import PropTypes from 'prop-types'
4 | function SubredditListItem({ title }) {
5 | return (
6 |
10 |
11 | {title}
12 |
13 |
14 | )
15 | }
16 |
17 | SubredditListItem.propTypes = {
18 | title: PropTypes.string,
19 | }
20 |
21 | export default SubredditListItem
22 |
--------------------------------------------------------------------------------
/src/containers/dashboard/content/filterByNSFW/FilterByNSFW.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from 'react'
2 | import { useDispatch, useSelector } from 'react-redux'
3 | import { useHistory } from 'react-router-dom'
4 | import PaginationNavigation from '../../../../components/PaginationNavigation'
5 | import SavedLinkListItem from '../../../../components/SavedLinkListItem'
6 | import { ComponentContext } from '../../../../context/componentContext'
7 | import {
8 | resetNsfwFilter,
9 | setNsfwFilter,
10 | setSearchResults,
11 | } from '../../../../redux/actions'
12 |
13 | function FilterByNSFW() {
14 | const dispatch = useDispatch()
15 | const { pageResults, currentPage, searchPages } = useSelector(
16 | (state) => state.saved,
17 | )
18 | const history = useHistory()
19 | const { setHeadingTitle, setSearchValue, searchValue } = useContext(
20 | ComponentContext,
21 | )
22 | useEffect(() => {
23 | dispatch(setNsfwFilter())
24 | dispatch(setSearchResults({ value: '' }))
25 | return () => {
26 | dispatch(resetNsfwFilter())
27 | }
28 | }, [dispatch])
29 |
30 | // useEffect(() => {
31 | // if (pageResults.length === 0 && searchValue !== '') {
32 | // history.go(-1)
33 | // }
34 | // return () => {}
35 | // }, [pageResults, searchValue])
36 |
37 | useEffect(() => {
38 | setSearchValue('')
39 | setHeadingTitle('NSFW Posts')
40 | return () => {
41 | setHeadingTitle(null)
42 | }
43 | }, [])
44 |
45 | return (
46 |
47 |
48 | {pageResults &&
49 | pageResults.map((link) => (
50 |
51 | ))}
52 |
53 |
54 |
55 | )
56 | }
57 |
58 | export default FilterByNSFW
59 |
--------------------------------------------------------------------------------
/src/containers/dashboard/content/filterBySubreddit/FilterBySubreddit.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from 'react'
2 | import { useDispatch, useSelector, batch } from 'react-redux'
3 | import { useHistory, useParams } from 'react-router-dom'
4 | import {
5 | loadNumberedPage,
6 | setSearchResults,
7 | setSubredditFilter,
8 | } from '../../../../redux/actions'
9 | import PaginationNavigation from '../../../../components/PaginationNavigation'
10 | import SavedLinkListItem from '../../../../components/SavedLinkListItem'
11 | import { ComponentContext } from '../../../../context/componentContext'
12 |
13 | function FilterBySubreddit() {
14 | const { subreddit, page } = useParams()
15 | const dispatch = useDispatch()
16 | const history = useHistory()
17 | const { pageResults, currentPage, searchPages } = useSelector(
18 | (state) => state.saved,
19 | )
20 | const { setSubredditSearchValue } = useContext(ComponentContext)
21 |
22 | useEffect(() => {
23 | setSubredditSearchValue('')
24 | batch(() => {
25 | dispatch(setSubredditFilter({ subreddit }))
26 | dispatch(setSearchResults({ value: '' }))
27 | dispatch(loadNumberedPage({ page: page * 1 || 1 }))
28 | })
29 | return () => {
30 | dispatch(setSubredditFilter({ subreddit: null }))
31 | }
32 | }, [dispatch, subreddit])
33 |
34 | // useEffect(() => {
35 | // if (pageResults.length === 0) {
36 | // history.go(-1)
37 | // }
38 | // return () => {}
39 | // }, [pageResults])
40 |
41 | return (
42 |
43 |
44 | {pageResults.map((link) => (
45 |
46 | ))}
47 |
48 |
49 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | )
30 | }
31 |
32 | SideBar.propTypes = {
33 | isOpen: PropTypes.bool,
34 | setSidebarOpen: PropTypes.func,
35 | }
36 |
37 | export default SideBar
38 |
--------------------------------------------------------------------------------
/src/containers/dashboard/sidebar/components/CollapseExpandButton.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | faCompressArrowsAlt,
3 | faExpandArrowsAlt,
4 | } from '@fortawesome/free-solid-svg-icons'
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6 | import React from 'react'
7 | import PropTypes from 'prop-types'
8 |
9 | function CollapseExpandButton({ isOpen, setSidebarOpen }) {
10 | return (
11 |
24 | )
25 | }
26 |
27 | CollapseExpandButton.propTypes = {
28 | isOpen: PropTypes.bool,
29 | setSidebarOpen: PropTypes.func,
30 | }
31 |
32 | export default CollapseExpandButton
33 |
--------------------------------------------------------------------------------
/src/containers/dashboard/sidebar/components/ExportAsXlsSelect.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import exportFromJSON from 'export-from-json'
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
4 | import { faDownload } from '@fortawesome/free-solid-svg-icons'
5 | import { useSelector } from 'react-redux'
6 |
7 | function ExportAsXlsSelect() {
8 | const {
9 | links,
10 | subredditFilter,
11 | searchResults,
12 | pageResults,
13 | currentPage,
14 | searchPages,
15 | total,
16 | } = useSelector((state) => state.saved)
17 | const [selectValue, setSelectValue] = useState('')
18 |
19 | const exportAsXLS = (event) => {
20 | const exportType = 'xls'
21 | let fileName = 'spreadsheet'
22 | let data = []
23 | switch (event.target.value) {
24 | case 'page':
25 | fileName = `Page${currentPage}/${searchPages}`
26 | data = pageResults
27 | exportFromJSON({ data, fileName, exportType })
28 | break
29 | case 'subreddit':
30 | fileName = `ResultsFrom-r/${subredditFilter}`
31 | data = searchResults
32 | exportFromJSON({ data, fileName, exportType })
33 | break
34 | case 'everything':
35 | fileName = `AllSavedPosts(${total})`
36 | data = links
37 | exportFromJSON({ data, fileName, exportType })
38 | break
39 | default:
40 | break
41 | }
42 | setSelectValue('')
43 | }
44 |
45 | return (
46 |
47 |
64 |
65 |
66 |
67 |
8 |
13 |
14 |
15 | {name}
16 |
17 |
{karma} karma
18 |
19 |
16 |
17 |
18 |
19 |
Saveddit
20 |
Reddit Manager
21 |
22 |
23 |
Search, filter, sort, export, unsave.
24 |
Blazingly fast.
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
20 |
27 |
28 | )
29 | }
30 |
31 | export default Login
32 |
--------------------------------------------------------------------------------
/src/containers/homepage/components/Reset.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Reset() {
4 | const [hasReset, setHasReset] = React.useState(false)
5 | const reset = () => {
6 | localStorage.clear()
7 | setHasReset(true)
8 | }
9 | return (
10 | reset()}
12 | className={`font-bold ${
13 | hasReset ? 'text-blue-500' : 'text-red-500'
14 | } outline-none self-center`}
15 | >
16 | {hasReset ? 'Try now!' : 'Not working?'}
17 |
18 | )
19 | }
20 |
21 | export default Reset
22 |
--------------------------------------------------------------------------------
/src/containers/loadingScreen/LoadingScreen.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import URLParse from 'url-parse'
3 | import { useDispatch, useSelector } from 'react-redux'
4 | import { Redirect } from 'react-router-dom'
5 | import {
6 | addBatch,
7 | setLoadingStatus,
8 | setTokens,
9 | setUserDetails,
10 | } from '../../redux/actions'
11 |
12 | const LoadingScreen = () => {
13 | const dispatch = useDispatch()
14 | const user = useSelector((state) => state.user)
15 | const { isLoading, total, afterListing, fetchCount } = useSelector(
16 | (state) => state.saved,
17 | )
18 |
19 | useEffect(() => {
20 | const url = new URLParse(window.location, true)
21 | const seed = localStorage.getItem('seed')
22 | const fetchUserToken = (code) => {
23 | if (!user.token) {
24 | fetch(`/api/token?code=${code}`)
25 | .then((res) => res.json())
26 | .then((data) => {
27 | const expires = Date.now() + 3600000
28 | dispatch(
29 | setTokens({
30 | token: data.access_token,
31 | refresh_token: data.refresh_token,
32 | expires,
33 | }),
34 | )
35 | fetchUserName(data.access_token)
36 | })
37 | .catch((err) => console.log(err))
38 | }
39 | }
40 |
41 | const fetchUserName = (token) => {
42 | fetch(`/api/username`, {
43 | method: 'POST',
44 | body: JSON.stringify({
45 | token,
46 | }),
47 | })
48 | .then((res) => res.json())
49 | .then((data) => {
50 | dispatch(
51 | setUserDetails({
52 | name: data.name,
53 | avatar: data.icon_img,
54 | account_created: data.created_utc,
55 | karma: data.total_karma,
56 | verified: data.verified,
57 | coins: data.coins,
58 | }),
59 | )
60 | })
61 | .catch((err) => console.log(err))
62 | }
63 |
64 | if (url && url.query.state === seed) {
65 | fetchUserToken(url.query.code)
66 | }
67 | }, [user, dispatch])
68 |
69 | useEffect(() => {
70 | if (user.token && user.name) {
71 | const fetchSaved = () => {
72 | fetch(`/api/fetch`, {
73 | method: 'POST',
74 | body: JSON.stringify({
75 | token: user.token,
76 | username: user.name,
77 | }),
78 | })
79 | .then((res) => res.json())
80 | .then(({ after, dist, links }) => {
81 | dispatch(addBatch({ links, count: dist, afterListing: after }))
82 | })
83 | .catch((err) => console.log(err))
84 | }
85 | fetchSaved()
86 | }
87 | }, [user, dispatch])
88 |
89 | useEffect(() => {
90 | const fetchSaved = async () => {
91 | fetch(`/api/fetch`, {
92 | method: 'POST',
93 | body: JSON.stringify({
94 | token: user.token,
95 | username: user.name,
96 | afterListing,
97 | }),
98 | })
99 | .then((res) => res.json())
100 | .then(({ after, dist, links }) => {
101 | dispatch(addBatch({ links, count: dist, afterListing: after }))
102 | })
103 | .catch((err) => console.log(err))
104 | }
105 | if (afterListing && fetchCount === 100 && isLoading) {
106 | fetchSaved()
107 | }
108 | if (fetchCount < 100) {
109 | dispatch(setLoadingStatus({ status: false }))
110 | }
111 | }, [afterListing, fetchCount, user, dispatch, isLoading])
112 |
113 | if (isLoading === false) {
114 | return
115 | }
116 |
117 | return (
118 |
119 |
120 |
121 | Welcome, {user.name ? user.name : 'redditor.'}.
122 |
123 |
124 | Please wait while we fetch your saved threads and links, this may take
125 | a few seconds.
126 |
127 |
{isLoading ? `Count: ${total}` : 'Done!'}
128 |
129 |