initial commit

front/src/app/pages/calc/CalcPage.js

@@ -0,0 +1,90 @@
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import {useEffect, useMemo} from "react";
+import {useAlert} from "../../../hooks/useAlert";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import {CocktailItemCalc} from "./CocktailItemCalc";
+import {IngredientCalcCard} from "./IngredientCalcCard";
+import {cocktailClient} from "../../../lib/clients/CocktailClient";
+
+export function CalcPage() {
+    const {createError} = useAlert();
+    const [cocktails, setCocktails] = React.useState([]);
+    const [load, setLoad] = React.useState(false);
+    const [cocktailMap, setCocktailMap] = React.useState({});
+
+    const changeHandler = (id, value) => {
+        setCocktailMap((prev) => ({
+            ...prev,
+            [id]: value
+        }));
+    }
+
+    useEffect(() => {
+        cocktailClient.getCocktailsForCalcPage(load, setLoad, setCocktails, setCocktailMap, createError)
+        // eslint-disable-next-line
+    }, [load]);
+
+    const ingredients = useMemo(() => {
+            let map = {}
+            if (!cocktails) {
+                return [];
+            }
+            cocktails.forEach((c) => {
+                const receipts = c.receipt;
+                const countMeter = cocktailMap[c.id];
+
+                if (!receipts) {
+                    return
+                }
+                receipts.forEach((r) => {
+                    const ingredient = r.ingredient;
+                    const id = ingredient.id;
+                    const ingredientCount = r.count;
+
+                    const resultCount = ingredientCount * countMeter;
+
+                    if (map[id]) {
+                        map[id] = {
+                            ...map[id],
+                            count: map[id].count + resultCount
+                        }
+                    } else {
+                        map[id] = {
+                            ingredient: ingredient,
+                            count: resultCount
+                        }
+                    }
+                })
+            })
+            return Object.values(map);
+        },
+        [cocktails, cocktailMap])
+
+    const deleteHandler = (id) => {
+        const state = cocktails.filter((c) => c.id !== id);
+        setCocktails(state);
+    }
+
+    console.log(cocktailMap)
+
+    return (
+        <Box padding={2}>
+            <Typography variant="h4" align="center">Коктейли</Typography>
+            <Stack mt={2}>
+                {cocktails.map((item, i) => (
+                    <CocktailItemCalc key={i} cocktail={item} deleteHandler={deleteHandler}
+                                      changeHandler={changeHandler}/>
+                ))}
+            </Stack>
+
+            <Typography variant="h4" mt={2} align="center">Ингредиенты</Typography>
+            <Stack mt={2}>
+                {ingredients.map((item, i) => (
+                    <IngredientCalcCard key={i} count={item.count} ingredient={item.ingredient}/>
+                ))}
+            </Stack>
+        </Box>
+    )
+}