part 3 of on click bar to filters: add sort plus some normalizations (#16075)

packages/twenty-front/src/modules/views/components/QueryParamsCleanupEffect.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams';
+import { useSortsFromQueryParams } from '@/views/hooks/internal/useSortsFromQueryParams';
+import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
+
+export const QueryParamsCleanupEffect = () => {
+  const { hasFiltersQueryParams } = useHasFiltersInQueryParams();
+  const { hasSortsQueryParams, objectMetadataItem } = useSortsFromQueryParams();
+
+  const { currentView } = useGetCurrentViewOnly();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [hasCleanedQueryParams, setHasCleanedQueryParams] = useState(false);
+
+  const currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem =
+    currentView?.objectMetadataId !== objectMetadataItem.id;
+
+  useEffect(() => {
+    if (
+      currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem ||
+      hasCleanedQueryParams
+    ) {
+      return;
+    }
+
+    if (!hasFiltersQueryParams && !hasSortsQueryParams) {
+      return;
+    }
+
+    const newParams = new URLSearchParams(searchParams);
+
+    Array.from(newParams.keys()).forEach((key) => {
+      if (
+        key.startsWith('filter[') ||
+        key.startsWith('filterGroup[') ||
+        key.startsWith('sort[')
+      ) {
+        newParams.delete(key);
+      }
+    });
+
+    setSearchParams(newParams, { replace: true });
+    setHasCleanedQueryParams(true);
+  }, [
+    currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem,
+    hasFiltersQueryParams,
+    hasSortsQueryParams,
+    hasCleanedQueryParams,
+    searchParams,
+    setSearchParams,
+  ]);
+
+  return null;
+};

packages/twenty-front/src/modules/views/components/QueryParamsSortsEffect.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+
+import { useSortsFromQueryParams } from '@/views/hooks/internal/useSortsFromQueryParams';
+import { useApplyViewSortsToCurrentRecordSorts } from '@/views/hooks/useApplyViewSortsToCurrentRecordSorts';
+import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
+
+export const QueryParamsSortsEffect = () => {
+  const { hasSortsQueryParams, getSortsFromQueryParams, objectMetadataItem } =
+    useSortsFromQueryParams();
+
+  const { currentView } = useGetCurrentViewOnly();
+
+  const { applyViewSortsToCurrentRecordSorts } =
+    useApplyViewSortsToCurrentRecordSorts();
+
+  const currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem =
+    currentView?.objectMetadataId !== objectMetadataItem.id;
+
+  useEffect(() => {
+    if (
+      !hasSortsQueryParams ||
+      currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem
+    ) {
+      return;
+    }
+
+    const sortsFromParams = getSortsFromQueryParams();
+    if (sortsFromParams.length > 0) {
+      const viewSorts = sortsFromParams.map((sort) => ({
+        ...sort,
+        viewId: currentView?.id ?? '',
+      }));
+
+      applyViewSortsToCurrentRecordSorts(viewSorts);
+    }
+  }, [
+    hasSortsQueryParams,
+    getSortsFromQueryParams,
+    applyViewSortsToCurrentRecordSorts,
+    currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem,
+    currentView?.id,
+  ]);
+
+  return null;
+};

packages/twenty-front/src/modules/views/components/ViewBar.tsx

@@ -5,6 +5,7 @@ import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/c
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
 import { TopBar } from '@/ui/layout/top-bar/components/TopBar';
 import { QueryParamsFiltersEffect } from '@/views/components/QueryParamsFiltersEffect';
+import { QueryParamsSortsEffect } from '@/views/components/QueryParamsSortsEffect';
 import { ViewBarPageTitle } from '@/views/components/ViewBarPageTitle';
 import { ViewBarSkeletonLoader } from '@/views/components/ViewBarSkeletonLoader';
 import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDropdown';
@@ -12,6 +13,7 @@ import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDro
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId';
 import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
+import { QueryParamsCleanupEffect } from '@/views/components/QueryParamsCleanupEffect';
 import { ViewBarAnyFieldFilterEffect } from '@/views/components/ViewBarAnyFieldFilterEffect';
 import { ViewBarFilterDropdown } from '@/views/components/ViewBarFilterDropdown';
 import { ViewBarRecordFieldEffect } from '@/views/components/ViewBarRecordFieldEffect';
@@ -50,6 +52,8 @@ export const ViewBar = ({
       <ViewBarRecordFilterEffect />
       <ViewBarRecordSortEffect />
       <QueryParamsFiltersEffect />
+      <QueryParamsSortsEffect />
+      <QueryParamsCleanupEffect />
       <ViewBarPageTitle />
       <TopBar
         className={className}