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

Current build 022522

src/App.css

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

src/App.js

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

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 (
-        <>
+        <div className="feed">
-        {feedPages ? 
 
-        <div className="page-handling" id="top-page-handling">
+            {feedPages ? 
-            <button className="decrement" onClick={handleDecrement}>-</button>
+
-            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
+            <div className="page-handling" id="top-page-handling">
-            <button className="increment" onClick={handleIncrement}>+</button>
+                <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/searchBar/searchBar.js

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

src/features/video/VideoPlayer.js

@@ -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
+        url = crossPostSrc;
-    } else if (data.url) {
+    } else if (data.media.reddit_video.fallback_url) {
-        url = data.url;             // ... for local posts, where the url
+        url = data.media.reddit_video.fallback_url;
-    } else {                        // can be accessed at data.url
+    } else {
-        url = null;                 // otherwise, is null
+        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 (!response.ok) {
-                    if (status > 400) {
                         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>
         }