From c00a926e154a490d8efff63c5552cb3a4db16966 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 14:41:26 -0600
Subject: [PATCH] iterates subreddits into sidebar

---
 src/features/posts/Feed.js      |  2 +-
 src/features/posts/Post.js      |  2 +-
 src/features/sidebar/Sidebar.js | 31 ++++++++++++++++++++++++++-----
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index d5e878d..4fb7432 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -28,7 +28,7 @@ export default function Feed() {
                             ups={post.data.ups}
                             comments={post.data.num_comments}
                             time={post.data.created_utc}
-                            id={v4()}
+                            key={v4()}
                             media={post.data.post_hint === 'image' && post.data.url}
                             permalink={post.data.permalink}
                             selftext={post.data.selftext}
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index bc65e4a..c866081 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import './Post.css';
 
-export default function Post({title,author,subreddit,ups,comments,time,id,media,permalink,selftext,video}) {
+export default function Post({title,author,subreddit,ups,comments,time,key,media,permalink,selftext,video}) {
     const limit = 300;
     const [body, setBody] = useState(selftext);
     
diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js
index 37aca36..6ac889e 100644
--- a/src/features/sidebar/Sidebar.js
+++ b/src/features/sidebar/Sidebar.js
@@ -1,12 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { selectAllSubs } from "../reddit/redditSlice";
 
 export default function Sidebar({isCollapsed}) {
+    const allSubs = useSelector(selectAllSubs);
+    let arrayOfSubs = Object.keys(allSubs);
+    const [subs, setSubs] = useState(arrayOfSubs);
+    const [searchSubs, setSearchSubs] = useState('');
+
+    const handleChange = (e) => {
+        e.preventDefault();
+        if (e.target.value) {
+            setSearchSubs(e.target.value);
+        }
+    }
+
     return (
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
+            {
+                subs.map((sub) => {
+                    return (
+                        <div className="individual-sub">
+                            <button className="toggle-sub-active">X</button>
+                            <p>{sub}</p>
+                        </div>
+                    )
+                })
+            }
+            <input type="text" onChange={()=>{}} placeholder="Search Subs to Add"></input>
         </div>
     );
 }
\ No newline at end of file