SImplify meal types

backend/menus/migrations/0009_remove_recipe_can_be_dinner_and_more.py

@@ -0,0 +1,46 @@
+# Generated by Django 4.2 on 2024-07-12 17:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("menus", "0008_remove_recipe_description_alter_recipeimage_recipe"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="recipe",
+            name="can_be_dinner",
+        ),
+        migrations.RemoveField(
+            model_name="recipe",
+            name="can_be_lunch",
+        ),
+        migrations.RemoveField(
+            model_name="recipe",
+            name="is_only_dinner",
+        ),
+        migrations.RemoveField(
+            model_name="recipe",
+            name="is_only_lunch",
+        ),
+        migrations.AlterField(
+            model_name="recipe",
+            name="meal",
+            field=models.CharField(
+                choices=[("LUNCH", "Lunch"), ("DINNER", "Dinner"), ("BOTH", "Both")],
+                default="LUNCH",
+                max_length=200,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="recipe",
+            name="prefered_meal",
+            field=models.CharField(
+                choices=[("LUNCH", "Lunch"), ("DINNER", "Dinner"), ("BOTH", "Both")],
+                default="LUNCH",
+                max_length=200,
+            ),
+        ),
+    ]

backend/menus/models/recipes.py

@@ -36,6 +36,7 @@ def user_directory_path(instance, filename) -> str:
 class MealType(models.TextChoices):
     LUNCH = "LUNCH"
     DINNER = "DINNER"
+    BOTH = "BOTH"
 
 
 class MealTempType(models.TextChoices):
@@ -71,11 +72,6 @@ class Recipe(models.Model):
         choices=MealType.choices, default=MealType.LUNCH, max_length=200
     )
 
-    is_only_dinner: models.BooleanField = models.BooleanField(default=False)
-    is_only_lunch: models.BooleanField = models.BooleanField(default=False)
-
-    can_be_dinner: models.BooleanField = models.BooleanField(default=True)
-    can_be_lunch: models.BooleanField = models.BooleanField(default=True)
     active: models.BooleanField = models.BooleanField(default=True)
 
     is_oven_recipe: models.BooleanField = models.BooleanField(default=False)

client/src/components/PageTitle/PageTitle.tsx

@@ -25,9 +25,13 @@ function PageTitle({
 
   return (
     <Group grow>
-      <Title order={1} mt="md" textWrap="wrap">
+      <Title order={1} mt="md" textWrap="pretty">
         {withBackButton && (
-          <ActionIcon style={{ display: "inline" }} onClick={navigateBack}>
+          <ActionIcon
+            style={{ display: "inline" }}
+            variant="subtle"
+            onClick={navigateBack}
+          >
             <IconArrowLeft />
           </ActionIcon>
         )}{" "}

client/src/components/form-fields/recipes/IngredientsFields/IngredientsFields.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
-import { useProducts } from "hooks/products/use-products";
+import { useProductsNoLimit } from "hooks/products/use-products";
 import { IProduct } from "types/products";
 
 type Props = {
@@ -18,7 +18,7 @@ type Props = {
 
 export default function IngredientsFields({ form }: Props) {
   const { t } = useTranslation();
-  const { data: products, isLoading } = useProducts();
+  const { data: products, isLoading } = useProductsNoLimit();
 
   const fields = form
     .getValues()

client/src/components/form-fields/recipes/MealOfTheDayFields/MealOfTheDayFields.tsx

@@ -1,41 +1,43 @@
 import { useTranslation } from "react-i18next";
-import { Group, Select, Switch } from "@mantine/core";
+import { Select } from "@mantine/core";
+import { MealTypes } from "types/recipes-types";
 
 type Props = { form: any };
 
 export default function MealOfTheDayFields({ form }: Props) {
   const { t } = useTranslation();
-  const mealTypes = [
+
+  const preferedMealTypes = [
     { value: "LUNCH", label: t("Lunch") },
     { value: "DINNER", label: t("Dinner") },
   ];
+
   return (
     <>
       <Select
-        label={t("Prefered meal of the day")}
+        label={t("Meal of the day")}
         withAsterisk
-        placeholder={t<string>("When do you prefer to eat this meal?")}
-        data={mealTypes}
+        data={Object.keys(MealTypes).map((mealType) => ({
+          value: mealType,
+          label: t(mealType),
+        }))}
         // eslint-disable-next-line react/jsx-props-no-spreading
-        {...form.getInputProps("preferedMeal")}
+        {...form.getInputProps("meal")}
         required
         mt="md"
       />
-      <Group>
-        <Switch
-          label={t("Only for lunch")}
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...form.getInputProps("isOnlyLunch", { type: "checkbox" })}
-          mt="md"
-        />
-
-        <Switch
-          label={t("Only for dinner")}
+      {form.getValues().meal === MealTypes.BOTH && (
+        <Select
+          label={t("Prefered meal of the day")}
+          withAsterisk
+          placeholder={t<string>("When do you prefer to eat this meal?")}
+          data={preferedMealTypes}
           // eslint-disable-next-line react/jsx-props-no-spreading
-          {...form.getInputProps("isOnlyDinner", { type: "checkbox" })}
+          {...form.getInputProps("preferedMeal")}
+          required
           mt="md"
         />
-      </Group>
+      )}
     </>
   );
 }

client/src/components/form-fields/recipes/RecipeImageField/RecipeImageField.tsx

@@ -1,14 +1,15 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Group, SimpleGrid, Image } from "@mantine/core";
 import { FileWithPath, IMAGE_MIME_TYPE } from "@mantine/dropzone";
+import { useShallowEffect } from "@mantine/hooks";
 import ImageDropZone from "components/ImageDropzone/ImageDropZone";
 
 type Props = { form: any };
 
 export default function RecipeImageField({ form }: Props) {
   const [files, setFiles] = useState<FileWithPath[]>([]);
 
-  useEffect(() => {
+  useShallowEffect(() => {
     if (files.length > 0) {
       form.setFieldValue("image", files[0]);
     }

client/src/components/form-fields/recipes/SideFields/SideFields.tsx

@@ -2,17 +2,17 @@ import { useTranslation } from "react-i18next";
 import { ActionIcon, Button, Group, Select, Text } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
-import { useSides } from "hooks/recipes/use-recipes";
+import { useSidesNoLimit } from "hooks/recipes/use-recipes";
 import { IRecipe } from "types/recipes";
 
 type Props = { form: any };
 
 export default function SideFields({ form }: Props) {
   const { t } = useTranslation();
-  const { data: sides, isLoading } = useSides();
+  const { data: sides, isLoading } = useSidesNoLimit();
 
   const generateSidesFields = () => {
-    const options = sides.map((side: IRecipe) => ({
+    const options = sides?.map((side: IRecipe) => ({
       value: side.id.toString(),
       label: side.name,
     }));
@@ -27,7 +27,6 @@ export default function SideFields({ form }: Props) {
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...form.getInputProps(`sides.${index}.id`)}
           required
-          mt="md"
         />
 
         <ActionIcon

client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx

@@ -30,7 +30,7 @@ export default function DayMenuDetailsPage() {
   const items = [
     { title: t("Home"), href: "/" },
     { title: data ? data.name : t("Loading..."), href: ".." },
-    { title: dayName, href: "." },
+    { title: dayName ? t<string>(dayName) : dayName, href: "." },
   ].map((item, index) => (
     // eslint-disable-next-line react/no-array-index-key
     <Anchor component={Link} to={item.href} key={index} relative="path">
@@ -68,35 +68,41 @@ export default function DayMenuDetailsPage() {
     }
   }, [data, dayName]);
 
+  if (!dayName) return null;
+
   return (
     <Grid>
       <LoadingOverlay
         visible={isLoading}
         zIndex={1000}
         overlayProps={{ radius: "sm", blur: 2 }}
       />
-      <Grid.Col>
-        <Breadcrumbs>{items}</Breadcrumbs>
-        <PageTitle
-          header={`${data ? data.name : t("Loading...")} - ${dayName}`}
-          withBackButton
-          backRoute={`/${routes.menusRoute}${menuIdNumber}`}
-        />
-      </Grid.Col>
-      <Grid.Col>
-        <Title order={2}>{t("Lunch")}</Title>
-        <Title order={3}>{lunchRecipe?.name}</Title>
-      </Grid.Col>
+      {data && (
+        <>
+          <Grid.Col>
+            <Breadcrumbs>{items}</Breadcrumbs>
+            <PageTitle
+              header={`${data.name} - ${t<string>(dayName)}`}
+              withBackButton
+              backRoute={`/${routes.menusRoute}${menuIdNumber}`}
+            />
+          </Grid.Col>
+          <Grid.Col>
+            <Title order={2}>{t("Lunch")}</Title>
+            <Title order={3}>{lunchRecipe?.name}</Title>
+          </Grid.Col>
 
-      {lunchRecipe && <RecipeDetails recipe={lunchRecipe} />}
-      <Grid.Col>
-        <Title order={2}>{t("Dinner")}</Title>
-        <Title order={3}>{dinnerRecipe?.name}</Title>
-      </Grid.Col>
-      {dinnerRecipe && <RecipeDetails recipe={dinnerRecipe} />}
-      <Grid.Col>
-        <Footer />
-      </Grid.Col>
+          {lunchRecipe && <RecipeDetails recipe={lunchRecipe} />}
+          <Grid.Col>
+            <Title order={2}>{t("Dinner")}</Title>
+            <Title order={3}>{dinnerRecipe?.name}</Title>
+          </Grid.Col>
+          {dinnerRecipe && <RecipeDetails recipe={dinnerRecipe} />}
+          <Grid.Col>
+            <Footer />
+          </Grid.Col>
+        </>
+      )}
     </Grid>
   );
 }