Stage -> Master (#107)

* [WIP] Bean Review/BrewTrak Edit & Delete (#64) * Added GraphQL Queries for GET/UPDATE recipe/review * Implemented Edit for BrewTrak recipe. Added buttons for edit as well. Added id as a parameter to search up by PK * Added delete functionality to brew trak recipes * Modified recipes to pull the bean_id instead of the bean_name * Added delete bean review capabilities * Quick commit, edit review page works with some bugs * Implemented Bean Review * Updated useUser to useAuth * Refactored EditBrew - Created Edit to hold edit state - Passing down brew trak log results through props to Edit component - Remove useEffect - Removed null check in card * Fix no-unused-var warnings * Update README.md Add production status * Add Prettier setup and run on project (#69) * Add prettier setup * run prettier on whole project * Add new pre-commit checks (#70) * Ran format on EditBrew (not official prettify). Renamed Edit to EditBrewForm. * Refactored EditReview * Updated UpdateReview GraphQL query to use input type * Refactored card props * Updated some queries from recipe -> brew log (still need to update in Hasura) * Refactored BrewTrak to use useQuery instead of passing down props for settingCardValues * Updated setState to use onChangeGenerator to fix two way binding * Updated cards to not fail if bean was not found Co-authored-by: Patrick Truong <pattruong@gmail.com> * Ran prettier * Refactoring and Cleaning up Code (#79) * Refactored CreateBrew and removed useBrewTrak * Deleted CreateCard and prettified some components * Refactored Bean Review. Removed useBeanReview hook. Updated some barista to display_name instead of displayName. * Removed sample details, combined two queries into one, refactored DIscoverBean, DiscoverDetails,DiscoverCard and removed unnecessary methods * Changed edit to use single query instead of two queries * Renamed data back to hormal naming convention and added barista id from auth context to create brew * Renamed BrewTrak Card&Recipe to BrewLogs for Clarity (#87) * Renaming recipe to brew logs for better clarity. Left recipe player "recipe"s unchanged. * Moved BrewTrak icons into a folder for slightly temp structure. Re-did some import statements * Delete BrewTrak/Beans (don't think anyone using anymore), renamed Card to BrewLog * urql graphcache (#83) * Add graphcache * update urql * Bump axios from 0.20.0 to 0.21.1 (#92) Bumps [axios](https://github.com/axios/axios) from 0.20.0 to 0.21.1. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v0.21.1/CHANGELOG.md) - [Commits](axios/axios@v0.20.0...v0.21.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [WIP] Redirect after submit create/edit (#91) * Added redirects to CreateBrew/Recipe and Edit Recipe * Refactored Unselected brew log detail in component & corrected delete issue where data would be null * Refactored small line * Tailwind - remove now unnecessary default extractor (#94) * move build dependencies from dev to prod (#99) * update caniuse-lite * Recipe Player V2 (#103) * Stage -> Master (#95) * [WIP] Bean Review/BrewTrak Edit & Delete (#64) * Added GraphQL Queries for GET/UPDATE recipe/review * Implemented Edit for BrewTrak recipe. Added buttons for edit as well. Added id as a parameter to search up by PK * Added delete functionality to brew trak recipes * Modified recipes to pull the bean_id instead of the bean_name * Added delete bean review capabilities * Quick commit, edit review page works with some bugs * Implemented Bean Review * Updated useUser to useAuth * Refactored EditBrew - Created Edit to hold edit state - Passing down brew trak log results through props to Edit component - Remove useEffect - Removed null check in card * Fix no-unused-var warnings * Update README.md Add production status * Add Prettier setup and run on project (#69) * Add prettier setup * run prettier on whole project * Add new pre-commit checks (#70) * Ran format on EditBrew (not official prettify). Renamed Edit to EditBrewForm. * Refactored EditReview * Updated UpdateReview GraphQL query to use input type * Refactored card props * Updated some queries from recipe -> brew log (still need to update in Hasura) * Refactored BrewTrak to use useQuery instead of passing down props for settingCardValues * Updated setState to use onChangeGenerator to fix two way binding * Updated cards to not fail if bean was not found Co-authored-by: Patrick Truong <pattruong@gmail.com> * Ran prettier * Refactoring and Cleaning up Code (#79) * Refactored CreateBrew and removed useBrewTrak * Deleted CreateCard and prettified some components * Refactored Bean Review. Removed useBeanReview hook. Updated some barista to display_name instead of displayName. * Removed sample details, combined two queries into one, refactored DIscoverBean, DiscoverDetails,DiscoverCard and removed unnecessary methods * Changed edit to use single query instead of two queries * Renamed data back to hormal naming convention and added barista id from auth context to create brew * Renamed BrewTrak Card&Recipe to BrewLogs for Clarity (#87) * Renaming recipe to brew logs for better clarity. Left recipe player "recipe"s unchanged. * Moved BrewTrak icons into a folder for slightly temp structure. Re-did some import statements * Delete BrewTrak/Beans (don't think anyone using anymore), renamed Card to BrewLog * urql graphcache (#83) * Add graphcache * update urql * Bump axios from 0.20.0 to 0.21.1 (#92) Bumps [axios](https://github.com/axios/axios) from 0.20.0 to 0.21.1. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v0.21.1/CHANGELOG.md) - [Commits](axios/axios@v0.20.0...v0.21.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [WIP] Redirect after submit create/edit (#91) * Added redirects to CreateBrew/Recipe and Edit Recipe * Refactored Unselected brew log detail in component & corrected delete issue where data would be null * Refactored small line * Tailwind - remove now unnecessary default extractor (#94) * move build dependencies from dev to prod (#99) * update caniuse-lite Co-authored-by: William Yang <williamyang93@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix low security vulnerability * Remove hook state management & rename PourGuide * remove unused progress bar comments * Update private to isPrivate due to Hasura change * move RecipePlayer to Player & update timer logic * add query and add hasura query for recipe player * move gif and add player components * delete play circle * Add icons and button components for player * Add pause, reset, start buttons * Update recipe start styling * update start styling * make timeline active with data from stages Co-authored-by: William Yang <williamyang93@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: William Yang <williamyang93@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
brewbean · Jan 20, 2021 · 0ab48a4 · 0ab48a4
1 parent 5b9bc6b
commit 0ab48a4
Show file tree

Hide file tree

Showing 16 changed files with 468 additions and 177 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,7 @@ import { AuthRoute, RedirectRoute, ContainerRoute } from 'navigation'
 import { NotFound } from 'components/Utility'
 import { NewUserModal } from 'components/Modal'
 import Home from 'pages/Home'
-import PourGuide from 'pages/PourGuide'
+import RecipePlayer from 'pages/RecipePlayer'
 import BrewTrakPage from 'pages/BrewTrak'
 import DiscoverBeanPage from 'pages/DiscoverBean'
 import Recipe from 'pages/Recipe'
@@ -37,8 +37,8 @@ function App() {
       <ContainerRoute path='/hi/:id/name/:slug'>
         <PathTest />
       </ContainerRoute>
-      <ContainerRoute path='/pour-app'>
-        <PourGuide />
+      <ContainerRoute path='/recipe-player'>
+        <RecipePlayer />
       </ContainerRoute>
       <ContainerRoute path='/recipe'>
         <Recipe />

diff --git a/src/components/BrewTrak/CreateBrew.js b/src/components/BrewTrak/CreateBrew.js
@@ -32,7 +32,7 @@ const CreateBrew = () => {
       water_temp: state.waterTemp,
       rating: state.rating,
       comment: state.brewComments,
-      private: true, //TODO: - temp-setting
+      isPrivate: true, //TODO: - temp-setting
       water_amount: state.waterAmount,
     }
     await insertBrewLog({ object })

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -0,0 +1,39 @@
+export const ButtonLeftIcon = ({
+  icon: Icon,
+  iconClass,
+  children,
+  onClick,
+  color = 'green',
+  size = 'med',
+  className,
+}) => {
+  const buttonClass = className
+    ? className
+    : size === 'med'
+    ? 'inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-base font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2'
+    : ''
+
+  const colorClass =
+    color === 'green'
+      ? 'bg-green-500 hover:bg-green-600 focus:ring-green-500'
+      : color === 'red'
+      ? 'bg-red-500 hover:bg-red-600 focus:ring-red-500'
+      : color === 'yellow'
+      ? 'bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500'
+      : ''
+
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className={(buttonClass + ' ' + colorClass).trimEnd()}
+    >
+      <Icon
+        className={
+          iconClass ? iconClass : size === 'med' ? '-ml-1 mr-2 h-5 w-5' : ''
+        }
+      />
+      {children}
+    </button>
+  )
+}
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
@@ -1,3 +1,132 @@
+export const Heart = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+
+export const DotsHorizontal = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z' />
+  </svg>
+)
+export const Scale = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+export const Clock = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+
+export const Pause = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+export const Refresh = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+
+export const Play = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+
+export const CheckCircle = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    d
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
+      clipRule='evenodd'
+    />
+  </svg>
+)
+
+export const Check = ({ className = 'w-6 h-6' }) => (
+  <svg
+    className={className}
+    fill='currentColor'
+    viewBox='0 0 20 20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <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>
+)
+
 export const XCircle = ({ className = 'w-6 h-6' }) => (
   <svg
     className={className}

diff --git a/src/components/Player/Main.js b/src/components/Player/Main.js
@@ -0,0 +1,98 @@
+import { timeString } from 'helper/timer'
+import { ReactComponent as Gif } from './undraw_coffee_break_j3of.svg'
+import { Play, Pause, Refresh, Scale, Clock } from 'components/Icon'
+import { ButtonLeftIcon } from 'components/Button'
+
+const Main = ({
+  isFinished,
+  stop,
+  reset,
+  start,
+  coffeeWeight,
+  isActive,
+  seconds,
+  stage,
+  weight,
+  remainingTime,
+  totalTime,
+}) => (
+  <div className='lg:col-start-1 lg:col-span-3'>
+    <div className='bg-white text-gray-800 rounded shadow p-4'>
+      {!isActive && seconds === 0 ? (
+        <div className='flex flex-col items-center space-y-5'>
+          <h2 className='text-3xl font-extrabold text-gray-900 sm:block sm:text-4xl'>
+            Recipe Details
+          </h2>
+          <div className='flex flex-col space-y-2'>
+            <h4 className='inline-flex items-center text-md font-medium'>
+              <span className='mr-2 rounded-md bg-yellow-400 p-2 text-white'>
+                <Scale />
+              </span>
+              Coffee weight {String.fromCharCode(8212)}
+              <span className='ml-1 font-bold'>{coffeeWeight}g</span>
+            </h4>
+            <h4 className='inline-flex items-center text-md font-medium'>
+              <span className='mr-2 rounded-md bg-blue-400 p-2 text-white'>
+                <Clock />
+              </span>
+              Total time {String.fromCharCode(8212)}
+              <span className='ml-1 font-bold'>{timeString(totalTime)}</span>
+            </h4>
+          </div>
+          <ButtonLeftIcon
+            className='w-full lg:w-1/2 inline-flex justify-center items-center px-4 py-2 border border-transparent shadow-sm text-base font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2'
+            icon={Play}
+            onClick={start}
+            size='med'
+          >
+            Play
+          </ButtonLeftIcon>
+        </div>
+      ) : (
+        <div className='flex flex-col items-center'>
+          <h2 className='text-2xl font-semibold'>{stage}</h2>
+          {stage !== 'serve' && seconds !== 0 && (
+            <h3 className='text-lg'>continue for {remainingTime} seconds</h3>
+          )}
+
+          {!isFinished && (
+            <div className='flex flex-col items-center text-blue-700'>
+              <h5 className='text-lg'>Target Weight</h5>
+              <h5 className='text-xl font-semibold'>{weight} g</h5>
+            </div>
+          )}
+          <Gif className='h-48 w-48' />
+          <div className='space-x-2'>
+            {isActive && (
+              <ButtonLeftIcon
+                icon={Pause}
+                color='yellow'
+                onClick={stop}
+                size='med'
+              >
+                Pause
+              </ButtonLeftIcon>
+            )}
+            {!isActive && !isFinished && (
+              <ButtonLeftIcon icon={Play} onClick={start} size='med'>
+                Resume
+              </ButtonLeftIcon>
+            )}
+            {!isActive && (
+              <ButtonLeftIcon
+                icon={Refresh}
+                color='red'
+                onClick={reset}
+                size='med'
+              >
+                Reset
+              </ButtonLeftIcon>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)
+
+export default Main
diff --git a/src/components/Player/Row.js b/src/components/Player/Row.js
@@ -0,0 +1,49 @@
+import { Check, DotsHorizontal, Heart } from 'components/Icon'
+
+const Container = ({ bottom, children }) =>
+  bottom ? (
+    children
+  ) : (
+    <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>
+      {children}
+    </div>
+  )
+
+const Row = ({ bottom = false, stage, start, isCurrent, isDone }) => {
+  const gray = 'bg-gray-400'
+  const green = 'bg-green-500'
+  const blue = 'bg-blue-500'
+  const color = isDone ? green : isCurrent ? blue : gray
+  const Icon = isDone ? Check : isCurrent ? Heart : DotsHorizontal
+
+  return (
+    <li>
+      <Container bottom={bottom}>
+        <div className='relative flex items-center space-x-3'>
+          <div>
+            <span
+              className={
+                'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white ' +
+                color
+              }
+            >
+              <Icon className='h-5 w-5 text-white' />
+            </span>
+          </div>
+          <div className='min-w-0 flex-1 flex justify-between text-sm text-gray-500'>
+            <p className={isCurrent ? 'font-bold text-gray-700' : ''}>
+              {stage}
+            </p>
+            <p>{start}</p>
+          </div>
+        </div>
+      </Container>
+    </li>
+  )
+}
+
+export default Row
diff --git a/src/components/Player/Timeline.js b/src/components/Player/Timeline.js
@@ -0,0 +1,27 @@
+import { timeString } from 'helper/timer'
+import Row from './Row'
+
+const Timeline = ({ stages, stage, seconds }) => (
+  <div className='lg:col-start-4 lg:col-span-1'>
+    <div className='bg-white text-gray-900 rounded shadow p-4'>
+      <h3 className='text-2xl font-medium font-bold text-center mb-4'>
+        Stages
+      </h3>
+
+      <ul>
+        {stages.map(({ name, start, end }, index) => (
+          <Row
+            key={name}
+            stage={name}
+            start={timeString(start)}
+            bottom={index === stages.length - 1}
+            isCurrent={stage === name}
+            isDone={seconds >= end}
+          />
+        ))}
+      </ul>
+    </div>
+  </div>
+)
+
+export default Timeline