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

Merge pull request #7 from innocuous-symmetry/media-edge-cases

Browse Source 
Media edge cases
This commit is contained in:
Mikayla Dobson
2022-01-30 11:27:31 -06:00
committed by GitHub
parent 508c91e328 8195e98058
commit 4f01e10376
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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React Redux App</title> <title>Cat Reddit</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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 React, { useState, useEffect } from "react";
import { fetchBySub, selectPosts } from "./postsSlice"; import { fetchBySub, /* selectPosts */ } from "./postsSlice";
import { selectAllSubs } from "../reddit/redditSlice"; import { selectAllSubs } from "../reddit/redditSlice";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { updatePosts } from "./postsSlice"; // import { updatePosts } from "./postsSlice";
import { v4 } from "uuid"; import { v4 } from "uuid";
import Post from "./Post"; 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 [feed, setFeed] = useState(null); // Expects to receive an array of Post components mapped with data from fetchBySub
const dispatch = useDispatch(); const dispatch = useDispatch();
const posts = useSelector(selectPosts); // const posts = useSelector(selectPosts);
const subs = useSelector(selectAllSubs); // Selects subreddits from redditSlice 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" 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 useEffect(() => { // once this is done, this loop pulls posts from each endpoint
let isActive = true;
const getPosts = async(arr) => { const getPosts = async(arr) => {
if (endpoints) { if (endpoints) {
const mappedResults = arr.map(each => dispatch(fetchBySub(each))); // maps each endpoint into a call to dispatch fetchBySub 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); getPosts(endpoints);
return () => {
isActive = false;
}
}, [dispatch, setData, endpoints]); }, [dispatch, setData, endpoints]);
useEffect(() => { useEffect(() => {

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

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux"; // import { useDispatch } from "react-redux";
import Discussion from "../discussion/Discussion"; import Discussion from "../discussion/Discussion";
import './Post.css'; import './Post.css';
@@ -66,6 +66,19 @@ export default function Post({data, key}) {
} }
setBody(selftext.substring(0,limit) + '...'); 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 ( return (
<> <>
@@ -76,8 +89,18 @@ export default function Post({data, key}) {
: <p>[untitled]</p>} : <p>[untitled]</p>}
{media ? <img alt={title} src={media} /> : ''} {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> <video controls type="video/mp4" src={video}></video>
: ''} : ''}