[WIP]

frontend/README.md

@@ -1,34 +1,21 @@
-## Usage
+# Frontend application
 
-Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+## Development
 
-This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+1. Run the vite development server.
 
 ```bash
-$ npm install # or pnpm install or yarn install
+npm run dev
 ```
 
-### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+2. Navigate to [http://localhost:3000](http://localhost:3000).
 
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm run dev` or `npm start`
-
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br>
-
-### `npm run build`
-
-Builds the app for production to the `dist` folder.<br>
-It correctly bundles Solid in production mode and optimizes the build for the best performance.
+## Deployment
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+1. Build the app.
 
-## Deployment
+```bash
+npm run build
+```
 
-You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
+2. Deploy the `dist` folder.

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>

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>
     );
 }

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 {

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>

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>

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 };