pgarr · pgarr · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm test
+      - run: npm run build --if-present
diff --git a/dist/assets/CategoriesBar-BbRhE4Cs.js b/dist/assets/CategoriesBar-BbRhE4Cs.js
diff --git a/dist/assets/Home-Bi34brdX.js b/dist/assets/Home-Bi34brdX.js
@@ -0,0 +1 @@
+import{k as s,r as t,j as a}from"./index-BXnzDVwr.js";const o=()=>{const e=s();return t.useEffect(()=>{e("/recipes")}),a.jsx("div",{})};export{o as default};
diff --git a/dist/assets/RecipeDetails-BJWCttBR.js b/dist/assets/RecipeDetails-BJWCttBR.js
@@ -0,0 +1,50 @@
+import{H as t,g as d,j as n,m as c,l as p,F as m,n as h,f as o,o as g}from"./index-BXnzDVwr.js";import{C as j,L as u}from"./CategoriesBar-BbRhE4Cs.js";const f=t.div`
+  margin: 0 20px;
+`,w=t.div`
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 600px;
+  width: auto;
+
+  @media only all and (min-width: 1000px) {
+    min-width: 400px;
+  }
+`,x=t.div`
+  line-height: 1;
+  margin-bottom: 15px;
+  min-width: 100px;
+
+  @media only all and (max-width: 420px) {
+    min-width: 80px;
+  }
+`,y=t(x)`
+  flex: 3 1 70%;
+  padding-right: 10px;
+
+  @media only all and (max-width: 420px) {
+    flex: 3 1 55%;
+`,C=t(x)`
+  flex: 1 1 30%;
+
+  @media only all and (max-width: 420px) {
+    flex: 1 1 45%;
+`,v=({ingredients:i})=>{const{t:e}=d();return n.jsxs(f,{children:[n.jsx("h3",{children:e("ingredients_head")}),n.jsx(w,{children:i.map((s,l)=>n.jsxs(c.Fragment,{children:[n.jsx(y,{children:s.title}),n.jsx(C,{children:`${s.amount||""} ${p.toLower(s.unit)}`})]},l))})]})},L=t.div`
+  margin: 0 10px;
+`,R=t.p`
+  text-align: justify;
+  text-justify: inter-word;
+`,F=({preparation:i})=>{const{t:e}=d();return n.jsxs(L,{children:[n.jsx("h3",{children:e("preparation")}),n.jsx(R,{children:i})]})},T=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+  align-items: center;
+  margin-top: 40px;
+
+  @media only all and (min-width: 1000px) {
+    align-items: flex-start;
+    flex-direction: row;
+  }
+`,b=t(j)`
+  display: inline;
+  margin-right: 20px;
+`,A=({recipe:i})=>n.jsxs(n.Fragment,{children:[n.jsx("h2",{children:i.title}),n.jsx(b,{categories:i.categories}),i.time?n.jsxs("span",{children:[n.jsx(m,{icon:h})," ",i.time,"'"]}):null,n.jsxs(T,{children:[i.ingredients.length>0?n.jsx(v,{ingredients:i.ingredients}):null,i.preparation&&n.jsx(F,{preparation:i.preparation})]})]}),D=()=>{const i=o(a=>a.recipes.recipes),e=o(a=>a.recipes.loading),s=g(),l=Number(s.id)||-1,r=i.find(a=>a.id===l);return n.jsx(u,{isLoading:e,children:r&&n.jsx(A,{recipe:r})})};export{D as default};
diff --git a/dist/assets/RecipesList-d9SdWYK4.js b/dist/assets/RecipesList-d9SdWYK4.js
diff --git a/dist/assets/index-BXnzDVwr.js b/dist/assets/index-BXnzDVwr.js
diff --git a/dist/assets/index-BcJajN2L.css b/dist/assets/index-BcJajN2L.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site with selected dishes recipes" />
+  <link rel="manifest" href="/manifest.json" />
+  <title>Dev Cooking</title>
+  <script type="module" crossorigin src="/assets/index-BXnzDVwr.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-BcJajN2L.css">
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

diff --git a/dist/manifest.json b/dist/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "dev-cooking",
+  "name": "Cooking application",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/dist/robots.txt b/dist/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/components/Recipes/RecipesDetails/RecipeDetails.tsx b/src/components/Recipes/RecipesDetails/RecipeDetails.tsx
@@ -8,11 +8,12 @@ const RecipeDetails = () => {
   const recipes = useAppSelector((state) => state.recipes.recipes);
   const loading = useAppSelector((state) => state.recipes.loading);
   const params = useParams();
-  const selectedRecipe = recipes.find((recipe) => recipe.id == params.id);
+  const id = Number(params.id) || -1;
+  const selectedRecipe = recipes.find((recipe) => recipe.id === id);
 
   return (
     <LoadingContainer isLoading={loading}>
-      <RecipeCard recipe={selectedRecipe} />
+      {selectedRecipe && <RecipeCard recipe={selectedRecipe} />}
     </LoadingContainer>
   );
 };

diff --git a/src/components/Recipes/RecipesList/FiltersBar.tsx b/src/components/Recipes/RecipesList/FiltersBar.tsx
@@ -7,6 +7,7 @@ import {
   filterCategories,
 } from "../../../store/slices/filtersSlice";
 import { useAppDispatch, useAppSelector } from "../../../store/store";
+import { CategoryOption } from "../../../types";
 
 const FiltersButton = styled.button`
   background-color: #3d94f6;
@@ -81,7 +82,9 @@ const FiltersBar = () => {
 
   const { t } = useTranslation();
 
-  const [categoriesOptions, setCategoriesOptions] = useState([]);
+  const [categoriesOptions, setCategoriesOptions] = useState<CategoryOption[]>(
+    [],
+  );
   const [showFilters, setShowFilters] = useState(false);
 
   const onFilterNameChange: React.ChangeEventHandler<HTMLInputElement> = (
@@ -90,7 +93,7 @@ const FiltersBar = () => {
     dispatch(filterName(event.target.value));
   };
 
-  const onFilterCategoriesChange = (selectedOptions: MultiValue<unknown>) => {
+  const onFilterCategoriesChange = (selectedOptions: CategoryOption[]) => {
     dispatch(filterCategories(selectedOptions));
   };
 
@@ -123,9 +126,14 @@ const FiltersBar = () => {
             styles={selectStyles}
             placeholder={t("categories_name") + "..."}
             closeMenuOnSelect={false}
-            isMulti
+            isMulti={true}
             options={categoriesOptions}
-            onChange={onFilterCategoriesChange}
+            onChange={
+              //TODO: react-select types are not working properly
+              onFilterCategoriesChange as (
+                selectedOptions: MultiValue<unknown>,
+              ) => void
+            }
             value={categoriesSelected}
           />
         </Container>

diff --git a/src/components/Recipes/RecipesList/RecipesList.tsx b/src/components/Recipes/RecipesList/RecipesList.tsx
@@ -12,8 +12,6 @@ const isCategoriesMatched = (
   categoriesFiltered: { value: string; label: string }[],
   recipeCategories: string[],
 ) => {
-  console.log(categoriesFiltered);
-  console.log(recipeCategories);
   if (categoriesFiltered.length === 0) return true;
   const categoriesValues = categoriesFiltered.map((category) => category.value);
   return recipeCategories.some(
@@ -38,8 +36,8 @@ const RecipesList = () => {
     setFilteredRecipes(recs);
   }, [recipes, nameFilter, categoriesFilter]);
 
-  const recipeSelectedHandler = (id: string) => {
-    void navigate("/recipes/" + id);
+  const recipeSelectedHandler = (id: number) => {
+    void navigate("/recipes/" + id.toString());
   };
 
   return (

diff --git a/src/types.ts b/src/types.ts
@@ -11,3 +11,8 @@ export interface Recipe {
   ingredients: Ingredient[];
   preparation: string;
 }
+
+export interface CategoryOption {
+  value: string;
+  label: string;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
 
 interface ImportMetaEnv {
   readonly VITE_FIREBASE_API_KEY: string;

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,8 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from "vite";
 import svgr from "vite-plugin-svgr";
 import react from "@vitejs/plugin-react";
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), svgr()],
   base: "/",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{k as s,r as t,j as a}from"./index-BXnzDVwr.js";const o=()=>{const e=s();return t.useEffect(()=>{e("/recipes")}),a.jsx("div",{})};export{o as default};