Only persist unsaved changes in session in All view

Shopify · Sep 11, 2024 · 13b3a1c · 13b3a1c
1 parent 3168958
commit 13b3a1c
Showing 1 changed file with 39 additions and 29 deletions.
diff --git a/polaris-react/playground/OrdersPage.tsx b/polaris-react/playground/OrdersPage.tsx
@@ -388,13 +388,13 @@ function OrdersIndexTableWithFilters(
   },
 ) {
   const sortOptions: IndexFiltersProps['sortOptions'] = [
-    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
+    {label: 'Order', value: 'order desc', directionLabel: 'Ascending'},
     {label: 'Order', value: 'order desc', directionLabel: 'Descending'},
-    {label: 'Customer', value: 'customer asc', directionLabel: 'A-Z'},
+    {label: 'Customer', value: 'customer desc', directionLabel: 'A-Z'},
     {label: 'Customer', value: 'customer desc', directionLabel: 'Z-A'},
-    {label: 'Date', value: 'date asc', directionLabel: 'A-Z'},
+    {label: 'Date', value: 'date desc', directionLabel: 'A-Z'},
     {label: 'Date', value: 'date desc', directionLabel: 'Z-A'},
-    {label: 'Total', value: 'total asc', directionLabel: 'Ascending'},
+    {label: 'Total', value: 'total desc', directionLabel: 'Ascending'},
     {label: 'Total', value: 'total desc', directionLabel: 'Descending'},
   ];
 
@@ -406,7 +406,7 @@ function OrdersIndexTableWithFilters(
     'Archived',
   ]);
   const [selectedView, setSelectedView] = useState(0);
-  const [sortSelected, setSortSelected] = useState(['order asc']);
+  const [sortSelected, setSortSelected] = useState(['order desc']);
   const [queryValue, setQueryValue] = useState('');
   const [status, setStatus] = useState<string[]>([]);
   const [paymentStatus, setPaymentStatus] = useState<string[]>([]);
@@ -458,11 +458,11 @@ function OrdersIndexTableWithFilters(
   );
 
   const [savedSortSelected, setSavedSortSelected] = useState([
-    'order asc',
-    'order asc',
-    'order asc',
-    'order asc',
-    'order asc',
+    'order desc',
+    'order desc',
+    'order desc',
+    'order desc',
+    'order desc',
   ]);
 
   const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Default);
@@ -720,6 +720,7 @@ function OrdersIndexTableWithFilters(
       `resetting to ---
         `,
       nextFilters,
+      [savedSortSelected[view]],
     );
 
     setSortSelected([savedSortSelected[view]]);
@@ -870,13 +871,19 @@ function OrdersIndexTableWithFilters(
     }
   };
 
-  const hasUnsavedChanges =
-    sortSelected[0] !== savedSortSelected[selectedView] ||
+  const hasUnsavedSortChange =
+    (selectedView === 0 && sortSelected[0] !== 'order desc') ||
+    sortSelected[0] !== savedSortSelected[selectedView];
+
+  const hasUnsavedFilterChange =
+    (selectedView === 0 && appliedFilters.length > 0) ||
     (!savedViewFilters[selectedView] && appliedFilters.length > 0) ||
     (appliedFilters.length === 0 &&
       savedViewFilters[selectedView]?.length > 0) ||
     !appliedFilters.every(appliedFilterMatchesSavedFilter);
 
+  const hasUnsavedChanges = hasUnsavedSortChange || hasUnsavedFilterChange;
+
   // ---- View event handlers
   const sleep = (ms: number) => {
     return new Promise((resolve) => setTimeout(resolve, ms));
@@ -897,27 +904,25 @@ function OrdersIndexTableWithFilters(
 
   const handleSelectView = async (view: number) => {
     const previousView = selectedView;
+    const previousSortSelected = sortSelected[0];
     let nextFilters;
-    if (previousView === 0 && (queryValue || hasUnsavedChanges)) {
+
+    if (previousView === 0 && hasUnsavedChanges) {
       nextFilters = getFiltersToSave();
-    } else if (queryValue) {
-      nextFilters = [
-        ...savedViewFilters[previousView],
-        {
-          key: 'queryValue',
-          value: queryValue,
-          label: handlers.queryValue.label,
-        },
-      ];
     }
 
     setQueryValue('');
     setMode(IndexFiltersMode.Default);
     setSelectedView(view);
     setLoading(true);
     handleResetToSavedFilters(view);
-    if (nextFilters) await handleSaveViewFilters(previousView, nextFilters);
-    else await sleep(250);
+    if (nextFilters) {
+      await handleSaveViewFilters(
+        previousView,
+        nextFilters,
+        previousSortSelected,
+      );
+    } else await sleep(250);
     setLoading(false);
   };
 
@@ -1014,7 +1019,7 @@ function OrdersIndexTableWithFilters(
       setSavedViewFilters((filters) => [...filters, []]);
       setSavedSortSelected((currentSavedSortSelected) => [
         ...currentSavedSortSelected,
-        'order asc',
+        'order desc',
       ]);
     }
 
@@ -1052,13 +1057,19 @@ function OrdersIndexTableWithFilters(
   const handleCancel = () => {
     if (!hasUnsavedChanges) {
       console.log('cancelled -- no unsaved changes');
-      // } else if (selectedView === 0) {
-      //   console.log('cancelled -- persisting all');
+    } else if (selectedView === 0) {
+      console.log('cancelled -- clearing all');
+      const nextSavedSortSelected = [...savedSortSelected];
+      nextSavedSortSelected[0] = 'order desc';
+      handleClearFilters();
+      setSortSelected(['order desc']);
+      setSavedSortSelected(nextSavedSortSelected);
     } else {
       handleResetToSavedFilters(selectedView);
       console.log('cancelled -- resetting to saved');
     }
   };
+
   const tabs: TabProps[] = viewNames.map((name, index) => {
     return {
       index,
@@ -1095,7 +1106,6 @@ function OrdersIndexTableWithFilters(
 
   const cancelAction: IndexFiltersProps['cancelAction'] = {
     onAction: handleCancel,
-    disabled: !hasUnsavedChanges,
   };
 
   const queryPlaceholder = `Search ${viewNames[selectedView]?.toLowerCase()}`;
@@ -1124,7 +1134,7 @@ function OrdersIndexTableWithFilters(
         onClearAll={handleClearFilters}
         mode={mode}
         setMode={setMode}
-        sortUnsaved={sortSelected[0] !== savedSortSelected[selectedView]}
+        sortUnsaved={hasUnsavedSortChange}
       />
       <Table orders={filteredOrders} />
     </Card>