🦄 refactor(购物页面): 优化购物页面切换订单类型的渲染

src/pages/shopping/context/index.ts

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { Dispatch, useRef } from 'react'
 import { useContext } from 'react'
 
 /**
@@ -27,50 +27,110 @@ export type ColorStore = {
 
 export type Goods = {
   id: number
-  product_code: number   // 面料编号
+  product_code: number // 面料编号
   product_color_code: number // 颜色编号
   estimate_amount: number // 预估金额
-  count: number    // 已选的条数或米数
+  count: number // 已选的条数或米数
   sale_mode: number
   checked: boolean
 }
 // 分组
 export interface GoodsMeta {
   purchaserId: number
-  // materialChecked: number  // 已选 x 种面料
-  // colorChecked: number    // 已选 x 颜色
-  // lengthOrRollChecked: number   // 共 x 条  共 x 米
   goodsKind?: {
     [id: number]: Goods
   }
 }
 
-export interface ShoppingContextValue {
+export interface ShoppingStateContextValue {
   isManageStatus: boolean
-  setManageStatus: (isManageStatus: boolean) => void
   currentCheckedPurchaserId: number // 当前高亮的客户ID
-  setCurrentCheckedPurchaserId: (purchaserId: number) => void
   currentCheckedSaleMode: number
-  setCurrentCheckedSaleMode: (saleMode: number) => void
   colorStore: ColorStore
-  setColorStore: (colorStore: React.SetStateAction<ColorStore>) => void
-  setChangedCheckbox: (changedGoods: GoodsMeta) => void
   selectedAmount: number
-  setSelectedAmount: (amount: React.SetStateAction<number>) => void
 }
 
-export const ShoppingContext = React.createContext<ShoppingContextValue | null>(null)
+export enum ShoppingDispatchType {
+  UPDATE_MANAGE_STATUS = 'UPDATE_MANAGE_STATUS',
+  UPDATE_CURRENT_CHECKED_PURCHASERID = 'UPDATE_CURRENT_CHECKED_PURCHASERID',
+  UPDATE_CURRENT_CHECKED_SALEMODE = 'UPDATE_CURRENT_CHECKED_SALEMODE',
+  UPDATE_COLOR_STORE = 'UPDATE_COLOR_STORE',
+  UPDATE_SELECTED_AMOUNT = 'UPDATE_SELECTED_AMOUNT',
+  UPDATE_CHANGED_CHECKBOX = 'UPDATE_CHANGED_CHECKBOX',
+}
 
-export function useShoppingContext() {
-  const ctx = useContext(ShoppingContext)
+export interface ShoppingDispatchContextValue {
+  [ShoppingDispatchType.UPDATE_MANAGE_STATUS]: (isManageStatus: boolean) => void
+  [ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID]: (purchaserId: number) => void
+  [ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE]: (saleMode: number) => void
+  [ShoppingDispatchType.UPDATE_COLOR_STORE]: (colorStore: React.SetStateAction<ColorStore>) => void
+  [ShoppingDispatchType.UPDATE_SELECTED_AMOUNT]: (amount: React.SetStateAction<number>) => void
+  [ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX]: (amount: React.SetStateAction<number>) => void
+}
+
+
+export type ShoppingAction = {
+  type: ShoppingDispatchType
+  data?: any
+}
+
+export function shoppingReducer(state: ShoppingStateContextValue, action: ShoppingAction) {
+  const { type, data } = action
+  switch (type) {
+    case ShoppingDispatchType.UPDATE_MANAGE_STATUS: {
+      return { ...state, isManageStatus: data }
+    }
+    case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID: {
+      return { ...state, currentCheckedPurchaserId: data }
+    }
+    case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE: {
+      return { ...state, currentCheckedSaleMode: data }
+    }
+    case ShoppingDispatchType.UPDATE_COLOR_STORE: {
+      return { ...state, colorStore: data }
+    }
+    case ShoppingDispatchType.UPDATE_SELECTED_AMOUNT: {
+      return { ...state, selectedAmount: data }
+    }
+    case ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX: {
+      return {
+        ...state,
+        colorStore: {
+          ...state.colorStore,
+          [data.purchaserId as number]: {
+            purchaserId: data.purchaserId,
+            goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind },
+          },
+        },
+      }
+    }
+    default:
+      throwError()
+  }
+}
+
+export const ShoppingStateContext = React.createContext<ShoppingStateContextValue | null>(null)
+
+export const ShoppingDispatchContext = React.createContext<Dispatch<ShoppingAction> | null>(null)
+
+export function useShoppingState() {
+  const ctx = useContext(ShoppingStateContext)
   if (!ctx) {
     throw new Error('没有获取到shopping context')
   }
   return ctx
 }
 
+export function useShoppingDispatch() {
+  const ctx = useContext(ShoppingDispatchContext)
+  if (!ctx) {
+    throw new Error('没有获取到shopping dispatch')
+  }
+  return ctx
+}
+
 export function useWatch(purchaserId: GoodsMeta['purchaserId'], id: number) {
-  const { colorStore } = useShoppingContext()
+  const { colorStore } = useShoppingState()
   return id ? colorStore[purchaserId]['goodsKind']![id] : colorStore[purchaserId]['goodsKind']
 }
 
@@ -84,26 +144,5 @@ export interface InternalShoppingCartAction extends ShoppingCartAction {
 }
 
 function throwError(): never {
-  throw new Error('有没有用 ref 这个props？')
-}
-
-export function useShoppingCart(): ShoppingCartAction {
-  const __INTERNAL__ = useRef<ShoppingCartAction | null>(null)
-  return {
-    __INTERNAL__,
-    setManageStatus(manageStatus: boolean) {
-      const action = __INTERNAL__.current
-      if (!action) {
-        throwError()
-      }
-      action.setManageStatus(manageStatus)
-    },
-    getManageStatus() {
-      const action = __INTERNAL__.current
-      if (!action) {
-        throwError()
-      }
-      return action.getManageStatus()
-    },
-  } as InternalShoppingCartAction
+  throw new Error('没有这个action.type')
 }