Resolving `Selector unknown returned the root state when called. This…

… can lead to unnecessary rerenders.` issues, and updating/removing styles.

src/modules/advanced/components/AdvancedSearchForm/index.js

@@ -1,9 +1,4 @@
-import './styles.css';
-import {
-  addFieldedSearch,
-  removeFieldedSearch,
-  setFieldedSearch
-} from '../../../advanced';
+import { addFieldedSearch, removeFieldedSearch, setFieldedSearch } from '../../../advanced';
 import { Alert, Icon } from '../../../reusable';
 import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,32 +8,31 @@ import PropTypes from 'prop-types';
 import { stringifySearch } from '../../../search';
 import { useNavigate } from 'react-router-dom';
 
+const removeUndefinedFilters = (object) => {
+  const filters = object || {};
+  Object.keys(filters).forEach((filter) => {
+    if (!filters[filter]) {
+      delete filters[filter];
+    }
+  });
+  return filters;
+};
+
 const AdvancedSearchForm = ({ datastore }) => {
   const navigate = useNavigate();
   const [errors, setErrors] = useState([]);
   const dispatch = useDispatch();
 
-  const fields = useSelector((state) => {
-    return state.advanced[datastore.uid].fields;
+  const { activeFilters: currentActiveFilters, fieldedSearches, fields } = useSelector((state) => {
+    return state.advanced[datastore.uid];
   });
-  const booleanTypes = useSelector((state) => {
-    return state.advanced.booleanTypes;
-  });
-  const fieldedSearches = useSelector((state) => {
-    return state.advanced[datastore.uid].fieldedSearches;
+  const { booleanTypes } = useSelector((state) => {
+    return state.advanced;
   });
   const institution = useSelector((state) => {
     return state.institution;
   });
-  const activeFilters = useSelector((state) => {
-    const currentFilters = state.advanced[datastore.uid].activeFilters || {};
-    Object.keys(currentFilters).forEach((filter) => {
-      if (!currentFilters[filter]) {
-        delete currentFilters[filter];
-      }
-    });
-    return currentFilters;
-  });
+  const activeFilters = removeUndefinedFilters(currentActiveFilters);
 
   // Functions wrapped with useCallback to prevent unnecessary re-creation
   const changeFieldedSearch = useCallback(({ booleanType, fieldedSearchIndex, query, selectedFieldUid }) => {
@@ -113,7 +107,7 @@ const AdvancedSearchForm = ({ datastore }) => {
   }, [navigate, institution, booleanTypes, fieldedSearches, activeFilters, datastore]);
 
   return (
-    <form className='y-spacing' onSubmit={handleSubmit}>
+    <form className='y-spacing container__rounded page margin-top__none' onSubmit={handleSubmit}>
       <h2 className='h1'>{datastore.name} Search</h2>
       {errors.map((error, index) => {
         return (
@@ -144,7 +138,7 @@ const AdvancedSearchForm = ({ datastore }) => {
         );
       })}
       <button
-        className='btn btn--small btn--secondary add-another-field'
+        className='btn btn--small btn--secondary margin-x__auto flex'
         onClick={handleAddAnotherFieldedSearch}
         type='button'
       >

src/stylesheets/main.css

@@ -1781,10 +1781,6 @@ body {
   max-width: 32rem;
 }
 
-.advanced-search-form {
-  margin-bottom: 2rem;
-}
-
 .advanced-input {
   border: solid 1px rgba(0, 0, 0, 0.3);
 }

src/stylesheets/spacing.css

@@ -105,6 +105,11 @@
   margin-left: var(--search-spacing-m);
 }
 
+.margin-x__auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .margin-x__none {
   margin-left: 0;
   margin-right: 0;

src/stylesheets/utilities.css

@@ -14,8 +14,8 @@
   background-color: white;
   border-radius: 4px;
   box-shadow:
-    0 2px 2px 0 rgba(0, 0, 0, 0.12),
-    0 2px 4px 0 rgba(0, 0, 0, 0.24);
+    0 2px 2px 0 var(--search-color-grey-400),
+    0 2px 4px 0 var(--search-color-grey-400);
 }
 
 .flex,