button now filters and updates class

src/components/blog/BlogSidebar/index.js

@@ -3,17 +3,60 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
+import { getTags } from '../../../services/DiscourseService';
+import BlogSidebarButton from './BlogSidebarButton';
 
-export default function BlogSidebar() {
-  return (
-    <div>
+export default function BlogSidebar({
+  filterCallback
+  }) {
+  const [tagProductData, setTagProductData] = React.useState();
+  const [tagTechnologyData, setTagTechnologyData] = React.useState();
+  const [filteredProduct, setFilteredProduct] = React.useState();
 
-      <div className={styles.sideBarContainer}>
-        sidebar Works!
-      </div >
+  const getTagData = async () => {
+    const data = await getTags();
+    console.log(data.extras.tag_groups)
+    const tagTechnologyResultset = []
+    const tagProductResultset = []
+    for (const tagGroup of data.extras.tag_groups) {
+      if (tagGroup.id === 20) {
+        for (const tag of tagGroup.tags) {
+          tagProductResultset.push(tag.text)
+        }
+      }
+      if (tagGroup.id === 17) {
+        for (const tag of tagGroup.tags) {
+          tagTechnologyResultset.push(tag.text)
+        }
+      }
+    }
+    setTagProductData(tagProductResultset)
+    setTagTechnologyData(tagTechnologyResultset)
+  };
 
+  React.useEffect(() => {
+    getTagData();
+  }, []);
 
+  function setFilters(e, f) {
+    e.currentTarget.classList.toggle('selected');
+    console.log(e)
+    filterCallback(f)
+  }
 
-    </div>
-  );
+  if (tagProductData && tagTechnologyData) {
+    return (
+      <div className={styles.sidebar}>
+        <div className={styles.tagHeader}>Posts by Product</div>
+        <div className={styles.tagContainer}>
+            {tagProductData.map(function(a, index){
+              return <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton>
+              // return <div key={a} onClick={(e) => setFilters(e, a)} className={styles.tag}>{a}</div>
+            })}
+        </div>
+      </div>
+    );
+  } else {
+    return <div></div>;
+  }
 }