Merge pull request #1363 from newrelic/ruairi/search-functionality

Ruairi/search functionality
newrelic · Jun 3, 2021 · a94ab5f · a94ab5f
2 parents 7de7c47 + 0e56ef8
commit a94ab5f
Showing 1 changed file with 101 additions and 11 deletions.
diff --git 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 from 'react';
+import React, { useState, useEffect } from 'react';
 import DevSiteSeo from '../components/DevSiteSeo';
 import { css } from '@emotion/react';
 import PackTile from '../components/PackTile';
@@ -11,6 +11,36 @@ const ObservabilityPacksPage = ({ data, location }) => {
   const {
     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 (
     <>
@@ -23,6 +53,9 @@ const ObservabilityPacksPage = ({ data, location }) => {
         `}
         onClear={() => null}
         placeholder="Search for an observability pack"
+        onChange={(e) => {
+          setSearchTerm(e.target.value.toLowerCase());
+        }}
       />
       <div
         css={css`
@@ -38,7 +71,7 @@ const ObservabilityPacksPage = ({ data, location }) => {
           }
         `}
       >
-        <span>Showing {o11yPacks.length} results</span>
+        <span>Showing {filteredPacks.length} results</span>
         <div
           css={css`
             display: flex;
@@ -68,12 +101,30 @@ const ObservabilityPacksPage = ({ data, location }) => {
                 size={Button.SIZE.SMALL}
                 variant={Button.VARIANT.OUTLINE}
               >
-                Popularity
+                {sortState}
               </Dropdown.Toggle>
               <Dropdown.Menu>
-                <Dropdown.MenuItem>Item 1</Dropdown.MenuItem>
-                <Dropdown.MenuItem>Item 2</Dropdown.MenuItem>
-                <Dropdown.MenuItem>Item 3</Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setSortState('Alphabetical');
+                  }}
+                >
+                  Alphabetical
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setSortState('Reverse');
+                  }}
+                >
+                  Reverse
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setSortState('Popularity');
+                  }}
+                >
+                  Popularity
+                </Dropdown.MenuItem>
               </Dropdown.Menu>
             </Dropdown>
           </div>
@@ -101,12 +152,51 @@ const ObservabilityPacksPage = ({ data, location }) => {
                 size={Button.SIZE.SMALL}
                 variant={Button.VARIANT.OUTLINE}
               >
-                Anything
+                {containingFilterState}
               </Dropdown.Toggle>
               <Dropdown.Menu>
-                <Dropdown.MenuItem>Item 1</Dropdown.MenuItem>
-                <Dropdown.MenuItem>Item 2</Dropdown.MenuItem>
-                <Dropdown.MenuItem>Item 3</Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setContainingFilterState('Anything');
+                  }}
+                >
+                  Anything
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setContainingFilterState('Dashboards');
+                  }}
+                >
+                  Dashboards
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setContainingFilterState('Alerts');
+                  }}
+                >
+                  Alerts
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setContainingFilterState('Visualizations');
+                  }}
+                >
+                  Visualizations
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setContainingFilterState('Synthetics');
+                  }}
+                >
+                  Synthetic Checks
+                </Dropdown.MenuItem>
+                <Dropdown.MenuItem
+                  onClick={() => {
+                    setContainingFilterState('Applications');
+                  }}
+                >
+                  Applications
+                </Dropdown.MenuItem>
               </Dropdown.Menu>
             </Dropdown>
           </div>
@@ -118,7 +208,7 @@ const ObservabilityPacksPage = ({ data, location }) => {
       </div>
       <div>
         <PackList>
-          {o11yPacks.map((pack) => {
+          {filteredPacks.map((pack) => {
             // TODO: Figure out what image should be shown
             // if not added to API explicitly
             const imgSrc = pack.dashboards?.[0]?.screenshots?.[0];