Merge pull request #7 from ptct-secret-recipes-3/valeriy-lysenko

built HomePage component

src/components/HomePage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { axiosWithAuth } from "./axiosWithAuth";
+import { Link } from "react-router-dom";
 
 const HomePage = () => {
 
@@ -8,25 +9,51 @@ const HomePage = () => {
   useEffect(() => {
     const getRecipes = () => {
       axiosWithAuth()
-        .get("#")
+        .get("api/recipes")
         .then((res) => {
           setRecipe(res.data);
         })
         .catch((err) => {
           console.error({err});
         });
     };
-    getDatData();
+    getRecipes();
   }, []);
 
 
 
   return (
-    <div>
+    <section>
+      <div>
+        {recipe.map((res) => (
+            <Link to={`/recipe/${res.id}`} key={res.id}>            
+              <section className="recipeCard">
+                <h2>{res.title}</h2>
+                <div>
+                  <p>Source: </p> {res.source}
+                </div>
+                <div>
+                  <p>Ingredients: </p> {res.ingredients}
+                </div>
+                <div>
+                  <p>Instructions: </p> {res.instructions}
+                </div>
+                <div>
+                  <p>Category: </p> {res.category}
+                </div>
+              </section>     
+            </Link>
+        ))}
+      </div>
+
+      <div>         
+          <Link to="/RecipeForm">
+            <button> Create New Recipe </button>
+          </Link>
+      </div>
 
-      <h1>Our Recipes</h1>
-
-    </div>
+
+    </section>
   );
 };