Add sides support on the client

client/src/MainRouter.tsx

@@ -13,6 +13,10 @@ import EditRecipePage from "pages/recipes/EditRecipePage/EditRecipePage";
 import RecipeDetailsPage from "pages/recipes/RecipeDetailsPage/RecipeDetailsPage";
 import RecipesMain from "pages/recipes/RecipesMain";
 import RecipesPage from "pages/recipes/RecipesPage/RecipesPage";
+import AddSidePage from "pages/sides/AddSidePage/AddSidePage";
+import EditSidePage from "pages/sides/EditSidePage/EditSidePage";
+import SidesMain from "pages/sides/SidesMain";
+import SidesPage from "pages/sides/SidesPage/SidesPage";
 import routes from "routes";
 
 export default function Main(): ReactElement {
@@ -32,6 +36,14 @@ export default function Main(): ReactElement {
                 element={<AddRecipePage />}
               />
             </Route>
+
+            <Route path="sides" element={<SidesMain />}>
+              <Route path="" element={<SidesPage />} />
+              <Route path=":recipeId" element={<RecipeDetailsPage />} />
+              <Route path=":recipeId/edit" element={<EditSidePage />} />
+              <Route path={routes.sidesAddRoute} element={<AddSidePage />} />
+            </Route>
+
             <Route path="menus" element={<MenusMain />}>
               <Route path=":menuId" element={<MenuDetailsPage />} />
               <Route path=":menuId/:dayName" element={<DayMenuDetailsPage />} />

client/src/components/NavigationLinks/NavigationLinks.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { IconBaguette, IconChefHat } from "@tabler/icons-react";
+import { IconBaguette, IconChefHat, IconCooker } from "@tabler/icons-react";
 import NavigationLink from "./NavigationLink";
 import routes from "routes";
 
@@ -22,6 +22,12 @@ const data = [
     label: "Recipes",
     route: routes.recipesRoute,
   },
+  {
+    icon: <IconCooker size={16} />,
+    color: "orange",
+    label: "Sides",
+    route: routes.sidesRoute,
+  },
 ];
 
 export default function NavigationLinks() {

client/src/components/PageTitle/PageTitle.tsx

@@ -36,10 +36,4 @@ function PageTitle({
   );
 }
 
-PageTitle.defaultProps = {
-  icon: null,
-  subHeader: null,
-  withBackButton: false,
-};
-
 export default PageTitle;

client/src/hooks/recipes/use-recipes.tsx

@@ -17,6 +17,17 @@ export function useRecipes(options = {}) {
   });
 }
 
+export const fetchSides = async () => {
+  const { data } = await apiClient.get<any>(`/recipes/?isSidePlate=true`);
+  return data;
+};
+
+export function useSides(options = {}) {
+  return useQuery<any, Error>(["recipes", "sides"], () => fetchSides(), {
+    ...options,
+  });
+}
+
 export const useAddrecipe = () => {
   const { t } = useTranslation();
   return useMutation(

client/src/locales/es/translation.json

@@ -3,10 +3,12 @@
   "Active": "Activa",
   "Add new product": "Añadir nuevo producto",
   "Add new recipe": "Añadir nueva receta",
+  "Add new side": "Añadir nuevo acompañamiento",
   "Add product": "Añadir producto",
   "Create weekly menu": "Crear menu semanal",
   "Choose a recipe for lunch": "Elije una receta para la comida",
   "Choose the lunch of the day": "Elige la comida del día",
+  "Choos the meal of the day": "Elige la comida del día",
   "Credits": "Créditos",
   "Dinner": "Cena",
   "Enabled": "Activada",
@@ -17,6 +19,7 @@
   "Initialize recipes": "Inicializar recetas",
   "Loading...": "Cargando...",
   "Loading products...": "Cargando productos...",
+  "Loading products and side meals...": "Cargando productos y acompañamientos...",
   "Lunch": "Comida",
   "Lunch of the day": "Comida del día",
   "Monday": "Lunes",
@@ -30,12 +33,15 @@
   "FRUITS": "Frutas",
   "GRAIN_NUTS_BAKING": "Cereales, frutos secos y panadería",
   "LEGUMES": "Legumbres",
+  "Meal": "Comida",
+  "Meal of the day": "Comida del día",
   "MEAT_SASUAGE": "Carne y embutido",
   "PASTA_RICE": "Pasta y arroz",
   "Products": "Productos",
   "PRODUCT_FORM_HELP_TEXT": "Añade un producto a tu lista de productos utilizando este formulario. Puedes establecer un nombre y un tipo.",
   "Recipes": "Recetas",
   "Seasons": "Estaciones",
+  "Sides": "Acompañamientos",
   "Type": "Tipo",
   "VEGETABLES": "Verduras",
   "Version": "Versión",