cleaned up formatting

src/App.css

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

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/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

@@ -80,8 +80,6 @@ export default function Feed() {
 
                 let sortedPosts = extractedPosts.sort(comparePosts);        // implements sorting function
                 
-                // console.log(sortedPosts);
-                
                 let newFeed = sortedPosts.map((post) => {
                     return (
                         <Post 
@@ -155,27 +153,29 @@ export default function Feed() {
     }
 
     return (
-        <>
-        {feedPages ? 
+        <div className="feed">
+
+            {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 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 }
-        </>
     );
 }

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();