djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix skeletons (#1161)

Browse source 
* Fix skeletons

* Fix warehouse list displaying

* Fix product filters

* Fix crashing views

* Fix crashes
This commit is contained in:
Dominik Żegleń 2021-07-05 14:01:58 +02:00 committed by GitHub
parent f5c5a8770c
commit b22831ba25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 677 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/collections/views/CollectionDetails.tsx
View file

@ -361,7 +361,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
}
})
}
products={mapEdgesToItems(result?.data?.search).filter(
products={mapEdgesToItems(result?.data?.search)?.filter(
suggestedProduct => suggestedProduct.id
)}
/>

12
src/components/Navigator/modes/catalog.ts
View file

@ -19,8 +19,8 @@ export function searchInCatalog(
navigate: UseNavigatorResult,
catalog: SearchCatalog
): QuickSearchAction[] {
const categories: QuickSearchActionInput[] = mapEdgesToItems(
catalog?.categories
const categories: QuickSearchActionInput[] = (
mapEdgesToItems(catalog?.categories) || []
)
.map<QuickSearchActionInput>(category => ({
caption: intl.formatMessage(messages.category),
@ -35,8 +35,8 @@ export function searchInCatalog(
}))
.sort(sortScores);
const collections: QuickSearchActionInput[] = mapEdgesToItems(
catalog?.collections
const collections: QuickSearchActionInput[] = (
mapEdgesToItems(catalog?.collections) || []
)
.map<QuickSearchActionInput>(collection => ({
caption: intl.formatMessage(messages.collection),
@ -51,7 +51,9 @@ export function searchInCatalog(
}))
.sort(sortScores);
const products: QuickSearchActionInput[] = mapEdgesToItems(catalog?.products)
const products: QuickSearchActionInput[] = (
mapEdgesToItems(catalog?.products) || []
)
.map<QuickSearchActionInput>(product => ({
caption: intl.formatMessage(messages.product),
extraInfo: product.category.name,

2
src/components/Navigator/useQuickSearch.ts
View file

@ -108,7 +108,7 @@ function useQuickSearch(
intl,
{
catalog,
customers: mapEdgesToItems(customers?.data?.search),
customers: mapEdgesToItems(customers?.data?.search) || [],
order: maybe(() => orderData.order)
},
{

10
src/discounts/views/SaleDetails/SaleDetails.tsx
View file

@ -395,12 +395,14 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
}
products={mapEdgesToItems(
searchProductsOpts?.data?.search
).filter(suggestedProduct => suggestedProduct.id)}
)?.filter(suggestedProduct => suggestedProduct.id)}
/>
<AssignCategoriesDialog
categories={mapEdgesToItems(
searchCategoriesOpts?.data?.search
).filter(suggestedCategory => suggestedCategory.id)}
)?.filter(
suggestedCategory => suggestedCategory.id
)}
confirmButtonState={saleCataloguesAddOpts.status}
hasMore={
searchCategoriesOpts.data?.search.pageInfo
@ -426,7 +428,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
<AssignCollectionDialog
collections={mapEdgesToItems(
searchCollectionsOpts?.data?.search
).filter(suggestedCategory => suggestedCategory.id)}
)?.filter(
suggestedCategory => suggestedCategory.id
)}
confirmButtonState={saleCataloguesAddOpts.status}
hasMore={
searchCollectionsOpts.data?.search.pageInfo

10
src/discounts/views/VoucherDetails/VoucherDetails.tsx
View file

@ -426,7 +426,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
<AssignCategoriesDialog
categories={mapEdgesToItems(
searchCategoriesOpts?.data?.search
).filter(suggestedCategory => suggestedCategory.id)}
)?.filter(
suggestedCategory => suggestedCategory.id
)}
confirmButtonState={voucherCataloguesAddOpts.status}
hasMore={
searchCategoriesOpts.data?.search.pageInfo
@ -452,7 +454,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
<AssignCollectionDialog
collections={mapEdgesToItems(
searchCollectionsOpts?.data?.search
).filter(suggestedCategory => suggestedCategory.id)}
)?.filter(
suggestedCategory => suggestedCategory.id
)}
confirmButtonState={voucherCataloguesAddOpts.status}
hasMore={
searchCollectionsOpts.data?.search.pageInfo
@ -524,7 +528,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
}
products={mapEdgesToItems(
searchProductsOpts?.data?.search
).filter(suggestedProduct => suggestedProduct.id)}
)?.filter(suggestedProduct => suggestedProduct.id)}
/>
<ActionDialog
open={

2
src/home/views/index.tsx
View file

@ -27,7 +27,7 @@ const HomeSection = () => {
return (
<HomePage
activities={mapEdgesToItems(data?.activities)}
activities={mapEdgesToItems(data?.activities)?.reverse()}
orders={data?.ordersToday?.totalCount}
sales={data?.salesToday?.gross}
topProducts={mapEdgesToItems(data?.productTopToday)}

2
src/hooks/makeTopLevelSearch/utils.ts
View file

@ -15,4 +15,4 @@ export const getSearchFetchMoreProps = (
});
export const getParsedSearchData = ({ data }: ResultSearchData) =>
mapEdgesToItems(data?.search);
mapEdgesToItems(data?.search) || [];

12
src/navigation/views/MenuDetails/index.tsx
View file

@ -113,15 +113,13 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
pageSearch.search(query);
};
const categories = mapEdgesToItems(
categorySearch?.result?.data?.search
);
const categories =
mapEdgesToItems(categorySearch?.result?.data?.search) || [];
const collections = mapEdgesToItems(
collectionSearch?.result?.data?.search
);
const collections =
mapEdgesToItems(collectionSearch?.result?.data?.search) || [];
const pages = mapEdgesToItems(pageSearch?.result?.data?.search);
const pages = mapEdgesToItems(pageSearch?.result?.data?.search) || [];
return (
<MenuDeleteMutation

2
src/navigation/views/MenuList/MenuList.tsx
View file

@ -210,7 +210,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
id="menuListDeleteMenuContent"
values={{
menuName:
mapEdgesToItems(data?.menus).find(
mapEdgesToItems(data?.menus)?.find(
getById(params.id)
)?.name || "..."
}}

21
src/orders/components/OrderReturnPage/utils.tsx
View file

@ -3,6 +3,7 @@ import {
OrderDetails_order,
OrderDetails_order_fulfillments
} from "@saleor/orders/types/OrderDetails";
import { Node } from "@saleor/types";
import { FulfillmentStatus } from "@saleor/types/globalTypes";
import { LineItemOptions } from "./form";
@ -31,7 +32,7 @@ export const getAllOrderFulfilledLines = (order?: OrderDetails_order) =>
);
export function getLineItem<T>(
{ id }: { id: string },
{ id }: Node,
{
initialValue,
isFulfillment = false,
@ -51,7 +52,7 @@ export function getParsedLineData<T>({
isFulfillment = false,
isRefunded = false
}: LineItemOptions<T>) {
return (item: { id: string }) =>
return (item: Node) =>
getLineItem(item, { initialValue, isFulfillment, isRefunded });
}
@ -89,16 +90,16 @@ export const getParsedFulfiledLines = (
quantity
}));
export const getById = (idToCompare: string) => (obj: { id: string }) =>
export const getById = (idToCompare: string) => (obj: Node) =>
obj.id === idToCompare;
export const getByUnmatchingId = (idToCompare: string) => (obj: {
id: string;
}) => obj.id !== idToCompare;
const isIncludedInIds = function<T extends { id: string }>(
const isIncludedInIds = function<T extends Node>(
arrayToCompare: string[] | T[],
obj: { id: string }
obj: Node
) {
const isSimpleIdsArray = (arrayToCompare as string[]).every(
value => typeof value === "string"
@ -111,14 +112,12 @@ const isIncludedInIds = function<T extends { id: string }>(
return idsToCompare.includes(obj.id);
};
export function getByIds<T extends { id: string }>(
arrayToCompare: string[] | T[]
) {
return (obj: { id: string }) => isIncludedInIds(arrayToCompare, obj);
export function getByIds<T extends Node>(arrayToCompare: string[] | T[]) {
return (obj: Node) => isIncludedInIds(arrayToCompare, obj);
}
export function getByUnmatchingIds<T extends { id: string }>(
export function getByUnmatchingIds<T extends Node>(
arrayToCompare: string[] | T[]
) {
return (obj: { id: string }) => !isIncludedInIds(arrayToCompare, obj);
return (obj: Node) => !isIncludedInIds(arrayToCompare, obj);
}

2
src/orders/views/OrderDetails/OrderNormalDetails/index.tsx
View file

@ -225,7 +225,7 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || []
}
open={params.action === "cancel-fulfillment"}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,

2
src/pageTypes/views/PageTypeDetails.tsx
View file

@ -253,7 +253,7 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
}}
/>
{!dataLoading && (
{pageType && (
<>
<TypeDeleteWarningDialog
{...pageTypeDeleteData}

20
src/pageTypes/views/PageTypeList/PageTypeList.tsx
View file

@ -206,15 +206,17 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
</IconButton>
}
/>
<TypeDeleteWarningDialog
{...pageTypeDeleteData}
typesData={pageTypesData}
typesToDelete={selectedPageTypes}
onClose={closeModal}
onDelete={hanldePageTypeBulkDelete}
deleteButtonState={pageTypeBulkDeleteOpts.status}
showViewAssignedItemsButton={false}
/>
{pageTypesData && (
<TypeDeleteWarningDialog
{...pageTypeDeleteData}
typesData={pageTypesData}
typesToDelete={selectedPageTypes}
onClose={closeModal}
onDelete={hanldePageTypeBulkDelete}
deleteButtonState={pageTypeBulkDeleteOpts.status}
showViewAssignedItemsButton={false}
/>
)}
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"

18
src/productTypes/views/ProductTypeList/ProductTypeList.tsx
View file

@ -213,14 +213,16 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
</IconButton>
}
/>
<TypeDeleteWarningDialog
{...productTypeDeleteData}
typesData={productTypesData}
typesToDelete={selectedProductTypes}
onClose={closeModal}
onDelete={onProductTypeBulkDelete}
deleteButtonState={productTypeBulkDeleteOpts.status}
/>
{productTypesData && (
<TypeDeleteWarningDialog
{...productTypeDeleteData}
typesData={productTypesData}
typesToDelete={selectedProductTypes}
onClose={closeModal}
onDelete={onProductTypeBulkDelete}
deleteButtonState={productTypeBulkDeleteOpts.status}
/>
)}
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"

18
src/productTypes/views/ProductTypeUpdate/index.tsx
View file

@ -390,14 +390,16 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
key={key}
/>
))}
<TypeDeleteWarningDialog
{...productTypeDeleteData}
typesData={[productType]}
typesToDelete={[id]}
onClose={closeModal}
onDelete={handleProductTypeDelete}
deleteButtonState={deleteProductType.opts.status}
/>
{productType && (
<TypeDeleteWarningDialog
{...productTypeDeleteData}
typesData={[productType]}
typesToDelete={[id]}
onClose={closeModal}
onDelete={handleProductTypeDelete}
deleteButtonState={deleteProductType.opts.status}
/>
)}
</>
)}

12
src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
View file

@ -8,9 +8,9 @@ import { isSelected } from "@saleor/utils/lists";
import React from "react";
import { ProductVariantCreateFormData } from "./form";
import ProductVariantCreatePriceAndSku from "./ProductVariantCreatorPriceAndSku";
import ProductVariantCreateSummary from "./ProductVariantCreatorSummary";
import ProductVariantCreateValues from "./ProductVariantCreatorValues";
import ProductVariantCreatorPriceAndSku from "./ProductVariantCreatorPriceAndSku";
import ProductVariantCreatorSummary from "./ProductVariantCreatorSummary";
import ProductVariantCreatorValues from "./ProductVariantCreatorValues";
import {
ProductVariantCreateReducerAction,
ProductVariantCreateReducerActionType
@ -55,7 +55,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
return (
<>
{step === ProductVariantCreatorStep.values && (
<ProductVariantCreateValues
<ProductVariantCreatorValues
attributes={selectedAttributes}
attributeValues={attributeValues}
fetchAttributeValues={fetchAttributeValues}
@ -74,7 +74,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
/>
)}
{step === ProductVariantCreatorStep.prices && (
<ProductVariantCreatePriceAndSku
<ProductVariantCreatorPriceAndSku
attributes={selectedAttributes}
data={data}
channelListings={channelListings}
@ -154,7 +154,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
/>
)}
{step === ProductVariantCreatorStep.summary && (
<ProductVariantCreateSummary
<ProductVariantCreatorSummary
attributes={selectedAttributes}
channelListings={channelListings}
data={data}

13
src/products/views/ProductCreate/ProductCreate.tsx
View file

@ -295,11 +295,12 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
<ProductCreatePage
allChannelsCount={allChannels?.length}
currentChannels={currentChannels}
categories={mapEdgesToItems(searchCategoryOpts?.data?.search)}
collections={mapEdgesToItems(searchCollectionOpts?.data?.search)}
attributeValues={mapEdgesToItems(
searchAttributeValuesOpts?.data?.attribute.choices
)}
categories={mapEdgesToItems(searchCategoryOpts?.data?.search) || []}
collections={mapEdgesToItems(searchCollectionOpts?.data?.search) || []}
attributeValues={
mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) ||
[]
}
loading={loading}
channelsErrors={
updateVariantChannelsOpts.data?.productVariantChannelListingUpdate
@ -325,7 +326,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
fetchMoreCategories={fetchMoreCategories}
fetchMoreCollections={fetchMoreCollections}
fetchMoreProductTypes={fetchMoreProductTypes}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
taxTypes={taxTypes.data?.taxTypes || []}
weightUnit={shop?.defaultWeightUnit}
openChannelsModal={handleChannelsModalOpen}

23
src/products/views/ProductList/ProductList.tsx
View file

@ -347,18 +347,18 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
const filterOpts = getFilterOpts(
params,
mapEdgesToItems(initialFilterAttributes?.attributes),
mapEdgesToItems(initialFilterAttributes?.attributes) || [],
searchAttributeValues,
{
initial: mapEdgesToItems(initialFilterCategories?.categories),
initial: mapEdgesToItems(initialFilterCategories?.categories) || [],
search: searchCategories
},
{
initial: mapEdgesToItems(initialFilterCollections?.collections),
initial: mapEdgesToItems(initialFilterCollections?.collections) || [],
search: searchCollections
},
{
initial: mapEdgesToItems(initialFilterProductTypes?.productTypes),
initial: mapEdgesToItems(initialFilterProductTypes?.productTypes) || [],
search: searchProductTypes
},
channelOpts
@ -379,14 +379,15 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
sort: params.sort
}}
onSort={handleSort}
availableInGridAttributes={mapEdgesToItems(
availableInGridAttributes?.data?.availableInGrid
)}
availableInGridAttributes={
mapEdgesToItems(availableInGridAttributes?.data?.availableInGrid) ||
[]
}
currencySymbol={selectedChannel?.currencyCode || ""}
currentTab={currentTab}
defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]}
filterOpts={filterOpts}
gridAttributes={mapEdgesToItems(gridAttributes?.data?.grid)}
gridAttributes={mapEdgesToItems(gridAttributes?.data?.grid) || []}
totalGridAttributes={maybe(
() => availableInGridAttributes.data.availableInGrid.totalCount,
0
@ -491,7 +492,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
</DialogContentText>
</ActionDialog>
<ProductExportDialog
attributes={mapEdgesToItems(searchAttributes?.result?.data?.search)}
attributes={
mapEdgesToItems(searchAttributes?.result?.data?.search) || []
}
hasMore={searchAttributes.result.data?.search.pageInfo.hasNextPage}
loading={
searchAttributes.result.loading ||
@ -508,7 +511,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
filter: data?.products.totalCount
}}
selectedProducts={listElements.length}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
channels={availableChannels}
onClose={closeModal}
onSubmit={data =>

12
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -439,13 +439,13 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
createProductMediaOpts.data?.productMediaCreate.errors
);
const categories = mapEdgesToItems(searchCategoriesOpts?.data?.search);
const categories = mapEdgesToItems(searchCategoriesOpts?.data?.search) || [];
const collections = mapEdgesToItems(searchCollectionsOpts?.data?.search);
const collections =
mapEdgesToItems(searchCollectionsOpts?.data?.search) || [];
const attributeValues = mapEdgesToItems(
searchAttributeValuesOpts?.data?.attribute.choices
);
const attributeValues =
mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
const errors = [
...(updateProductOpts.data?.productUpdate.errors || []),
@ -550,7 +550,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
header={product?.name}
placeholderImage={placeholderImg}
product={product}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
taxTypes={data?.taxTypes}
variants={product?.variants}
onBack={handleBack}

7
src/products/views/ProductVariant.tsx
View file

@ -323,9 +323,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
onFetchMore: loadMoreAttributeValues
};
const attributeValues = mapEdgesToItems(
searchAttributeValuesOpts?.data?.attribute.choices
);
const attributeValues =
mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
return (
<>
@ -346,7 +345,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
placeholderImage={placeholderImg}
variant={variant}
header={variant?.name || variant?.sku}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
onAdd={() => navigate(productVariantAddUrl(productId))}
onBack={handleBack}
onDelete={() => openModal("remove")}

7
src/products/views/ProductVariantCreate.tsx
View file

@ -191,9 +191,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
onFetchMore: loadMoreAttributeValues
};
const attributeValues = mapEdgesToItems(
searchAttributeValuesOpts?.data?.attribute.choices
);
const attributeValues =
mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
const disableForm =
productLoading ||
@ -225,7 +224,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
onWarehouseConfigure={() => navigate(warehouseAddPath)}
onVariantReorder={handleVariantReorder}
saveButtonBarState={variantCreateResult.status}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
weightUnit={shop?.defaultWeightUnit}
assignReferencesAttributeId={
params.action === "assign-attribute-value" && params.id

7
src/products/views/ProductVariantCreator/ProductVariantCreator.tsx
View file

@ -66,9 +66,8 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
onFetchMore: loadMoreAttributeValues
};
const attributeValues = mapEdgesToItems(
searchAttributeValuesOpts?.data?.attribute.choices
);
const attributeValues =
mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
return (
<>
@ -99,7 +98,7 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
variables: { id, inputs }
})
}
warehouses={mapEdgesToItems(data?.warehouses)}
warehouses={mapEdgesToItems(data?.warehouses) || []}
/>
</>
);

2
src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
View file

@ -342,7 +342,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
loading={productsSearchOpts.loading}
open={params.action === "assign-product"}
hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
products={mapEdgesToItems(productsSearchOpts?.data?.search).filter(
products={mapEdgesToItems(productsSearchOpts?.data?.search)?.filter(
suggestedProduct => suggestedProduct.id
)}
onClose={closeModal}

2
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -202,7 +202,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
}
saveButtonBarState={updateShippingZoneOpts.status}
shippingZone={data?.shippingZone}
warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search)}
warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search) || []}
hasMore={searchWarehousesOpts.data?.search?.pageInfo?.hasNextPage}
loading={searchWarehousesOpts.loading}
onFetchMore={loadMore}

7
src/shipping/views/ShippingZonesList.tsx
View file

@ -184,8 +184,11 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
values={{
shippingZoneName: (
<strong>
{mapEdgesToItems(data?.shippingZones).find(getById(params.id))
?.name || "..."}
{getStringOrPlaceholder(
mapEdgesToItems(data?.shippingZones)?.find(
getById(params.id)
)?.name
)}
</strong>
)
}}

2
src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
View file

@ -343,7 +343,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
loading={productsSearchOpts.loading}
open={params.action === "assign-product"}
hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
products={mapEdgesToItems(productsSearchOpts?.data?.search).filter(
products={mapEdgesToItems(productsSearchOpts?.data?.search)?.filter(
suggestedProduct => suggestedProduct.id
)}
onClose={closeModal}

570
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -40231,10 +40231,85 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
class="MuiTableRow-root-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="2"
class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
>
No values found
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
fill="url(#paint0_linear)"
fill-rule="evenodd"
style="transform:translate(7px, 4px)"
/>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
id="paint0_linear"
x1="0"
x2="16.0896"
y1="0"
y2="10.4478"
>
<stop
stop-color="#06847B"
/>
<stop
offset="1"
stop-color="#3EE7CD"
/>
</linearGradient>
</defs>
</svg>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
@ -42166,10 +42241,84 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
class="MuiTableRow-root-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="2"
class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
>
No values found
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
fill="url(#paint0_linear)"
fill-rule="evenodd"
style="transform:translate(7px, 4px)"
/>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
id="paint0_linear"
x1="0"
x2="16.0896"
y1="0"
y2="10.4478"
>
<stop
stop-color="#06847B"
/>
<stop
offset="1"
stop-color="#3EE7CD"
/>
</linearGradient>
</defs>
</svg>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
@ -62117,6 +62266,42 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
scope="col"
>
<span
aria-disabled="true"
class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
tabindex="-1"
>
<span
class="MuiIconButton-label-id"
>
<input
class="PrivateSwitchBase-input-id"
data-indeterminate="false"
disabled=""
type="checkbox"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<rect
fill="none"
height="14"
stroke="currentColor"
width="14"
x="5"
y="5"
/>
</svg>
</span>
</span>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
scope="col"
@ -62216,16 +62401,119 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id CollectionProducts-tableRow-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
/>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="5"
class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
>
No products found
<span
aria-disabled="true"
class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
tabindex="-1"
>
<span
class="MuiIconButton-label-id"
>
<input
class="PrivateSwitchBase-input-id"
data-indeterminate="false"
disabled=""
type="checkbox"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<rect
fill="none"
height="14"
stroke="currentColor"
width="14"
x="5"
y="5"
/>
</svg>
</span>
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
>
<div
class="Avatar-content-id"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
/>
</svg>
</div>
<div
class="Avatar-children-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
@ -76771,9 +77059,43 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="6"
>
No orders found
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
</tr>
</tbody>
@ -90317,6 +90639,42 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
scope="col"
>
<span
aria-disabled="true"
class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
tabindex="-1"
>
<span
class="MuiIconButton-label-id"
>
<input
class="PrivateSwitchBase-input-id"
data-indeterminate="false"
disabled=""
type="checkbox"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<rect
fill="none"
height="14"
stroke="currentColor"
width="14"
x="5"
y="5"
/>
</svg>
</span>
</span>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
scope="col"
@ -90407,13 +90765,87 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id DiscountCategories-tableRow-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="4"
class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
>
No categories found
<span
aria-disabled="true"
class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
tabindex="-1"
>
<span
class="MuiIconButton-label-id"
>
<input
class="PrivateSwitchBase-input-id"
data-indeterminate="false"
disabled=""
type="checkbox"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<rect
fill="none"
height="14"
stroke="currentColor"
width="14"
x="5"
y="5"
/>
</svg>
</span>
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
@ -230940,10 +231372,95 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
class="MuiTableRow-root-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="5"
class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
>
No Products
<span
aria-disabled="true"
class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
tabindex="-1"
>
<span
class="MuiIconButton-label-id"
>
<input
class="PrivateSwitchBase-input-id"
data-indeterminate="false"
disabled=""
type="checkbox"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<rect
fill="none"
height="14"
stroke="currentColor"
width="14"
x="5"
y="5"
/>
</svg>
</span>
</span>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
>
<div
class="Avatar-content-id"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
/>
</svg>
</div>
<div
class="Avatar-children-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
‌
</span>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
@ -249109,11 +249626,12 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
<div
class="MuiCardContent-root-id"
>
<div
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
>
This warehouse has no shipping zones assigned.
</div>
‌
</span>
</div>
</div>
</div>

17
src/utils/maps.ts
View file

@ -8,16 +8,17 @@ import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPage
import { Node, SlugNode } from "@saleor/types";
import { MetadataInput } from "@saleor/types/globalTypes";
interface EdgesType<T> {
edges?: Array<{ node: T }>;
interface Edge<T> {
node: T;
}
interface Connection<T> {
edges: Array<Edge<T>> | undefined;
}
export function mapEdgesToItems<T>(data?: EdgesType<T>): T[] {
if (!data || !data?.edges) {
return [];
}
return data.edges.map(({ node }) => node);
export function mapEdgesToItems<T>(
data: Connection<T> | undefined
): T[] | undefined {
return data?.edges?.map(({ node }) => node);
}
export function mapCountriesToChoices(countries: ShopInfo_shop_countries[]) {

2
src/warehouses/views/WarehouseList/WarehouseList.tsx
View file

@ -167,7 +167,7 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
/>
<WarehouseDeleteDialog
confirmButtonState={deleteTransitionState}
name={mapEdgesToItems(data?.warehouses).find(getById(params.id))?.name}
name={mapEdgesToItems(data?.warehouses)?.find(getById(params.id))?.name}
open={params.action === "delete"}
onClose={closeModal}
onConfirm={() =>