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

Merge pull request #17 from innocuous-symmetry/current-build-022522

Browse Source 
Current build 022522
This commit is contained in:
Mikayla Dobson
2022-02-25 14:11:11 -06:00
committed by GitHub
parent 072e291f5d 4f13c5d008
commit 062ea7315c
6 changed files with 88 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@@ -128,9 +128,11 @@
.feed {
display: inline-flex;
position: relative;
flex-direction: column;
position: relative;
align-items: center;
top: 5rem;
width: 90vw;
top: 5rem;
}

4
src/App.js
View File

@@ -7,9 +7,7 @@ function App() {
return (
<div className="App">
<Navbar />
<div className="feed">
<Feed />
</div>
<Feed />
</div>
);
}

24
src/features/discussion/Discussion.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useDispatch, /* useSelector */ } from 'react-redux';
import { useDispatch } from 'react-redux';
import { unwrapResult } from '@reduxjs/toolkit';
import { fetchComments } from '../posts/postsSlice';
import { v4 } from 'uuid';
@@ -27,23 +27,6 @@ export default function Discussion({permalink, isVisible}) {
}, [dispatch, formattedLink, isVisible, setData]);
// if (data) {
// let commentData = data[1];
// let commentArray = commentData.data.children;
// let toExport = [];
// for (let comment of commentArray) {
// toExport.push(
// <div className="indiv-comment" key={v4()}>
// <p>{'u/' + comment.data.author}</p>
// <p>{comment.data.body}</p>
// </div>
// );
// }
// setThread(toExport);
// }
useEffect(() => {
if (data) {
let commentData = data[1];
@@ -51,9 +34,6 @@ export default function Discussion({permalink, isVisible}) {
const getReplies = (comment) => {
if (comment.data.replies) {
console.log(comment.data.replies.data.children);
console.log(comment.data.replies.data.children[0].data.author)
return (
<div className={comment.data.replies.data.children ? `indiv-comment nested` : "indiv-comment"}>
<p className="comment-author">
@@ -69,8 +49,6 @@ export default function Discussion({permalink, isVisible}) {
}
}
console.log(data);
setThread(comments.map((comment) => {
return (
<>

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

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
import { fetchBySub, /* selectPosts */ } from "./postsSlice";
import { selectAllSubs } from "../reddit/redditSlice";
import { useSelector, useDispatch } from "react-redux";
// import { updatePosts } from "./postsSlice";
import { v4 } from "uuid";
import Post from "./Post";
@@ -15,7 +14,6 @@ export default function Feed() {
const [currentPage, setCurrentPage] = useState(0); // Determines current feed page; corresponds to index of feedPage array
const dispatch = useDispatch();
// 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"
@@ -81,8 +79,6 @@ export default function Feed() {
}
let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function
console.log(sortedPosts);
let newFeed = sortedPosts.map((post) => {
return (
@@ -93,7 +89,6 @@ export default function Feed() {
)
})
// dispatch(updatePosts(newFeed)); // stores current feed in state of postsSlice
setFeed(newFeed);
}
@@ -158,27 +153,29 @@ export default function Feed() {
}
return (
<>
{feedPages ?
<div className="feed">
<div className="page-handling" id="top-page-handling">
<button className="decrement" onClick={handleDecrement}>-</button>
<p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
<button className="increment" onClick={handleIncrement}>+</button>
{feedPages ?
<div className="page-handling" id="top-page-handling">
<button className="decrement" onClick={handleDecrement}>-</button>
<p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
<button className="increment" onClick={handleIncrement}>+</button>
</div>
: null }
{feedPages ? feedPages[currentPage] : <h1 className="loading-message">Loading cats for you...</h1>}
{feedPages ?
<div className="page-handling" id="bottom-page-handling">
<button className="decrement" onClick={handleDecrement}>-</button>
<p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
<button className="increment" onClick={handleIncrement}>+</button>
</div>
: null }
</div>
: null }
{feedPages ? feedPages[currentPage] : <h1 className="loading-message">Loading cats for you...</h1>}
{feedPages ?
<div className="page-handling" id="bottom-page-handling">
<button className="decrement" onClick={handleDecrement}>-</button>
<p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
<button className="increment" onClick={handleIncrement}>+</button>
</div>
: null }
</>
);
}

50
src/features/searchBar/searchBar.js Normal file
View File

@@ -0,0 +1,50 @@
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchByActive } from '../posts/postsSlice';
import { selectActive } from "../reddit/redditSlice";
export default function SearchBar() {
const dispatch = useDispatch();
const activeSubs = useSelector(selectActive);
const [term, setTerm] = useState('');
const [results, setResults] = useState(null);
const handleChange = (e) => {
e.preventDefault();
setTerm(e.target.value);
}
const handleSubmit = () => {
if (term && activeSubs) {
let extracted = [];
for (let sub in activeSubs) {
extracted.push(sub);
}
console.log(extracted);
let mapped = extracted.map((sub) => dispatch(searchByActive({sub, term})));
Promise.all([...mapped]).then((data) => setResults(data));
}
}
useEffect(() => {
let active = true;
if (results && active) {
console.log(results);
}
return () => {
active = false;
}
}, [results, activeSubs]);
return (
<>
<input type="text" className="nav-searchbar" placeholder="Search posts" value={term ? term : ''} onChange={handleChange} />
<input type="submit" onClick={handleSubmit}></input>
</>
);
}

28
src/features/video/VideoPlayer.js
View File

@@ -1,7 +1,6 @@
import { useState, useEffect, useRef } from 'react';
export default function VideoPlayer({data, src}) {
const vidControls = useRef();
const vid = useRef();
const aud = useRef(); // identifies location of video/audio in DOM
@@ -14,24 +13,23 @@ export default function VideoPlayer({data, src}) {
let url; // contains video source, routed accordingly by logic below
if (crossPostSrc) {
url = crossPostSrc; // ... for crossposts
} else if (data.url) {
url = data.url; // ... for local posts, where the url
} else { // can be accessed at data.url
url = null; // otherwise, is null
url = crossPostSrc;
} else if (data.media.reddit_video.fallback_url) {
url = data.media.reddit_video.fallback_url;
} else {
url = null;
}
useEffect(() => { // checks the endpoint where audio may be found
let checking = true; // if the fetch request throws an error, audio is set to null;
const checkForAudio = async() => { // otherwise, audio is set to the endpoint, which is evaluated
try { // below as truthy, and rendered in the page
await fetch(`${url}/DASH_audio.mp4`)
await fetch(`${data.url}/DASH_audio.mp4`)
.then((response) => {
let status = response.status;
if (status > 400) {
if (!response.ok) {
setAudio(null);
} else {
setAudio(`${url}/DASH_audio.mp4`);
setAudio(`${data.url}/DASH_audio.mp4`);
}
});
} catch(e) {
@@ -56,7 +54,7 @@ export default function VideoPlayer({data, src}) {
if (checking) {
checkForAudio();
checkForVideo(data.media.reddit_video.fallback_url);
checkForVideo(url);
checking = false;
}
@@ -70,7 +68,7 @@ export default function VideoPlayer({data, src}) {
return;
}
if (playing) {
if (audio && playing) {
vid.current.play(); // synchronizes play/pause between two components
vid.current.currentTime = aud.current.currentTime; // according to section of state
} else if (!playing) {
@@ -82,17 +80,16 @@ export default function VideoPlayer({data, src}) {
<>
{!video ? null :
<div className="video-player">
{
!audio ?
<>
<video id="post-video-no-audio" ref={vidControls} controls src={video}>
<video id="post-video-no-audio" controls src={video}>
This video is not supported by your browser.
</video>
</>
:
:
<>
<video id="post-video" ref={vid} autoPlay={playing ? true : false} src={video}>
@@ -102,7 +99,6 @@ export default function VideoPlayer({data, src}) {
This video is not supported by your browser.
</video>
</>
}
</div>
}