filter tutorials when a tag is selected

Author: pettinarip

src/pages/developers/tutorials.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
@@ -256,18 +256,39 @@ const TutorialsPage = ({
   data,
   pageContext,
 }: PageProps<Queries.DevelopersTutorialsPageQuery, Context>) => {
-  const intl = useIntl()
-  const filteredTutorialsByLang = filterTutorialsByLang(
-    data.allTutorials.nodes,
-    externalTutorials,
-    pageContext.locale
+  const filteredTutorialsByLang = useMemo(
+    () =>
+      filterTutorialsByLang(
+        data.allTutorials.nodes,
+        externalTutorials,
+        pageContext.locale
+      ),
+    [pageContext.locale]
   )
-  const allTags = getSortedTutorialTagsForLang(filteredTutorialsByLang)
 
+  const intl = useIntl()
+  const [isModalOpen, setModalOpen] = useState(false)
   const [filteredTutorials, setFilteredTutorials] = useState(
     filteredTutorialsByLang
   )
-  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [selectedTags, setSelectedTags] = useState<Array<string>>([])
+
+  const allTags = useMemo(
+    () => getSortedTutorialTagsForLang(filteredTutorials),
+    [filteredTutorials]
+  )
+
+  useEffect(() => {
+    let tutorials = filteredTutorialsByLang
+
+    if (selectedTags.length) {
+      tutorials = tutorials.filter((tutorial) => {
+        return selectedTags.every((tag) => (tutorial.tags || []).includes(tag))
+      })
+    }
+
+    setFilteredTutorials(tutorials)
+  }, [selectedTags])
 
   const handleTagSelect = (tagName: string) => {
     const tempSelectedTags = selectedTags
@@ -282,13 +303,6 @@ const TutorialsPage = ({
     setSelectedTags([...tempSelectedTags])
   }
 
-  // TODO: Update setFilteredTutorials with filteredTutorialsByLang filtered out by selectedTags
-  useEffect(() => {
-    console.log("CHANGE")
-  }, [selectedTags])
-
-  const [isModalOpen, setModalOpen] = useState(false)
-
   return (
     <StyledPage>
       <PageMetadata

src/utils/tutorials.ts

@@ -4,11 +4,11 @@ import { Lang } from "./languages"
 
 // Take all tutorials, and return a list of tutorials for a specific locale
 export const filterTutorialsByLang = (
-  internalTutorials: Array<any>,
+  internalTutorials: any,
   externalTutorials: Array<IExternalTutorial>,
   locale: Lang
-) => {
-  const internalTutorialsMap = internalTutorials.map<any>((tutorial) => ({
+): Array<ITutorial> => {
+  const internalTutorialsMap = internalTutorials.map((tutorial) => ({
     to:
       tutorial?.fields?.slug?.substr(0, 3) === "/en"
         ? tutorial.fields.slug.substr(3)
@@ -61,10 +61,15 @@ export const filterTutorialsByLang = (
   return filteredTutorials
 }
 
-export const getSortedTutorialTagsForLang = (filteredTutorialsByLang) => {
-  const allTags = filteredTutorialsByLang.reduce((tags, tutorial) => {
-    return [...tags, ...tutorial.tags]
-  }, [])
+export const getSortedTutorialTagsForLang = (
+  filteredTutorialsByLang: Array<ITutorial> = []
+) => {
+  const allTags = filteredTutorialsByLang.reduce<Array<string>>(
+    (tags, tutorial) => {
+      return [...tags, ...(tutorial.tags || [])]
+    },
+    []
+  )
 
   const reducedTags = allTags.reduce((acc, tag) => {
     if (acc[tag]) {