Use reducer action enum

2020-04-07 16:14:17 +02:00 · 2020-04-07 16:14:17 +02:00 · 785c34375e
commit 785c34375e
parent bbdc7f8991
4 changed files with 85 additions and 71 deletions
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
@ -8,7 +8,10 @@ import { ProductVariantCreateFormData } from "./form";
 import ProductVariantCreatePrices from "./ProductVariantCreatorPrices";
 import ProductVariantCreateSummary from "./ProductVariantCreatorSummary";
 import ProductVariantCreateValues from "./ProductVariantCreatorValues";
-import { ProductVariantCreateReducerAction } from "./reducer";
+import {
+  ProductVariantCreateReducerAction,
+  ProductVariantCreateReducerActionType
+} from "./reducer";
 import { ProductVariantCreatorStep } from "./types";

 export interface ProductVariantCreatorContentProps {
@ -48,7 +51,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
          onValueClick={(attributeId, valueId) =>
            dispatchFormDataAction({
              attributeId,
-              type: "selectValue",
+              type: ProductVariantCreateReducerActionType.selectValue,
              valueId
            })
          }
@ -62,15 +65,18 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
          onApplyPriceOrStockChange={(all, type) =>
            dispatchFormDataAction({
              all,
-              type: type === "price" ? "applyPriceToAll" : "applyStockToAll"
+              type:
+                type === "price"
+                  ? ProductVariantCreateReducerActionType.applyPriceToAll
+                  : ProductVariantCreateReducerActionType.applyStockToAll
            })
          }
          onApplyToAllChange={(value, type) =>
            dispatchFormDataAction({
              type:
                type === "price"
-                  ? "changeApplyPriceToAllValue"
-                  : "changeApplyStockToAllValue",
+                  ? ProductVariantCreateReducerActionType.changeApplyPriceToAllValue
+                  : ProductVariantCreateReducerActionType.changeApplyStockToAllValue,
              value
            })
          }
@ -79,16 +85,16 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
              attributeId,
              type:
                type === "price"
-                  ? "changeApplyPriceToAttributeId"
-                  : "changeApplyStockToAttributeId"
+                  ? ProductVariantCreateReducerActionType.changeApplyPriceToAttributeId
+                  : ProductVariantCreateReducerActionType.changeApplyStockToAttributeId
            })
          }
          onAttributeValueChange={(valueId, value, type) =>
            dispatchFormDataAction({
              type:
                type === "price"
-                  ? "changeAttributeValuePrice"
-                  : "changeAttributeValueStock",
+                  ? ProductVariantCreateReducerActionType.changeAttributeValuePrice
+                  : ProductVariantCreateReducerActionType.changeAttributeValueStock,
              value,
              valueId
            })
@ -104,7 +110,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
          onVariantDataChange={(variantIndex, field, value) =>
            dispatchFormDataAction({
              field,
-              type: "changeVariantData",
+              type: ProductVariantCreateReducerActionType.changeVariantData,
              value,
              variantIndex
            })
@ -115,13 +121,14 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
                quantity: parseInt(value, 10),
                warehouse
              },
-              type: "changeVariantStockData",
+              type:
+                ProductVariantCreateReducerActionType.changeVariantStockData,
              variantIndex
            })
          }
          onVariantDelete={variantIndex =>
            dispatchFormDataAction({
-              type: "deleteVariant",
+              type: ProductVariantCreateReducerActionType.deleteVariant,
              variantIndex
            })
          }
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx
@ -11,7 +11,9 @@ import { createInitialForm, ProductVariantCreateFormData } from "./form";
 import ProductVariantCreatorContent, {
  ProductVariantCreatorContentProps
 } from "./ProductVariantCreatorContent";
-import reduceProductVariantCreateFormData from "./reducer";
+import reduceProductVariantCreateFormData, {
+  ProductVariantCreateReducerActionType
+} from "./reducer";
 import { ProductVariantCreatorStep } from "./types";
 import ProductVariantCreateTabs from "./ProductVariantCreatorTabs";

@ -120,7 +122,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
      onTransition: (_, nextStep) => {
        if (nextStep === ProductVariantCreatorStep.summary) {
          dispatchFormDataAction({
-            type: "reload"
+            type: ProductVariantCreateReducerActionType.reload
          });
        }
      }
@ -129,7 +131,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
  const reloadForm = () =>
    dispatchFormDataAction({
      data: createInitialForm(attributes, defaultPrice, warehouses),
-      type: "reload"
+      type: ProductVariantCreateReducerActionType.reload
    });

  React.useEffect(reloadForm, [attributes.length]);
--- a/src/products/components/ProductVariantCreatorPage/reducer.test.ts
+++ b/src/products/components/ProductVariantCreatorPage/reducer.test.ts
@ -5,7 +5,10 @@ import {
  thirdStep,
  warehouses
 } from "./fixtures";
-import reducer, { VariantField } from "./reducer";
+import reducer, {
+  VariantField,
+  ProductVariantCreateReducerActionType
+} from "./reducer";

 function execActions<TState, TAction>(
  initialState: TState,
@ -20,32 +23,32 @@ describe("Reducer is able to", () => {
    const state = execActions(secondStep, reducer, [
      {
        attributeId: attributes[0].id,
-        type: "selectValue",
+        type: ProductVariantCreateReducerActionType.selectValue,
        valueId: attributes[0].values[0]
      },
      {
        attributeId: attributes[0].id,
-        type: "selectValue",
+        type: ProductVariantCreateReducerActionType.selectValue,
        valueId: attributes[0].values[6]
      },
      {
        attributeId: attributes[1].id,
-        type: "selectValue",
+        type: ProductVariantCreateReducerActionType.selectValue,
        valueId: attributes[1].values[1]
      },
      {
        attributeId: attributes[1].id,
-        type: "selectValue",
+        type: ProductVariantCreateReducerActionType.selectValue,
        valueId: attributes[1].values[3]
      },
      {
        attributeId: attributes[3].id,
-        type: "selectValue",
+        type: ProductVariantCreateReducerActionType.selectValue,
        valueId: attributes[3].values[0]
      },
      {
        attributeId: attributes[3].id,
-        type: "selectValue",
+        type: ProductVariantCreateReducerActionType.selectValue,
        valueId: attributes[3].values[4]
      }
    ]);
@ -61,14 +64,14 @@ describe("Reducer is able to", () => {
    const state = execActions(thirdStep, reducer, [
      {
        all: true,
-        type: "applyPriceToAll"
+        type: ProductVariantCreateReducerActionType.applyPriceToAll
      },
      {
-        type: "changeApplyPriceToAllValue",
+        type: ProductVariantCreateReducerActionType.changeApplyPriceToAllValue,
        value
      },
      {
-        type: "reload"
+        type: ProductVariantCreateReducerActionType.reload
      }
    ]);

@ -82,15 +85,15 @@ describe("Reducer is able to", () => {
    const state = execActions(thirdStep, reducer, [
      {
        all: true,
-        type: "applyStockToAll"
+        type: ProductVariantCreateReducerActionType.applyStockToAll
      },
      {
        quantity,
-        type: "changeApplyStockToAllValue",
+        type: ProductVariantCreateReducerActionType.changeApplyStockToAllValue,
        warehouseIndex: 1
      },
      {
-        type: "reload"
+        type: ProductVariantCreateReducerActionType.reload
      }
    ]);

@ -105,24 +108,25 @@ describe("Reducer is able to", () => {
    const state = execActions(thirdStep, reducer, [
      {
        all: false,
-        type: "applyPriceToAll"
+        type: ProductVariantCreateReducerActionType.applyPriceToAll
      },
      {
        attributeId: attribute.id,
-        type: "changeApplyPriceToAttributeId"
+        type:
+          ProductVariantCreateReducerActionType.changeApplyPriceToAttributeId
      },
      {
-        type: "changeAttributeValuePrice",
+        type: ProductVariantCreateReducerActionType.changeAttributeValuePrice,
        value: value.toString(),
        valueId: attribute.values[0]
      },
      {
-        type: "changeAttributeValuePrice",
+        type: ProductVariantCreateReducerActionType.changeAttributeValuePrice,
        value: (value + 6).toString(),
        valueId: attribute.values[1]
      },
      {
-        type: "reload"
+        type: ProductVariantCreateReducerActionType.reload
      }
    ]);

@ -140,24 +144,25 @@ describe("Reducer is able to", () => {
    const state = execActions(thirdStep, reducer, [
      {
        all: false,
-        type: "applyStockToAll"
+        type: ProductVariantCreateReducerActionType.applyStockToAll
      },
      {
        attributeId: attribute.id,
-        type: "changeApplyStockToAttributeId"
+        type:
+          ProductVariantCreateReducerActionType.changeApplyStockToAttributeId
      },
      {
-        type: "changeAttributeValueStock",
+        type: ProductVariantCreateReducerActionType.changeAttributeValueStock,
        value: value.toString(),
        valueId: attribute.values[0]
      },
      {
-        type: "changeAttributeValueStock",
+        type: ProductVariantCreateReducerActionType.changeAttributeValueStock,
        value: (value + 6).toString(),
        valueId: attribute.values[1]
      },
      {
-        type: "reload"
+        type: ProductVariantCreateReducerActionType.reload
      }
    ]);

@ -177,7 +182,7 @@ describe("Reducer is able to", () => {
    const state = execActions(fourthStep, reducer, [
      {
        field,
-        type: "changeVariantData",
+        type: ProductVariantCreateReducerActionType.changeVariantData,
        value,
        variantIndex
      }
@ -200,7 +205,7 @@ describe("Reducer is able to", () => {
          quantity,
          warehouse: warehouses[0].id
        },
-        type: "changeVariantStockData",
+        type: ProductVariantCreateReducerActionType.changeVariantStockData,
        variantIndex
      }
    ]);
@ -217,7 +222,7 @@ describe("Reducer is able to", () => {

    const state = execActions(fourthStep, reducer, [
      {
-        type: "deleteVariant",
+        type: ProductVariantCreateReducerActionType.deleteVariant,
        variantIndex
      }
    ]);
--- a/src/products/components/ProductVariantCreatorPage/reducer.ts
+++ b/src/products/components/ProductVariantCreatorPage/reducer.ts
@ -10,23 +10,23 @@ import { StockInput } from "@saleor/types/globalTypes";
 import { createVariants } from "./createVariants";
 import { ProductVariantCreateFormData } from "./form";

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