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 bc93506..b68b3e8 100644 --- a/src/App.js +++ b/src/App.js @@ -7,19 +7,8 @@ function App() { return (
-
- -
- -
- -
- {/* 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 deleted file mode 100644 index f6847b2..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 text', () => { - const { getByText } = render( - - - - ); - - expect(getByText(/Stuff/)).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 ac7f8d5..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); @@ -28,6 +29,7 @@ img, video { max-height: 45rem; + max-width: 95%; object-fit: contain; } @@ -35,6 +37,7 @@ img, video { .post-metadata { display: inline-flex; + width: 90%; margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid gray; @@ -99,6 +102,7 @@ img, video { display: inline-flex; flex-direction: column; align-items: center; + max-width: 80%; } #post-audio { diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index f8cb10f..5421762 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -91,11 +91,12 @@ export default function Post({data, key}) { // before the fetch requests' promises are fulfilled. return ( - <>
{title ? - {title} + + {title} + :

[untitled]

} {media ? {title} : null} @@ -129,8 +130,6 @@ export default function Post({data, key}) {
-
- ); } \ No newline at end of file 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 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 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