From 9d872e9170e2a5f4c702e625dac54b366ddf351c Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 30 Jan 2022 17:00:40 -0600
Subject: [PATCH] sidebar item dispatches

---
 src/App.css                         |  2 +-
 src/features/sidebar/Sidebar.css    |  8 ++++++++
 src/features/sidebar/SidebarItem.js | 20 +++++++-------------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index b8572ef..20d9800 100644
--- a/src/App.css
+++ b/src/App.css
@@ -97,7 +97,7 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  width: 12rem;
+  width: 13.5rem;
   position: fixed;
   background-color: black;
   color: white;
diff --git a/src/features/sidebar/Sidebar.css b/src/features/sidebar/Sidebar.css
index b1225db..b2b5f88 100644
--- a/src/features/sidebar/Sidebar.css
+++ b/src/features/sidebar/Sidebar.css
@@ -20,6 +20,14 @@
     margin: 0.8rem 0;
 }
 
+.individual-sub button {
+    margin-right: 1rem;
+}
+
+.individual-sub label {
+    text-align: right;
+}
+
 .search-sub-input {
     margin-top: 2rem;
 }
\ No newline at end of file
diff --git a/src/features/sidebar/SidebarItem.js b/src/features/sidebar/SidebarItem.js
index 5454eb6..ecc2383 100644
--- a/src/features/sidebar/SidebarItem.js
+++ b/src/features/sidebar/SidebarItem.js
@@ -1,23 +1,17 @@
-import React, { useState } from "react";
-// import { useDispatch } from "react-redux";
-// import { updateSubVisibility } from "../reddit/redditSlice";
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSubVisibility } from "../reddit/redditSlice";
 
 export default function SidebarItem({sub}) {
-    const [visible, setVisible] = useState('hide');     // dispatch will be used to dispatch updateSubVisibility on change in state
-    // const dispatch = useDispatch();                  // this will likely be within a useEffect hook
+    const dispatch = useDispatch();
 
-    const handleClick = () => {
-        if (visible === 'hide') {
-            setVisible('show');
-        } else if (visible === 'show') {
-            setVisible('hide');
-        }
+    const handleClick = () => {    
+        dispatch(updateSubVisibility(sub));
     }
 
     return (
         <div className="individual-sub">
-            {/* <input type="checkbox" id={sub} checked={checked} onChange={handleClick}></input> */}
-            <button id={sub} onClick={handleClick}>{visible}</button>
+            <button id={sub} onClick={handleClick}>toggle</button>
             <label id={sub}>{sub}</label>
         </div>
     );