issue bewildergeist#1

lesson-04/remix-site/app/db/db.json

@@ -1,19 +1,39 @@
 {
-  "posts": [
+  "recipes": [
     {
       "id": "1",
-      "title": "Post 1",
-      "body": "This is test post #1"
+      "title": "Pizza",
+      "ingredients": [
+        "Pizza sauce",
+        "cheese, pepperoni",
+        "dressing"
+      ],
+      "body": "This is your standard danish pizza"
     },
     {
       "id": "2",
-      "title": "Post 2",
-      "body": "This is test post #2"
+      "title": "Lasagne",
+      "ingredients": [
+        "Chopped tomatoes",
+        "lasagne plates",
+        "ground beef",
+        "onions",
+        "garlic",
+        "cheese",
+        "bechamel"
+      ],
+      "body": "This is your standard lasagne"
     },
     {
       "id": "3",
-      "title": "Post 3",
-      "body": "This is test post #3"
+      "title": "Gnocci",
+      "ingredients": [
+        "Potatoes",
+        "flour",
+        "vegetables of your choice",
+        "tomato sauce"
+      ],
+      "body": "This is your standard gnocci"
     }
   ]
-}
+}

lesson-04/remix-site/app/db/db.server.js

@@ -6,5 +6,5 @@ const adapter = new JSONFileSync(file);
 const db = new LowSync(adapter);
 
 db.read();
-db.data = db.data || { posts: [] };
+db.data = db.data || { recipes: [] };
 export default db;

lesson-04/remix-site/app/root.jsx

@@ -9,13 +9,13 @@ export const links = () => [
 ];
 
 export const meta = () => ({
-  description: "An example blog",
+  description: "A recipe blog",
   keywords: "remix, javascript",
 });
 
 export default function App() {
   return (
-    <Document title="Remix Blog">
+    <Document title="Recipe Blog">
       <Layout>
         <Outlet />
       </Layout>
@@ -47,10 +47,10 @@ function Layout({ children }) {
     <>
       <nav className="navbar">
         <Link to="/" className="logo">
-          Remix Blog
+          Recipe Blog
         </Link>
         <ul className="nav">
-          <Link to="/posts">Posts</Link>
+          <Link to="/recipes">Recipes</Link>
         </ul>
       </nav>
       <div className="container">{children}</div>

lesson-04/remix-site/app/routes/index.jsx

@@ -2,7 +2,7 @@ export default function Home() {
   return (
     <div>
       <h1>Welcome</h1>
-      <p>This site is full of great posts. Enjoy!</p>
+      <p>This site is full of great recipes. Enjoy!</p>
     </div>
   );
 }

lesson-04/remix-site/app/routes/posts.jsx → lesson-04/remix-site/app/routes/recipes.jsx

@@ -1,6 +1,6 @@
 import { Outlet } from "remix";
 
-export default function Posts() {
+export default function Recipes() {
   return (
     <>
       <Outlet />

lesson-04/remix-site/app/routes/posts/$postId.jsx → lesson-04/remix-site/app/routes/recipes/$recipeId.jsx

@@ -3,37 +3,38 @@ import { useLoaderData } from "remix";
 import db from "~/db/db.server";
 
 export const loader = async function ({ params }) {
-  const post = db.data.posts.find((p) => p.id === params.postId);
+  const recipe = db.data.recipes.find((p) => p.id === params.recipeId);
 
-  if (!post) {
-    throw new Error("Post not found");
+  if (!recipe) {
+    throw new Error("Recipe not found");
   }
   return {
-    post,
+    recipe,
   };
 };
 
 export const action = async function ({ request, params }) {
   const form = await request.formData();
   if (form.get("_method") === "delete") {
-    db.data.posts = db.data.posts.filter((p) => p.id !== params.postId);
+    db.data.recipes = db.data.recipes.filter((p) => p.id !== params.recipeId);
     db.write();
-    return redirect("/posts");
+    return redirect("/recipes");
   }
 };
 
 export default function Post() {
-  const { post } = useLoaderData();
+  const { recipe } = useLoaderData();
 
   return (
     <div>
       <div className="page-header">
-        <h1>{post.title}</h1>
+        <h1>{recipe.title}</h1>
         <Link to=".." className="btn btn-reverse">
           Back
         </Link>
       </div>
-      <p className="page-content">{post.body}</p>
+      <h2 class="page-content">{recipe.ingredients}</h2>
+      <p className="page-content">{recipe.body}</p>
       <div className="page-footer">
         <form method="post">
           <input type="hidden" name="_method" value="delete" />

lesson-04/remix-site/app/routes/recipes/index.jsx

@@ -0,0 +1,30 @@
+import { Link, useLoaderData } from "remix";
+import db from "~/db/db.server.js";
+
+export async function loader() {
+  return db.data.recipes;
+}
+
+export default function RecipeItems() {
+  const recipes = useLoaderData();
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Recipes</h1>
+        <Link to="/recipes/new" className="btn">
+          New recipe
+        </Link>
+      </div>
+      <ul className="posts-list">
+        {recipes.map((recipe) => (
+          <li key={recipe.id}>
+            <Link to={recipe.id}>
+              <h3>{recipe.title}</h3>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

lesson-04/remix-site/app/routes/posts/new.jsx → lesson-04/remix-site/app/routes/recipes/new.jsx

@@ -4,20 +4,26 @@ import db from "~/db/db.server";
 export const action = async ({ request }) => {
   const form = await request.formData();
   const title = form.get("title");
+  const ingredients = form.get("ingredients");
   const body = form.get("body");
+
+  const ingredientsArray = ingredients
+    .split(",")
+    .map((string) => string.trim());
+
 
   const uuid = new Date().getTime().toString(16);
-  db.data.posts.push({ id: uuid, title, body });
+  db.data.recipes.push({ id: uuid, title, ingredients: ingredientsArray, body });
   db.write();
-  return redirect(`/posts/${uuid}`);
+  return redirect(`/recipes/${uuid}`);
 };
 
-export default function NewPost() {
+export default function NewRecipe() {
   return (
     <>
       <div className="page-header">
-        <h1>New Post</h1>
-        <Link to="/posts" className="btn btn-reverse">
+        <h1>New Recipe</h1>
+        <Link to="/recipes" className="btn btn-reverse">
           Back
         </Link>
       </div>
@@ -27,12 +33,18 @@ export default function NewPost() {
             <label htmlFor="title">Title</label>
             <input type="text" name="title" id="title" />
           </div>
+
+          <div className="form-control">
+            <label htmlFor="ingredients">Ingredients</label>
+            <input type="text" name="ingredients" id="ingredients" />
+          </div>
+
           <div className="form-control">
-            <label htmlFor="body">Post body</label>
+            <label htmlFor="body">Description</label>
             <textarea name="body" id="body"></textarea>
           </div>
           <button className="btn btn-block" type="submit">
-            Add Post
+            Add Recipe
           </button>
         </form>
       </div>