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;

src/features/posts/Post.js

@@ -91,7 +91,6 @@ export default function Post({data, key}) {
     // before the fetch requests' promises are fulfilled.
     
     return (
-        <>
         <div className="post-body" key={key}>
 
             {title ?
@@ -131,8 +130,6 @@ export default function Post({data, key}) {
             <div className={commentStyle}>
                 <Discussion permalink={permalink} isVisible={visible} />
             </div>
-
         </div>
-        </>
     );
 }

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