Simplifying logic and optimizing performance.

mlibrary · Sep 11, 2024 · 6436147 · 6436147
1 parent 8d2cd8b
commit 6436147
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 47 deletions.
diff --git a/src/modules/advanced/components/NarrowSearchTo/index.js b/src/modules/advanced/components/NarrowSearchTo/index.js
@@ -2,45 +2,35 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const NarrowSearchTo = ({ handleChange, options }) => {
-  return (
-    <>
-      {options.map((option) => {
-        const { activeFilter, filters, label } = option;
-
-        if (filters.length <= 1) {
-          return null;
-        }
-
-        const slug = `narrow-search-to-${label.toLowerCase().replaceAll(' ', '-')}`;
-
-        return (
-          <fieldset className='narrow-search-to-dropdown-container' key={slug}>
-            <legend className='visually-hidden'>Narrow Search Options</legend>
-            <label htmlFor={slug}>
-              {label}
-            </label>
-            <select
-              className='narrow-search-to-dropdown'
-              id={slug}
-              onChange={(event) => {
-                return handleChange({ uid: option.uid, value: event.target.value });
-              }}
-              value={activeFilter}
-              autoComplete='off'
-            >
-              {filters.map((opt, index) => {
-                return (
-                  <option key={`${slug}-${index}`} value={opt}>
-                    {opt}
-                  </option>
-                );
-              })}
-            </select>
-          </fieldset>
-        );
-      })}
-    </>
-  );
+  return options
+    .filter(({ filters }) => {
+      return filters.length > 1;
+    })
+    .map(({ activeFilter, filters, label, uid }, index) => {
+      const slug = `narrow-search-to-${label.toLowerCase().replaceAll(' ', '-')}`;
+      return (
+        <fieldset className={`advanced-filter-fieldset ${index > 0 ? 'margin-top__xs' : ''}`} key={slug}>
+          <legend className='visually-hidden'>Narrow Search Options</legend>
+          <label htmlFor={slug}>{label}</label>
+          <select
+            id={slug}
+            onChange={(event) => {
+              return handleChange({ uid, value: event.target.value });
+            }}
+            value={activeFilter}
+            autoComplete='off'
+          >
+            {filters.map((opt, index) => {
+              return (
+                <option key={`${slug}-${index}`} value={opt}>
+                  {opt}
+                </option>
+              );
+            })}
+          </select>
+        </fieldset>
+      );
+    });
 };
 
 NarrowSearchTo.propTypes = {

diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
@@ -1918,14 +1918,6 @@ body {
   width: 100%;
 }
 
-.narrow-search-to-dropdown-container + .narrow-search-to-dropdown-container {
-  margin-top: 0.5rem;
-}
-
-.narrow-search-to-dropdown {
-  width: 100%;
-}
-
 .advanced-fields-container {
   padding: 1.5rem;
   border-radius: 4px;