From 511d001930b19a3e581d6601b275d7e18869519a Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 17 Feb 2022 17:18:50 -0600 Subject: [PATCH 1/4] some edge case handling --- src/App.js | 9 --------- src/App.test.js | 4 ++-- src/features/posts/Post.css | 1 + src/features/posts/Post.js | 4 +++- src/features/video/VideoPlayer.js | 31 ++++++++++++++++++++++++++----- 5 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index bc93506..81153f9 100644 --- a/src/App.js +++ b/src/App.js @@ -8,18 +8,9 @@ function App() {
-
- -
- {/* To do: add mutable state to class name for this div, */} - {/* determining whether or not it's active based on the state of */} - {/* The action dispatched from the searchbar slice(?) */} - {/* Do I need a searchbar slice? */} -
-
); diff --git a/src/App.test.js b/src/App.test.js index f6847b2..58337ba 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -4,14 +4,14 @@ import { Provider } from 'react-redux'; import { store } from './app/store'; import App from './App'; -test('renders text', () => { +test('renders a title', () => { const { getByText } = render( ); - expect(getByText(/Stuff/)).toBeInTheDocument(); + expect(getAllByText(/cat/)).toBeInTheDocument(); }); test('store is not empty or falsy', () => { diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index ac7f8d5..8600730 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -99,6 +99,7 @@ img, video { display: inline-flex; flex-direction: column; align-items: center; + max-width: 60%; } #post-audio { diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index f8cb10f..84ba1a3 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -95,7 +95,9 @@ export default function Post({data, key}) {
{title ? - {title} + + {title} + :

[untitled]

} {media ? {title} : null} diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index 634c7d5..cd7326f 100644 --- a/src/features/video/VideoPlayer.js +++ b/src/features/video/VideoPlayer.js @@ -7,6 +7,7 @@ export default function VideoPlayer({data, src}) { const [playing, setPlaying] = useState(false); // handles play/pause logic const [audio, setAudio] = useState(null); + const [video, setVideo] = useState(null); const crossPostSrc = src; @@ -38,18 +39,34 @@ export default function VideoPlayer({data, src}) { } } + const checkForVideo = async(source) => { + try { + await fetch(source) + .then((response) => { + if (response.status > 400) { + setVideo(null); + } else { + setVideo(source); + } + }); + } catch(e) { + console.log(e); + } + } + if (checking) { checkForAudio(); + checkForVideo(data.media.reddit_video.fallback_url); checking = false; } return () => { checking = false; } - }, [url, audio]); + }, [url, video, data, audio]); useEffect(() => { // this section handles simultaneous playback of audio and video - if (!audio) { + if (!audio || !video) { return; } @@ -59,16 +76,18 @@ export default function VideoPlayer({data, src}) { } else if (!playing) { vid.current.pause(); } - }, [playing, audio, aud, vid]); + }, [playing, video, audio, aud, vid]); return ( + <> + {!video ? null :
{ !audio ? <> -
+ } + ); } \ No newline at end of file -- 2.49.1 From 75bb919d4a62611a596def3c3b7043696bdc35cb Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 17 Feb 2022 17:23:15 -0600 Subject: [PATCH 2/4] clearing unused files --- src/App.test.js | 19 --------- src/features/posts/Post.css | 1 + src/features/reddit/redditSlice.test.js | 0 src/features/searchBar/searchBar.js | 53 ------------------------- 4 files changed, 1 insertion(+), 72 deletions(-) delete mode 100644 src/App.test.js delete mode 100644 src/features/reddit/redditSlice.test.js delete mode 100644 src/features/searchBar/searchBar.js diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 58337ba..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { store } from './app/store'; -import App from './App'; - -test('renders a title', () => { - const { getByText } = render( - - - - ); - - expect(getAllByText(/cat/)).toBeInTheDocument(); -}); - -test('store is not empty or falsy', () => { - expect(store).not.toBeNull(); -}) \ No newline at end of file diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index 8600730..a724e89 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -28,6 +28,7 @@ img, video { max-height: 45rem; + max-width: 75%; object-fit: contain; } diff --git a/src/features/reddit/redditSlice.test.js b/src/features/reddit/redditSlice.test.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/features/searchBar/searchBar.js b/src/features/searchBar/searchBar.js deleted file mode 100644 index 1a64c02..0000000 --- a/src/features/searchBar/searchBar.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { searchByActive, /* selectSearchResults */ } from '../posts/postsSlice'; -import { selectActive, /* selectAllSubs */ } from "../reddit/redditSlice"; - -export default function SearchBar() { - const dispatch = useDispatch(); - - // const selectedSubs = useSelector(selectAllSubs); - const activeSubs = useSelector(selectActive); - - const [term, setTerm] = useState(''); - const [results, setResults] = useState(null); - // const searchData = useSelector(selectSearchResults); - - 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 ( - <> - - - - ); -} \ No newline at end of file -- 2.49.1 From fe54ee27e9ca882d46bfc5702136647b2392b0b1 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 17 Feb 2022 18:11:45 -0600 Subject: [PATCH 3/4] more cases accounted for --- src/App.css | 9 ++------- src/App.js | 6 ++---- src/features/posts/Post.css | 4 ++-- 3 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/App.css b/src/App.css index 795b920..f25cd7b 100644 --- a/src/App.css +++ b/src/App.css @@ -126,18 +126,13 @@ /* Feed */ -.content-container { - display: inline-flex; - position: relative; - top: 5rem; - flex-direction: row; -} - .feed { display: inline-flex; flex-direction: column; + position: relative; align-items: center; width: 90vw; + top: 5rem; } /* Page handling */ diff --git a/src/App.js b/src/App.js index 81153f9..b68b3e8 100644 --- a/src/App.js +++ b/src/App.js @@ -7,10 +7,8 @@ function App() { return (
-
-
- -
+
+
); diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index a724e89..7f9be40 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -28,7 +28,7 @@ img, video { max-height: 45rem; - max-width: 75%; + max-width: 95%; object-fit: contain; } @@ -100,7 +100,7 @@ img, video { display: inline-flex; flex-direction: column; align-items: center; - max-width: 60%; + max-width: 80%; } #post-audio { -- 2.49.1 From 7339901ddf0b22784d24ff6d0a341ea1e186059b Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 17 Feb 2022 18:16:49 -0600 Subject: [PATCH 4/4] removing more unused code --- src/features/posts/Post.css | 4 +++- src/features/posts/Post.js | 3 --- src/features/sidebar/Sidebar.js | 36 ++++++--------------------------- 3 files changed, 9 insertions(+), 34 deletions(-) diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index 7f9be40..8b4eca5 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -3,7 +3,8 @@ .post-body { display: inline-flex; flex-direction: column; - width: 75%; + align-items: center; + width: 85%; padding: 1rem 2rem; border-radius: 10px; background-color: rgb(29, 4, 39); @@ -36,6 +37,7 @@ img, video { .post-metadata { display: inline-flex; + width: 90%; margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid gray; diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index 84ba1a3..5421762 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -91,7 +91,6 @@ export default function Post({data, key}) { // before the fetch requests' promises are fulfilled. return ( - <>
{title ? @@ -131,8 +130,6 @@ export default function Post({data, key}) {
-
- ); } \ No newline at end of file diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js index b64c2c2..4ee9cba 100644 --- a/src/features/sidebar/Sidebar.js +++ b/src/features/sidebar/Sidebar.js @@ -1,5 +1,5 @@ -import React, { useRef, useState } from "react"; -import { useSelector, /* useDispatch */ } from "react-redux"; +import React from "react"; +import { useSelector } from "react-redux"; import { selectAllSubs } from "../reddit/redditSlice"; import { v4 } from 'uuid'; import SidebarItem from "./SidebarItem"; @@ -9,41 +9,17 @@ export default function Sidebar({isCollapsed}) { const allSubs = useSelector(selectAllSubs); let arrayOfSubs = Object.keys(allSubs); - // const [subs, setSubs] = useState(arrayOfSubs); // this piece of state to be used to modify state based on a dispatched action - const [searchSubs, setSearchSubs] = useState(''); // from sidebaritems when the visibility of a sub is toggled on/off - - const searchWindowStyle = useRef('search-inactive'); // this ref allows us to access and modify the class of the search window container from another part of the render function - - const handleChange = (e) => { - e.preventDefault(); - if (e.target.value) { // this logic locally stores the search term in searchSubs, - searchWindowStyle.current = 'search-active'; // and will dispatch a search action from the reddit slice - setSearchSubs(e.target.value); // based on the provided term - } else if (e.target.value === '') { - searchWindowStyle.current = 'search-inactive'; - setSearchSubs(''); - } - } - return ( - <> - {/* isCollapsed is passed from the parent component, and is mutable within the navbar */} + // isCollapsed is passed from the parent component, and is mutable within the navbar +
- { // arrayOfSubs will become subs from useState on implementation of useState - arrayOfSubs.map((sub) => { // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property + { + arrayOfSubs.map((sub) => { return ( ) }) } -
- - {/* displays subreddit search results */} -
-

Search Results for: {searchSubs}

-

(results here)

-
- ); } \ No newline at end of file -- 2.49.1