From d1ae1559d032566bb01837302dff7dc560d9f1f9 Mon Sep 17 00:00:00 2001 From: Magdalena Markusik Date: Mon, 10 May 2021 17:25:54 +0200 Subject: [PATCH] Add mapEdgesToItems util function and replace all usages --- .../views/AttributeList/AttributeList.tsx | 3 +- src/categories/views/CategoryDetails.tsx | 10 ++----- .../views/CategoryList/CategoryList.tsx | 6 ++-- .../CollectionProducts/CollectionProducts.tsx | 5 ++-- .../views/CollectionList/CollectionList.tsx | 3 +- src/components/Navigator/modes/catalog.ts | 16 ++++------- src/components/Navigator/useQuickSearch.ts | 6 ++-- .../CustomerDetailsPage.tsx | 6 ++-- .../views/CustomerList/CustomerList.tsx | 3 +- .../DiscountCategories/DiscountCategories.tsx | 5 ++-- .../DiscountCollections.tsx | 5 ++-- .../DiscountProducts/DiscountProducts.tsx | 5 ++-- src/discounts/views/SaleList/SaleList.tsx | 3 +- .../views/VoucherList/VoucherList.tsx | 3 +- src/home/views/index.tsx | 5 ++-- src/navigation/views/MenuDetails/index.tsx | 18 +++++------- src/navigation/views/MenuList/MenuList.tsx | 3 +- .../OrderDetails/OrderDraftDetails/index.tsx | 3 +- .../OrderDetails/OrderNormalDetails/index.tsx | 5 ++-- .../OrderUnconfirmedDetails/index.tsx | 7 ++--- .../views/OrderDraftList/OrderDraftList.tsx | 6 ++-- .../views/OrderFulfill/OrderFulfill.tsx | 3 +- src/orders/views/OrderList/OrderList.tsx | 4 +-- src/pageTypes/views/PageTypeDetails.tsx | 5 ++-- src/pages/views/PageCreate.tsx | 13 ++++----- src/pages/views/PageDetails.tsx | 9 ++---- src/pages/views/PageList/PageList.tsx | 3 +- .../PermissionGroupDetails.tsx | 4 ++- .../PermissionGroupList.tsx | 3 +- src/plugins/views/PluginList/PluginList.tsx | 3 +- .../views/ProductTypeList/ProductTypeList.tsx | 5 ++-- .../views/ProductTypeUpdate/index.tsx | 7 ++--- .../views/ProductCreate/ProductCreate.tsx | 13 +++------ .../views/ProductList/ProductList.tsx | 17 ++++------- src/products/views/ProductList/filters.ts | 28 +++++-------------- .../views/ProductUpdate/ProductUpdate.tsx | 13 +++------ src/products/views/ProductVariant.tsx | 13 +++------ src/products/views/ProductVariantCreate.tsx | 13 +++------ .../ProductVariantCreator.tsx | 3 +- .../ShippingMethodProducts.stories.tsx | 5 ++-- .../ShippingZoneRatesPage.tsx | 6 ++-- .../views/ShippingZoneDetails/index.tsx | 5 ++-- src/shipping/views/ShippingZonesList.tsx | 5 ++-- src/staff/views/StaffDetails.tsx | 5 ++-- src/staff/views/StaffList/StaffList.tsx | 7 +++-- .../stories/categories/CategoryUpdatePage.tsx | 5 ++-- src/storybook/stories/home/HomePage.tsx | 5 ++-- src/utils/maps.ts | 12 ++++++++ .../WarehouseDetailsPage.tsx | 4 +-- .../views/WarehouseList/WarehouseList.tsx | 3 +- 50 files changed, 156 insertions(+), 191 deletions(-) diff --git a/src/attributes/views/AttributeList/AttributeList.tsx b/src/attributes/views/AttributeList/AttributeList.tsx index 1ca96d473..2013b1533 100644 --- a/src/attributes/views/AttributeList/AttributeList.tsx +++ b/src/attributes/views/AttributeList/AttributeList.tsx @@ -22,6 +22,7 @@ import usePaginator, { import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { useIntl } from "react-intl"; @@ -147,7 +148,7 @@ const AttributeList: React.FC = ({ params }) => { return ( <> data.attributes.edges.map(edge => edge.node))} + attributes={mapEdgesToItems(data?.attributes)} currentTab={currentTab} disabled={loading || attributeBulkDeleteOpts.loading} filterOpts={getFilterOpts(params)} diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index a558094f9..c182126ac 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -15,7 +15,7 @@ import usePaginator, { import { commonMessages } from "@saleor/intl"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; -import { mapNodeToChoice } from "@saleor/utils/maps"; +import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -258,14 +258,10 @@ export const CategoryDetails: React.FC = ({ pageInfo={pageInfo} onProductClick={id => () => navigate(productUrl(id))} onSubmit={handleSubmit} - products={maybe(() => - data.category.products.edges.map(edge => edge.node) - )} + products={mapEdgesToItems(data?.category?.products)} saveButtonBarState={updateResult.status} selectedChannelId={channel?.id} - subcategories={maybe(() => - data.category.children.edges.map(edge => edge.node) - )} + subcategories={mapEdgesToItems(data?.category?.children)} subcategoryListToolbar={ = ({ params }) => { return ( <> data.categories.edges.map(edge => edge.node), - [] - )} + categories={mapEdgesToItems(data?.categories)} currentTab={currentTab} initialSearch={params.query || ""} onSearchChange={query => changeFilterField({ query })} diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index 436fb5740..0d09ad1e0 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -16,6 +16,7 @@ import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { makeStyles } from "@saleor/theme"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -125,7 +126,7 @@ const CollectionProducts: React.FC = props => { colSpan={numberOfColumns} selected={selected} disabled={disabled} - items={maybe(() => collection.products.edges.map(edge => edge.node))} + items={mapEdgesToItems(collection?.products)} toggleAll={toggleAll} toolbar={toolbar} > @@ -164,7 +165,7 @@ const CollectionProducts: React.FC = props => { {renderCollection( - maybe(() => collection.products.edges.map(edge => edge.node)), + mapEdgesToItems(collection?.products), product => { const isSelected = product ? isChecked(product.id) : false; const channel = diff --git a/src/collections/views/CollectionList/CollectionList.tsx b/src/collections/views/CollectionList/CollectionList.tsx index 4e404ae7f..829a1ba20 100644 --- a/src/collections/views/CollectionList/CollectionList.tsx +++ b/src/collections/views/CollectionList/CollectionList.tsx @@ -19,6 +19,7 @@ import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -158,7 +159,7 @@ export const CollectionList: React.FC = ({ params }) => { onTabSave={() => openModal("save-search")} tabs={tabs.map(tab => tab.name)} disabled={loading} - collections={maybe(() => data.collections.edges.map(edge => edge.node))} + collections={mapEdgesToItems(data?.collections)} settings={settings} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} diff --git a/src/components/Navigator/modes/catalog.ts b/src/components/Navigator/modes/catalog.ts index 10b2b253b..e540a93b6 100644 --- a/src/components/Navigator/modes/catalog.ts +++ b/src/components/Navigator/modes/catalog.ts @@ -3,6 +3,7 @@ import { collectionUrl } from "@saleor/collections/urls"; import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import { maybe } from "@saleor/misc"; import { productUrl } from "@saleor/products/urls"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { score } from "fuzzaldrin"; import { IntlShape } from "react-intl"; @@ -19,9 +20,8 @@ export function searchInCatalog( navigate: UseNavigatorResult, catalog: SearchCatalog ): QuickSearchAction[] { - const categories: QuickSearchActionInput[] = maybe( - () => catalog.categories.edges.map(edge => edge.node), - [] + const categories: QuickSearchActionInput[] = mapEdgesToItems( + catalog?.categories ) .map(category => ({ caption: intl.formatMessage(messages.category), @@ -36,9 +36,8 @@ export function searchInCatalog( })) .sort(sortScores); - const collections: QuickSearchActionInput[] = maybe( - () => catalog.collections.edges.map(edge => edge.node), - [] + const collections: QuickSearchActionInput[] = mapEdgesToItems( + catalog?.collections ) .map(collection => ({ caption: intl.formatMessage(messages.collection), @@ -53,10 +52,7 @@ export function searchInCatalog( })) .sort(sortScores); - const products: QuickSearchActionInput[] = maybe( - () => catalog.products.edges.map(edge => edge.node), - [] - ) + const products: QuickSearchActionInput[] = mapEdgesToItems(catalog?.products) .map(product => ({ caption: intl.formatMessage(messages.product), extraInfo: product.category.name, diff --git a/src/components/Navigator/useQuickSearch.ts b/src/components/Navigator/useQuickSearch.ts index ca6e27efe..e2be6de52 100644 --- a/src/components/Navigator/useQuickSearch.ts +++ b/src/components/Navigator/useQuickSearch.ts @@ -6,6 +6,7 @@ import { maybe } from "@saleor/misc"; import { useOrderDraftCreateMutation } from "@saleor/orders/mutations"; import { orderUrl } from "@saleor/orders/urls"; import useCustomerSearch from "@saleor/searches/useCustomerSearch"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { RefObject, useEffect, useState } from "react"; import { useIntl } from "react-intl"; @@ -107,10 +108,7 @@ function useQuickSearch( intl, { catalog, - customers: maybe( - () => customers.data.search.edges.map(edge => edge.node), - [] - ), + customers: mapEdgesToItems(customers?.data?.search), order: maybe(() => orderData.order) }, { diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx index 16836042d..f5059a42a 100644 --- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx +++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx @@ -11,7 +11,7 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; -import { mapMetadataItemToInput } from "@saleor/utils/maps"; +import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; import { useIntl } from "react-intl"; @@ -102,9 +102,7 @@ const CustomerDetailsPage: React.FC = ({ /> - customer.orders.edges.map(edge => edge.node) - )} + orders={mapEdgesToItems(customer?.orders)} onViewAllOrdersClick={onViewAllOrdersClick} onRowClick={onRowClick} /> diff --git a/src/customers/views/CustomerList/CustomerList.tsx b/src/customers/views/CustomerList/CustomerList.tsx index 3ffd052b0..39b6736da 100644 --- a/src/customers/views/CustomerList/CustomerList.tsx +++ b/src/customers/views/CustomerList/CustomerList.tsx @@ -19,6 +19,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -158,7 +159,7 @@ export const CustomerList: React.FC = ({ params }) => { onTabDelete={() => openModal("delete-search")} onTabSave={() => openModal("save-search")} tabs={tabs.map(tab => tab.name)} - customers={maybe(() => data.customers.edges.map(edge => edge.node))} + customers={mapEdgesToItems(data?.customers)} settings={settings} disabled={loading} pageInfo={pageInfo} diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx index f10ec70f2..d01b56144 100644 --- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx +++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx @@ -13,6 +13,7 @@ import Skeleton from "@saleor/components/Skeleton"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { makeStyles } from "@saleor/theme"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -98,7 +99,7 @@ const DiscountCategories: React.FC = props => { colSpan={numberOfColumns} selected={selected} disabled={disabled} - items={maybe(() => discount.categories.edges.map(edge => edge.node))} + items={mapEdgesToItems(discount?.categories)} toggleAll={toggleAll} toolbar={toolbar} > @@ -130,7 +131,7 @@ const DiscountCategories: React.FC = props => { {renderCollection( - maybe(() => discount.categories.edges.map(edge => edge.node)), + mapEdgesToItems(discount?.categories), category => { const isSelected = category ? isChecked(category.id) : false; diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx index 255352651..ea797316a 100644 --- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx +++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx @@ -13,6 +13,7 @@ import Skeleton from "@saleor/components/Skeleton"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { makeStyles } from "@saleor/theme"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -100,7 +101,7 @@ const DiscountCollections: React.FC = props => { colSpan={numberOfColumns} selected={selected} disabled={disabled} - items={maybe(() => sale.collections.edges.map(edge => edge.node))} + items={mapEdgesToItems(sale?.collections)} toggleAll={toggleAll} toolbar={toolbar} > @@ -130,7 +131,7 @@ const DiscountCollections: React.FC = props => { {renderCollection( - maybe(() => sale.collections.edges.map(edge => edge.node)), + mapEdgesToItems(sale?.collections), collection => { const isSelected = collection ? isChecked(collection.id) : false; return ( diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx index 951e95eba..19e917e99 100644 --- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx +++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx @@ -16,6 +16,7 @@ import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { makeStyles } from "@saleor/theme"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -121,7 +122,7 @@ const DiscountProducts: React.FC = props => { colSpan={numberOfColumns} selected={selected} disabled={disabled} - items={maybe(() => sale.products.edges.map(edge => edge.node))} + items={mapEdgesToItems(sale?.products)} toggleAll={toggleAll} toolbar={toolbar} > @@ -156,7 +157,7 @@ const DiscountProducts: React.FC = props => { {renderCollection( - maybe(() => sale.products.edges.map(edge => edge.node)), + mapEdgesToItems(sale?.products), product => { const isSelected = product ? isChecked(product.id) : false; const channel = diff --git a/src/discounts/views/SaleList/SaleList.tsx b/src/discounts/views/SaleList/SaleList.tsx index ab34fa8b8..4f9253661 100644 --- a/src/discounts/views/SaleList/SaleList.tsx +++ b/src/discounts/views/SaleList/SaleList.tsx @@ -21,6 +21,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -172,7 +173,7 @@ export const SaleList: React.FC = ({ params }) => { onTabDelete={() => openModal("delete-search")} onTabSave={() => openModal("save-search")} tabs={tabs.map(tab => tab.name)} - sales={maybe(() => data.sales.edges.map(edge => edge.node))} + sales={mapEdgesToItems(data?.sales)} settings={settings} disabled={loading} pageInfo={pageInfo} diff --git a/src/discounts/views/VoucherList/VoucherList.tsx b/src/discounts/views/VoucherList/VoucherList.tsx index 40e89a44e..43d24dd40 100644 --- a/src/discounts/views/VoucherList/VoucherList.tsx +++ b/src/discounts/views/VoucherList/VoucherList.tsx @@ -21,6 +21,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -174,7 +175,7 @@ export const VoucherList: React.FC = ({ params }) => { onTabSave={() => openModal("save-search")} tabs={tabs.map(tab => tab.name)} settings={settings} - vouchers={maybe(() => data.vouchers.edges.map(edge => edge.node))} + vouchers={mapEdgesToItems(data?.vouchers)} disabled={loading} pageInfo={pageInfo} onAdd={() => navigate(voucherAddUrl())} diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index 488cc14a3..6243658ec 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -2,6 +2,7 @@ import { channelsListUrl } from "@saleor/channels/urls"; import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import useNavigator from "@saleor/hooks/useNavigator"; import useUser from "@saleor/hooks/useUser"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { getDatePeriod, getUserName } from "../../misc"; @@ -26,10 +27,10 @@ const HomeSection = () => { return ( edge.node).reverse()} + activities={mapEdgesToItems(data?.activities)} orders={data?.ordersToday?.totalCount} sales={data?.salesToday?.gross} - topProducts={data?.productTopToday?.edges.map(edge => edge.node)} + topProducts={mapEdgesToItems(data?.productTopToday)} onProductClick={(productId, variantId) => navigate(productVariantEditUrl(productId, variantId)) } diff --git a/src/navigation/views/MenuDetails/index.tsx b/src/navigation/views/MenuDetails/index.tsx index 4f9756082..84dc121d0 100644 --- a/src/navigation/views/MenuDetails/index.tsx +++ b/src/navigation/views/MenuDetails/index.tsx @@ -1,4 +1,5 @@ import DialogContentText from "@material-ui/core/DialogContentText"; +import { collection } from "@saleor/collections/fixtures"; import ActionDialog from "@saleor/components/ActionDialog"; import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config"; import useNavigator from "@saleor/hooks/useNavigator"; @@ -6,6 +7,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import usePageSearch from "@saleor/searches/usePageSearch"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -112,21 +114,15 @@ const MenuDetails: React.FC = ({ id, params }) => { pageSearch.search(query); }; - const categories = maybe( - () => categorySearch.result.data.search.edges.map(edge => edge.node), - [] + const categories = mapEdgesToItems( + categorySearch?.result?.data?.search ); - const collections = maybe( - () => - collectionSearch.result.data.search.edges.map(edge => edge.node), - [] + const collections = mapEdgesToItems( + collectionSearch?.result?.data?.search ); - const pages = maybe( - () => pageSearch.result.data.search.edges.map(edge => edge.node), - [] - ); + const pages = mapEdgesToItems(pageSearch?.result?.data?.search); return ( = ({ params }) => { <> data.menus.edges.map(edge => edge.node))} + menus={mapEdgesToItems(data?.menus)} settings={settings} onAdd={() => navigate( diff --git a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx index 72ba1a21c..5904982bb 100644 --- a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx +++ b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx @@ -16,6 +16,7 @@ import { OrderDetails } from "@saleor/orders/types/OrderDetails"; import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider"; import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; import useCustomerSearch from "@saleor/searches/useCustomerSearch"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { useIntl } from "react-intl"; @@ -233,7 +234,7 @@ export const OrderDraftDetails: React.FC = ({ loading={variantSearchOpts.loading} open={params.action === "add-order-line"} hasMore={variantSearchOpts.data?.search.pageInfo.hasNextPage} - products={variantSearchOpts.data?.search.edges.map(edge => edge.node)} + products={mapEdgesToItems(variantSearchOpts?.data?.search)} selectedChannelId={order?.channel?.id} onClose={closeModal} onFetch={variantSearch} diff --git a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx index cc3565982..042bcd049 100644 --- a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx +++ b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx @@ -3,6 +3,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useUser from "@saleor/hooks/useUser"; import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog"; import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useWarehouseList } from "@saleor/warehouses/queries"; import React from "react"; import { useIntl } from "react-intl"; @@ -224,9 +225,7 @@ export const OrderNormalDetails: React.FC = ({ orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || [] } open={params.action === "cancel-fulfillment"} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} onConfirm={variables => orderFulfillmentCancel.mutate({ id: params.id, diff --git a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx index 0b4e7767e..8b1f58c0b 100644 --- a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx +++ b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx @@ -6,6 +6,7 @@ import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotC import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog"; import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider"; import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useWarehouseList } from "@saleor/warehouses/queries"; import React from "react"; import { useIntl } from "react-intl"; @@ -240,7 +241,7 @@ export const OrderUnconfirmedDetails: React.FC = ( loading={variantSearchOpts.loading} open={params.action === "add-order-line"} hasMore={variantSearchOpts.data?.search.pageInfo.hasNextPage} - products={variantSearchOpts.data?.search.edges.map(edge => edge.node)} + products={mapEdgesToItems(variantSearchOpts?.data?.search)} selectedChannelId={order?.channel?.id} onClose={closeModal} onFetch={variantSearch} @@ -297,9 +298,7 @@ export const OrderUnconfirmedDetails: React.FC = ( orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || [] } open={params.action === "cancel-fulfillment"} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} onConfirm={variables => orderFulfillmentCancel.mutate({ id: params.id, diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index a10d9cee5..c42118585 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -20,7 +20,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; -import { mapNodeToChoice } from "@saleor/utils/maps"; +import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -194,9 +194,7 @@ export const OrderDraftList: React.FC = ({ params }) => { tabs={tabs.map(tab => tab.name)} disabled={loading} settings={settings} - orders={maybe(() => - data.draftOrders.edges.map(edge => edge.node) - )} + orders={mapEdgesToItems(data?.draftOrders)} pageInfo={pageInfo} onAdd={() => openModal("create-order")} onNextPage={loadNextPage} diff --git a/src/orders/views/OrderFulfill/OrderFulfill.tsx b/src/orders/views/OrderFulfill/OrderFulfill.tsx index 87fcff8b9..134ea3570 100644 --- a/src/orders/views/OrderFulfill/OrderFulfill.tsx +++ b/src/orders/views/OrderFulfill/OrderFulfill.tsx @@ -5,6 +5,7 @@ import OrderFulfillPage from "@saleor/orders/components/OrderFulfillPage"; import { useOrderFulfill } from "@saleor/orders/mutations"; import { useOrderFulfillData } from "@saleor/orders/queries"; import { orderUrl } from "@saleor/orders/urls"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useWarehouseList } from "@saleor/warehouses/queries"; import React from "react"; import { useIntl } from "react-intl"; @@ -86,7 +87,7 @@ const OrderFulfill: React.FC = ({ orderId }) => { } order={data?.order} saveButtonBar="default" - warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)} + warehouses={mapEdgesToItems(warehouseData?.warehouses)} /> ); diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 51eef3cfa..4f7677b67 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -16,7 +16,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; -import { mapNodeToChoice } from "@saleor/utils/maps"; +import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { useIntl } from "react-intl"; @@ -157,7 +157,7 @@ export const OrderList: React.FC = ({ params }) => { disabled={loading} filterOpts={getFilterOpts(params, channelOpts)} limits={limitOpts.data?.shop.limits} - orders={maybe(() => data.orders.edges.map(edge => edge.node))} + orders={mapEdgesToItems(data?.orders)} pageInfo={pageInfo} sort={getSortParams(params)} onAdd={() => openModal("create-order")} diff --git a/src/pageTypes/views/PageTypeDetails.tsx b/src/pageTypes/views/PageTypeDetails.tsx index 7d2c0c32d..ce1518209 100644 --- a/src/pageTypes/views/PageTypeDetails.tsx +++ b/src/pageTypes/views/PageTypeDetails.tsx @@ -22,6 +22,7 @@ import { import { ReorderEvent } from "@saleor/types"; import getPageErrorMessage from "@saleor/utils/errors/page"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -255,8 +256,8 @@ export const PageTypeDetails: React.FC = ({ /> {!dataLoading && ( edge.node + attributes={mapEdgesToItems( + result?.data?.pageType?.availableAttributes )} confirmButtonState={assignAttributeOpts.status} errors={ diff --git a/src/pages/views/PageCreate.tsx b/src/pages/views/PageCreate.tsx index e63aa1fff..44045d814 100644 --- a/src/pages/views/PageCreate.tsx +++ b/src/pages/views/PageCreate.tsx @@ -13,6 +13,7 @@ import usePageSearch from "@saleor/searches/usePageSearch"; import usePageTypeSearch from "@saleor/searches/usePageTypeSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -164,9 +165,7 @@ export const PageCreate: React.FC = ({ params }) => { errors={pageCreateOpts.data?.pageCreate.errors || []} saveButtonBarState={pageCreateOpts.status} page={null} - pageTypes={searchPageTypesOpts.data?.search.edges.map( - edge => edge.node - )} + pageTypes={mapEdgesToItems(searchPageTypesOpts?.data?.search)} onBack={() => navigate(pageListUrl())} onRemove={() => undefined} onSubmit={handleSubmit} @@ -176,11 +175,9 @@ export const PageCreate: React.FC = ({ params }) => { params.action === "assign-attribute-value" && params.id } onAssignReferencesClick={handleAssignAttributeReferenceClick} - referencePages={searchPagesOpts.data?.search.edges.map( - edge => edge.node - )} - referenceProducts={searchProductsOpts.data?.search.edges.map( - edge => edge.node + referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)} + referenceProducts={mapEdgesToItems( + searchProductsOpts?.data?.search )} fetchReferencePages={searchPages} fetchMoreReferencePages={fetchMoreReferencePages} diff --git a/src/pages/views/PageDetails.tsx b/src/pages/views/PageDetails.tsx index 2ffcd27b3..93dcc58a7 100644 --- a/src/pages/views/PageDetails.tsx +++ b/src/pages/views/PageDetails.tsx @@ -24,6 +24,7 @@ import { commonMessages } from "@saleor/intl"; import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -206,12 +207,8 @@ export const PageDetails: React.FC = ({ id, params }) => { params.action === "assign-attribute-value" && params.id } onAssignReferencesClick={handleAssignAttributeReferenceClick} - referencePages={searchPagesOpts.data?.search.edges.map( - edge => edge.node - )} - referenceProducts={searchProductsOpts.data?.search.edges.map( - edge => edge.node - )} + referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)} + referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)} fetchReferencePages={searchPages} fetchMoreReferencePages={fetchMoreReferencePages} fetchReferenceProducts={searchProducts} diff --git a/src/pages/views/PageList/PageList.tsx b/src/pages/views/PageList/PageList.tsx index 13301d1c6..8d876ae4b 100644 --- a/src/pages/views/PageList/PageList.tsx +++ b/src/pages/views/PageList/PageList.tsx @@ -15,6 +15,7 @@ import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -114,7 +115,7 @@ export const PageList: React.FC = ({ params }) => { data.pages.edges.map(edge => edge.node))} + pages={mapEdgesToItems(data?.pages)} pageInfo={pageInfo} onAdd={() => navigate(pageCreateUrl())} onBack={() => navigate(configurationMenuUrl)} diff --git a/src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx b/src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx index 7bdd746d1..b841bddfe 100644 --- a/src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx +++ b/src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx @@ -13,9 +13,11 @@ import { permissionsDiff, usersDiff } from "@saleor/permissionGroups/utils"; +import { searchProducts } from "@saleor/searches/useProductSearch"; import useStaffMemberSearch from "@saleor/searches/useStaffMemberSearch"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React, { useState } from "react"; import { useIntl } from "react-intl"; @@ -185,7 +187,7 @@ export const PermissionGroupDetails: React.FC = ({ /> edge.node)} + staffMembers={mapEdgesToItems(searchResult?.data?.search)} onSearchChange={search} onFetchMore={loadMore} disabled={disabled} diff --git a/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx b/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx index b696f2557..84a196517 100644 --- a/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx +++ b/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx @@ -14,6 +14,7 @@ import { PermissionGroupDelete } from "@saleor/permissionGroups/types/Permission import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { useIntl } from "react-intl"; @@ -73,7 +74,7 @@ export const PermissionGroupList: React.FC = ({ PermissionGroupListUrlQueryParams >(navigate, permissionGroupListUrl, params); - const permissionGroups = data?.permissionGroups?.edges.map(edge => edge.node); + const permissionGroups = mapEdgesToItems(data?.permissionGroups); const [deleteError, setDeleteError] = React.useState< PermissionGroupErrorFragment >(); diff --git a/src/plugins/views/PluginList/PluginList.tsx b/src/plugins/views/PluginList/PluginList.tsx index faf0dec32..adb4f8fa2 100644 --- a/src/plugins/views/PluginList/PluginList.tsx +++ b/src/plugins/views/PluginList/PluginList.tsx @@ -13,6 +13,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; @@ -121,7 +122,7 @@ export const PluginsList: React.FC = ({ params }) => { filterOpts={getFilterOpts(params)} initialSearch={params.query || ""} settings={settings} - plugins={maybe(() => data.plugins.edges.map(edge => edge.node))} + plugins={mapEdgesToItems(data?.plugins)} pageInfo={pageInfo} sort={getSortParams(params)} tabs={getFilterTabs().map(tab => tab.name)} diff --git a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx index e308af9ea..044ed1a59 100644 --- a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx +++ b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx @@ -18,6 +18,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -174,9 +175,7 @@ export const ProductTypeList: React.FC = ({ params }) => { onTabSave={() => openModal("save-search")} tabs={tabs.map(tab => tab.name)} disabled={loading} - productTypes={maybe(() => - data.productTypes.edges.map(edge => edge.node) - )} + productTypes={mapEdgesToItems(data?.productTypes)} pageInfo={pageInfo} onAdd={() => navigate(productTypeAddUrl)} onBack={() => navigate(configurationMenuUrl)} diff --git a/src/productTypes/views/ProductTypeUpdate/index.tsx b/src/productTypes/views/ProductTypeUpdate/index.tsx index 951227a7f..58ed72776 100644 --- a/src/productTypes/views/ProductTypeUpdate/index.tsx +++ b/src/productTypes/views/ProductTypeUpdate/index.tsx @@ -15,6 +15,7 @@ import { useProductTypeUpdateMutation } from "@saleor/productTypes/mutations"; import { ReorderEvent } from "@saleor/types"; import { ProductAttributeType } from "@saleor/types/globalTypes"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -338,10 +339,8 @@ export const ProductTypeUpdate: React.FC = ({ {!dataLoading && Object.keys(ProductAttributeType).map(key => ( - result.data.productType.availableAttributes.edges.map( - edge => edge.node - ) + attributes={mapEdgesToItems( + result?.data?.productType?.availableAttributes )} confirmButtonState={assignAttribute.opts.status} errors={maybe( diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx index 4887ab9da..84320d0b2 100644 --- a/src/products/views/ProductCreate/ProductCreate.tsx +++ b/src/products/views/ProductCreate/ProductCreate.tsx @@ -34,6 +34,7 @@ import { useTaxTypeList } from "@saleor/taxes/queries"; import { getProductErrorMessage } from "@saleor/utils/errors"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -310,9 +311,7 @@ export const ProductCreateView: React.FC = ({ params }) => { fetchMoreCategories={fetchMoreCategories} fetchMoreCollections={fetchMoreCollections} fetchMoreProductTypes={fetchMoreProductTypes} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} taxTypes={taxTypes.data?.taxTypes || []} weightUnit={shop?.defaultWeightUnit} openChannelsModal={handleChannelsModalOpen} @@ -321,12 +320,8 @@ export const ProductCreateView: React.FC = ({ params }) => { params.action === "assign-attribute-value" && params.id } onAssignReferencesClick={handleAssignAttributeReferenceClick} - referencePages={searchPagesOpts.data?.search.edges.map( - edge => edge.node - )} - referenceProducts={searchProductsOpts.data?.search.edges.map( - edge => edge.node - )} + referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)} + referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)} fetchReferencePages={searchPages} fetchMoreReferencePages={fetchMoreReferencePages} fetchReferenceProducts={searchProducts} diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index bf83ac5a7..854af7e45 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -55,6 +55,7 @@ import useProductTypeSearch from "@saleor/searches/useProductTypeSearch"; import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortUrlVariables } from "@saleor/utils/sort"; import { useWarehouseList } from "@saleor/warehouses/queries"; import React, { useEffect } from "react"; @@ -353,18 +354,14 @@ export const ProductList: React.FC = ({ params }) => { sort: params.sort }} onSort={handleSort} - availableInGridAttributes={maybe( - () => attributes.data.availableInGrid.edges.map(edge => edge.node), - [] + availableInGridAttributes={mapEdgesToItems( + attributes?.data?.availableInGrid )} currencySymbol={channel?.currencyCode || ""} currentTab={currentTab} defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]} filterOpts={filterOpts} - gridAttributes={maybe( - () => attributes.data.grid.edges.map(edge => edge.node), - [] - )} + gridAttributes={mapEdgesToItems(attributes?.data?.grid)} totalGridAttributes={maybe( () => attributes.data.availableInGrid.totalCount, 0 @@ -378,7 +375,7 @@ export const ProductList: React.FC = ({ params }) => { onAdd={() => navigate(productAddUrl())} disabled={loading} limits={limitOpts.data?.shop.limits} - products={maybe(() => data.products.edges.map(edge => edge.node))} + products={mapEdgesToItems(data?.products)} onFetchMore={() => attributes.loadMore( (prev, next) => { @@ -484,9 +481,7 @@ export const ProductList: React.FC = ({ params }) => { filter: data?.products.totalCount }} selectedProducts={listElements.length} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} channels={availableChannels} onClose={closeModal} onSubmit={data => diff --git a/src/products/views/ProductList/filters.ts b/src/products/views/ProductList/filters.ts index 83d175cb5..9b5a69214 100644 --- a/src/products/views/ProductList/filters.ts +++ b/src/products/views/ProductList/filters.ts @@ -20,6 +20,7 @@ import { SearchProductTypes, SearchProductTypesVariables } from "@saleor/searches/types/SearchProductTypes"; +import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps"; import isArray from "lodash-es/isArray"; import { IFilterElement } from "../../../components/Filter"; @@ -80,13 +81,8 @@ export function getFilterOpts( })), categories: { active: !!params.categories, - choices: maybe( - () => - categories.search.result.data.search.edges.map(edge => ({ - label: edge.node.name, - value: edge.node.id - })), - [] + choices: mapNodeToChoice( + mapEdgesToItems(categories?.search?.result?.data?.search) ), displayValues: !!params.categories ? maybe( @@ -110,13 +106,8 @@ export function getFilterOpts( }, collections: { active: !!params.collections, - choices: maybe( - () => - collections.search.result.data.search.edges.map(edge => ({ - label: edge.node.name, - value: edge.node.id - })), - [] + choices: mapNodeToChoice( + mapEdgesToItems(collections?.search?.result?.data?.search) ), displayValues: !!params.collections ? maybe( @@ -151,13 +142,8 @@ export function getFilterOpts( }, productType: { active: !!params.productTypes, - choices: maybe( - () => - productTypes.search.result.data.search.edges.map(edge => ({ - label: edge.node.name, - value: edge.node.id - })), - [] + choices: mapNodeToChoice( + mapEdgesToItems(productTypes?.search?.result?.data?.search) ), displayValues: !!params.productTypes ? maybe( diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index 407b27406..d885c67e7 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -47,6 +47,7 @@ import useProductSearch from "@saleor/searches/useProductSearch"; import { getProductErrorMessage } from "@saleor/utils/errors"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -525,9 +526,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { header={product?.name} placeholderImage={placeholderImg} product={product} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} taxTypes={data?.taxTypes} variants={product?.variants} onBack={handleBack} @@ -570,12 +569,8 @@ export const ProductUpdate: React.FC = ({ id, params }) => { params.action === "assign-attribute-value" && params.id } onAssignReferencesClick={handleAssignAttributeReferenceClick} - referencePages={searchPagesOpts.data?.search.edges.map( - edge => edge.node - )} - referenceProducts={searchProductsOpts.data?.search.edges.map( - edge => edge.node - )} + referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)} + referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)} fetchReferencePages={searchPages} fetchMoreReferencePages={fetchMoreReferencePages} fetchReferenceProducts={searchProducts} diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index c91225cae..a655d5531 100644 --- a/src/products/views/ProductVariant.tsx +++ b/src/products/views/ProductVariant.tsx @@ -27,6 +27,7 @@ import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -326,9 +327,7 @@ export const ProductVariant: React.FC = ({ placeholderImage={placeholderImg} variant={variant} header={variant?.name || variant?.sku} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} onAdd={() => navigate(productVariantAddUrl(productId))} onBack={handleBack} onDelete={() => openModal("remove")} @@ -346,12 +345,8 @@ export const ProductVariant: React.FC = ({ params.action === "assign-attribute-value" && params.id } onAssignReferencesClick={handleAssignAttributeReferenceClick} - referencePages={searchPagesOpts.data?.search.edges.map( - edge => edge.node - )} - referenceProducts={searchProductsOpts.data?.search.edges.map( - edge => edge.node - )} + referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)} + referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)} fetchReferencePages={searchPages} fetchMoreReferencePages={fetchMoreReferencePages} fetchReferenceProducts={searchProducts} diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx index 08e2d50a7..969c678b6 100644 --- a/src/products/views/ProductVariantCreate.tsx +++ b/src/products/views/ProductVariantCreate.tsx @@ -14,6 +14,7 @@ import useShop from "@saleor/hooks/useShop"; import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -203,20 +204,14 @@ export const ProductVariant: React.FC = ({ onWarehouseConfigure={() => navigate(warehouseAddPath)} onVariantReorder={handleVariantReorder} saveButtonBarState={variantCreateResult.status} - warehouses={ - warehouses.data?.warehouses.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(warehouses?.data?.warehouses)} weightUnit={shop?.defaultWeightUnit} assignReferencesAttributeId={ params.action === "assign-attribute-value" && params.id } onAssignReferencesClick={handleAssignAttributeReferenceClick} - referencePages={searchPagesOpts.data?.search.edges.map( - edge => edge.node - )} - referenceProducts={searchProductsOpts.data?.search.edges.map( - edge => edge.node - )} + referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)} + referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)} fetchReferencePages={searchPages} fetchMoreReferencePages={fetchMoreReferencePages} fetchReferenceProducts={searchProducts} diff --git a/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx b/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx index 331600468..912d7ec3b 100644 --- a/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx +++ b/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx @@ -5,6 +5,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import { useProductVariantBulkCreateMutation } from "@saleor/products/mutations"; import { useCreateMultipleVariantsData } from "@saleor/products/queries"; import { productUrl } from "@saleor/products/urls"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { useIntl } from "react-intl"; @@ -73,7 +74,7 @@ const ProductVariantCreator: React.FC = ({ variables: { id, inputs } }) } - warehouses={data?.warehouses.edges.map(edge => edge.node) || []} + warehouses={mapEdgesToItems(data?.warehouses)} /> ); diff --git a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx index c21d4f9d6..d37445ea0 100644 --- a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx +++ b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx @@ -1,5 +1,6 @@ import { shippingZone } from "@saleor/shipping/fixtures"; import Decorator from "@saleor/storybook//Decorator"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -7,8 +8,8 @@ import ShippingMethodProducts, { ShippingMethodProductsProps } from "./ShippingMethodProducts"; -const products = shippingZone.shippingMethods[0].excludedProducts.edges.map( - edge => edge.node +const products = mapEdgesToItems( + shippingZone.shippingMethods[0].excludedProducts ); const props: ShippingMethodProductsProps = { diff --git a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx index 20150ea75..7e81b12ce 100644 --- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx +++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx @@ -30,7 +30,7 @@ import { PostalCodeRuleInclusionTypeEnum, ShippingMethodTypeEnum } from "@saleor/types/globalTypes"; -import { mapMetadataItemToInput } from "@saleor/utils/maps"; +import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -192,9 +192,7 @@ export const ShippingZoneRatesPage: React.FC = ({ /> edge.node - )} + products={mapEdgesToItems(rate?.excludedProducts)} onProductAssign={onProductAssign} onProductUnassign={onProductUnassign} disabled={disabled} diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx index 0fe06ce78..4b4dde29d 100644 --- a/src/shipping/views/ShippingZoneDetails/index.tsx +++ b/src/shipping/views/ShippingZoneDetails/index.tsx @@ -22,6 +22,7 @@ import { } from "@saleor/shipping/mutations"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -204,9 +205,7 @@ const ShippingZoneDetails: React.FC = ({ } saveButtonBarState={updateShippingZoneOpts.status} shippingZone={data?.shippingZone} - warehouses={ - searchWarehousesOpts.data?.search.edges.map(edge => edge.node) || [] - } + warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search)} hasMore={searchWarehousesOpts.data?.search.pageInfo.hasNextPage} loading={searchWarehousesOpts.loading} onFetchMore={loadMore} diff --git a/src/shipping/views/ShippingZonesList.tsx b/src/shipping/views/ShippingZonesList.tsx index 30584212f..74a822191 100644 --- a/src/shipping/views/ShippingZonesList.tsx +++ b/src/shipping/views/ShippingZonesList.tsx @@ -16,6 +16,7 @@ import { commonMessages } from "@saleor/intl"; import { getStringOrPlaceholder, maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -125,9 +126,7 @@ export const ShippingZonesList: React.FC = ({ deleteShippingZoneOpts.loading || updateDefaultWeightUnitOpts.loading } - shippingZones={maybe(() => - data.shippingZones.edges.map(edge => edge.node) - )} + shippingZones={mapEdgesToItems(data?.shippingZones)} pageInfo={pageInfo} onAdd={() => navigate(shippingZoneAddUrl)} onBack={() => navigate(configurationMenuUrl)} diff --git a/src/staff/views/StaffDetails.tsx b/src/staff/views/StaffDetails.tsx index 589149c2f..5f89100a3 100644 --- a/src/staff/views/StaffDetails.tsx +++ b/src/staff/views/StaffDetails.tsx @@ -9,6 +9,7 @@ import useUser from "@saleor/hooks/useUser"; import { commonMessages } from "@saleor/intl"; import { getStringOrPlaceholder, maybe } from "@saleor/misc"; import usePermissionGroupSearch from "@saleor/searches/usePermissionGroupSearch"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -207,8 +208,8 @@ export const StaffDetails: React.FC = ({ id, params }) => { }) ) } - availablePermissionGroups={searchPermissionGroupsOpts.data?.search.edges.map( - edge => edge.node + availablePermissionGroups={mapEdgesToItems( + searchPermissionGroupsOpts?.data?.search )} staffMember={staffMember} saveButtonBarState={updateResult.status} diff --git a/src/staff/views/StaffList/StaffList.tsx b/src/staff/views/StaffList/StaffList.tsx index f6d7e8845..ea2f24ba5 100644 --- a/src/staff/views/StaffList/StaffList.tsx +++ b/src/staff/views/StaffList/StaffList.tsx @@ -19,6 +19,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import React from "react"; import { useIntl } from "react-intl"; @@ -187,7 +188,7 @@ export const StaffList: React.FC = ({ params }) => { settings={settings} pageInfo={pageInfo} sort={getSortParams(params)} - staffMembers={staffQueryData?.staffUsers.edges.map(edge => edge.node)} + staffMembers={mapEdgesToItems(staffQueryData?.staffUsers)} onAdd={() => openModal("add")} onBack={() => navigate(configurationMenuUrl)} onNextPage={loadNextPage} @@ -197,8 +198,8 @@ export const StaffList: React.FC = ({ params }) => { onSort={handleSort} /> edge.node + availablePermissionGroups={mapEdgesToItems( + searchPermissionGroupsOpts?.data?.search )} confirmButtonState={addStaffMemberData.status} initialSearch="" diff --git a/src/storybook/stories/categories/CategoryUpdatePage.tsx b/src/storybook/stories/categories/CategoryUpdatePage.tsx index b3a1b8eca..6e741da7d 100644 --- a/src/storybook/stories/categories/CategoryUpdatePage.tsx +++ b/src/storybook/stories/categories/CategoryUpdatePage.tsx @@ -1,6 +1,7 @@ import placeholderImage from "@assets/images/placeholder255x255.png"; import { Omit } from "@material-ui/core"; import { ProductErrorCode } from "@saleor/types/globalTypes"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -45,10 +46,10 @@ const updateProps: Omit = { hasPreviousPage: true }, productListToolbar: null, - products: category.products.edges.map(edge => edge.node), + products: mapEdgesToItems(category.products), saveButtonBarState: "default", selectedChannelId: "123", - subcategories: category.children.edges.map(edge => edge.node), + subcategories: mapEdgesToItems(category.children), subcategoryListToolbar: null, ...listActionsProps }; diff --git a/src/storybook/stories/home/HomePage.tsx b/src/storybook/stories/home/HomePage.tsx index b15006849..54f3fe485 100644 --- a/src/storybook/stories/home/HomePage.tsx +++ b/src/storybook/stories/home/HomePage.tsx @@ -2,6 +2,7 @@ import placeholderImage from "@assets/images/placeholder60x60.png"; import { Omit } from "@material-ui/core"; import { adminUserPermissions } from "@saleor/fixtures"; import { PermissionEnum } from "@saleor/types/globalTypes"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -12,7 +13,7 @@ import Decorator from "../../Decorator"; const shop = shopFixture(placeholderImage); const homePageProps: Omit = { - activities: shop.activities.edges.map(edge => edge.node), + activities: mapEdgesToItems(shop.activities), noChannel: false, onCreateNewChannelClick: () => undefined, onOrdersToCaptureClick: () => undefined, @@ -24,7 +25,7 @@ const homePageProps: Omit = { ordersToFulfill: shop.ordersToFulfill.totalCount, productsOutOfStock: shop.productsOutOfStock.totalCount, sales: shop.salesToday.gross, - topProducts: shop.productTopToday.edges.map(edge => edge.node), + topProducts: mapEdgesToItems(shop.productTopToday), userName: "admin@example.com", userPermissions: adminUserPermissions }; diff --git a/src/utils/maps.ts b/src/utils/maps.ts index 4bfe0ece1..548051ad9 100644 --- a/src/utils/maps.ts +++ b/src/utils/maps.ts @@ -6,6 +6,18 @@ import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPage import { Node } from "@saleor/types"; import { MetadataInput } from "@saleor/types/globalTypes"; +interface EdgesType { + edges?: Array<{ node: T }>; +} + +export function mapEdgesToItems(data?: EdgesType): T[] { + if (!data || !data?.edges) { + return []; + } + + return data.edges.map(({ node }) => node); +} + export function mapCountriesToChoices( countries: ShopInfo_shop_countries[] ): Array { diff --git a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx index 9b12d67a5..d4ae8ff51 100644 --- a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx +++ b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx @@ -17,7 +17,7 @@ import { sectionNames } from "@saleor/intl"; import { findValueInEnum, maybe } from "@saleor/misc"; import { CountryCode } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -import { mapCountriesToChoices } from "@saleor/utils/maps"; +import { mapCountriesToChoices, mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -116,7 +116,7 @@ const WarehouseDetailsPage: React.FC = ({
edge.node)} + zones={mapEdgesToItems(warehouse?.shippingZones)} onShippingZoneClick={onShippingZoneClick} />
diff --git a/src/warehouses/views/WarehouseList/WarehouseList.tsx b/src/warehouses/views/WarehouseList/WarehouseList.tsx index 37fa32837..2379d2663 100644 --- a/src/warehouses/views/WarehouseList/WarehouseList.tsx +++ b/src/warehouses/views/WarehouseList/WarehouseList.tsx @@ -17,6 +17,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import { mapEdgesToItems } from "@saleor/utils/maps"; import { getSortParams } from "@saleor/utils/sort"; import WarehouseDeleteDialog from "@saleor/warehouses/components/WarehouseDeleteDialog"; import WarehouseListPage from "@saleor/warehouses/components/WarehouseListPage"; @@ -150,7 +151,7 @@ const WarehouseList: React.FC = ({ params }) => { onTabSave={() => openModal("save-search")} limits={limitOpts.data?.shop.limits} tabs={tabs.map(tab => tab.name)} - warehouses={maybe(() => data.warehouses.edges.map(edge => edge.node))} + warehouses={mapEdgesToItems(data?.warehouses)} settings={settings} disabled={loading} pageInfo={pageInfo}