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

Use reducer action enum

Browse source
This commit is contained in:
dominik-zeglen 2020-04-07 16:14:17 +02:00
parent bbdc7f8991
commit 785c34375e
4 changed files with 85 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,10 @@ import { ProductVariantCreateFormData } from "./form";
import ProductVariantCreatePrices from "./ProductVariantCreatorPrices"; import ProductVariantCreatePrices from "./ProductVariantCreatorPrices";
import ProductVariantCreateSummary from "./ProductVariantCreatorSummary"; import ProductVariantCreateSummary from "./ProductVariantCreatorSummary";
import ProductVariantCreateValues from "./ProductVariantCreatorValues"; import ProductVariantCreateValues from "./ProductVariantCreatorValues";
import { ProductVariantCreateReducerAction } from "./reducer"; import {
ProductVariantCreateReducerAction,
ProductVariantCreateReducerActionType
} from "./reducer";
import { ProductVariantCreatorStep } from "./types"; import { ProductVariantCreatorStep } from "./types";
export interface ProductVariantCreatorContentProps { export interface ProductVariantCreatorContentProps {
@ -48,7 +51,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
onValueClick={(attributeId, valueId) => onValueClick={(attributeId, valueId) =>
dispatchFormDataAction({ dispatchFormDataAction({
attributeId, attributeId,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId valueId
}) })
} }
@ -62,15 +65,18 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
onApplyPriceOrStockChange={(all, type) => onApplyPriceOrStockChange={(all, type) =>
dispatchFormDataAction({ dispatchFormDataAction({
all, all,
type: type === "price" ? "applyPriceToAll" : "applyStockToAll" type:
type === "price"
? ProductVariantCreateReducerActionType.applyPriceToAll
: ProductVariantCreateReducerActionType.applyStockToAll
}) })
} }
onApplyToAllChange={(value, type) => onApplyToAllChange={(value, type) =>
dispatchFormDataAction({ dispatchFormDataAction({
type: type:
type === "price" type === "price"
? "changeApplyPriceToAllValue" ? ProductVariantCreateReducerActionType.changeApplyPriceToAllValue
: "changeApplyStockToAllValue", : ProductVariantCreateReducerActionType.changeApplyStockToAllValue,
value value
}) })
} }
@ -79,16 +85,16 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
attributeId, attributeId,
type: type:
type === "price" type === "price"
? "changeApplyPriceToAttributeId" ? ProductVariantCreateReducerActionType.changeApplyPriceToAttributeId
: "changeApplyStockToAttributeId" : ProductVariantCreateReducerActionType.changeApplyStockToAttributeId
}) })
} }
onAttributeValueChange={(valueId, value, type) => onAttributeValueChange={(valueId, value, type) =>
dispatchFormDataAction({ dispatchFormDataAction({
type: type:
type === "price" type === "price"
? "changeAttributeValuePrice" ? ProductVariantCreateReducerActionType.changeAttributeValuePrice
: "changeAttributeValueStock", : ProductVariantCreateReducerActionType.changeAttributeValueStock,
value, value,
valueId valueId
}) })
@ -104,7 +110,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
onVariantDataChange={(variantIndex, field, value) => onVariantDataChange={(variantIndex, field, value) =>
dispatchFormDataAction({ dispatchFormDataAction({
field, field,
type: "changeVariantData", type: ProductVariantCreateReducerActionType.changeVariantData,
value, value,
variantIndex variantIndex
}) })
@ -115,13 +121,14 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
quantity: parseInt(value, 10), quantity: parseInt(value, 10),
warehouse warehouse
}, },
type: "changeVariantStockData", type:
ProductVariantCreateReducerActionType.changeVariantStockData,
variantIndex variantIndex
}) })
} }
onVariantDelete={variantIndex => onVariantDelete={variantIndex =>
dispatchFormDataAction({ dispatchFormDataAction({
type: "deleteVariant", type: ProductVariantCreateReducerActionType.deleteVariant,
variantIndex variantIndex
}) })
} }

8
src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx
View file

@ -11,7 +11,9 @@ import { createInitialForm, ProductVariantCreateFormData } from "./form";
import ProductVariantCreatorContent, { import ProductVariantCreatorContent, {
ProductVariantCreatorContentProps ProductVariantCreatorContentProps
} from "./ProductVariantCreatorContent"; } from "./ProductVariantCreatorContent";
import reduceProductVariantCreateFormData from "./reducer"; import reduceProductVariantCreateFormData, {
ProductVariantCreateReducerActionType
} from "./reducer";
import { ProductVariantCreatorStep } from "./types"; import { ProductVariantCreatorStep } from "./types";
import ProductVariantCreateTabs from "./ProductVariantCreatorTabs"; import ProductVariantCreateTabs from "./ProductVariantCreatorTabs";
@ -120,7 +122,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
onTransition: (_, nextStep) => { onTransition: (_, nextStep) => {
if (nextStep === ProductVariantCreatorStep.summary) { if (nextStep === ProductVariantCreatorStep.summary) {
dispatchFormDataAction({ dispatchFormDataAction({
type: "reload" type: ProductVariantCreateReducerActionType.reload
}); });
} }
} }
@ -129,7 +131,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
const reloadForm = () => const reloadForm = () =>
dispatchFormDataAction({ dispatchFormDataAction({
data: createInitialForm(attributes, defaultPrice, warehouses), data: createInitialForm(attributes, defaultPrice, warehouses),
type: "reload" type: ProductVariantCreateReducerActionType.reload
}); });
React.useEffect(reloadForm, [attributes.length]); React.useEffect(reloadForm, [attributes.length]);

57
src/products/components/ProductVariantCreatorPage/reducer.test.ts
View file

@ -5,7 +5,10 @@ import {
thirdStep, thirdStep,
warehouses warehouses
} from "./fixtures"; } from "./fixtures";
import reducer, { VariantField } from "./reducer"; import reducer, {
VariantField,
ProductVariantCreateReducerActionType
} from "./reducer";
function execActions<TState, TAction>( function execActions<TState, TAction>(
initialState: TState, initialState: TState,
@ -20,32 +23,32 @@ describe("Reducer is able to", () => {
const state = execActions(secondStep, reducer, [ const state = execActions(secondStep, reducer, [
{ {
attributeId: attributes[0].id, attributeId: attributes[0].id,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId: attributes[0].values[0] valueId: attributes[0].values[0]
}, },
{ {
attributeId: attributes[0].id, attributeId: attributes[0].id,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId: attributes[0].values[6] valueId: attributes[0].values[6]
}, },
{ {
attributeId: attributes[1].id, attributeId: attributes[1].id,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId: attributes[1].values[1] valueId: attributes[1].values[1]
}, },
{ {
attributeId: attributes[1].id, attributeId: attributes[1].id,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId: attributes[1].values[3] valueId: attributes[1].values[3]
}, },
{ {
attributeId: attributes[3].id, attributeId: attributes[3].id,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId: attributes[3].values[0] valueId: attributes[3].values[0]
}, },
{ {
attributeId: attributes[3].id, attributeId: attributes[3].id,
type: "selectValue", type: ProductVariantCreateReducerActionType.selectValue,
valueId: attributes[3].values[4] valueId: attributes[3].values[4]
} }
]); ]);
@ -61,14 +64,14 @@ describe("Reducer is able to", () => {
const state = execActions(thirdStep, reducer, [ const state = execActions(thirdStep, reducer, [
{ {
all: true, all: true,
type: "applyPriceToAll" type: ProductVariantCreateReducerActionType.applyPriceToAll
}, },
{ {
type: "changeApplyPriceToAllValue", type: ProductVariantCreateReducerActionType.changeApplyPriceToAllValue,
value value
}, },
{ {
type: "reload" type: ProductVariantCreateReducerActionType.reload
} }
]); ]);
@ -82,15 +85,15 @@ describe("Reducer is able to", () => {
const state = execActions(thirdStep, reducer, [ const state = execActions(thirdStep, reducer, [
{ {
all: true, all: true,
type: "applyStockToAll" type: ProductVariantCreateReducerActionType.applyStockToAll
}, },
{ {
quantity, quantity,
type: "changeApplyStockToAllValue", type: ProductVariantCreateReducerActionType.changeApplyStockToAllValue,
warehouseIndex: 1 warehouseIndex: 1
}, },
{ {
type: "reload" type: ProductVariantCreateReducerActionType.reload
} }
]); ]);
@ -105,24 +108,25 @@ describe("Reducer is able to", () => {
const state = execActions(thirdStep, reducer, [ const state = execActions(thirdStep, reducer, [
{ {
all: false, all: false,
type: "applyPriceToAll" type: ProductVariantCreateReducerActionType.applyPriceToAll
}, },
{ {
attributeId: attribute.id, attributeId: attribute.id,
type: "changeApplyPriceToAttributeId" type:
ProductVariantCreateReducerActionType.changeApplyPriceToAttributeId
}, },
{ {
type: "changeAttributeValuePrice", type: ProductVariantCreateReducerActionType.changeAttributeValuePrice,
value: value.toString(), value: value.toString(),
valueId: attribute.values[0] valueId: attribute.values[0]
}, },
{ {
type: "changeAttributeValuePrice", type: ProductVariantCreateReducerActionType.changeAttributeValuePrice,
value: (value + 6).toString(), value: (value + 6).toString(),
valueId: attribute.values[1] valueId: attribute.values[1]
}, },
{ {
type: "reload" type: ProductVariantCreateReducerActionType.reload
} }
]); ]);
@ -140,24 +144,25 @@ describe("Reducer is able to", () => {
const state = execActions(thirdStep, reducer, [ const state = execActions(thirdStep, reducer, [
{ {
all: false, all: false,
type: "applyStockToAll" type: ProductVariantCreateReducerActionType.applyStockToAll
}, },
{ {
attributeId: attribute.id, attributeId: attribute.id,
type: "changeApplyStockToAttributeId" type:
ProductVariantCreateReducerActionType.changeApplyStockToAttributeId
}, },
{ {
type: "changeAttributeValueStock", type: ProductVariantCreateReducerActionType.changeAttributeValueStock,
value: value.toString(), value: value.toString(),
valueId: attribute.values[0] valueId: attribute.values[0]
}, },
{ {
type: "changeAttributeValueStock", type: ProductVariantCreateReducerActionType.changeAttributeValueStock,
value: (value + 6).toString(), value: (value + 6).toString(),
valueId: attribute.values[1] valueId: attribute.values[1]
}, },
{ {
type: "reload" type: ProductVariantCreateReducerActionType.reload
} }
]); ]);
@ -177,7 +182,7 @@ describe("Reducer is able to", () => {
const state = execActions(fourthStep, reducer, [ const state = execActions(fourthStep, reducer, [
{ {
field, field,
type: "changeVariantData", type: ProductVariantCreateReducerActionType.changeVariantData,
value, value,
variantIndex variantIndex
} }
@ -200,7 +205,7 @@ describe("Reducer is able to", () => {
quantity, quantity,
warehouse: warehouses[0].id warehouse: warehouses[0].id
}, },
type: "changeVariantStockData", type: ProductVariantCreateReducerActionType.changeVariantStockData,
variantIndex variantIndex
} }
]); ]);
@ -217,7 +222,7 @@ describe("Reducer is able to", () => {
const state = execActions(fourthStep, reducer, [ const state = execActions(fourthStep, reducer, [
{ {
type: "deleteVariant", type: ProductVariantCreateReducerActionType.deleteVariant,
variantIndex variantIndex
} }
]); ]);

60
src/products/components/ProductVariantCreatorPage/reducer.ts
View file

@ -10,23 +10,23 @@ import { StockInput } from "@saleor/types/globalTypes";
import { createVariants } from "./createVariants"; import { createVariants } from "./createVariants";
import { ProductVariantCreateFormData } from "./form"; import { ProductVariantCreateFormData } from "./form";
export type ProductVariantCreateReducerActionType = export enum ProductVariantCreateReducerActionType {
| "applyPriceToAll" applyPriceToAll,
| "applyPriceToAttribute" applyPriceToAttribute,
| "applyStockToAll" applyStockToAll,
| "applyStockToAttribute" applyStockToAttribute,
| "changeApplyPriceToAllValue" changeApplyPriceToAllValue,
| "changeApplyPriceToAttributeId" changeApplyPriceToAttributeId,
| "changeApplyStockToAllValue" changeApplyStockToAllValue,
| "changeApplyStockToAttributeId" changeApplyStockToAttributeId,
| "changeAttributeValuePrice" changeAttributeValuePrice,
| "changeAttributeValueStock" changeAttributeValueStock,
| "changeVariantData" changeVariantData,
| "changeVariantStockData" changeVariantStockData,
| "deleteVariant" deleteVariant,
| "reload" reload,
| "selectValue"; selectValue
}
export type VariantField = "price" | "sku"; export type VariantField = "price" | "sku";
export interface ProductVariantCreateReducerAction { export interface ProductVariantCreateReducerAction {
all?: boolean; all?: boolean;
@ -318,49 +318,49 @@ function reduceProductVariantCreateFormData(
action: ProductVariantCreateReducerAction action: ProductVariantCreateReducerAction
) { ) {
switch (action.type) { switch (action.type) {
case "selectValue": case ProductVariantCreateReducerActionType.selectValue:
return selectValue(prevState, action.attributeId, action.valueId); return selectValue(prevState, action.attributeId, action.valueId);
case "applyPriceToAll": case ProductVariantCreateReducerActionType.applyPriceToAll:
return applyPriceToAll(prevState, action.all); return applyPriceToAll(prevState, action.all);
case "applyStockToAll": case ProductVariantCreateReducerActionType.applyStockToAll:
return applyStockToAll(prevState, action.all); return applyStockToAll(prevState, action.all);
case "changeAttributeValuePrice": case ProductVariantCreateReducerActionType.changeAttributeValuePrice:
return changeAttributeValuePrice(prevState, action.valueId, action.value); return changeAttributeValuePrice(prevState, action.valueId, action.value);
case "changeAttributeValueStock": case ProductVariantCreateReducerActionType.changeAttributeValueStock:
return changeAttributeValueStock( return changeAttributeValueStock(
prevState, prevState,
action.valueId, action.valueId,
action.quantity, action.quantity,
action.warehouseIndex action.warehouseIndex
); );
case "changeApplyPriceToAttributeId": case ProductVariantCreateReducerActionType.changeApplyPriceToAttributeId:
return changeApplyPriceToAttributeId(prevState, action.attributeId); return changeApplyPriceToAttributeId(prevState, action.attributeId);
case "changeApplyStockToAttributeId": case ProductVariantCreateReducerActionType.changeApplyStockToAttributeId:
return changeApplyStockToAttributeId(prevState, action.attributeId); return changeApplyStockToAttributeId(prevState, action.attributeId);
case "changeApplyPriceToAllValue": case ProductVariantCreateReducerActionType.changeApplyPriceToAllValue:
return changeApplyPriceToAllValue(prevState, action.value); return changeApplyPriceToAllValue(prevState, action.value);
case "changeApplyStockToAllValue": case ProductVariantCreateReducerActionType.changeApplyStockToAllValue:
return changeApplyStockToAllValue( return changeApplyStockToAllValue(
prevState, prevState,
action.quantity, action.quantity,
action.warehouseIndex action.warehouseIndex
); );
case "changeVariantData": case ProductVariantCreateReducerActionType.changeVariantData:
return changeVariantData( return changeVariantData(
prevState, prevState,
action.field, action.field,
action.value, action.value,
action.variantIndex action.variantIndex
); );
case "changeVariantStockData": case ProductVariantCreateReducerActionType.changeVariantStockData:
return changeVariantStockData( return changeVariantStockData(
prevState, prevState,
action.stock, action.stock,
action.variantIndex action.variantIndex
); );
case "deleteVariant": case ProductVariantCreateReducerActionType.deleteVariant:
return deleteVariant(prevState, action.variantIndex); return deleteVariant(prevState, action.variantIndex);
case "reload": case ProductVariantCreateReducerActionType.reload:
return action.data ? action.data : createVariantMatrix(prevState); return action.data ? action.data : createVariantMatrix(prevState);
default: default:
return prevState; return prevState;