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

Current build 022522

src/App.css

@@ -126,18 +126,15 @@
 
 /* Feed */
 
-.content-container {
-  display: inline-flex;
-  position: relative;
-  top: 5rem;
-  flex-direction: row;
-}
-
 .feed {
   display: inline-flex;
+  position: relative;
   flex-direction: column;
+  position: relative;
   align-items: center;
+  top: 5rem;
   width: 90vw;
+  top: 5rem;
 }
 
 /* Page handling */

src/App.js

@@ -7,20 +7,7 @@ function App() {
   return (
     <div className="App">
       <Navbar />
-      <div className="content-container">
-
-        <div className="feed">
-          <Feed />
-        </div>
-        
-        <div className="about-the-site">
-          {/* 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? */}
-        </div>
-
-      </div>
+      <Feed />
     </div>
   );
 }

src/App.test.js

@@ -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(
-    <Provider store={store}>
-      <App />
-    </Provider>
-  );
-
-  expect(getByText(/Stuff/)).toBeInTheDocument();
-});
-
-test('store is not empty or falsy', () => {
-  expect(store).not.toBeNull();
-})

src/features/discussion/Discussion.js

@@ -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 (
                     <>

src/features/posts/Feed.js

@@ -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 }
-        </>
     );
 }

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 {

src/features/posts/Post.js

@@ -91,11 +91,12 @@ export default function Post({data, key}) {
     // before the fetch requests' promises are fulfilled.
     
     return (
-        <>
         <div className="post-body" key={key}>
 
             {title ?
-                <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>
+            
+            <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>
+            
             : <p>[untitled]</p>}
 
             {media ? <img alt={title} src={media} /> : null}
@@ -129,8 +130,6 @@ export default function Post({data, key}) {
             <div className={commentStyle}>
                 <Discussion permalink={permalink} isVisible={visible} />
             </div>
-
         </div>
-        </>
     );
 }

src/features/searchBar/searchBar.js

@@ -1,17 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { searchByActive, /* selectSearchResults */ } from '../posts/postsSlice';
-import { selectActive, /* selectAllSubs */ } from "../reddit/redditSlice";
+import { searchByActive } from '../posts/postsSlice';
+import { selectActive } 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();

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
+
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
-            {       // 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 (
                         <SidebarItem sub={sub} key={v4()}/>
                     )
                 })
             }
-            <input className="search-sub-input" type="text" onChange={handleChange} placeholder="Search Subs to Add"></input>
         </div>
-
-        {/* displays subreddit search results */}
-        <div className={searchWindowStyle.current}>
-            <h2>Search Results for: {searchSubs}</h2>
-            <p>(results here)</p>
-        </div>
-        </>
     );
 }

src/features/video/VideoPlayer.js

@@ -1,36 +1,50 @@
 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
     
     const [playing, setPlaying] = useState(false);      // handles play/pause logic
     const [audio, setAudio] = useState(null);
+    const [video, setVideo] = useState(null);
     
     const crossPostSrc = 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) {
+                console.log(e);
+            }
+        }
+
+        const checkForVideo = async(source) => {
+            try {
+                await fetch(source)
+                .then((response) => {
+                    if (response.status > 400) {
+                        setVideo(null);
+                    } else {
+                        setVideo(source);
                     }
                 });
             } catch(e) {
@@ -40,51 +54,54 @@ export default function VideoPlayer({data, src}) {
 
         if (checking) {
             checkForAudio();
+            checkForVideo(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;
         }
 
-        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) {
             vid.current.pause();
         }
-    }, [playing, audio, aud, vid]);
+    }, [playing, video, audio, aud, vid]);
 
     return (
+        <>
+        {!video ? null :
         <div className="video-player">
-
             {
                 !audio ? 
 
                 <>
-                <video id="post-video-no-audio" ref={vidControls} controls src={`${url}/DASH_1080.mp4` || `${url}/DASH_1080.mp4?source=fallback`}>
+                <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={`${url}/DASH_1080.mp4`}>
+                <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={video}>
                     This video is not supported by your browser.
                 </video>
                 <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={audio}>
                     This video is not supported by your browser.
                 </video>
                 </>
-
             }
         </div>
+        }
+        </>
     );
 }