Fix dish order checkboxes

Author: zerobias

apps/food-order/package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "dependencies": {
+    "effector-action": "^1.1.0"
+  },
   "devDependencies": {
     "@vitejs/plugin-react": "^3.1.0",
     "vite": "^4.2.1"

apps/food-order/src/model/dishOrder.model.ts

@@ -8,6 +8,7 @@ import {
   calculateAdditiveOrderPriceFromEntity,
   calculateDishOrderPrice,
 } from './calculateUtils';
+import { createAction } from 'effector-action';
 
 const restaurantLens = lens(restaurantsList, $restaurantName);
 
@@ -51,7 +52,23 @@ export const additivesList = keyval(() => {
 });
 
 export const addAdditive = createEvent<{ additive: string; choice: string }>();
-export const removeAdditive = createEvent<string>();
+export const removeAdditive = createAction({
+  source: additivesList.$items,
+  target: {
+    map: additivesList.edit.map,
+    remove: additivesList.edit.remove,
+  },
+  fn(target, items, additiveToRemove: string) {
+    if (items.some((e) => e.additive === additiveToRemove && e.amount === 1)) {
+      target.remove(additiveToRemove);
+    } else {
+      target.map({
+        keys: [additiveToRemove],
+        map: ({ amount }) => ({ amount: amount - 1 }),
+      });
+    }
+  },
+});
 
 export const $currentDishTotalPrice = combine(
   $dish,
@@ -63,19 +80,17 @@ export const $currentDishTotalPrice = combine(
 sample({
   clock: addAdditive,
   target: additivesList.edit.map.prepend(
-    (e: UnitValue<typeof addAdditive>) => ({
-      keys: [e.additive],
-      map: ({ amount, ...rest }) => ({ ...rest, amount: amount + 1 }),
+    ({ additive, choice }: UnitValue<typeof addAdditive>) => ({
+      keys: [additive],
+      map: ({ amount, choice: currentChoice }) => ({
+        choice,
+        amount: currentChoice === choice ? amount + 1 : 1,
+      }),
       upsert: true,
     }),
   ),
 });
 
-sample({
-  clock: removeAdditive,
-  target: additivesList.edit.remove,
-});
-
 sample({
   clock: addToOrder,
   source: { restaurant: $restaurantName },

apps/food-order/src/view/DishView.tsx

@@ -59,10 +59,9 @@ const AdditiveSimpleItem = ({
   price: number;
 }) => {
   const item = useEntityItem(additivesList, additive);
-  const orderedAmount = useEntityItem(additivesList, additive).amount;
+  const orderedAmount = item.choice === choice ? item.amount : 0;
   const [add, remove] = useUnit([addAdditive, removeAdditive]);
-  const selected = orderedAmount !== 0;
-  console.log('AdditiveSimpleItem', item, selected);
+  const selected = item.choice === choice && orderedAmount !== 0;
   return (
     <div className="flex justify-between items-center mb-2">
       <AdditiveWithPrice text={choice} price={price} />

apps/food-order/src/view/components.tsx

@@ -10,7 +10,13 @@ export const Radio = ({
   checked: boolean;
   onClick: () => void;
 }) => (
-  <label className="flex items-center space-x-3 cursor-pointer">
+  <label
+    className="flex items-center space-x-3 cursor-pointer"
+    onClick={(e) => {
+      e.preventDefault();
+      onClick();
+    }}
+  >
     <input
       type="radio"
       name={name}