Merge pull request #280 from sailpoint-oss/feature/blog-marketplace-filter

switch filter to be AND instead of OR

src/components/ambassador/AmbassadorCards/index.js

@@ -31,6 +31,7 @@ export default function AmbassadorCards({
     setLoadingCards(false);
   };
 
+  
   React.useEffect(() => {
     getPosts();
     setCardData(undefined);

src/components/blog/BlogCards/index.js

@@ -11,7 +11,7 @@ export default function BlogCards({
   const [loadingCards, setLoadingCards] = React.useState(true);
 
   const getPosts = async () => {
-    const data = await getBlogPosts(filterCallback.join(','));
+    const data = await getBlogPosts(filterCallback.join('+'));
     const resultset = []
     if (data.topics) {
       for (const topic of data.topics) {

src/components/marketplace/MarketplaceCards/index.js

@@ -18,7 +18,7 @@ export default function MarketplaceCards({filterCallback}) {
   const [loadingCards, setLoadingCards] = React.useState(true);
 
   const getPosts = async () => {
-    const data = await getMarketplacePosts(filterCallback.join(','));
+    const data = await getMarketplacePosts(filterCallback.tags.join('+'), filterCallback.category);
     console.log(data)
     const resultset = [];
     if (data.topics) {

src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js

@@ -4,14 +4,35 @@ import styles from './styles.module.css';
 
 export default function MarketplaceSidebarButton({
     filterCallback,
-    text
+    text,
+    id,
+    isCategory,
+    category
   }) {
   const [isActive, setIsActive] = React.useState(false);
-  const activeClass = isActive ? styles.tagSelected : ''
+  let activeClass = ''
-  function setFilters(e, f) {
+  if (isCategory && category === id) {
-    filterCallback(f)
+    activeClass = styles.tagSelected
-    setIsActive(current => !current);
+  } else if (isCategory && category !== id) {
+    activeClass = ''
+  } else {
+    activeClass = isActive ? styles.tagSelected : ''
   }
-  return <div key={text} onClick={(e) => setFilters(e, text)} className={activeClass + ' ' + styles.tag}>{text}</div>
+  //const activeClass = isActive ? styles.tagSelected : ''
+  function setFilters(e, id) {
+    if (isCategory) {
+      if (category === id) {
+        filterCallback({"category": "marketplace"})
+      } else {
+        filterCallback({"category": id})
+      }
+      
+    } else {
+      filterCallback({"tag": id})
+    }
+    setIsActive(current => !current);
+    
+  }
+  return <div key={text} onClick={(e) => setFilters(e, id)} className={activeClass + ' ' + styles.tag}>{text}</div>
 
 }

src/components/marketplace/MarketplaceSidebar/index.js

@@ -3,21 +3,37 @@ 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 { getCatagories, getTags } from '../../../services/DiscourseService';
 import MarketplaceSidebarButton from './MarketplaceSidebarButton';
 
 export default function MarketplaceSidebar({
-  filterCallback
+  filterCallback,
+  selectedCategory
   }) {
   const [tagProductData, setTagProductData] = React.useState();
   const [tagTechnologyData, setTagTechnologyData] = React.useState();
+  const [catIntegrationTypeData, setCatIntegrationTypeData] = React.useState();
   const [filterTags, setFilterTags] = React.useState(true);
 
   const getTagData = async () => {
-    const data = await getTags();
+    const tagData = await getTags();
+    const categoryData = await getCatagories();
+
     const tagTechnologyResultset = []
     const tagProductResultset = []
-    for (const tagGroup of data.extras.tag_groups) {
+    const catIntegrationType = []
+
+    for (const category of categoryData.category_list.categories) {
+      // 59 for marketplace
+      if (category.id === 59) {
+        for (const subCategory of category.subcategory_list) {
+          
+          catIntegrationType.push({"name": subCategory.name, "slug": subCategory.slug})
+        }
+      }
+    }
+
+    for (const tagGroup of tagData.extras.tag_groups) {
       if (tagGroup.id === 20) {
         for (const tag of tagGroup.tags) {
           tagProductResultset.push(tag.text)
@@ -31,6 +47,7 @@ export default function MarketplaceSidebar({
     }
     setTagProductData(tagProductResultset)
     setTagTechnologyData(tagTechnologyResultset)
+    setCatIntegrationTypeData(catIntegrationType)
   };
 
   function toggleSeeAll() {
@@ -44,19 +61,19 @@ export default function MarketplaceSidebar({
 
   const filterText = filterTags ? 'See All Tags' : 'See Less Tags'
 
-  if (tagProductData && tagTechnologyData) {
+  if (tagProductData && catIntegrationTypeData) {
     return (
       <div className={styles.sidebar}>
         <div className={styles.tagHeader}>Items by Product</div>
         <div className={styles.tagContainer}>
             {tagProductData.map(function(a, index){
-              return <MarketplaceSidebarButton key={a} text={a} filterCallback={filterCallback}></MarketplaceSidebarButton>
+              return <MarketplaceSidebarButton key={a} text={a} id={a} filterCallback={filterCallback}></MarketplaceSidebarButton>
             })}
         </div>
-        <div className={styles.tagHeader}>Items by Identity Governance</div>
+        <div className={styles.tagHeader}>Items by Integration Type</div>
         <div className={styles.tagContainer}>
-            {tagTechnologyData.map(function(a, index){
+            {catIntegrationTypeData.map(function(a, index){
-              return <div key={'div' + a} className={index > 10 && filterTags ? styles.hidden : ''} > <MarketplaceSidebarButton key={a} text={a} filterCallback={filterCallback}></MarketplaceSidebarButton></div>
+              return <div key={'div' + a.slug} className={index > 10 && filterTags ? styles.hidden : ''} > <MarketplaceSidebarButton category={selectedCategory} isCategory={true} key={a.slug} text={a.name} id={a.slug} filterCallback={filterCallback}></MarketplaceSidebarButton></div>
             })}
         </div>
         <div className={styles.seeAll} onClick={(e) => toggleSeeAll()}>

src/pages/marketplace.js

@@ -10,28 +10,37 @@ import MarketplaceCards from '../components/marketplace/MarketplaceCards';
 import MarketplaceSidebar from '../components/marketplace/MarketplaceSidebar';
 
 export default function Marketplace() {
-  const [filteredProduct, setFilteredProduct] = React.useState([]);
+  const [filteredProduct, setFilteredProduct] = React.useState({"category": "marketplace", "tags": []});
 
   const {siteConfig} = useDocusaurusContext();
 
   const handleClick = (data) => {
-    var tempFilter = filteredProduct.slice()
+    var tempFilter = filteredProduct.tags.slice()
 
-    const index = tempFilter.indexOf(data);
+    if (data.tag) {
-    if (index !== -1) {
+      const index = tempFilter.indexOf(data.tag);
-      tempFilter.splice(index, 1);
+      if (index !== -1) {
-    } else {
+        tempFilter.splice(index, 1);
-      tempFilter.push(data)
+      } else {
+        tempFilter.push(data.tag)
+      }
     }
 
-    setFilteredProduct(tempFilter)
+
+    if (data.category) {
+      setFilteredProduct({"category": data.category, "tags": [tempFilter]})
+    } else {
+      setFilteredProduct({"category": filteredProduct.category, "tags": [tempFilter]})
+    }
+
+    
   };
   return (
     <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
       <main>
       <MarketplaceBanner />
       <div className={styles.blogContainer}>
-          <div className={styles.blogSidbarContainer}><MarketplaceSidebar filterCallback={handleClick}/></div>
+          <div className={styles.blogSidbarContainer}><MarketplaceSidebar selectedCategory={filteredProduct.category} filterCallback={handleClick}/></div>
           <div className={styles.blogCardContainer}><MarketplaceCards filterCallback={filteredProduct}/></div>
       </div>
       

src/services/DiscourseService.js

@@ -44,7 +44,6 @@ export async function checkImage(url) {
     const response = await fetch(
       url,
     );
-    console.log(response)
     return true
   } catch (error) {
     return false;
@@ -69,12 +68,16 @@ export async function getBlogPosts(tags) {
   }
 }
 
-export async function getMarketplacePosts(tags) {
+export async function getMarketplacePosts(tags, category) {
+  let filterCategory = 'marketplace'
+  if (category) {
+    filterCategory = category
+  }
   let url = ''
   if (tags) {
-    url = 'https://developer.sailpoint.com/discuss/search.json?q=category:marketplace+tags:' + tags
+    url = 'https://developer.sailpoint.com/discuss/search.json?q=category:' + filterCategory + '+tags:' + tags
   } else {
-    url = 'https://developer.sailpoint.com/discuss/search.json?q=category:marketplace'
+    url = 'https://developer.sailpoint.com/discuss/search.json?q=category:' + filterCategory
   }
   try {
     const response = await fetch(
@@ -129,3 +132,14 @@ export async function getTags() {
     return [];
   }
 }
+
+export async function getCatagories() {
+  try {
+    const response = await fetch(
+      'https://developer.sailpoint.com/discuss/categories.json',
+    );
+    return await response.json();
+  } catch (error) {
+    return [];
+  }
+}