7 |
10 | );
11 | };
12 |
13 | export default Interaction;
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "dependencies": {
7 | "axios": "^0.19.2",
8 | "cors": "^2.8.5",
9 | "express": "^4.17.1"
10 | },
11 | "devDependencies": {
12 | "nodemon": "^2.0.2"
13 | },
14 | "scripts": {
15 | "start": "node server.js",
16 | "heroku-postbuild": "cd client && npm install && npm run build"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 | /.storybook
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
--------------------------------------------------------------------------------
/client/src/components/Slider/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Swipeable } from "react-swipeable";
3 | import "./index.scss";
4 |
5 | const Slider = ({ handleSwipeDown, handleSwipeUp, children }) => {
6 | return (
7 | {icon}
8 | {text}
9 |
8 | {interactions.map((interaction, i) => (
9 |
17 | );
18 | };
19 |
20 | export default Interactions;
21 |
--------------------------------------------------------------------------------
/client/src/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, applyMiddleware, compose } from "redux";
2 | import { postsReducer } from "./reducers/postsReducer";
3 | import thunk from "redux-thunk";
4 | import { appReducer } from "./reducers/appReducer";
5 |
6 | const RootReducer = combineReducers({ posts: postsReducer, app: appReducer });
7 |
8 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
9 |
10 | const store = createStore(
11 | RootReducer,
12 | composeEnhancers(applyMiddleware(thunk))
13 | );
14 |
15 | export default store;
16 |
--------------------------------------------------------------------------------
/client/src/index.scss:
--------------------------------------------------------------------------------
1 | html,
2 | #root,
3 | body {
4 | width: 100%;
5 | height: 100%;
6 | background-color: black;
7 | -webkit-tap-highlight-color: transparent;
8 | }
9 | body {
10 | margin: 0;
11 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
12 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
13 | sans-serif;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | code {
19 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
20 | monospace;
21 | }
22 |
--------------------------------------------------------------------------------
/client/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "rbitt",
3 | "name": "Reddit but it's TikTok",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "fullscreen",
23 | "theme_color": "#000000",
24 | "background_color": "#000000"
25 | }
26 |
--------------------------------------------------------------------------------
/client/src/components/Loader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Loader } from "react-loaders";
3 |
4 | export const FullScreenLoader = ({ active }) => {
5 | if (active) {
6 | return (
7 |
21 |
23 | );
24 | }
25 | return null;
26 | };
27 |
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Provider } from "react-redux";
4 | import "tachyons";
5 | import "loaders.css";
6 | import "./index.scss";
7 | import App from "./App";
8 | import * as serviceWorker from "./serviceWorker";
9 | import store from "./store";
10 |
11 | ReactDOM.render(
12 |
22 | {icon}
23 | {text}
24 |
25 | );
26 | };
27 |
28 | const Menu = () => {
29 | return (
30 |
31 | {menuItems.map(item => (
32 |
39 | ))}
40 |
41 | );
42 | };
43 |
44 | export default Menu;
45 |
--------------------------------------------------------------------------------
/client/src/components/Comments/index.scss:
--------------------------------------------------------------------------------
1 | .comments {
2 | width: 100%;
3 | height: 100%;
4 | background-color: white;
5 | padding: 0.5rem;
6 |
7 | .comment-thread {
8 | margin: 0.5rem 0 0 0;
9 | }
10 | }
11 |
12 | .comment {
13 | font-size: 0.9rem;
14 | background-color: white;
15 | padding: 0.5rem 0 0 0.5rem;
16 | text-align: left;
17 | color: black;
18 | .comment-header {
19 | height: 1rem;
20 | font-size: 0.7rem;
21 | color: black;
22 | .comment-collapse {
23 | display: inline-flex;
24 | border-radius: 999px;
25 | width: 0.75rem;
26 | height: 0.75rem;
27 | justify-content: center;
28 | align-items: center;
29 | padding: 0.15rem;
30 | margin-right: 0.25rem;
31 | &:hover {
32 | background-color: rgba(0, 0, 0, 0.2);
33 | }
34 | }
35 | .comment-author {
36 | &:hover {
37 | text-decoration: underline;
38 | cursor: pointer;
39 | }
40 | }
41 | .comment-score {
42 | color: rgba(0, 0, 0, 0.5);
43 | }
44 | }
45 | .comment-body {
46 | margin: 0 0 0.25rem 0;
47 | padding: 0.5rem 0 0 0.5rem;
48 | line-height: 1.5;
49 | p {
50 | padding: 0;
51 | margin: 0;
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/client/src/actions/appActions.js:
--------------------------------------------------------------------------------
1 | import { appTypes as at, postTypes as pt } from "./types";
2 | import axios from "axios";
3 | import { formatResponse } from "../utils/AppUtils";
4 | import { PROD_URL, DEV_URL } from "../utils/AppUtils";
5 |
6 | // Change me to DEV_URL if you are trying to run the app locally
7 | const URL = PROD_URL;
8 |
9 | export const fetchPostsFromSubreddit = (
10 | subreddit = "pics",
11 | query = ""
12 | ) => dispatch => {
13 | dispatch({ type: at.FETCHING_POSTS });
14 | axios
15 | .get(`${URL}/api/r/${subreddit}${query}`)
16 | .then(res => {
17 | const data = formatResponse(res.data);
18 | let bOA = "";
19 | if (query.includes("before")) {
20 | bOA = "BEFORE";
21 | } else if (query.includes("after")) {
22 | bOA = "AFTER";
23 | } else {
24 | bOA = "";
25 | }
26 | dispatch({ type: at.FETCH_POSTS_FROM_SUBREDDIT, payload: data });
27 | dispatch({
28 | type: pt.SET_POSTS,
29 | payload: { posts: data.posts, numPosts: data.numPosts - 1, query: bOA }
30 | });
31 | dispatch({ type: at.FINISHED_FETCHING_POSTS });
32 | })
33 | .catch(err => console.error(err));
34 | };
35 |
36 | export const setSubreddit = (sub = "") => ({
37 | type: at.SET_SUBREDDIT,
38 | payload: sub
39 | });
40 |
--------------------------------------------------------------------------------
/client/src/components/Display/index.scss:
--------------------------------------------------------------------------------
1 | .display {
2 | overflow: hidden;
3 | height: 100%;
4 | width: 100%;
5 | &-img {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | align-content: center;
10 | overflow: inherit;
11 | position: relative;
12 | height: 100%;
13 | width: 100%;
14 | z-index: 2;
15 | img,
16 | video,
17 | p {
18 | max-height: 100vh;
19 | max-width: 100vw;
20 | }
21 | img {
22 | border-radius: 5px;
23 | pointer-events: none;
24 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
25 | 0px 0px 15px rgba(0, 0, 0, 0.5);
26 | }
27 | .text {
28 | padding: 1rem;
29 | margin: 2rem;
30 | border: 1px solid white;
31 | text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
32 | background-color: rgba(0, 0, 0, 0.35);
33 | border-radius: 5px;
34 | }
35 | }
36 | &-bg {
37 | position: fixed;
38 | top: 0;
39 | bottom: 0;
40 | left: 0;
41 | right: 0;
42 | overflow: inherit;
43 | pointer-events: none;
44 | filter: blur(10px) opacity(0.5);
45 | -webkit-filter: blur(10px);
46 | background-position: center;
47 | background-repeat: no-repeat;
48 | background-size: cover;
49 | border-radius: 10px;
50 | z-index: 0;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/client/src/components/Views/Home.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Header from "../Header";
3 | import Display from "../Display";
4 | import Menu from "../Menu";
5 | import Slider from "../Slider";
6 |
7 | const Home = ({
8 | subreddit,
9 | post,
10 | nextPost,
11 | prevPost,
12 | fetchPosts,
13 | loadNextPost,
14 | loadPrevPost
15 | }) => {
16 | const [overlayActive, setOverlayActive] = useState(false);
17 | return (
18 |
19 |
49 | );
50 | };
51 |
52 | export default Home;
53 |
--------------------------------------------------------------------------------
/client/src/components/BottomDrawer/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import "./index.scss";
3 | import { IoIosClose } from "react-icons/io";
4 | import { Swipeable } from "react-swipeable";
5 | import { CSSTransition, Transition } from "react-transition-group";
6 |
7 | const BottomDrawer = ({ active, title, setActive, children }) => {
8 | const [isAtTop, setIsAtTop] = useState(false);
9 | const handleClose = () => {
10 | setActive(false);
11 | };
12 |
13 | return (
14 |
24 |
46 |
25 | {title}
26 | handleClose()}
28 | className="close"
29 | size={25}
30 | />
31 |
32 | {
35 | if (e.currentTarget.scrollTop > 5) {
36 | setIsAtTop(false);
37 | } else {
38 | setIsAtTop(true);
39 | }
40 | }}
41 | >
42 | {isAtTop}
43 | {children}
44 |
45 |
15 |
50 | );
51 | };
52 |
53 | export default connect(null, { setSubreddit })(Header);
54 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const server = express();
3 | const cors = require("cors");
4 | const axios = require("axios").default;
5 | const port = process.env.PORT || 5000;
6 | const router = express.Router();
7 |
8 | const BASE_URL = "https://reddit.com";
9 |
10 | const isEmptyObject = object => {
11 | for (let key in object) {
12 | if (object.hasOwnProperty(key)) {
13 | return false;
14 | }
15 | return true;
16 | }
17 | };
18 |
19 | const queryToString = query => {
20 | console.log(JSON.stringify(query));
21 | if (query && !isEmptyObject(query)) {
22 | return Object.keys(query)
23 | .map((key, i) =>
24 | i === 0 ? `?${key}=${query[key]}` : `&${key}=${query[key]}`
25 | )
26 | .reduce((prev, curr) => prev + curr, "");
27 | }
28 | };
29 |
30 | router.route("/r/:subreddit").get((req, res) => {
31 | axios
32 | .get(
33 | `${BASE_URL}/r/${req.params.subreddit}.json${queryToString(req.query)}`
34 | )
35 | .then(posts => {
36 | res.json(posts.data);
37 | })
38 | .catch(err => console.log(err));
39 | });
40 |
41 | router.route("/comments/:id").get((req, res) => {
42 | axios
43 | .get(
44 | `${BASE_URL}/comments/${req.params.id}.json${queryToString(req.query)}`
45 | )
46 | .then(comments => {
47 | res.json(comments.data);
48 | })
49 | .catch(err => console.error(err));
50 | });
51 |
52 | server.use(express.json());
53 | server.use(cors());
54 | server.use("/api", router);
55 | server.use(express.static("./client/build/"));
56 | if (process.env.NODE_ENV === "production") {
57 | server.get("/", (req, res) => {
58 | res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
59 | });
60 | }
61 |
62 | server.listen(port, () => console.log(`Reddit CORS fixer : Port ${port}`));
63 |
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
16 | {links.map((link, i) =>
17 | i === 2 ? (
18 |
28 |
49 |
19 | {link}
20 |
21 | ) : (
22 |
23 | {link}
24 |
25 | )
26 | )}
27 |
37 |
43 | {fetchingComment ?
45 | {post.type !== "TEXT" ? (
46 |
49 | );
50 | } else {
51 | return null;
52 | }
53 | };
54 |
55 | export default Overlay;
56 |
--------------------------------------------------------------------------------
/client/src/reducers/postsReducer.js:
--------------------------------------------------------------------------------
1 | import { postTypes as pt } from "../actions/types";
2 | import { formatResponse } from "../utils/AppUtils";
3 | import { fetchPostsFromSubreddit } from "../actions/appActions";
4 | import {
5 | mapOutChildren,
6 | recursiveMapOutChildren,
7 | getAllChildren
8 | } from "../utils/PostUtils";
9 |
10 | const initialState = {
11 | data: {},
12 | count: 3,
13 | posts: [],
14 | numPosts: 0,
15 | post: {},
16 | fetchingComment: false,
17 | };
18 |
19 | export const postsReducer = (state = initialState, action) => {
20 | switch (action.type) {
21 | case pt.SET_POSTS:
22 | console.log(`Setting posts to: `, action.payload);
23 | switch (action.payload.query) {
24 | case "BEFORE":
25 | return {
26 | ...state,
27 | posts: action.payload.posts,
28 | count: action.payload.posts.length - 1
29 | };
30 | case "AFTER":
31 | return {
32 | ...state,
33 | posts: action.payload.posts,
34 | count: 0
35 | };
36 | default:
37 | return {
38 | ...state,
39 | posts: action.payload.posts,
40 | count: 0
41 | };
42 | }
43 | case pt.SET_COUNT:
44 | console.log(state.posts[state.count]);
45 | return {
46 | ...state,
47 | count: action.payload
48 | };
49 | case pt.FETCHING_COMMENTS:
50 | return {
51 | ...state,
52 | fetchingComment: true
53 | }
54 | case pt.FETCH_COMMENTS_FROM_POST:
55 | // console.log("COMMENTS:", action.payload);
56 | let newPosts = [...state.posts];
57 | newPosts[state.count] = {
58 | ...newPosts[state.count],
59 | comments: action.payload
60 | };
61 | return {
62 | ...state,
63 | posts: newPosts
64 | };
65 | case pt.FINISHED_FETCHING_COMMENTS:
66 | return {
67 | ...state,
68 | fetchingComment: false
69 | }
70 | case pt.LOAD_NEXT_POST:
71 | default:
72 | return state;
73 | }
74 | };
75 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from "react";
2 | import "./App.scss";
3 | import { setCount } from "./actions/postsActions";
4 | import { fetchPostsFromSubreddit } from "./actions/appActions";
5 | import { nextPost, fetchCommentsFromPost } from "./actions/postsActions";
6 | import Home from "./components/Views/Home";
7 | import { connect } from "react-redux";
8 | import { FullScreenLoader } from "./components/Loader";
9 | import { getMediaSrc } from "./utils/PostUtils";
10 |
11 | function App({
12 | app,
13 | data,
14 | posts,
15 | count,
16 | fetchPostsFromSubreddit,
17 | fetchCommentsFromPost,
18 | setCount
19 | }) {
20 | const loadNextPost = useCallback(() => {
21 | if (count === posts.length - 1) {
22 | fetchPostsFromSubreddit(
23 | app.subreddit,
24 | `?limit=25&after=${app.data.after}&count=${count}`
25 | );
26 | } else if (count < posts.length) {
27 | setCount(count + 1);
28 | }
29 | }, [count, app.subreddit]);
30 |
31 | const loadPreviousPost = useCallback(() => {
32 | if (count === 0) {
33 | if (app.data.before) {
34 | fetchPostsFromSubreddit(
35 | app.subreddit,
36 | `?limit=25&before=${app.data.before}&count=${posts.length -
37 | 1}`
38 | );
39 | }
40 | } else if (count > 0) {
41 | setCount(count - 1);
42 | }
43 | }, [count, app.subreddit]);
44 | // Initial Load
45 | useEffect(() => {
46 | fetchPostsFromSubreddit(app.subreddit);
47 | }, []);
48 |
49 | useEffect(() => {
50 | // Preload all posts
51 | posts.map(post => {
52 | new Image().src = post.thumbnail;
53 | });
54 | }, [posts]);
55 |
56 | // useEffect(() => {
57 | // if (posts.length) {
58 | // fetchCommentsFromPost(posts[count].id, "");
59 | // }
60 | // }, [count]);
61 |
62 | console.log(app.subreddit);
63 | return (
64 | Loading
:{post.title}
47 | ) : null}
48 |
65 | loadNextPost()}
71 | loadPrevPost={() => loadPreviousPost()}
72 | />
73 |
74 | );
75 | }
76 |
77 | const mapStateToProps = state => ({
78 | posts: state.posts.posts,
79 | post: state.posts.post,
80 | count: state.posts.count,
81 | data: state.posts.data,
82 | app: state.app
83 | });
84 |
85 | const mapDispatchToProps = {
86 | fetchPostsFromSubreddit,
87 | fetchCommentsFromPost,
88 | setCount,
89 | nextPost
90 | };
91 |
92 | export default connect(mapStateToProps, mapDispatchToProps)(App);
93 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Reddit (but it's TikTok)
2 |
3 | I have long been a viewer of Reddit content. But now there is a new Social Media out there: TikTok. Now, I am not a fan of the content on there, but the app layout is not bad.
4 | So I did what anyone would do and took all of the content on Reddit and put it into Tiktok.
5 |
6 | 
7 | 
8 | 
9 | 
10 |
11 | ## How it works
12 |
13 | Client: React, Redux, Axios
14 | Server: Express
15 |
16 | The client side has been custom-made (and programmed) to look as close to TikTok as possible with some features altered to be more user-friendly w/ Reddit content.
17 | Currently, not every feature has been implemented. I'm not sure I intend to continue working on it but on the plus side you have the two most important features working (sorta).
18 |
19 | - Viewing Posts!
20 | - You also have the ability to switch subreddits using the search bar. (You have to click enter twice for some reason though...)
21 | - Comments!
22 |
23 | The server side is essentially just a wrapper over the Reddit API w/ two endpoints that enables you to fetch posts and comments. That's all I need right now.
24 | You're probably wondering why we need a wrapper if we're just doing API requests to reddit in the end anyways... Well, it's because of default browser rules on different devices.
25 | They seem to not like it when a website automatically sends requests to another server (it's a CORS error) which is solved by just fetching the data from a server that can disable that rule.
26 | So, the client needs to be bundled with the server to work on any device that is not a development machine.
27 |
28 | ## Further Improvements
29 |
30 | There is a lot more that can be done with this. Right now, the comments system only displays my username right now (this would be the first thing to fix).
31 | Here are some potential further improvements:
32 |
33 | - Sign in with your reddit account
34 | - Like posts
35 | - Comment on posts
36 | - Actually post something
37 | - Themes
38 | - Caching and pre-fetching content to make infinite scroll better.
39 | - Fixing the bug where swiping backwards on a post messes up the ordering of posts
40 | - Making the site design desktop friendly (please only use it on mobile right now :) )
41 |
42 | ## How to run?
43 |
44 | 1. Clone the repo into a directory
45 | 2. Run npm install on both the client and root folders
46 | 3. Then execute 'npm start' on both folders (root first, then client)
47 | 4. Navigate to appActions.js and postActions.js and change the URL variable in each to DEV_URL
48 | 5. Navigate to localhost:5000 and it should be working!
49 |
--------------------------------------------------------------------------------
/client/src/components/Display/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from "react";
2 | import "./index.scss";
3 | import { removeEncoding } from "../../utils/PostUtils";
4 | import Overlay from "../Overlay";
5 | import Slider from "../Slider";
6 |
7 | const Display = ({ post, autoplay, loadPrevPost, loadNextPost }) => {
8 | const [active, setActive] = useState(true);
9 |
10 | const handleKeyPress = useCallback(event => {
11 | const { key } = event;
12 | if(key === 'ArrowDown'){
13 | loadNextPost();
14 | }
15 | if(key === 'ArrowUp'){
16 | loadPrevPost();
17 | }
18 | }, [post]);
19 |
20 | useEffect(() => {
21 | window.addEventListener('keydown', handleKeyPress);
22 | return () => {
23 | window.removeEventListener('keydown', handleKeyPress);
24 | }
25 | }, [handleKeyPress])
26 |
27 | return (
28 | {}}>
29 |
36 |
46 |
47 | );
48 | };
49 |
50 | const MediaDisplay = ({ type, src, thumbSrc, title, autoplay }) => {
51 | const [fullSrc, setFullSrc] = useState(thumbSrc);
52 | useEffect(() => {
53 | setFullSrc(thumbSrc);
54 | if (type === "IMAGE") {
55 | let image = new Image();
56 | image.src = src;
57 | // Ensure it is loading the correct image for the post
58 | if (image.src === src) {
59 | image.onload = () => setFullSrc(src);
60 | }
61 | }
62 | }, [src]);
63 | switch (type) {
64 | case "VIDEO":
65 | return (
66 |
73 | );
74 | case "IMAGE":
75 | return (
76 |
37 |
45 | {removeEncoding(title)}
; 91 | default: 92 | return{removeEncoding(title)}
; 93 | } 94 | }; 95 | 96 | export default Display; 97 | -------------------------------------------------------------------------------- /client/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /client/src/utils/PostUtils.js: -------------------------------------------------------------------------------- 1 | export const removeEncoding = str => { 2 | let fixedStr = str; 3 | while (fixedStr.includes("&")) { 4 | fixedStr = fixedStr.replace("&", "&"); 5 | } 6 | return fixedStr; 7 | }; 8 | 9 | export const getEmbedFromContent = (content = "") => { 10 | let startPos = content.indexOf("src="); 11 | let sliced = content.slice(startPos); 12 | let endPos = sliced.indexOf('"'); 13 | sliced = sliced.slice(0, endPos); 14 | return sliced; 15 | }; 16 | 17 | export const getMediaSrc = post => { 18 | switch (post.type) { 19 | case "VIDEO_EMBED": 20 | if (post.secure_media_embed.content) { 21 | return getEmbedFromContent(post.secure_media_embed.content); 22 | } else if (post.media_embed.content) { 23 | return getEmbedFromContent(post.media_embed.content); 24 | } 25 | case "VIDEO": 26 | if (post.preview.reddit_video_preview) { 27 | return post.preview.reddit_video_preview.fallback_url; 28 | } else if (post.secure_media) { 29 | if (post.secure_media.reddit_video) { 30 | return post.secure_media.reddit_video.fallback_url; 31 | } 32 | } 33 | case "IMAGE": 34 | if (post.preview.images[0].source.url) { 35 | return removeEncoding(post.preview.images[0].source.url); 36 | } else if (post.thumbnail) { 37 | return post.thumbnail; 38 | } 39 | default: 40 | return "No image sources found"; 41 | } 42 | }; 43 | 44 | export const getChildren = replies => 45 | replies.data.children.map(child => child.data); 46 | 47 | export const getPostType = post => { 48 | if (post.media_embed.content || post.secure_media_embed.content) { 49 | return "VIDEO_EMBED"; 50 | } else if (post.is_video) { 51 | return "VIDEO"; 52 | } else if (post.preview) { 53 | if (post.preview.reddit_video_preview) { 54 | return "VIDEO"; 55 | } else if (post.preview.images[0].source.url) { 56 | return "IMAGE"; 57 | } 58 | } else if (post.secure_media) { 59 | if (post.secure_media.reddit_video) { 60 | return "VIDEO"; 61 | } 62 | } else { 63 | return "TEXT"; 64 | } 65 | }; 66 | export const numToString = value => { 67 | var suffixes = ["", "k", "m", "b", "t"]; 68 | var suffixNum = Math.floor(("" + value).length / 3); 69 | var shortValue = parseFloat( 70 | (suffixNum != 0 ? value / Math.pow(1000, suffixNum) : value).toPrecision(4) 71 | ); 72 | if (shortValue % 1 != 0) { 73 | shortValue = shortValue.toFixed(1); 74 | } 75 | return shortValue + suffixes[suffixNum]; 76 | }; 77 | 78 | export const getThumbnailSrc = post => { 79 | if (post.preview) { 80 | if (post.preview.images[0].resolutions[0]) { 81 | return removeEncoding(post.preview.images[0].resolutions[0].url); 82 | } else if (post.thumbnail) { 83 | return removeEncoding(post.thumbnail); 84 | } else { 85 | return "There was no suitable image"; 86 | } 87 | } 88 | }; 89 | 90 | export const formatPost = post => { 91 | let formattedPost = { ...post }; 92 | formattedPost.type = getPostType(post); 93 | formattedPost.media = getMediaSrc(formattedPost); 94 | formattedPost.thumbnail = getThumbnailSrc(formattedPost); 95 | return formattedPost; 96 | }; 97 | -------------------------------------------------------------------------------- /client/src/components/Comments/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./index.scss"; 3 | import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io"; 4 | import { getChildren } from "../../utils/PostUtils"; 5 | 6 | const COLOR_SCHEME = ["#1fab89", "#62d2a2", "#9df3c4", "#d7fbe8"]; 7 | const COLOR_SCHEME_ALT = ["#fffcca", "#55e9bc", "#11d3bc", "#537780"]; 8 | const COLOR_SCHEME_ALT_2 = ["#394a6d", "#3c9d9b", "#52de97", "#c0ffb3"]; 9 | 10 | const Comment = ({ text, score, comments, colorScheme, author, depth = 0 }) => { 11 | const [collapsed, setCollapsed] = useState(depth % 3 === 0 ? false : true); 12 | const [bodyCollapsed, setBodyCollapsed] = useState(true); 13 | const handleCollapse = () => { 14 | setCollapsed(!collapsed); 15 | }; 16 | return ( 17 |
21 |
63 | );
64 | };
65 |
66 | const Comments = ({ comments }) => {
67 | return comments ? (
68 |
22 |
62 | handleCollapse()}>
23 | handleCollapse()}>
24 | {collapsed ?
36 | {!collapsed ? (
37 |
38 | child.data)
52 | : []
53 | }
54 | colorScheme={colorScheme}
55 | depth={depth < colorScheme.length - 1 ? depth + 1 : 0}
56 | />
57 | ))
58 | : null}
59 |
60 | ) : null}
61 | setBodyCollapsed(!bodyCollapsed)}> 39 | {bodyCollapsed && text ? text.slice(0, 256) + "..." : text} 40 |
41 | {comments 42 | ? comments.map(comment => ( 43 |
69 | {comments.map(comment => (
70 | child.data)
79 | : []
80 | }
81 | colorScheme={COLOR_SCHEME}
82 | />
83 | ))}
84 |
85 | ) : null;
86 | };
87 |
88 | export default Comments;
89 |
90 |
--------------------------------------------------------------------------------
/client/src/stories/5-Comments.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Comments from "../components/Comments";
3 | import "tachyons";
4 |
5 | export default {
6 | title: "Comments",
7 | component: Comments
8 | };
9 |
10 | export const comments = [
11 | {
12 | text:
13 | "I worked for a group home. We had a difficult group of residents, but the company things so much worse.\
14 | Every resident was 14-22 years old. They had moderate mental development delays (65-75 IQ range), they all had a psychiatric disorder (from severe ADHD to schizophrenia), and they had also all been convicted of a violent sexual crime.\
15 | \
16 | I worked 3rd shift. My normal hours were 10:30pm to 9am. Four days a week.\
17 | About six months into bareworking there, they did a massive layoff.\
18 | They went down to minimum staff to student ratio each shift, with nobody extra to call in if needed. That meant if someone called out, a person on the previous shift was forced.\
19 | It got to the point, where I was being forced 3 out of 4 shifts per week. And not just a few hours. I was working 10:30 pm to around 4:30 pm the next day, and still having to come in for my following shift. I had an hour commute each way.\
20 | So I'd get home at 5:30 pm from a 16 hour shift, and have to leave the house again four hours later.\
21 | Managed that for about a month. Then one morning I was told last minute I was being forced. Told them I was fucking done and walked out.\
22 | That month took a huge toll on my mental health. Swear it took me like a year to recover.",
23 | comments: [
24 | {
25 | text:
26 | "I feel you on this one. I worked at a similar type of facility. The violent incidents that got them housed there weren't all sex-related, but the residents were all diminished capacity in varying degrees. You can only get into a wrestling match, without backup, so many times before you realize your own safety is slightly more important than the facility's administrative annual bonuses.",
27 | score: 800,
28 | comments: [
29 | {
30 | text:
31 | "I feel you on this one. I worked at a similar type of facility. The violent incidents that got them housed there weren't all sex-related, but the residents were all diminished capacity in varying degrees. You can only get into a wrestling match, without backup, so many times before you realize your own safety is slightly more important than the facility's administrative annual bonuses."
32 | },
33 | {
34 | text:
35 | "Not to mention if you used just a little too much force you were in deep shit. Most people would end up going a week unpaid every few months because there was a complaint that had to be investigated.\
36 | Lost one of our best employees while I was there because one kid bit into his arm and he basically just responded naturally and backhanded the kid. Had a chunk of skin ripped off his arm, but fired immediately."
37 | }
38 | ]
39 | },
40 | {
41 | text:
42 | "Not to mention if you used just a little too much force you were in deep shit. Most people would end up going a week unpaid every few months because there was a complaint that had to be investigated.\
43 | Lost one of our best employees while I was there because one kid bit into his arm and he basically just responded naturally and backhanded the kid. Had a chunk of skin ripped off his arm, but fired immediately."
44 | }
45 | ]
46 | },
47 | {
48 | text:
49 | "I feel you on this one. I worked at a similar type of facility. The violent incidents that got them housed there weren't all sex-related, but the residents were all diminished capacity in varying degrees. You can only get into a wrestling match, without backup, so many times before you realize your own safety is slightly more important than the facility's administrative annual bonuses."
50 | },
51 | {
52 | text:
53 | "Not to mention if you used just a little too much force you were in deep shit. Most people would end up going a week unpaid every few months because there was a complaint that had to be investigated.\
54 | Lost one of our best employees while I was there because one kid bit into his arm and he basically just responded naturally and backhanded the kid. Had a chunk of skin ripped off his arm, but fired immediately.\
55 | "
56 | }
57 | ];
58 |
59 | export const DefaultComments = () =>