Fix column sorting in SearchUI

Author: codytodonnell

README.md

@@ -76,6 +76,8 @@ For more complicated components like `MaterialsInput` and `SearchUI`, some of th
 
 Other utils that are used across multiple components can be found in the higher-level `src/utils` directory. For example, the functions for initializing table columns can be found in `src/utils/table.tsx`.
 
+### Component Types
+
 ### Exporting Components
 
 Any component that you want to be usable when this library is imported as a third-party node module must be added to the exports list in `src/index.ts`.
@@ -139,3 +141,5 @@ Stories are defined in `./src/stories`
 ```
 npm deploy-storybook
 ```
+
+### Build Tools

src/components/data-display/SearchUI/SearchUIContextProvider/SearchUIContextProvider.tsx

@@ -120,15 +120,24 @@ export const SearchUIContextProvider: React.FC<SearchState> = ({
         });
       }
     },
+    /**
+     * Set the primary sort field and sort direction
+     */
     setSort: (sortField: string, sortAscending: boolean) => {
-      const sortFields = [...query[props.sortKey]];
+      let sortFields: string[] | undefined = [];
+      if (query[props.sortKey]) {
+        sortFields = [...query[props.sortKey]];
+      }
       const directionPrefix = sortAscending ? '' : '-';
       sortFields[0] = directionPrefix + sortField;
       setQuery({
         [props.sortKey]: sortFields,
         [props.skipKey]: undefined
       });
     },
+    /**
+     * Set the primary sort column without changing sort direction
+     */
     setSortField: (sortField: string) => {
       const sortFields = [...query[props.sortKey]];
       sortFields[0] = sortField;
@@ -237,7 +246,8 @@ export const SearchUIContextProvider: React.FC<SearchState> = ({
       const params = preprocessQueryParams(
         { ...query, ...props.apiEndpointParams },
         state.filterGroups,
-        defaultQuery
+        defaultQuery,
+        state.sortKey
       );
       params[props.fieldsKey] = fields;
 

src/components/data-display/SearchUI/types.tsx

@@ -310,9 +310,12 @@ export interface SearchUIContainerProps {
    * Optionally include up to 2 fields to sort by on initial load.
    * To sort in descending order, prefix the field name with "-".
    * The first sort field can be modified within the UI. The second will be the default secondary sort field.
-   * e.g. ["-energy_above_hull", "formula_pretty"]
+   * e.g. `["-energy_above_hull", "formula_pretty"]`
+   * If you want to include a default secondary sort field but no default primary sort,
+   * then the first item in the array should be null or undefined.
+   * e.g. `[null, "formula_pretty"]`
    */
-  sortFields?: string[];
+  sortFields?: (string | undefined | null)[];
   /**
    * Name of the sort parameter in the linked API.
    * @default 'sort_fields'

src/components/data-display/SearchUI/utils.tsx

@@ -227,7 +227,8 @@ export const initQueryParams = (
 export const preprocessQueryParams = (
   query: DecodedValueMap<QueryParamConfigMap>,
   filterGroups: FilterGroup[],
-  defaultQuery: any
+  defaultQuery: any,
+  sortParamKey: string
 ) => {
   const processedQuery = {};
   for (const paramName in query) {
@@ -266,13 +267,39 @@ export const preprocessQueryParams = (
           }
           processedQuery[paramName] = paramValue;
       }
+    } else if (paramName === sortParamKey && query[sortParamKey]) {
+      /**
+       * Add the secondary sort field to the sort query if one exists.
+       * (Secondary sort is controlled by the sortFields prop, not from the UI)
+       */
+      const processedSortFields = [...query[sortParamKey]];
+      if (defaultQuery[sortParamKey] && defaultQuery[sortParamKey].length === 2) {
+        processedSortFields.push(defaultQuery[sortParamKey][1]);
+      }
+      processedQuery[sortParamKey] = processedSortFields;
     } else {
       processedQuery[paramName] = query[paramName];
     }
   }
+  /**
+   * Add default query params for params that require a value
+   * but haven't been explicitly set (e.g. skip or limit).
+   */
   for (const defaultParam in defaultQuery) {
     if (query[defaultParam] === undefined) {
-      processedQuery[defaultParam] = defaultQuery[defaultParam];
+      /**
+       * If there is a default secondary sort field, but no default primary sort field
+       * then only include the secondary sort field in the API query.
+       */
+      if (
+        defaultParam === sortParamKey &&
+        defaultQuery[sortParamKey][1] &&
+        (defaultQuery[sortParamKey][0] === null || defaultQuery[sortParamKey][0] === undefined)
+      ) {
+        processedQuery[defaultParam] = [defaultQuery[defaultParam][1]];
+      } else {
+        processedQuery[defaultParam] = defaultQuery[defaultParam];
+      }
     }
   }
   return processedQuery;

src/pages/MaterialsExplorer/MaterialsExplorer.tsx

@@ -53,7 +53,7 @@ export const MaterialsExplorer: React.FC = () => {
             }
             apiKey={process.env.REACT_APP_API_KEY ? process.env.REACT_APP_API_KEY : undefined}
             hasSortMenu={true}
-            sortFields={['energy_above_hull', 'formula_pretty']}
+            sortFields={['-energy_above_hull', 'formula_pretty']}
           >
             <SearchUISearchBar
               periodicTableMode={PeriodicTableMode.TOGGLE}