Adding new features

madshoe47 · Feb 23, 2022 · cdce2e7 · cdce2e7
1 parent 5803ed4
commit cdce2e7
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/lesson-04/remix-site/app/db/db.json b/lesson-04/remix-site/app/db/db.json
@@ -3,22 +3,53 @@
     {
       "id": "1",
       "title": "Spaghetti",
-      "body": "This is test post #1"
+      "body": "This is test post #1",
+      "seperatedIngredients": [
+        "apples",
+        " cinamon",
+        " dough"
+      ],
+      "author": "Kasia",
+      "img": "https://ocdn.eu/pulscms-transforms/1/iGxk9kpTURBXy8wYTQ2YmY1M2NlYTVlMTM2NWU2MjdiMmRjODExZTUxZi5qcGeTlQMAH80D6M0CMpMJpjA2NTMzYgaTBc0EsM0CdoGhMAE/spaghetti-puttanesca.jpg"
     },
     {
       "id": "2",
       "title": "Muffins",
-      "body": "This is test post #2"
+      "body": "This is test post #2",
+      "seperatedIngredients": [
+        "flour",
+        " eggs",
+        " milk",
+        "chocolate"
+      ],
+      "author": "Kasia",
+      "img": "https://www.valdemarsro.dk/wp-content/2021/01/vaniljemuffins.jpg"
     },
     {
       "id": "3",
       "title": "Tomato Soup",
-      "body": "This is test post #3"
+      "body": "This soup is everything I want tomato soup to be! It’s rich and creamy, yet doesn’t weigh me down. It’s bursting with amazing tomato flavor, yet it’s made from canned tomatoes.",
+      "seperatedIngredients": [
+        "tomatos",
+        " peper",
+        " salt",
+        "onion",
+        "olive oil"
+      ],
+      "author": "Kasia",
+      "img": "https://images.unsplash.com/photo-1547592166-23ac45744acd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
     },
     {
       "id": "17f259f2ef0",
       "title": "Lasagne",
-      "body": "This is lasagne"
+      "body": "This is lasagne",
+      "seperatedIngredients": [
+        "tomatos",
+        " lasagne pasta",
+        " meat"
+      ],
+      "author": "Magda",
+      "img": "https://images.unsplash.com/photo-1614961909013-1e2212a2ca87?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80"
     },
     {
       "id": "17f25a5e53a",
@@ -28,7 +59,21 @@
         "apples",
         " cinamon",
         " dough"
-      ]
+      ],
+      "author": "Magda",
+      "img": "https://images.unsplash.com/photo-1587248720327-8eb72564be1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80"
+    },
+    {
+      "id": "17f25e97ee3",
+      "title": "Curry Ramen",
+      "body": "Curry",
+      "seperatedIngredients": [
+        "ramen pasta",
+        " curry",
+        " coconut milk"
+      ],
+      "author": "Magda",
+      "img": "https://www.kwestiasmaku.com/sites/v123.kwestiasmaku.com/files/curry_ramen_01.jpg"
     }
   ]
 }
diff --git a/lesson-04/remix-site/app/routes/index.jsx b/lesson-04/remix-site/app/routes/index.jsx
@@ -1,8 +1,8 @@
 export default function Home() {
   return (
     <div>
-      <h1>Welcome</h1>
-      <p>This site is full of great recipes. Enjoy!</p>
+      <h1>Welcome to our Recipes Blog</h1>
+      <p>This site is full of great recipes. Enjoy! By Kasia&Magda</p>
     </div>
   );
 }
diff --git a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx
@@ -33,6 +33,7 @@ export default function Recipe() {
           Back
         </Link>
       </div>
+      <img src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover"}} ></img>
       <h2>Description</h2>
       <p className="page-content">{recipe.body}</p>
       <h2>Ingredients</h2>
@@ -44,6 +45,8 @@ export default function Recipe() {
               </li>
           )
         })}</ul>
+        <h2>Author</h2>
+        <p className="page-content">{recipe.author}</p>
       <div className="page-footer">
         <form method="post">
           <input type="hidden" name="_method" value="delete" />

diff --git a/lesson-04/remix-site/app/routes/recipes/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx
@@ -21,6 +21,8 @@ export default function PostItems() {
           <li key={recipe.id}>
             <Link to={recipe.id}>
               <h3>{recipe.title}</h3>
+              <img src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover", borderRadius:"8px"}} ></img>
+              <p className="page-content">Author: {recipe.author}</p>
             </Link>
           </li>
         ))}

diff --git a/lesson-04/remix-site/app/routes/recipes/new.jsx b/lesson-04/remix-site/app/routes/recipes/new.jsx
@@ -7,9 +7,11 @@ export const action = async ({ request }) => {
   const body = form.get("body");
   const ingredients = form.get("ingredients");
   const seperatedIngredients = ingredients.split(",");
+  const author = form.get("author");
+  const img = form.get("img");
 
   const uuid = new Date().getTime().toString(16);
-  db.data.recipes.push({ id: uuid, title, body, seperatedIngredients });
+  db.data.recipes.push({ id: uuid, title, body, seperatedIngredients, author, img });
   db.write();
   return redirect(`/recipes/${uuid}`);
 };
@@ -37,6 +39,14 @@ export default function NewRecipe() {
             <label htmlFor="ingredients">Ingredients</label>
             <input type="text" name="ingredients" id="ingredients" />
           </div>
+          <div className="form-control">
+            <label htmlFor="author">Author</label>
+            <input type="text" name="author" id="author" />
+          </div>
+          <div className="form-control">
+            <label htmlFor="img">Picture URL</label>
+            <input type="text" name="img" id="img" />
+          </div>
           <button className="btn btn-block" type="submit">
             Add Recipe
           </button>