fix: properly handle default group and filter (#1083)

StaticJsCMS · Feb 8, 2024 · 2c72215 · 2c72215
1 parent ccd242c
commit 2c72215
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 157 deletions.
diff --git a/packages/core/src/actions/config.ts b/packages/core/src/actions/config.ts
@@ -145,6 +145,8 @@ function applyFolderCollectionDefaults(
 ): FolderCollectionWithDefaults {
   const collection: FolderCollectionWithDefaults = {
     ...originalCollection,
+    view_filters: undefined,
+    view_groups: undefined,
     i18n: collectionI18n,
   };
 
@@ -228,6 +230,8 @@ function applyFilesCollectionDefaults(
   const collection: FilesCollectionWithDefaults = {
     ...originalCollection,
     i18n: collectionI18n,
+    view_filters: undefined,
+    view_groups: undefined,
     files: originalCollection.files.map(f =>
       applyCollectionFileDefaults(f, originalCollection, collectionI18n, config),
     ),
@@ -271,7 +275,7 @@ function applyCollectionDefaults(
     collection.fields = setI18nDefaultsForFields(collection.fields, Boolean(collectionI18n));
   }
 
-  const { view_filters, view_groups } = collection;
+  const { view_filters, view_groups } = originalCollection;
 
   if (!collection.sortable_fields) {
     collection.sortable_fields = {
@@ -280,7 +284,7 @@ function applyCollectionDefaults(
   }
 
   collection.view_filters = {
-    default: collection.view_filters?.default,
+    default: originalCollection.view_filters?.default,
     filters: (view_filters?.filters ?? []).map(filter => {
       return {
         ...filter,
@@ -290,7 +294,7 @@ function applyCollectionDefaults(
   };
 
   collection.view_groups = {
-    default: collection.view_groups?.default,
+    default: originalCollection.view_groups?.default,
     groups: (view_groups?.groups ?? []).map(group => {
       return {
         ...group,

diff --git a/packages/core/src/actions/entries.ts b/packages/core/src/actions/entries.ts
@@ -44,11 +44,7 @@ import { Cursor } from '../lib/util';
 import { getFields, updateFieldByKey } from '../lib/util/collection.util';
 import { createEmptyDraftData, createEmptyDraftI18nData } from '../lib/util/entry.util';
 import { selectCollectionEntriesCursor } from '../reducers/selectors/cursors';
-import {
-  selectEntriesSelectedSort,
-  selectIsFetching,
-  selectPublishedSlugs,
-} from '../reducers/selectors/entries';
+import { selectIsFetching, selectPublishedSlugs } from '../reducers/selectors/entries';
 import { addSnackbar } from '../store/slices/snackbars';
 import { createAssetProxy } from '../valueObjects/AssetProxy';
 import createEntry from '../valueObjects/createEntry';
@@ -73,7 +69,9 @@ import type {
   SortDirection,
   ValueOrNestedValue,
   ViewFilter,
+  ViewFilterWithDefaults,
   ViewGroup,
+  ViewGroupWithDefaults,
 } from '../interface';
 import type { RootState } from '../store';
 import type AssetProxy from '../valueObjects/AssetProxy';
@@ -122,7 +120,10 @@ export function entriesLoading(collection: CollectionWithDefaults) {
   } as const;
 }
 
-export function filterEntriesRequest(collection: CollectionWithDefaults, filter: ViewFilter) {
+export function filterEntriesRequest(
+  collection: CollectionWithDefaults,
+  filter: ViewFilterWithDefaults,
+) {
   return {
     type: FILTER_ENTRIES_REQUEST,
     payload: {
@@ -162,7 +163,10 @@ export function filterEntriesFailure(
   } as const;
 }
 
-export function groupEntriesRequest(collection: CollectionWithDefaults, group: ViewGroup) {
+export function groupEntriesRequest(
+  collection: CollectionWithDefaults,
+  group: ViewGroupWithDefaults,
+) {
   return {
     type: GROUP_ENTRIES_REQUEST,
     payload: {
@@ -315,7 +319,7 @@ export function sortByField(
   };
 }
 
-export function filterByField(collection: CollectionWithDefaults, filter: ViewFilter) {
+export function filterByField(collection: CollectionWithDefaults, filter: ViewFilterWithDefaults) {
   return async (dispatch: ThunkDispatch<RootState, {}, AnyAction>, getState: () => RootState) => {
     const state = getState();
     // if we're already fetching we update the filter key, but skip loading entries
@@ -334,17 +338,12 @@ export function filterByField(collection: CollectionWithDefaults, filter: ViewFi
   };
 }
 
-export function groupByField(collection: CollectionWithDefaults, group: ViewGroup) {
+export function groupByField(collection: CollectionWithDefaults, group: ViewGroupWithDefaults) {
   return async (dispatch: ThunkDispatch<RootState, {}, AnyAction>, getState: () => RootState) => {
     const state = getState();
     const isFetching = selectIsFetching(state, collection.name);
-    dispatch({
-      type: GROUP_ENTRIES_REQUEST,
-      payload: {
-        collection: collection.name,
-        group,
-      },
-    });
+    dispatch(groupEntriesRequest(collection, group));
+
     if (isFetching) {
       return;
     }
@@ -699,10 +698,6 @@ export function loadEntries(collection: CollectionWithDefaults, page = 0) {
       return;
     }
     const state = getState();
-    const sortField = selectEntriesSelectedSort(state, collection.name);
-    if (sortField) {
-      return dispatch(sortByField(collection, sortField.key, sortField.direction));
-    }
 
     const configState = state.config;
     if (!configState.config) {
@@ -751,6 +746,7 @@ export function loadEntries(collection: CollectionWithDefaults, page = 0) {
       );
     } catch (error: unknown) {
       console.error(error);
+
       if (error instanceof Error) {
         dispatch(
           addSnackbar({

diff --git a/packages/core/src/components/collections/CollectionControls.tsx b/packages/core/src/components/collections/CollectionControls.tsx
@@ -7,16 +7,16 @@ import GroupControl from './GroupControl';
 import MobileCollectionControls from './mobile/MobileCollectionControls';
 import SortControl from './SortControl';
 
-import type { ViewStyle } from '@staticcms/core/constants/views';
 import type {
   FilterMap,
   GroupMap,
   SortableField,
   SortDirection,
   SortMap,
-  ViewFilter,
-  ViewGroup,
+  ViewFilterWithDefaults,
+  ViewGroupWithDefaults,
 } from '@staticcms/core';
+import type { ViewStyle } from '@staticcms/core/constants/views';
 import type { FC } from 'react';
 
 interface CollectionControlsProps {
@@ -26,11 +26,11 @@ interface CollectionControlsProps {
   onSortClick?: (key: string, direction?: SortDirection) => Promise<void>;
   sort?: SortMap | undefined;
   filter?: Record<string, FilterMap>;
-  viewFilters?: ViewFilter[];
-  onFilterClick?: (filter: ViewFilter) => void;
+  viewFilters?: ViewFilterWithDefaults[];
+  onFilterClick?: (filter: ViewFilterWithDefaults) => void;
   group?: Record<string, GroupMap>;
-  viewGroups?: ViewGroup[];
-  onGroupClick?: (filter: ViewGroup) => void;
+  viewGroups?: ViewGroupWithDefaults[];
+  onGroupClick?: (filter: ViewGroupWithDefaults) => void;
 }
 
 const CollectionControls: FC<CollectionControlsProps> = ({

diff --git a/packages/core/src/components/collections/CollectionView.tsx b/packages/core/src/components/collections/CollectionView.tsx
@@ -1,12 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   changeViewStyle,
   filterByField,
   groupByField,
   sortByField,
 } from '@staticcms/core/actions/entries';
-import { SORT_DIRECTION_ASCENDING } from '@staticcms/core/constants';
 import useTranslate from '@staticcms/core/lib/hooks/useTranslate';
 import {
   getSortableFields,
@@ -28,8 +27,13 @@ import CollectionHeader from './CollectionHeader';
 import EntriesCollection from './entries/EntriesCollection';
 import EntriesSearch from './entries/EntriesSearch';
 
+import type {
+  CollectionWithDefaults,
+  SortDirection,
+  ViewFilterWithDefaults,
+  ViewGroupWithDefaults,
+} from '@staticcms/core';
 import type { ViewStyle } from '@staticcms/core/constants/views';
-import type { CollectionWithDefaults, SortDirection, ViewFilter, ViewGroup } from '@staticcms/core';
 import type { FC } from 'react';
 
 import './Collection.css';
@@ -70,13 +74,6 @@ const CollectionView: FC<CollectionViewProps> = ({
   const filter = useAppSelector(state => selectEntriesFilter(state, collection?.name));
   const group = useAppSelector(state => selectEntriesGroup(state, collection?.name));
 
-  const [readyToLoad, setReadyToLoad] = useState(false);
-  const [prevCollection, setPrevCollection] = useState<CollectionWithDefaults | null>();
-
-  useEffect(() => {
-    setPrevCollection(collection);
-  }, [collection]);
-
   const searchResultKey = useMemo(
     () => `collection.collectionTop.searchResults${isSingleSearchResult ? 'InCollection' : ''}`,
     [isSingleSearchResult],
@@ -110,21 +107,14 @@ const CollectionView: FC<CollectionViewProps> = ({
     }
 
     return (
-      <EntriesCollection
-        collection={collection}
-        viewStyle={viewStyle}
-        filterTerm={filterTerm}
-        readyToLoad={readyToLoad && collection === prevCollection}
-      />
+      <EntriesCollection collection={collection} viewStyle={viewStyle} filterTerm={filterTerm} />
     );
   }, [
     collection,
     collections,
     filterTerm,
     isSearchResults,
     isSingleSearchResult,
-    prevCollection,
-    readyToLoad,
     searchTerm,
     viewStyle,
   ]);
@@ -137,14 +127,14 @@ const CollectionView: FC<CollectionViewProps> = ({
   );
 
   const onFilterClick = useCallback(
-    async (filter: ViewFilter) => {
+    async (filter: ViewFilterWithDefaults) => {
       collection && (await dispatch(filterByField(collection, filter)));
     },
     [collection, dispatch],
   );
 
   const onGroupClick = useCallback(
-    async (group: ViewGroup) => {
+    async (group: ViewGroupWithDefaults) => {
       collection && (await dispatch(groupByField(collection, group)));
     },
     [collection, dispatch],
@@ -157,80 +147,6 @@ const CollectionView: FC<CollectionViewProps> = ({
     [dispatch],
   );
 
-  useEffect(() => {
-    if (prevCollection === collection) {
-      if (!readyToLoad) {
-        setReadyToLoad(true);
-      }
-      return;
-    }
-
-    if (sort?.[0]?.key) {
-      if (!readyToLoad) {
-        setReadyToLoad(true);
-      }
-      return;
-    }
-
-    const defaultSort = collection?.sortable_fields?.default;
-    const defaultViewGroupName = collection?.view_groups?.default;
-    const defaultViewFilterName = collection?.view_filters?.default;
-    if (!defaultViewGroupName && !defaultViewFilterName && (!defaultSort || !defaultSort.field)) {
-      if (!readyToLoad) {
-        setReadyToLoad(true);
-      }
-      return;
-    }
-
-    setReadyToLoad(false);
-
-    let alive = true;
-
-    const sortGroupFilterEntries = () => {
-      setTimeout(async () => {
-        if (defaultSort && defaultSort.field) {
-          await onSortClick(defaultSort.field, defaultSort.direction ?? SORT_DIRECTION_ASCENDING);
-        }
-
-        if (defaultViewGroupName) {
-          const defaultViewGroup = viewGroups?.groups.find(g => g.name === defaultViewGroupName);
-          if (defaultViewGroup) {
-            await onGroupClick(defaultViewGroup);
-          }
-        }
-
-        if (defaultViewFilterName) {
-          const defaultViewFilter = viewFilters?.filters.find(
-            f => f.name === defaultViewFilterName,
-          );
-          if (defaultViewFilter) {
-            await onFilterClick(defaultViewFilter);
-          }
-        }
-
-        if (alive) {
-          setReadyToLoad(true);
-        }
-      });
-    };
-
-    sortGroupFilterEntries();
-
-    return () => {
-      alive = false;
-    };
-  }, [
-    collection,
-    onFilterClick,
-    onGroupClick,
-    onSortClick,
-    prevCollection,
-    readyToLoad,
-    sort,
-    viewFilters?.filters,
-    viewGroups?.groups,
-  ]);
-
   const collectionDescription = collection?.description;
 
   return (

diff --git a/packages/core/src/components/collections/FilterControl.tsx b/packages/core/src/components/collections/FilterControl.tsx
@@ -7,8 +7,8 @@ import Menu from '../common/menu/Menu';
 import MenuGroup from '../common/menu/MenuGroup';
 import MenuItemButton from '../common/menu/MenuItemButton';
 
-import type { FilterMap, ViewFilter } from '@staticcms/core';
-import type { MouseEvent, FC } from 'react';
+import type { FilterMap, ViewFilterWithDefaults } from '@staticcms/core';
+import type { FC, MouseEvent } from 'react';
 
 import './FilterControl.css';
 
@@ -24,9 +24,9 @@ export const classes = generateClassNames('FilterControl', [
 
 export interface FilterControlProps {
   filter: Record<string, FilterMap> | undefined;
-  viewFilters: ViewFilter[] | undefined;
+  viewFilters: ViewFilterWithDefaults[] | undefined;
   variant?: 'menu' | 'list';
-  onFilterClick: ((viewFilter: ViewFilter) => void) | undefined;
+  onFilterClick: ((viewFilter: ViewFilterWithDefaults) => void) | undefined;
 }
 
 const FilterControl: FC<FilterControlProps> = ({
@@ -40,7 +40,7 @@ const FilterControl: FC<FilterControlProps> = ({
   const anyActive = useMemo(() => Object.keys(filter).some(key => filter[key]?.active), [filter]);
 
   const handleFilterClick = useCallback(
-    (viewFilter: ViewFilter) => (event: MouseEvent) => {
+    (viewFilter: ViewFilterWithDefaults) => (event: MouseEvent) => {
       event.stopPropagation();
       event.preventDefault();
       onFilterClick?.(viewFilter);