Aadded view for all recipies

app/javascript/components/Recipes.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class Recipes extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        recipes: []
+      };
+    }
+
+    componentDidMount() {
+        const url = "/api/v1/recipes/index";
+        fetch(url)
+          .then(response => {
+            if (response.ok) {
+              return response.json();
+            }
+            throw new Error("Network response was not ok.");
+          })
+          .then(response => this.setState({ recipes: response }))
+          .catch(() => this.props.history.push("/"));
+    }
+
+    render() {
+        const { recipes } = this.state;
+        const allRecipes = recipes.map((recipe, index) => (
+          <div key={index} className="col-md-6 col-lg-4">
+            <div className="card mb-4">
+              <img
+                src={recipe.image}
+                className="card-img-top"
+                alt={`${recipe.name} image`}
+              />
+              <div className="card-body">
+                <h5 className="card-title">{recipe.name}</h5>
+                <Link to={`/recipe/${recipe.id}`} className="btn custom-button">
+                  View Recipe
+                </Link>
+              </div>
+            </div>
+          </div>
+        ));
+        const noRecipe = (
+          <div className="vw-100 vh-50 d-flex align-items-center justify-content-center">
+            <h4>
+              No recipes yet. Why not <Link to="/new_recipe">create one</Link>
+            </h4>
+          </div>
+        );
+
+        return (
+          <>
+            <section className="jumbotron jumbotron-fluid text-center">
+              <div className="container py-5">
+                <h1 className="display-4">Recipes for every occasion</h1>
+                <p className="lead text-muted">
+                  We’ve pulled together our most popular recipes, our latest
+                  additions, and our editor’s picks, so there’s sure to be something
+                  tempting for you to try.
+                </p>
+              </div>
+            </section>
+            <div className="py-5">
+              <main className="container">
+                <div className="text-right mb-3">
+                  <Link to="/recipe" className="btn custom-button">
+                    Create New Recipe
+                  </Link>
+                </div>
+                <div className="row">
+                  {recipes.length > 0 ? allRecipes : noRecipe}
+                </div>
+                <Link to="/" className="btn btn-link">
+                  Home
+                </Link>
+              </main>
+            </div>
+          </>
+        );
+      }
+  }
+  export default Recipes;

app/javascript/routes/Index.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Home from "../components/Home";
+import Recipes from "../components/Recipes";
 
 export default (
   <Router>
     <Switch>
       <Route path="/" exact component={Home} />
+      <Route path="/recipes" exact component={Recipes} />
     </Switch>
   </Router>
 );

db/seeds.rb

@@ -1,7 +1,7 @@
-# This file should contain all the record creation needed to seed the database with its default values.
-# The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup).
-#
-# Examples:
-#
-#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
-#   Character.create(name: 'Luke', movie: movies.first)
+9.times do |i|
+    Recipe.create(
+      name: "Recipe #{i + 1}",
+      ingredients: '227g tub clotted cream, 25g butter, 1 tsp cornflour,100g parmesan, grated nutmeg, 250g fresh fettuccine or tagliatelle, snipped chives or chopped parsley to serve (optional)',
+      instruction: 'In a medium saucepan, stir the clotted cream, butter, and cornflour over a low-ish heat and bring to a low simmer. Turn off the heat and keep warm.'
+    )
+  end