innocuous-symmetry/cat-reddit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media edge cases #7

Merged
innocuous-symmetry merged 2 commits from media-edge-cases into master 2022-01-30 17:27:31 +00:00
Conversation 1 Commits 2 Files Changed 4 +29 -13
4 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
public/index.html
View File

@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React Redux App</title>
<title>Cat Reddit</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

13
src/features/posts/Feed.js
View File

@@ -1,8 +1,8 @@
import React, { useState, useEffect } from "react";
import { fetchBySub, selectPosts } from "./postsSlice";
import { fetchBySub, /* selectPosts */ } from "./postsSlice";
import { selectAllSubs } from "../reddit/redditSlice";
import { useSelector, useDispatch } from "react-redux";
import { updatePosts } from "./postsSlice";
// import { updatePosts } from "./postsSlice";
import { v4 } from "uuid";
import Post from "./Post";
@@ -12,7 +12,7 @@ export default function Feed() {
const [feed, setFeed] = useState(null); // Expects to receive an array of Post components mapped with data from fetchBySub
const dispatch = useDispatch();
const posts = useSelector(selectPosts);
// const posts = useSelector(selectPosts);
const subs = useSelector(selectAllSubs); // Selects subreddits from redditSlice
useEffect(() => { // this useEffect loop pulls the endpoints from the selected subreddits and stores them as an array in "endpoints"
@@ -38,8 +38,6 @@ export default function Feed() {
useEffect(() => { // once this is done, this loop pulls posts from each endpoint
let isActive = true;
const getPosts = async(arr) => {
if (endpoints) {
const mappedResults = arr.map(each => dispatch(fetchBySub(each))); // maps each endpoint into a call to dispatch fetchBySub
@@ -50,11 +48,6 @@ export default function Feed() {
}
getPosts(endpoints);
return () => {
isActive = false;
}
}, [dispatch, setData, endpoints]);
useEffect(() => {

27
src/features/posts/Post.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
// import { useDispatch } from "react-redux";
import Discussion from "../discussion/Discussion";
import './Post.css';
@@ -66,6 +66,19 @@ export default function Post({data, key}) {
}
setBody(selftext.substring(0,limit) + '...');
}
const handleCrosspost = () => {
if (data.crosspost_parent_list[0].is_video) {
return (
<>
<video src={data.crosspost_parent_list[0].url}>This video is not supported by your browser.</video>
<p>Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
</>
);
} else {
return;
}
}
return (
<>
@@ -76,8 +89,18 @@ export default function Post({data, key}) {
: <p>[untitled]</p>}
{media ? <img alt={title} src={media} /> : ''}
{data.crosspost_parent_list ? handleCrosspost() : ''}
{data.crosspost_parent_list ?
(data.crosspost_parent_list[0].is_video ?
<video src={data.crosspost_parent_list[0].url}></video>
: null)
: null}
{video ?
{data.gallery_data ?
<p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
: null}
{video ?
<video controls type="video/mp4" src={video}></video>
: ''}