diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index c3a2960fa..c3f82c3a9 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import { graphql } from 'gatsby'; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; import PackTile from '../components/PackTile'; @@ -12,6 +12,35 @@ const ObservabilityPacksPage = ({ data, location }) => { allObservabilityPacks: { nodes: o11yPacks }, } = data; const [filteredPacks, setFilteredPacks] = useState(o11yPacks); + const [containingFilterState, setContainingFilterState] = useState( + 'Anything' + ); + const [sortState, setSortState] = useState('Alphabetical'); + const [searchTerm, setSearchTerm] = useState(''); + useEffect(() => { + let tempFilteredPacks = o11yPacks.filter( + (pack) => + pack.name.toLowerCase().includes(searchTerm) || + pack.description.toLowerCase().includes(searchTerm) + ); + + if (containingFilterState !== 'Anything') { + tempFilteredPacks = tempFilteredPacks.filter( + (pack) => pack[containingFilterState.toLowerCase()]?.length > 0 + ); + } + + if (sortState === 'Alphabetical') { + tempFilteredPacks = tempFilteredPacks.sort((a, b) => + a.name.localeCompare(b.name) + ); + } else if (sortState === 'Reverse') { + tempFilteredPacks = tempFilteredPacks.sort((a, b) => + b.name.localeCompare(a.name) + ); + } + setFilteredPacks(tempFilteredPacks); + }, [o11yPacks, searchTerm, containingFilterState, sortState]); return ( <> @@ -25,14 +54,7 @@ const ObservabilityPacksPage = ({ data, location }) => { onClear={() => null} placeholder="Search for an observability pack" onChange={(e) => { - const tempFilteredPacks = o11yPacks.filter( - (pack) => - pack.name.toLowerCase().includes(e.target.value.toLowerCase()) || - pack.description - .toLowerCase() - .includes(e.target.value.toLowerCase()) - ); - setFilteredPacks(tempFilteredPacks); + setSearchTerm(e.target.value.toLowerCase()); }} />