feat: simplify search / filtering

newrelic · Sep 11, 2021 · 71bdd71 · 71bdd71
1 parent 7c20261
commit 71bdd71
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 296 deletions.
diff --git a/src/components/PackImg.js b/src/components/PackImg.js
@@ -1,13 +1,23 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import DEFAULT_IMAGE from '../images/default-logo-background.svg';
 
-const createPackAcronym = (name) =>
-  name.split(' ').reduce((acc, word) => `${acc}${word.charAt(0)}`, '');
-
 const PackImg = ({ className, logoUrl, packName }) => {
-  const packAcronym = createPackAcronym(packName);
+  const [packAcronym, setPackAcronym] = useState('');
+
+  const getPackNameAcronym = () => {
+    let packNameAcronym = '';
+    packName.split(' ').forEach((word) => {
+      packNameAcronym = packNameAcronym.concat('', word.charAt(0));
+    });
+    setPackAcronym(packNameAcronym.toUpperCase());
+  };
+  useEffect(() => {
+    if (!logoUrl) {
+      getPackNameAcronym();
+    }
+  });
 
   if (logoUrl) {
     return (
@@ -41,7 +51,7 @@ const PackImg = ({ className, logoUrl, packName }) => {
         align-items: center;
       `}
     >
-      <p>{packAcronym.toUpperCase()}</p>
+      <p>{packAcronym}</p>
     </div>
   );
 };

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -10,15 +10,15 @@ import {
   useInstrumentedHandler,
 } from '@newrelic/gatsby-theme-newrelic';
 import PackImg from './PackImg';
-import {
-  QUICKSTART_SUPPORT_LEVELS,
-  QUICKSTART_CATALOG_VIEWS,
-} from '../data/constants';
 
-const SHIELD_LEVELS = [
-  QUICKSTART_SUPPORT_LEVELS.NEWRELIC,
-  QUICKSTART_SUPPORT_LEVELS.VERIFIED,
-];
+const LEVELS = {
+  NEWRELIC: 'NEWRELIC',
+};
+
+const VIEWS = {
+  GRID: 'Grid view',
+  LIST: 'List view',
+};
 
 const PackTile = ({
   id,
@@ -70,7 +70,7 @@ const PackTile = ({
       css={css`
         overflow: hidden;
 
-        ${view === QUICKSTART_CATALOG_VIEWS.LIST &&
+        ${view === VIEWS.LIST &&
         css`
           display: flex;
           margin-bottom: 1em;
@@ -85,11 +85,11 @@ const PackTile = ({
           height: 200px;
           background-color: var(--color-white);
           object-fit: scale-down;
-          width: ${view === QUICKSTART_CATALOG_VIEWS.GRID ? 100 : 25}%;
-          padding: 0 ${view === QUICKSTART_CATALOG_VIEWS.GRID ? 5 : 1}%;
-          margin: ${view === QUICKSTART_CATALOG_VIEWS.GRID ? 'auto' : 0};
+          width: ${view === VIEWS.GRID ? 100 : 25}%;
+          padding: 0 ${view === VIEWS.GRID ? 5 : 1}%;
+          margin: ${view === VIEWS.GRID ? 'auto' : 0};
 
-          ${view === QUICKSTART_CATALOG_VIEWS.LIST &&
+          ${view === VIEWS.LIST &&
           css`
             max-height: 150px;
 
@@ -103,7 +103,7 @@ const PackTile = ({
         css={css`
           padding: 1em;
 
-          ${view === QUICKSTART_CATALOG_VIEWS.LIST &&
+          ${view === VIEWS.LIST &&
           css`
             width: 75%;
 
@@ -114,8 +114,7 @@ const PackTile = ({
         `}
       >
         <h4>
-          {name}{' '}
-          {SHIELD_LEVELS.includes(level) && <Icon name="nr-check-shield" />}
+          {name} {level === LEVELS.NEWRELIC && <Icon name="nr-check-shield" />}
         </h4>
         <p
           css={css`
@@ -132,7 +131,7 @@ const PackTile = ({
 
 PackTile.propTypes = {
   id: PropTypes.string.isRequired,
-  view: PropTypes.oneOf(Object.values(QUICKSTART_CATALOG_VIEWS)).isRequired,
+  view: PropTypes.oneOf(Object.values(VIEWS)).isRequired,
   name: PropTypes.string.isRequired,
   fields: PropTypes.shape({
     slug: PropTypes.string.isRequired,

diff --git a/src/components/quickstarts/QuickstartGridList.js b/src/components/quickstarts/QuickstartGridList.js
diff --git a/src/data/constants.js b/src/data/constants.js
@@ -49,11 +49,6 @@ export const QUICKSTART_ALERT_TYPES = {
   STATIC: 'STATIC',
 };
 
-export const QUICKSTART_CATALOG_VIEWS = {
-  GRID: 'GRID',
-  LIST: 'LIST',
-};
-
 export const QUICKSTARTS_REPO =
   'https://github.com/newrelic/newrelic-observability-packs';