[WIP]

cmvanb · Sep 30, 2024 · 0b6b881 · 0b6b881
1 parent a2692ee
commit 0b6b881
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 19 deletions.
diff --git a/frontend/src/components/DrawerMenu.jsx b/frontend/src/components/DrawerMenu.jsx
@@ -14,20 +14,20 @@ function DrawerMenu(props) {
                         </button>
                     </nav>
                 </header>
-                <a href="/mealplanner">
+                <a href="/mealplanner" onClick={closeMenu}>
                     <i>calendar_month</i>
                     <span>Meal Planner</span>
                 </a>
-                <a href="/recipes">
+                <a href="/recipes" onClick={closeMenu}>
                     <i>menu_book</i>
                     <span>Recipes</span>
                 </a>
                 <hr class="medium" />
-                <a href="/settings">
+                <a href="/settings" onClick={closeMenu}>
                     <i>settings</i>
                     <span>Settings</span>
                 </a>
-                <a>
+                <a onClick={closeMenu}>
                     <i>logout</i>
                     <span>Log out</span>
                 </a>

diff --git a/frontend/src/pages/Login.jsx → frontend/src/pages/Login/index.jsx b/frontend/src/pages/Login.jsx → frontend/src/pages/Login/index.jsx
diff --git a/frontend/src/pages/MealPlanner.jsx → frontend/src/pages/MealPlanner/index.jsx b/frontend/src/pages/MealPlanner.jsx → frontend/src/pages/MealPlanner/index.jsx
@@ -1,7 +1,9 @@
 function MealPlanner() {
     return (
         <article>
-            <h4>MEAL PLANNER</h4>
+            <section class="header center-align">
+                <h4>Meal Planner</h4>
+            </section>
         </article>
     );
 }

diff --git a/frontend/src/pages/NotFound.jsx → frontend/src/pages/NotFound/index.jsx b/frontend/src/pages/NotFound.jsx → frontend/src/pages/NotFound/index.jsx
diff --git a/frontend/src/pages/Recipe/Recipe.css b/frontend/src/pages/Recipe/Recipe.css
@@ -1,8 +1,16 @@
-#recipe-controls {
+#recipe-close-button {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 10;
+    margin: 0;
+}
+
+#recipe-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
 }
 
 #recipe-image {

diff --git a/frontend/src/pages/Recipe/index.jsx b/frontend/src/pages/Recipe/index.jsx
@@ -1,20 +1,22 @@
-import './Recipe.css';
+import { useParams } from '@solidjs/router';
 
 import { useRecipeContext } from '../../contexts/RecipeContext';
 
+import './Recipe.css';
+
 function Recipe() {
     const { recipeStore } = useRecipeContext();
-    const recipe = recipeStore.recipes[0];
+    const params = useParams();
+    const recipe = recipeStore.recipes[params.id];
 
     return (
         <article class="medium-elevate no-padding">
-            <nav id="recipe-controls">
-                <h6 class="max"></h6>
+            <img class="responsive" id="recipe-image" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
+            <nav id="recipe-close-button">
                 <button class="transparent circle extra" onClick={() => location.href='/recipes'}>
                     <i>close</i>
                 </button>
             </nav>
-            <img class="responsive" id="recipe-image" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
             <div class="padding">
                 <section class="header center-align">
                     <h4>{recipe.title}</h4>
@@ -38,6 +40,25 @@ function Recipe() {
                 <section class="content center-align">
                     <p>{recipe.description}</p>
                 </section>
+                <section id="recipe-controls" class="content">
+                    <nav class="no-space">
+                        <button class="border fill left-round" onClick={() => console.warn('edit')}>
+                            <i>edit</i>
+                            <span>Edit</span>
+                        </button>
+                        <button class="border fill no-round" onClick={() => console.warn('delete')}>
+                            <i>delete</i>
+                            <span>Delete</span>
+                        </button>
+                        <button class="border fill right-round" onClick={() => console.warn('export')}>
+                            <i>download</i>
+                            <span>Export</span>
+                        </button>
+                    </nav>
+                </section>
+                <div>
+                    <hr class="large" />
+                </div>
                 <section id="recipe-columns" class="content grid">
                     <div class="s12 m6 recipe-col">
                         <h6>Ingredients</h6>

diff --git a/frontend/src/pages/Recipes/index.jsx b/frontend/src/pages/Recipes/index.jsx
@@ -19,14 +19,14 @@ function Recipes() {
                 </menu>
             </div>
             <div class="grid">
-                <For each={recipes}>
-                    {(recipe) => (
+                <For each={Object.keys(recipes)}>
+                    {(recipeId) => (
                         <article class="recipe-card medium-elevate no-padding s12 m6 l4">
-                            <a href={`/recipes/${recipe.id}`}>
+                            <a href={`/recipes/${recipeId}`}>
                                 <img class="responsive small" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
                                 <div class="padding">
-                                    <h6>{recipe.title}</h6>
-                                    <p>{recipe.description}</p>
+                                    <h6>{recipes[recipeId].title}</h6>
+                                    <p>{recipes[recipeId].description}</p>
                                 </div>
                             </a>
                         </article>

diff --git a/frontend/src/pages/Settings.jsx → frontend/src/pages/Settings/index.jsx b/frontend/src/pages/Settings.jsx → frontend/src/pages/Settings/index.jsx
diff --git a/frontend/src/pages/Splash.jsx → frontend/src/pages/Splash/index.jsx b/frontend/src/pages/Splash.jsx → frontend/src/pages/Splash/index.jsx
diff --git a/frontend/src/stores/recipeStore.js b/frontend/src/stores/recipeStore.js
@@ -2,8 +2,16 @@ import { createStore } from 'solid-js/store';
 
 import { chicken_korma } from './mockData';
 
-const [ recipeStore, setRecipeStore ] = createStore({
-    recipes: [...Array(12).keys()].map((id) => ({ ...chicken_korma, id: id + 1 }) ),
-});
+const initialState = {
+    // That's a lot of korma!
+    recipes: [...Array(12).keys()]
+        .map((index) => ({ ...chicken_korma, id: index + 1 }))
+        .reduce((acc, e) => ({
+            ...acc,
+            [e['id']]: e,
+        }), {}),
+};
+
+const [ recipeStore, setRecipeStore ] = createStore(initialState);
 
 export { recipeStore, setRecipeStore };