From d282769fd9661db2a41cf68eca9ff7d6329851d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Wed, 5 Jul 2023 12:28:22 +0200 Subject: [PATCH] Refactor order list datagrid to use new hooks (#3846) --- .changeset/wet-forks-accept.md | 5 + src/orders/views/OrderList/OrderList.tsx | 117 ++++++----------------- src/orders/views/OrderList/filters.ts | 7 +- 3 files changed, 35 insertions(+), 94 deletions(-) create mode 100644 .changeset/wet-forks-accept.md diff --git a/.changeset/wet-forks-accept.md b/.changeset/wet-forks-accept.md new file mode 100644 index 000000000..9673f94b6 --- /dev/null +++ b/.changeset/wet-forks-accept.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": minor +--- + +Refactor order list datagrid to use useFilterPresets and useRowSelection hooks diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 985092344..25de67712 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -2,15 +2,14 @@ import ChannelPickerDialog from "@dashboard/channels/components/ChannelPickerDialog"; import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext"; import DeleteFilterTabDialog from "@dashboard/components/DeleteFilterTabDialog"; -import SaveFilterTabDialog, { - SaveFilterTabDialogFormData, -} from "@dashboard/components/SaveFilterTabDialog"; +import SaveFilterTabDialog from "@dashboard/components/SaveFilterTabDialog"; import { useShopLimitsQuery } from "@dashboard/components/Shop/queries"; import { useOrderDraftCreateMutation, useOrderListQuery, } from "@dashboard/graphql"; import { useFilterHandlers } from "@dashboard/hooks/useFilterHandlers"; +import { useFilterPresets } from "@dashboard/hooks/useFilterPresets"; import useListSettings from "@dashboard/hooks/useListSettings"; import useNavigator from "@dashboard/hooks/useNavigator"; import useNotifier from "@dashboard/hooks/useNotifier"; @@ -19,18 +18,12 @@ import usePaginator, { createPaginationState, PaginatorContext, } from "@dashboard/hooks/usePaginator"; -import { - getActiveTabIndexAfterTabDelete, - getNextUniqueTabName, -} from "@dashboard/products/views/ProductList/utils"; import { ListViews } from "@dashboard/types"; -import { prepareQs } from "@dashboard/utils/filters/qs"; import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers"; import createSortHandler from "@dashboard/utils/handlers/sortHandler"; import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps"; import { getSortParams } from "@dashboard/utils/sort"; -import { stringify } from "qs"; -import React, { useState } from "react"; +import React from "react"; import { useIntl } from "react-intl"; import OrderListPage from "../../components/OrderListPage/OrderListPage"; @@ -42,13 +35,10 @@ import { orderUrl, } from "../../urls"; import { - deleteFilterTab, getFilterOpts, getFilterQueryParam, - getFilterTabs, getFilterVariables, - saveFilterTab, - updateFilterTab, + storageUtils, } from "./filters"; import { DEFAULT_SORT_KEY, getSortQueryVariables } from "./sort"; @@ -63,7 +53,22 @@ export const OrderList: React.FC = ({ params }) => { ListViews.ORDER_LIST, ); - const [tabIndexToDelete, setTabIndexToDelete] = useState(null); + const { + hasPresetsChange, + onPresetChange, + onPresetDelete, + onPresetSave, + onPresetUpdate, + presetIdToDelete, + presets, + selectedPreset, + setPresetIdToDelete, + } = useFilterPresets({ + params, + getUrl: orderListUrl, + storageUtils, + reset: () => "", + }); usePaginationReset(orderListUrl, params, settings.rowNumber); @@ -94,11 +99,6 @@ export const OrderList: React.FC = ({ params }) => { ? mapNodeToChoice(availableChannels) : null; - const tabs = getFilterTabs(); - - const currentTab = - params.activeTab !== undefined ? parseInt(params.activeTab, 10) : undefined; - const [changeFilters, resetFilters, handleSearchChange] = useFilterHandlers({ createUrl: orderListUrl, getFilterQueryParam, @@ -113,65 +113,6 @@ export const OrderList: React.FC = ({ params }) => { OrderListUrlQueryParams >(navigate, orderListUrl, params); - const hasPresetsChanged = () => { - const activeTab = tabs[currentTab - 1]; - const { parsedQs } = prepareQs(location.search); - - return ( - activeTab?.data !== stringify(parsedQs) && - location.search !== "" && - stringify(parsedQs) !== "" - ); - }; - - const handleTabChange = (tab: number) => { - const qs = new URLSearchParams(getFilterTabs()[tab - 1]?.data ?? ""); - qs.append("activeTab", tab.toString()); - - navigate(orderListUrl() + "?" + qs.toString()); - }; - - const handleFilterTabDelete = () => { - deleteFilterTab(tabIndexToDelete); - - // When deleting the current tab, navigate to the All orders tab - if (tabIndexToDelete === currentTab) { - navigate(orderListUrl()); - } else { - const currentParams = { ...params }; - // When deleting a tab that is not the current one, only remove the action param from the query - delete currentParams.action; - // When deleting a tab that is before the current one, decrease the activeTab param by 1 - currentParams.activeTab = getActiveTabIndexAfterTabDelete( - currentTab, - tabIndexToDelete, - ); - navigate(orderListUrl() + "?" + stringify(currentParams)); - } - }; - - const hanleFilterTabUpdate = (tabName: string) => { - const { parsedQs, activeTab } = prepareQs(location.search); - - updateFilterTab(tabName, stringify(parsedQs)); - parsedQs.activeTab = activeTab; - - navigate(orderListUrl() + "?" + stringify(parsedQs)); - }; - - const handleFilterTabSave = (data: SaveFilterTabDialogFormData) => { - const { parsedQs } = prepareQs(location.search); - - saveFilterTab( - getNextUniqueTabName( - data.name, - tabs.map(tab => tab.name), - ), - stringify(parsedQs), - ); - handleTabChange(tabs.length + 1); - }; - const paginationState = createPaginationState(settings.rowNumber, params); const queryVariables = React.useMemo( @@ -199,7 +140,7 @@ export const OrderList: React.FC = ({ params }) => { = ({ params }) => { onFilterChange={changeFilters} onTabSave={() => openModal("save-search")} onTabDelete={(tabIndex: number) => { - setTabIndexToDelete(tabIndex); + setPresetIdToDelete(tabIndex); openModal("delete-search"); }} - onTabChange={handleTabChange} - onTabUpdate={hanleFilterTabUpdate} + onTabChange={onPresetChange} + onTabUpdate={onPresetUpdate} initialSearch={params.query || ""} - tabs={getFilterTabs().map(tab => tab.name)} + tabs={presets.map(tab => tab.name)} onAll={resetFilters} onSettingsOpen={() => navigate(orderSettingsPath)} params={params} - hasPresetsChanged={hasPresetsChanged()} + hasPresetsChanged={hasPresetsChange()} /> {!noChannel && ( (ORDER_FILTERS_KEY); +export const storageUtils = createFilterTabUtils(ORDER_FILTERS_KEY); export const { areFiltersApplied, getActiveFilters, getFiltersCurrentTab } = createFilterUtils({