[WIP] Recipe Page Repolish

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>

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>
 

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>

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}>

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>

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'
@@ -16,11 +17,13 @@ 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: '',
     name: '',
+    instructions: '',
   })
   const [, insertRecipe] = useMutation(INSERT_RECIPES_ONE)
 
@@ -71,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')}
@@ -103,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}
@@ -121,6 +130,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')}
@@ -132,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>
   )

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'
@@ -19,7 +20,6 @@ const EditRecipeForm = ({ recipe, id }) => {
   }
 
   const submitUpdateRecipe = async () => {
-    console.log('State', state)
     const { bean, date_added, __typename, ...rest } = state
     await updateRecipe({
       id,
@@ -33,7 +33,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}
@@ -64,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')}
@@ -96,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}
@@ -114,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')}
@@ -125,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>
     )