From 9e5dea026a026515f4c9b89b5f2d1689c3891bcb Mon Sep 17 00:00:00 2001
From: William Yang <williamyang93@gmail.com>
Date: Fri, 29 Jan 2021 23:03:15 -0800
Subject: [PATCH 1/5] Started redesigning recipe page with tailwind UI

---
 src/components/Recipe/RecipeCard.js | 84 ++++++++++++++++-------------
 src/components/Recipe/index.js      | 32 +++++------
 2 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/components/Recipe/RecipeCard.js b/src/components/Recipe/RecipeCard.js
index b85ac94..340ced1 100644
--- a/src/components/Recipe/RecipeCard.js
+++ b/src/components/Recipe/RecipeCard.js
@@ -1,53 +1,63 @@
 import { Link, useRouteMatch } from 'react-router-dom'
 
-const RecipeCard = ({ id, brew_type, rating, is_private, barista, bean }) => {
+const RecipeCard = ({
+  id,
+  brew_type,
+  about,
+  rating,
+  date_added,
+  name,
+  is_private,
+  barista,
+  bean,
+}) => {
   const { url } = useRouteMatch()
   return (
-    <li className='col-span-1 flex flex-col text-center bg-white rounded-lg shadow'>
-      <Link className='flex-1 flex flex-col p-8' to={`${url}/${id}`}>
+    <Link
+      className='flex flex-col rounded-lg shadow-lg overflow-hidden'
+      to={`${url}/${id}`}
+    >
+      <div className='flex-shrink-0'>
         <img
-          className='w-32 h-32 flex-shrink-0 mx-auto bg-black rounded-full'
-          src={bean.img}
+          className='h-48 w-full object-cover'
+          src='data:image/jpeg;base64,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'
           alt=''
         />
-        <h3 className='mt-6 text-gray-900 text-sm leading-5 font-medium'>
-          {barista.display_name}
-        </h3>
-        <dl className='mt-1 flex-grow flex flex-col justify-between'>
-          <dt className='sr-only'>Title</dt>
-          <dd className='text-gray-500 text-sm leading-5'>{brew_type}</dd>
-        </dl>
-      </Link>
-      <div className='border-t border-gray-200'>
-        <div className='-mt-px flex'>
-          <div className='w-0 flex-1 flex border-r border-gray-200'>
-            <div className='relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150'>
-              <svg
-                className='w-5 h-5 text-gray-400'
-                viewBox='0 0 20 20'
-                fill='currentColor'
-              >
-                <path d='M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z' />
-                <path d='M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z' />
-              </svg>
-              <span className='ml-3'>Favorite</span>
+      </div>
+      <div className='flex-1 bg-white p-6 flex flex-col justify-between'>
+        <div className='flex-1'>
+          <div className='text-sm font-medium text-indigo-600'>
+            <div className='hover:underline'>{brew_type}</div>
+          </div>
+          <div className='block mt-2'>
+            <div className='text-xl font-semibold text-gray-900'>{name}</div>
+            <div className='mt-3 text-base text-gray-500'>{about}</div>
+          </div>
+        </div>
+        <div className='mt-6 flex items-center'>
+          <div className='flex-shrink-0'>
+            <div>
+              <span className='sr-only'>{barista.display_name}</span>
+              <img
+                className='h-10 w-10 rounded-full'
+                src='https://c.files.bbci.co.uk/1AD2/production/_98866860_gettyimages-486020904.jpg'
+                alt=''
+              />
             </div>
           </div>
-          <div className='-ml-px w-0 flex-1 flex'>
-            <div className='relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150'>
-              <svg
-                className='w-5 h-5 text-gray-400'
-                viewBox='0 0 20 20'
-                fill='currentColor'
-              >
-                <path d='M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z' />
-              </svg>
-              <span className='ml-3'>Cart</span>
+          <div className='ml-3'>
+            <div className='text-sm font-medium text-gray-900'>
+              <div className='hover:underline'>{barista.display_name}</div>
+            </div>
+            <div className='flex space-x-1 text-sm text-gray-500'>
+              <time datetime={date_added}>{date_added}</time>
+              {/* <span aria-hidden='true'>&middot;</span> */}
+              {/* <span>3 min read</span> */}
             </div>
           </div>
         </div>
       </div>
-    </li>
+    </Link>
   )
 }
 
diff --git a/src/components/Recipe/index.js b/src/components/Recipe/index.js
index 5127c09..8acc219 100644
--- a/src/components/Recipe/index.js
+++ b/src/components/Recipe/index.js
@@ -24,29 +24,29 @@ const Recipes = () => {
   if (error) return <p>Oh no... {error.message}</p>
 
   return (
-    <div>
-      <div className='bg-gray-800 pb-32'>
-        <header className='py-10'>
-          <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
-            <h1 className='text-3xl leading-9 font-bold text-white'>Recipes</h1>
+    <div className='relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8'>
+      <div className='absolute inset-0'>
+        <div className='bg-white h-1/3 sm:h-2/3'></div>
+      </div>
+      <div className='relative max-w-7xl mx-auto'>
+        <div className='text-center'>
+          <h2 className='text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl'>
+            Recipes
+          </h2>
+          <div className='mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4'>
+            Explore coffee recipes here!
           </div>
           <Link
             to={`${url}/new`}
-            className='mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
+            className='mb-4 mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
           >
             new recipe
           </Link>
-        </header>
-      </div>
-      <main className='-mt-32'>
-        <div className='max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8'>
-          {/* <!-- Replace with your content --> */}
-          <ul className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-            {data && data.recipes.map((x, i) => <RecipeCard key={i} {...x} />)}
-          </ul>
-          {/* <!-- /End replace --> */}
         </div>
-      </main>
+        <div className='mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none'>
+          {data && data.recipes.map((x, i) => <RecipeCard key={i} {...x} />)}
+        </div>
+      </div>
     </div>
   )
 }

From 60ddb8475f0e953427efa87c620191b361fd6860 Mon Sep 17 00:00:00 2001
From: William Yang <williamyang93@gmail.com>
Date: Sun, 31 Jan 2021 18:59:35 -0800
Subject: [PATCH 2/5] Updated recipe details to new design. Added instructions
 field to adding recipe. Added date_added as a column.

---
 src/components/BrewTrak/Sidebar.js           |  10 +-
 src/components/DropDown/index.js             |   7 +-
 src/components/InputRow/index.js             |   9 +-
 src/components/Recipe/CreateRecipe.js        |   8 +
 src/components/Recipe/RecipeCard.js          |  17 +-
 src/components/Recipe/RecipeDetails.js       | 393 ++++++++++++++++++-
 src/components/Recipe/Review/RecipeReview.js |  61 ++-
 src/components/TextArea/index.js             |  11 +-
 src/queries/Recipe.js                        |  35 +-
 9 files changed, 490 insertions(+), 61 deletions(-)

diff --git a/src/components/BrewTrak/Sidebar.js b/src/components/BrewTrak/Sidebar.js
index a771b91..a9464bf 100644
--- a/src/components/BrewTrak/Sidebar.js
+++ b/src/components/BrewTrak/Sidebar.js
@@ -14,7 +14,7 @@ const Sidebar = ({ data, setId, setBrewSelected }) => {
           </p>
           <form className='mt-6 flex space-x-4' action='#'>
             <div className='flex-1 min-w-0'>
-              <label for='search' className='sr-only'>
+              <label htmlFor='search' className='sr-only'>
                 Search
               </label>
               <div className='relative rounded-md shadow-sm'>
@@ -29,9 +29,9 @@ const Sidebar = ({ data, setId, setBrewSelected }) => {
                     aria-hidden='true'
                   >
                     <path
-                      fill-rule='evenodd'
+                      fillRule='evenodd'
                       d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z'
-                      clip-rule='evenodd'
+                      clipRule='evenodd'
                     />
                   </svg>
                 </div>
@@ -57,9 +57,9 @@ const Sidebar = ({ data, setId, setBrewSelected }) => {
                 aria-hidden='true'
               >
                 <path
-                  fill-rule='evenodd'
+                  fillRule='evenodd'
                   d='M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z'
-                  clip-rule='evenodd'
+                  clipRule='evenodd'
                 />
               </svg>
               <span className='sr-only'>Search</span>
diff --git a/src/components/DropDown/index.js b/src/components/DropDown/index.js
index 098138b..2042411 100644
--- a/src/components/DropDown/index.js
+++ b/src/components/DropDown/index.js
@@ -1,13 +1,16 @@
 const Dropdown = ({ label, value, onChange, options }) => {
   return (
     <div>
-      <label for='location' class='block text-sm font-medium text-gray-700'>
+      <label
+        htmlFor='location'
+        className='block text-sm font-medium text-gray-700'
+      >
         {label}
       </label>
       <select
         id='location'
         name='location'
-        class='mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md'
+        className='mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md'
       >
         {options.map((value) => (
           <option key={value} value={value}>
diff --git a/src/components/InputRow/index.js b/src/components/InputRow/index.js
index 2905921..5856a28 100644
--- a/src/components/InputRow/index.js
+++ b/src/components/InputRow/index.js
@@ -8,10 +8,13 @@ const InputRow = ({
 }) => {
   return (
     <div>
-      <label for={label} class='block text-sm font-medium text-gray-700'>
+      <label
+        htmlFor={label}
+        className='block text-sm font-medium text-gray-700'
+      >
         {label}
       </label>
-      <div class='mt-1'>
+      <div className='mt-1'>
         <input
           type='text'
           name={label}
@@ -24,7 +27,7 @@ const InputRow = ({
           readOnly={readOnly}
         />
       </div>
-      <p class='mt-2 text-sm text-gray-500' id='email-description'>
+      <p className='mt-2 text-sm text-gray-500' id='email-description'>
         {description}
       </p>
     </div>
diff --git a/src/components/Recipe/CreateRecipe.js b/src/components/Recipe/CreateRecipe.js
index 56dbf39..711ed94 100644
--- a/src/components/Recipe/CreateRecipe.js
+++ b/src/components/Recipe/CreateRecipe.js
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import InputRow from 'components/InputRow'
 import Dropdown from 'components/DropDown'
+import TextArea from 'components/TextArea'
 import { useMutation } from 'urql'
 import { INSERT_RECIPES_ONE } from 'queries'
 import { useAuth } from 'context/AuthContext'
@@ -21,6 +22,7 @@ const CreateRecipe = (props) => {
     is_private: false,
     about: '',
     name: '',
+    instructions: '',
   })
   const [, insertRecipe] = useMutation(INSERT_RECIPES_ONE)
 
@@ -121,6 +123,12 @@ const CreateRecipe = (props) => {
         label='Rating'
         options={['1', '2', '3', '4', '5']}
       />
+      <TextArea
+        value={state.instructions}
+        onChange={onChangeGenerator('instructions')}
+        placeholder='Enter instructions here'
+        label='Brewer Instructions'
+      />
       <Dropdown
         value={state.is_private}
         onChange={onChangeGenerator('is_private')}
diff --git a/src/components/Recipe/RecipeCard.js b/src/components/Recipe/RecipeCard.js
index 340ced1..97f57a1 100644
--- a/src/components/Recipe/RecipeCard.js
+++ b/src/components/Recipe/RecipeCard.js
@@ -1,4 +1,6 @@
 import { Link, useRouteMatch } from 'react-router-dom'
+import Star from '../BrewTrak/Icons/star.png'
+import { roundToHalfOrWhole } from 'helper/math'
 
 const RecipeCard = ({
   id,
@@ -10,6 +12,7 @@ const RecipeCard = ({
   is_private,
   barista,
   bean,
+  recipe_reviews_aggregate,
 }) => {
   const { url } = useRouteMatch()
   return (
@@ -40,7 +43,7 @@ const RecipeCard = ({
               <span className='sr-only'>{barista.display_name}</span>
               <img
                 className='h-10 w-10 rounded-full'
-                src='https://c.files.bbci.co.uk/1AD2/production/_98866860_gettyimages-486020904.jpg'
+                src={barista.avatar}
                 alt=''
               />
             </div>
@@ -50,9 +53,15 @@ const RecipeCard = ({
               <div className='hover:underline'>{barista.display_name}</div>
             </div>
             <div className='flex space-x-1 text-sm text-gray-500'>
-              <time datetime={date_added}>{date_added}</time>
-              {/* <span aria-hidden='true'>&middot;</span> */}
-              {/* <span>3 min read</span> */}
+              <time dateTime={date_added}>{date_added.substring(0, 10)}</time>
+              <span aria-hidden='true'>&middot;</span>
+              <span>
+                {roundToHalfOrWhole(
+                  recipe_reviews_aggregate.aggregate.avg.rating
+                )}
+                /5
+              </span>
+              <img className='w-4 h-4 mr-1' src={Star} alt='Star' />
             </div>
           </div>
         </div>
diff --git a/src/components/Recipe/RecipeDetails.js b/src/components/Recipe/RecipeDetails.js
index 31d74f8..78ea339 100644
--- a/src/components/Recipe/RecipeDetails.js
+++ b/src/components/Recipe/RecipeDetails.js
@@ -1,9 +1,8 @@
-import Star from '../BrewTrak/Icons/star.png'
 import { GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW, DELETE_RECIPES } from 'queries'
 import { useQuery, useMutation } from 'urql'
 import RecipeReview from './Review/RecipeReview'
-import { roundToHalfOrWhole } from 'helper/math'
 import { useHistory, useParams, Link, useRouteMatch } from 'react-router-dom'
+import { roundToHalfOrWhole } from 'helper/math'
 
 const RecipeDetails = (props) => {
   const history = useHistory()
@@ -24,22 +23,387 @@ const RecipeDetails = (props) => {
   if (fetching) return <p>Loading...</p>
   if (error) return <p>Oh no... {error.message}</p>
   const {
-    // brew_type,
-    // bean_weight,
-    // bean_grind,
-    // water_amount,
-    // water_temp,
+    brew_type,
+    bean_weight,
+    bean_grind,
+    water_amount,
+    water_temp,
     // comment,
     about,
     name,
-    // barista,
+    instructions,
+    barista,
+    date_added,
     bean,
     recipe_reviews,
     recipe_reviews_aggregate,
   } = data.recipes_by_pk
 
   return (
-    <div>
+    <div className='min-h-screen bg-gray-100'>
+      <main className='py-10'>
+        {/*<!-- Page header -->*/}
+        <div className='max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8'>
+          <div className='flex items-center space-x-5'>
+            <div className='flex-shrink-0'>
+              <div className='relative'>
+                <img
+                  className='h-16 w-16 rounded-full'
+                  src='data:image/jpeg;base64,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'
+                  alt=''
+                />
+                <span
+                  className='absolute inset-0 shadow-inner rounded-full'
+                  aria-hidden='true'
+                ></span>
+              </div>
+            </div>
+            <div>
+              <h1 className='text-2xl font-bold text-gray-900'>{name}</h1>
+              <p className='text-sm font-medium text-gray-500'>
+                Created by {barista?.display_name} on{' '}
+                <time dateTime={date_added}>{date_added.substring(0, 10)}</time>
+              </p>
+            </div>
+          </div>
+          <div className='mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3'>
+            <button
+              onClick={deleteRecipePressed}
+              type='button'
+              className='inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500'
+            >
+              Delete Recipe
+            </button>
+            <Link
+              to={`${url}/edit`}
+              type='button'
+              className='inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500'
+            >
+              Edit Recipe
+            </Link>
+          </div>
+        </div>
+
+        <div className='mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3'>
+          <div className='space-y-6 lg:col-start-1 lg:col-span-2'>
+            {/*<!-- Description list-->*/}
+            <section aria-labelledby='applicant-information-title'>
+              <div className='bg-white shadow sm:rounded-lg'>
+                <div className='px-4 py-5 sm:px-6'>
+                  <h2
+                    id='recipe-details-title'
+                    className='text-lg leading-6 font-medium text-gray-900'
+                  >
+                    Recipe Details
+                  </h2>
+                  <p className='mt-1 max-w-2xl text-sm text-gray-500'>
+                    Personal details and application.
+                  </p>
+                </div>
+                <div className='border-t border-gray-200 px-4 py-5 sm:px-6'>
+                  <dl className='grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2'>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Brew Type
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {brew_type}
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Bean Weight
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {bean_weight}g
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Bean Grind
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {bean_grind}
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Water Amount
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {water_amount}g
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Water Temp
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {water_temp}F
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Bean
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {bean?.name}
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Rating
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {roundToHalfOrWhole(recipe_reviews_aggregate)}/5
+                      </dd>
+                    </div>
+                    <div className='sm:col-span-2'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        About
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>{about}</dd>
+                    </div>
+                    <div className='sm:col-span-1'>
+                      <dt className='text-sm font-medium text-gray-500'>
+                        Instructions
+                      </dt>
+                      <dd className='mt-1 text-sm text-gray-900'>
+                        {instructions}
+                      </dd>
+                    </div>
+                  </dl>
+                </div>
+              </div>
+            </section>
+
+            {/*<!-- Comments-->*/}
+            <section aria-labelledby='notes-title'>
+              <div className='bg-white shadow sm:rounded-lg sm:overflow-hidden'>
+                <div className='divide-y divide-gray-200'>
+                  <div className='px-4 py-5 sm:px-6'>
+                    <h2
+                      id='notes-title'
+                      className='text-lg font-medium text-gray-900'
+                    >
+                      Reviews
+                    </h2>
+                  </div>
+                  <div className='px-4 py-6 sm:px-6'>
+                    <RecipeReview recipe_reviews={recipe_reviews} />
+                  </div>
+                </div>
+                <div className='bg-gray-50 px-4 py-6 sm:px-6'>
+                  <div className='flex space-x-3'>
+                    <div className='flex-shrink-0'>
+                      <img
+                        className='h-10 w-10 rounded-full'
+                        src='https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80'
+                        alt=''
+                      />
+                    </div>
+                    <div className='min-w-0 flex-1'>
+                      <form action='#'>
+                        <div>
+                          <label htmlFor='comment' className='sr-only'>
+                            About
+                          </label>
+                          <textarea
+                            id='comment'
+                            name='comment'
+                            rows='3'
+                            className='shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md'
+                            placeholder='Add a note'
+                          ></textarea>
+                        </div>
+                        <div className='mt-3 flex items-center justify-between'>
+                          <div className='group inline-flex items-start text-sm space-x-2 text-gray-500 hover:text-gray-900'>
+                            {/*<!-- Heroicon name: question-mark-circle -->*/}
+                            <svg
+                              className='flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500'
+                              xmlns='http://www.w3.org/2000/svg'
+                              viewBox='0 0 20 20'
+                              fill='currentColor'
+                              aria-hidden='true'
+                            >
+                              <path
+                                fillRule='evenodd'
+                                d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z'
+                                clipRule='evenodd'
+                              />
+                            </svg>
+                            <span>Some HTML is okay.</span>
+                          </div>
+                          <button
+                            type='submit'
+                            className='inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+                          >
+                            Comment
+                          </button>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <section
+            aria-labelledby='timeline-title'
+            className='lg:col-start-3 lg:col-span-1'
+          >
+            <div className='bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6'>
+              <h2
+                id='timeline-title'
+                className='text-lg font-medium text-gray-900'
+              >
+                Stages
+              </h2>
+
+              {/*<!-- Activity Feed -->*/}
+              {/* <div className="mt-6 flow-root">
+            <ul className="-mb-8">
+              <li>
+                <div className="relative pb-8">
+                  <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+                  <div className="relative flex space-x-3">
+                    <div>
+                      <span className="h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white">
+                        <!-- Heroicon name: user -->
+                        <svg className="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                          <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                        </svg>
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                      <div>
+                        <p className="text-sm text-gray-500">Applied to <a href="#" className="font-medium text-gray-900">Front End Developer</a></p>
+                      </div>
+                      <div className="text-right text-sm whitespace-nowrap text-gray-500">
+                        <time dateTime="2020-09-20">Sep 20</time>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+
+              <li>
+                <div className="relative pb-8">
+                  <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+                  <div className="relative flex space-x-3">
+                    <div>
+                      <span className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
+                        <!-- Heroicon name: thumb-up -->
+                        <svg className="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                          <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
+                        </svg>
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                      <div>
+                        <p className="text-sm text-gray-500">Advanced to phone screening by <a href="#" className="font-medium text-gray-900">Bethany Blake</a></p>
+                      </div>
+                      <div className="text-right text-sm whitespace-nowrap text-gray-500">
+                        <time dateTime="2020-09-22">Sep 22</time>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+
+              <li>
+                <div className="relative pb-8">
+                  <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+                  <div className="relative flex space-x-3">
+                    <div>
+                      <span className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
+                       <!-- Heroicon name: check --> 
+                        <svg className="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                      <div>
+                        <p className="text-sm text-gray-500">Completed phone screening with <a href="#" className="font-medium text-gray-900">Martha Gardner</a></p>
+                      </div>
+                      <div className="text-right text-sm whitespace-nowrap text-gray-500">
+                        <time dateTime="2020-09-28">Sep 28</time>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+
+              <li>
+                <div className="relative pb-8">
+                  <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+                  <div className="relative flex space-x-3">
+                    <div>
+                      <span className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
+                        <!-- Heroicon name: thumb-up --> 
+                        <svg className="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                          <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
+                        </svg>
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                      <div>
+                        <p className="text-sm text-gray-500">Advanced to interview by <a href="#" className="font-medium text-gray-900">Bethany Blake</a></p>
+                      </div>
+                      <div className="text-right text-sm whitespace-nowrap text-gray-500">
+                        <time dateTime="2020-09-30">Sep 30</time>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+
+              <li>
+                <div className="relative pb-8">
+                  <div className="relative flex space-x-3">
+                    <div>
+                      <span className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
+                        <!-- Heroicon name: check -->
+                        <svg className="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                      <div>
+                        <p className="text-sm text-gray-500">Completed interview with <a href="#" className="font-medium text-gray-900">Katherine Snyder</a></p>
+                      </div>
+                      <div className="text-right text-sm whitespace-nowrap text-gray-500">
+                        <time dateTime="2020-10-04">Oct 4</time>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div> */}
+              <div className='mt-6 flex flex-col justify-stretch'>
+                <Link
+                  to={`/recipe-player`}
+                  type='button'
+                  className='inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+                >
+                  Go to Recipe Player
+                </Link>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default RecipeDetails
+
+/*<div>
       <div className='bg-gray-800 pb-32'>
         <header className='py-10'>
           <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'></div>
@@ -47,7 +411,6 @@ const RecipeDetails = (props) => {
       </div>
       <main className='-mt-32'>
         <div className='max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8'>
-          {/* <!-- Replace with your content --> */}
           <div className='bg-white rounded-lg shadow px-5 py-6 sm:px-6'>
             <div className='px-4 py-4 rounded-lg h-auto'>
               <div>
@@ -59,7 +422,7 @@ const RecipeDetails = (props) => {
 
                 <div className='text-3xl leading-9 font-bold'>{name}</div>
                 <div className='flex items-center text-2xl leading-9'>
-                  <img className='w-5 h-5 mr-1' src={Star} alt='Star' />:
+                  <img className='w-5 h-5 mr-1' src={Star} alt='Star' />/:
                   {roundToHalfOrWhole(
                     recipe_reviews_aggregate.aggregate.avg.rating
                   )}
@@ -74,7 +437,6 @@ const RecipeDetails = (props) => {
                 >
                   buy recipe
                 </button>
-                {/* TODO - Guest cannot be allowed to make a review. Hide button for guest & route must be authenticated */}
                 <Link
                   to={`${url}/review/new`}
                   className='mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
@@ -105,11 +467,6 @@ const RecipeDetails = (props) => {
               </div>
             </div>
           </div>
-          {/* <!-- /End replace --> */}
         </div>
       </main>
-    </div>
-  )
-}
-
-export default RecipeDetails
+    </div>*/
diff --git a/src/components/Recipe/Review/RecipeReview.js b/src/components/Recipe/Review/RecipeReview.js
index 53d89e3..3c73c5d 100644
--- a/src/components/Recipe/Review/RecipeReview.js
+++ b/src/components/Recipe/Review/RecipeReview.js
@@ -1,19 +1,49 @@
-import { useMutation } from 'urql'
-import { DELETE_RECIPE_REVIEW } from 'queries'
-import { useRouteMatch, Link } from 'react-router-dom'
-
 const RecipeReview = ({ recipe_reviews }) => {
-  const { url } = useRouteMatch()
-  const [, deleteReview] = useMutation(DELETE_RECIPE_REVIEW)
-  const deleteReviewPressed = async (id) => {
-    await deleteReview({ id })
-  }
   return (
     <div>
-      <div className='font-bold'>Recipe Reviews</div>
-      <ul className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
+      <ul className='space-y-8'>
         {recipe_reviews.map((n, i) => (
           <div key={i}>
+            <li>
+              <div className='flex space-x-3'>
+                <div className='flex-shrink-0'>
+                  <img
+                    className='h-10 w-10 rounded-full'
+                    src={n.barista?.avatar}
+                    alt=''
+                  />
+                </div>
+                <div>
+                  <div className='text-sm'>
+                    <div className='font-medium text-gray-900'>
+                      {n.barista?.display_name}
+                    </div>
+                  </div>
+                  <div className='mt-1 text-sm text-gray-700'>
+                    <p>{n.comment}</p>
+                  </div>
+                  <div className='mt-2 text-sm space-x-2'>
+                    <span className='text-gray-500 font-medium'>
+                      {n.date_added.substring(0, 10)}
+                    </span>
+                    <span className='text-gray-500 font-medium'>&middot;</span>
+                    <button type='button' className='text-gray-900 font-medium'>
+                      Reply
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </div>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default RecipeReview
+
+/*
             <li className='col-span-1 bg-white rounded-lg shadow'>
               <div className='w-full flex items-center justify-between p-6 space-x-6'>
                 <div className='flex-1 truncate'>
@@ -76,11 +106,4 @@ const RecipeReview = ({ recipe_reviews }) => {
                 </div>
               </div>
             </li>
-          </div>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-export default RecipeReview
+*/
diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js
index 21d611e..2ef94fe 100644
--- a/src/components/TextArea/index.js
+++ b/src/components/TextArea/index.js
@@ -1,10 +1,13 @@
 const TextArea = ({ label, placeholder, value, onChange }) => {
   return (
-    <div class='sm:col-span-6'>
-      <label for={label} class='block text-sm font-medium text-gray-700'>
+    <div className='sm:col-span-6'>
+      <label
+        htmlFor={label}
+        className='block text-sm font-medium text-gray-700'
+      >
         {label}
       </label>
-      <div class='mt-1'>
+      <div className='mt-1'>
         <textarea
           id={label}
           name={label}
@@ -12,7 +15,7 @@ const TextArea = ({ label, placeholder, value, onChange }) => {
           value={value}
           placeholder={placeholder}
           onChange={onChange}
-          class='shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md'
+          className='shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md'
         ></textarea>
       </div>
     </div>
diff --git a/src/queries/Recipe.js b/src/queries/Recipe.js
index 31f540b..617554c 100644
--- a/src/queries/Recipe.js
+++ b/src/queries/Recipe.js
@@ -19,6 +19,7 @@ const INSERT_RECIPES_ONE = gql`
       date_added
       about
       name
+      instructions
     }
   }
 `
@@ -39,15 +40,24 @@ const GET_ALL_RECIPES = gql`
       date_added
       about
       name
+      instructions
       barista {
         id
         display_name
+        avatar
       }
       bean {
         id
         img
         name
       }
+      recipe_reviews_aggregate {
+        aggregate {
+          avg {
+            rating
+          }
+        }
+      }
     }
   }
 `
@@ -66,6 +76,7 @@ const GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW = gql`
       date_added
       about
       name
+      instructions
       barista {
         id
         display_name
@@ -77,10 +88,15 @@ const GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW = gql`
       }
       recipe_reviews {
         id
-        barista_id
         recipe_id
         rating
         comment
+        date_added
+        barista {
+          id
+          display_name
+          avatar
+        }
       }
       recipe_reviews_aggregate {
         aggregate {
@@ -109,6 +125,7 @@ const GET_SINGLE_RECIPE = gql`
       date_added
       about
       name
+      instructions
       bean {
         img
         name
@@ -122,6 +139,7 @@ const GET_SINGLE_RECIPE_REVIEW = gql`
       id
       rating
       comment
+      date_added
       barista {
         id
         display_name
@@ -141,6 +159,7 @@ const GET_RECIPE_BY_ID = gql`
     recipes_by_pk(id: $id) {
       id
       bean_weight
+      instructions
       stages {
         id
         name
@@ -154,14 +173,18 @@ const GET_RECIPE_BY_ID = gql`
 const UPDATE_RECIPES = gql`
   mutation($id: Int!, $object: recipes_set_input) {
     update_recipes_by_pk(pk_columns: { id: $id }, _set: $object) {
-      comment
-      bean_grind
-      bean_id
-      bean_weight
       brew_type
-      rating
+      bean_weight
+      bean_grind
       water_amount
       water_temp
+      rating
+      comment
+      is_private
+      date_added
+      about
+      name
+      instructions
     }
   }
 `

From 69b67401fa782a61e8cafae347552c58729e9e47 Mon Sep 17 00:00:00 2001
From: William Yang <williamyang93@gmail.com>
Date: Sun, 31 Jan 2021 20:05:35 -0800
Subject: [PATCH 3/5] Added edit and delete button to recipes

---
 src/components/Recipe/RecipeDetails.js       |  8 ++++--
 src/components/Recipe/Review/RecipeReview.js | 26 ++++++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/Recipe/RecipeDetails.js b/src/components/Recipe/RecipeDetails.js
index 78ea339..01e2f6a 100644
--- a/src/components/Recipe/RecipeDetails.js
+++ b/src/components/Recipe/RecipeDetails.js
@@ -186,11 +186,15 @@ const RecipeDetails = (props) => {
                       id='notes-title'
                       className='text-lg font-medium text-gray-900'
                     >
-                      Reviews
+                      Recipe Reviews
                     </h2>
                   </div>
                   <div className='px-4 py-6 sm:px-6'>
-                    <RecipeReview recipe_reviews={recipe_reviews} />
+                    {recipe_reviews.length === 0 ? (
+                      'No recipe reviews available'
+                    ) : (
+                      <RecipeReview recipe_reviews={recipe_reviews} />
+                    )}
                   </div>
                 </div>
                 <div className='bg-gray-50 px-4 py-6 sm:px-6'>
diff --git a/src/components/Recipe/Review/RecipeReview.js b/src/components/Recipe/Review/RecipeReview.js
index 3c73c5d..d439ea4 100644
--- a/src/components/Recipe/Review/RecipeReview.js
+++ b/src/components/Recipe/Review/RecipeReview.js
@@ -1,4 +1,14 @@
+import { useRouteMatch, Link } from 'react-router-dom'
+import { DELETE_RECIPE_REVIEW } from 'queries'
+import { useMutation } from 'urql'
+
 const RecipeReview = ({ recipe_reviews }) => {
+  const { url } = useRouteMatch()
+  console.log(useMutation(DELETE_RECIPE_REVIEW))
+  const [, deleteReview] = useMutation(DELETE_RECIPE_REVIEW)
+  const deleteReviewPressed = async (id) => {
+    await deleteReview({ id })
+  }
   return (
     <div>
       <ul className='space-y-8'>
@@ -27,8 +37,20 @@ const RecipeReview = ({ recipe_reviews }) => {
                       {n.date_added.substring(0, 10)}
                     </span>
                     <span className='text-gray-500 font-medium'>&middot;</span>
-                    <button type='button' className='text-gray-900 font-medium'>
-                      Reply
+                    <Link
+                      to={`${url}/review/${n.id}/edit`}
+                      type='button'
+                      className='text-gray-900 font-medium'
+                    >
+                      Edit
+                    </Link>
+                    <span className='text-gray-500 font-medium'>&middot;</span>
+                    <button
+                      onClick={() => deleteReviewPressed(n.id)}
+                      type='button'
+                      className='text-gray-900 font-medium'
+                    >
+                      Delete
                     </button>
                   </div>
                 </div>

From 84f553c1b0f70bb0dcfd753b1eddca9597baee3a Mon Sep 17 00:00:00 2001
From: William Yang <williamyang93@gmail.com>
Date: Sun, 31 Jan 2021 22:40:04 -0800
Subject: [PATCH 4/5] Updated create review recipe to same page format

---
 src/components/BrewTrak/BrewLog.js            |   4 +-
 src/components/BrewTrak/BrewLogDetails.js     |   2 +-
 src/components/Recipe/EditRecipeForm.js       |   3 +-
 src/components/Recipe/RecipeDetails.js        |  60 +------
 .../Recipe/Review/CreateRecipeReview.js       | 153 ++++++++++++------
 src/components/Recipe/Review/RecipeReview.js  |  70 +-------
 6 files changed, 118 insertions(+), 174 deletions(-)

diff --git a/src/components/BrewTrak/BrewLog.js b/src/components/BrewTrak/BrewLog.js
index 98f0eec..1dfdff0 100644
--- a/src/components/BrewTrak/BrewLog.js
+++ b/src/components/BrewTrak/BrewLog.js
@@ -26,7 +26,9 @@ const BrewLog = ({ logs, setId, setBrewSelected }) => {
               ? logs.bean_name_free
               : 'No Bean Provided'}
           </p>
-          <p className='text-sm text-gray-500 truncate'>{logs.date_added}</p>
+          <p className='text-sm text-gray-500 truncate'>
+            {logs.date_added.substring(0, 10)}
+          </p>
         </div>
       </div>
     </div>
diff --git a/src/components/BrewTrak/BrewLogDetails.js b/src/components/BrewTrak/BrewLogDetails.js
index c4b1eed..9c6a6ec 100644
--- a/src/components/BrewTrak/BrewLogDetails.js
+++ b/src/components/BrewTrak/BrewLogDetails.js
@@ -216,7 +216,7 @@ const BrewLogDetails = ({ brewLogId, brewSelected, setBrewSelected }) => {
                           Date Added
                         </dt>
                         <dd className='mt-1 text-sm text-gray-900'>
-                          {date_added}
+                          {date_added.substring(0, 10)}
                         </dd>
                       </div>
 
diff --git a/src/components/Recipe/EditRecipeForm.js b/src/components/Recipe/EditRecipeForm.js
index 06581f7..185023c 100644
--- a/src/components/Recipe/EditRecipeForm.js
+++ b/src/components/Recipe/EditRecipeForm.js
@@ -19,7 +19,6 @@ const EditRecipeForm = ({ recipe, id }) => {
   }
 
   const submitUpdateRecipe = async () => {
-    console.log('State', state)
     const { bean, date_added, __typename, ...rest } = state
     await updateRecipe({
       id,
@@ -33,7 +32,7 @@ const EditRecipeForm = ({ recipe, id }) => {
   if (barista)
     return (
       <div>
-        <div className='font-bold'>Edit Review</div>
+        <div className='font-bold'>Edit Recipe</div>
         <InputRow
           value={barista.display_name}
           readOnly={true}
diff --git a/src/components/Recipe/RecipeDetails.js b/src/components/Recipe/RecipeDetails.js
index 01e2f6a..d321148 100644
--- a/src/components/Recipe/RecipeDetails.js
+++ b/src/components/Recipe/RecipeDetails.js
@@ -3,6 +3,7 @@ import { useQuery, useMutation } from 'urql'
 import RecipeReview from './Review/RecipeReview'
 import { useHistory, useParams, Link, useRouteMatch } from 'react-router-dom'
 import { roundToHalfOrWhole } from 'helper/math'
+import CreateRecipeReview from './Review/CreateRecipeReview'
 
 const RecipeDetails = (props) => {
   const history = useHistory()
@@ -19,7 +20,6 @@ const RecipeDetails = (props) => {
     query: GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW,
     variables: { id },
   })
-
   if (fetching) return <p>Loading...</p>
   if (error) return <p>Oh no... {error.message}</p>
   const {
@@ -155,7 +155,10 @@ const RecipeDetails = (props) => {
                         Rating
                       </dt>
                       <dd className='mt-1 text-sm text-gray-900'>
-                        {roundToHalfOrWhole(recipe_reviews_aggregate)}/5
+                        {roundToHalfOrWhole(
+                          recipe_reviews_aggregate.aggregate.avg.rating
+                        )}
+                        /5
                       </dd>
                     </div>
                     <div className='sm:col-span-2'>
@@ -197,58 +200,7 @@ const RecipeDetails = (props) => {
                     )}
                   </div>
                 </div>
-                <div className='bg-gray-50 px-4 py-6 sm:px-6'>
-                  <div className='flex space-x-3'>
-                    <div className='flex-shrink-0'>
-                      <img
-                        className='h-10 w-10 rounded-full'
-                        src='https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80'
-                        alt=''
-                      />
-                    </div>
-                    <div className='min-w-0 flex-1'>
-                      <form action='#'>
-                        <div>
-                          <label htmlFor='comment' className='sr-only'>
-                            About
-                          </label>
-                          <textarea
-                            id='comment'
-                            name='comment'
-                            rows='3'
-                            className='shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md'
-                            placeholder='Add a note'
-                          ></textarea>
-                        </div>
-                        <div className='mt-3 flex items-center justify-between'>
-                          <div className='group inline-flex items-start text-sm space-x-2 text-gray-500 hover:text-gray-900'>
-                            {/*<!-- Heroicon name: question-mark-circle -->*/}
-                            <svg
-                              className='flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500'
-                              xmlns='http://www.w3.org/2000/svg'
-                              viewBox='0 0 20 20'
-                              fill='currentColor'
-                              aria-hidden='true'
-                            >
-                              <path
-                                fillRule='evenodd'
-                                d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z'
-                                clipRule='evenodd'
-                              />
-                            </svg>
-                            <span>Some HTML is okay.</span>
-                          </div>
-                          <button
-                            type='submit'
-                            className='inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
-                          >
-                            Comment
-                          </button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
-                </div>
+                <CreateRecipeReview id={id} />
               </div>
             </section>
           </div>
diff --git a/src/components/Recipe/Review/CreateRecipeReview.js b/src/components/Recipe/Review/CreateRecipeReview.js
index 03fe7c8..7e29f63 100644
--- a/src/components/Recipe/Review/CreateRecipeReview.js
+++ b/src/components/Recipe/Review/CreateRecipeReview.js
@@ -1,22 +1,15 @@
 import { useState } from 'react'
-import { useQuery, useMutation } from 'urql'
-import { GET_SINGLE_RECIPE, INSERT_RECIPE_REVIEW_ONE } from 'queries'
+import { useMutation } from 'urql'
+import { INSERT_RECIPE_REVIEW_ONE } from 'queries'
 import InputRow from 'components/InputRow'
 import { useAuth } from 'context/AuthContext'
-import { useHistory, useParams } from 'react-router-dom'
 
-const CreateRecipeReview = (props) => {
-  const history = useHistory()
+const CreateRecipeReview = ({ id }) => {
   const [state, setState] = useState({
-    rating: '5.0',
+    rating: '5',
     comment: '',
   })
-  const { id } = useParams()
   const { barista } = useAuth()
-  const [{ data, fetching, error }] = useQuery({
-    query: GET_SINGLE_RECIPE,
-    variables: { id },
-  })
   const [, insertRecipeReview] = useMutation(INSERT_RECIPE_REVIEW_ONE)
 
   const onChangeGenerator = (attr) => (e) => {
@@ -26,7 +19,8 @@ const CreateRecipeReview = (props) => {
     })
   }
 
-  const submitReview = async () => {
+  const submitReview = async (e) => {
+    e.preventDefault()
     await insertRecipeReview({
       object: {
         barista_id: barista.id,
@@ -35,49 +29,108 @@ const CreateRecipeReview = (props) => {
         comment: state.comment,
       },
     })
-    history.push(`/recipe/${id}`)
+    setState({
+      rating: '5',
+      comment: '',
+    })
   }
 
-  if (fetching) return <p>Loading...</p>
-  if (error) return <p>Oh no... {error.message}</p>
-  const { name } = data.recipes_by_pk
-
   return (
-    <div>
-      <div className='font-bold'>Create Review</div>
-      <InputRow
-        value={barista.display_name}
-        readOnly={true}
-        placeholder='Enter Barista'
-        label='Barista'
-      />
-      <InputRow
-        value={name}
-        readOnly={true}
-        placeholder='Enter Recipe'
-        label='Recipe'
-      />
-      <InputRow
-        value={state.rating}
-        onChange={onChangeGenerator('rating')}
-        placeholder='Enter Rating'
-        label='Rating'
-      />
-      <InputRow
-        value={state.comment}
-        onChange={onChangeGenerator('comment')}
-        placeholder='Enter Comment'
-        label='Comment'
-      />
-      <button
-        type='button'
-        onClick={submitReview}
-        className='mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
-      >
-        submit review
-      </button>
+    <div className='bg-gray-50 px-4 py-6 sm:px-6'>
+      <div className='flex space-x-3'>
+        <div className='flex-shrink-0'>
+          <img
+            className='h-10 w-10 rounded-full'
+            src='https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80'
+            alt=''
+          />
+        </div>
+        <div className='min-w-0 flex-1'>
+          <form>
+            <div>
+              <label htmlFor='comment' className='sr-only'>
+                About
+              </label>
+              <textarea
+                id='comment'
+                name='comment'
+                rows='3'
+                value={state.comment}
+                onChange={onChangeGenerator('comment')}
+                placeholder='Enter Review'
+                className='shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md'
+              />
+            </div>
+            <InputRow
+              value={state.rating}
+              onChange={onChangeGenerator('rating')}
+              placeholder='Enter Rating'
+              label='Rating'
+            />
+
+            <div className='mt-3 flex items-center justify-between'>
+              {/* <div className='group inline-flex items-start text-sm space-x-2 text-gray-500 hover:text-gray-900'>
+                <svg
+                  className='flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500'
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='0 0 20 20'
+                  fill='currentColor'
+                  aria-hidden='true'
+                >
+                  <path
+                    fillRule='evenodd'
+                    d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z'
+                    clipRule='evenodd'
+                  />
+                </svg>
+                <span>Some HTML is okay.</span>
+              </div> */}
+              <button
+                onClick={submitReview}
+                className='inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+              >
+                Add Review
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
   )
 }
 
 export default CreateRecipeReview
+// <div>
+//   <div className='font-bold'>Create Review</div>
+//   <InputRow
+//     value={barista.display_name}
+//     readOnly={true}
+//     placeholder='Enter Barista'
+//     label='Barista'
+//   />
+//   <InputRow
+//     value={name}
+//     readOnly={true}
+//     placeholder='Enter Recipe'
+//     label='Recipe'
+//   />
+//   <InputRow
+//     value={state.rating}
+//     onChange={onChangeGenerator('rating')}
+//     placeholder='Enter Rating'
+//     label='Rating'
+//   />
+//   <InputRow
+//     value={state.comment}
+//     onChange={onChangeGenerator('comment')}
+//     placeholder='Enter Comment'
+//     label='Comment'
+//   />
+//   <button
+//     type='button'
+//     onClick={submitReview}
+//     className='mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
+//   >
+//     submit review
+//   </button>
+// </div>
diff --git a/src/components/Recipe/Review/RecipeReview.js b/src/components/Recipe/Review/RecipeReview.js
index d439ea4..0291399 100644
--- a/src/components/Recipe/Review/RecipeReview.js
+++ b/src/components/Recipe/Review/RecipeReview.js
@@ -4,7 +4,6 @@ import { useMutation } from 'urql'
 
 const RecipeReview = ({ recipe_reviews }) => {
   const { url } = useRouteMatch()
-  console.log(useMutation(DELETE_RECIPE_REVIEW))
   const [, deleteReview] = useMutation(DELETE_RECIPE_REVIEW)
   const deleteReviewPressed = async (id) => {
     await deleteReview({ id })
@@ -33,6 +32,10 @@ const RecipeReview = ({ recipe_reviews }) => {
                     <p>{n.comment}</p>
                   </div>
                   <div className='mt-2 text-sm space-x-2'>
+                    <span className='text-gray-500 font-medium'>
+                      Rating: {n.rating}/5
+                    </span>
+                    <span className='text-gray-500 font-medium'>&middot;</span>
                     <span className='text-gray-500 font-medium'>
                       {n.date_added.substring(0, 10)}
                     </span>
@@ -64,68 +67,3 @@ const RecipeReview = ({ recipe_reviews }) => {
 }
 
 export default RecipeReview
-
-/*
-            <li className='col-span-1 bg-white rounded-lg shadow'>
-              <div className='w-full flex items-center justify-between p-6 space-x-6'>
-                <div className='flex-1 truncate'>
-                  <div className='flex items-center space-x-3'>
-                    <h3 className='text-gray-900 text-sm leading-5 font-medium truncate'>
-                      {n.barista && n.barista.display_name}
-                    </h3>
-                    <span className='flex-shrink-0 inline-block px-2 py-0.5 text-teal-800 text-xs leading-4 font-medium bg-teal-100 rounded-full'>
-                      Rating: {n.rating}
-                    </span>
-                  </div>
-                  <p className='mt-1 text-gray-500 text-sm leading-5 truncate'>
-                    {n.comment}
-                  </p>
-                  <p className='mt-1 text-gray-500 text-sm leading-5 truncate'>
-                    {n.id}
-                  </p>
-                </div>
-                <img
-                  className='w-10 h-10 bg-gray-300 rounded-full flex-shrink-0'
-                  src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60'
-                  alt=''
-                />
-              </div>
-              <div className='border-t border-gray-200'>
-                <div className='-mt-px flex'>
-                  <div className='w-0 flex-1 flex border-r border-gray-200'>
-                    <button
-                      onClick={() => deleteReviewPressed(n.id)}
-                      className='relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150'
-                    >
-                      <svg
-                        className='w-5 h-5 text-gray-400'
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 20 20'
-                        fill='currentColor'
-                      >
-                        <path d='M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z' />
-                        <path d='M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z' />
-                      </svg>
-                      <span className='ml-3'>Delete</span>
-                    </button>
-                  </div>
-                  <div className='-ml-px w-0 flex-1 flex'>
-                    <Link
-                      to={`${url}/review/${n.id}/edit`}
-                      className='relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150'
-                    >
-                      <svg
-                        className='w-5 h-5 text-gray-400'
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 20 20'
-                        fill='currentColor'
-                      >
-                        <path d='M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z' />
-                      </svg>
-                      <span className='ml-3'>Edit</span>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </li>
-*/

From 304311d9903969088ad41bdb37f881bc95c3489e Mon Sep 17 00:00:00 2001
From: William Yang <williamyang93@gmail.com>
Date: Mon, 1 Feb 2021 00:23:48 -0800
Subject: [PATCH 5/5] Added bean_name_free for free bean name submission

---
 src/components/Recipe/CreateRecipe.js         | 17 ++++++++++-----
 src/components/Recipe/EditRecipeForm.js       | 21 +++++++++++++++----
 src/components/Recipe/RecipeDetails.js        |  5 +++--
 .../Recipe/Review/CreateRecipeReview.js       |  2 +-
 src/queries/Recipe.js                         |  6 ++++++
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/Recipe/CreateRecipe.js b/src/components/Recipe/CreateRecipe.js
index 711ed94..6140a09 100644
--- a/src/components/Recipe/CreateRecipe.js
+++ b/src/components/Recipe/CreateRecipe.js
@@ -17,7 +17,8 @@ const CreateRecipe = (props) => {
     bean_weight: '',
     bean_grind: 'Extra Fine',
     water_amount: '',
-    bean_id: '',
+    bean_id: null,
+    bean_name_free: '',
     water_temp: '',
     is_private: false,
     about: '',
@@ -73,12 +74,12 @@ const CreateRecipe = (props) => {
         placeholder='Enter About'
         label='About'
       />
-      <InputRow
+      {/* <InputRow
         value={state.comment}
         onChange={onChangeGenerator('comment')}
         placeholder='Enter Comment'
         label='Comment'
-      />
+      /> */}
       <InputRow
         value={state.bean_weight}
         onChange={onChangeGenerator('bean_weight')}
@@ -105,11 +106,17 @@ const CreateRecipe = (props) => {
         placeholder='Enter water weight'
         label='Water Amount'
       />
-      <InputRow
+      {/* <InputRow
         value={state.bean_id}
         onChange={onChangeGenerator('bean_id')}
         placeholder='Enter bean type'
         label='Bean ID'
+      /> */}
+      <InputRow
+        value={state.bean_name_free}
+        onChange={onChangeGenerator('bean_name_free')}
+        placeholder='Enter bean name'
+        label='Bean Name'
       />
       <InputRow
         value={state.water_temp}
@@ -140,7 +147,7 @@ const CreateRecipe = (props) => {
         onClick={submitRecipe}
         className='mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
       >
-        submit Recipe
+        Submit Recipe
       </button>
     </div>
   )
diff --git a/src/components/Recipe/EditRecipeForm.js b/src/components/Recipe/EditRecipeForm.js
index 185023c..dc44e2a 100644
--- a/src/components/Recipe/EditRecipeForm.js
+++ b/src/components/Recipe/EditRecipeForm.js
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useMutation } from 'urql'
 import InputRow from 'components/InputRow'
+import TextArea from 'components/TextArea'
 import Dropdown from 'components/DropDown'
 import { UPDATE_RECIPES } from 'queries'
 import { useAuth } from 'context/AuthContext'
@@ -63,12 +64,12 @@ const EditRecipeForm = ({ recipe, id }) => {
           placeholder='Enter About'
           label='About'
         />
-        <InputRow
+        {/* <InputRow
           value={state.comment}
           onChange={onChangeGenerator('comment')}
           placeholder='Enter Comment'
           label='Comment'
-        />
+        /> */}
         <InputRow
           value={state.bean_weight}
           onChange={onChangeGenerator('bean_weight')}
@@ -95,11 +96,17 @@ const EditRecipeForm = ({ recipe, id }) => {
           placeholder='Enter water weight'
           label='Water Amount'
         />
-        <InputRow
+        {/* <InputRow
           value={state.bean_id}
           onChange={onChangeGenerator('bean_id')}
           placeholder='Enter bean type'
           label='Bean ID'
+        /> */}
+        <InputRow
+          value={state.bean_name_free}
+          onChange={onChangeGenerator('bean_name_free')}
+          placeholder='Enter bean name'
+          label='Bean Name'
         />
         <InputRow
           value={state.water_temp}
@@ -113,6 +120,12 @@ const EditRecipeForm = ({ recipe, id }) => {
           label='Rating'
           options={['1', '2', '3', '4', '5']}
         />
+        <TextArea
+          value={state.instructions}
+          onChange={onChangeGenerator('instructions')}
+          placeholder='Enter instructions here'
+          label='Brewer Instructions'
+        />
         <Dropdown
           value={state.is_private}
           onChange={onChangeGenerator('is_private')}
@@ -124,7 +137,7 @@ const EditRecipeForm = ({ recipe, id }) => {
           onClick={submitUpdateRecipe}
           className='mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150'
         >
-          edit review
+          Edit Review
         </button>
       </div>
     )
diff --git a/src/components/Recipe/RecipeDetails.js b/src/components/Recipe/RecipeDetails.js
index d321148..697f3ce 100644
--- a/src/components/Recipe/RecipeDetails.js
+++ b/src/components/Recipe/RecipeDetails.js
@@ -34,7 +34,8 @@ const RecipeDetails = (props) => {
     instructions,
     barista,
     date_added,
-    bean,
+    // bean,
+    bean_name_free,
     recipe_reviews,
     recipe_reviews_aggregate,
   } = data.recipes_by_pk
@@ -147,7 +148,7 @@ const RecipeDetails = (props) => {
                         Bean
                       </dt>
                       <dd className='mt-1 text-sm text-gray-900'>
-                        {bean?.name}
+                        {bean_name_free}
                       </dd>
                     </div>
                     <div className='sm:col-span-1'>
diff --git a/src/components/Recipe/Review/CreateRecipeReview.js b/src/components/Recipe/Review/CreateRecipeReview.js
index 7e29f63..efa60e4 100644
--- a/src/components/Recipe/Review/CreateRecipeReview.js
+++ b/src/components/Recipe/Review/CreateRecipeReview.js
@@ -41,7 +41,7 @@ const CreateRecipeReview = ({ id }) => {
         <div className='flex-shrink-0'>
           <img
             className='h-10 w-10 rounded-full'
-            src='https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80'
+            src={barista?.avatar}
             alt=''
           />
         </div>
diff --git a/src/queries/Recipe.js b/src/queries/Recipe.js
index 617554c..2020421 100644
--- a/src/queries/Recipe.js
+++ b/src/queries/Recipe.js
@@ -20,6 +20,7 @@ const INSERT_RECIPES_ONE = gql`
       about
       name
       instructions
+      bean_name_free
     }
   }
 `
@@ -41,6 +42,7 @@ const GET_ALL_RECIPES = gql`
       about
       name
       instructions
+      bean_name_free
       barista {
         id
         display_name
@@ -77,6 +79,7 @@ const GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW = gql`
       about
       name
       instructions
+      bean_name_free
       barista {
         id
         display_name
@@ -126,6 +129,7 @@ const GET_SINGLE_RECIPE = gql`
       about
       name
       instructions
+      bean_name_free
       bean {
         img
         name
@@ -160,6 +164,7 @@ const GET_RECIPE_BY_ID = gql`
       id
       bean_weight
       instructions
+      bean_name_free
       stages {
         id
         name
@@ -185,6 +190,7 @@ const UPDATE_RECIPES = gql`
       about
       name
       instructions
+      bean_name_free
     }
   }
 `
