From dd073c6c49314ee31cab1e4ce13fdd30ef6ec836 Mon Sep 17 00:00:00 2001 From: Patrick Truong Date: Fri, 5 Feb 2021 11:44:42 -0800 Subject: [PATCH] [WIP] Setup recipe player stage form Add "all_barista" role Add all_barista role to single recipe page Cleanup setup Add icon Add close to main alert Add recipe stage form components --- src/App.js | 8 +- src/components/Icon/index.js | 17 +++ src/components/Recipe/RecipeDetails.js | 200 ++----------------------- src/components/Recipe/index.js | 2 +- src/context/AuthContext.js | 1 + src/pages/StageForm/Input.js | 92 ++++++++++++ src/pages/StageForm/Row.js | 83 ++++++++++ src/pages/StageForm/index.js | 131 ++++++++++++++++ src/queries/Recipe.js | 5 + 9 files changed, 345 insertions(+), 194 deletions(-) create mode 100644 src/pages/StageForm/Input.js create mode 100644 src/pages/StageForm/Row.js create mode 100644 src/pages/StageForm/index.js diff --git a/src/App.js b/src/App.js index 4ac6e2c..a3bc2b8 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,6 @@ import { NewUserModal } from 'components/Modal' import Home from 'pages/Home' import RecipePlayer from 'pages/RecipePlayer' import BrewTrakPage from 'pages/BrewTrak' -// import BeanPage from 'pages/Bean' import Recipe from 'pages/Recipe' import Login from 'pages/Login' import CreateAccount from 'pages/CreateAccount' @@ -14,6 +13,7 @@ import Activate from 'pages/Activate' import Profile from 'pages/Profile' import ModalFlowDemo from 'pages/ModalFlowDemo' import Reset from 'pages/Reset' +import StageForm from 'pages/StageForm' const Test = () => { return
Test page
@@ -78,6 +78,9 @@ function App() { + + + @@ -87,9 +90,6 @@ function App() { - {/* - - */} diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 2ce9bd7..8376ee0 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1,6 +1,23 @@ import * as Alert from './Alert' export { Alert } +export const Plus = ({ className = 'w-6 h-6' }) => ( + + + +) + export const Heart = ({ className = 'w-6 h-6' }) => ( { const [{ data, fetching, error }] = useQuery({ query: GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW, variables: { id }, + context: useMemo( + () => ({ + fetchOptions: { + headers: { + 'x-hasura-role': 'all_barista', + }, + }, + }), + [] + ), }) if (fetching) return

Loading...

if (error) return

Oh no... {error.message}

@@ -219,128 +230,7 @@ const RecipeDetails = (props) => { {/**/} - {/*
- -
*/}
{ } export default RecipeDetails - -/*
-
-
-
-
-
-
-
-
-
-
- - -
{name}
-
- Star/: - {roundToHalfOrWhole( - recipe_reviews_aggregate.aggregate.avg.rating - )} - /5 -
- -
About this Recipe
-
{about ? about : 'No description available'}
- - - submit review - - - EDIT RECIPE - - - {recipe_reviews.length > 0 ? ( - - ) : ( - 'No recipe reviews available.' - )} -
-
-
-
-
-
*/ diff --git a/src/components/Recipe/index.js b/src/components/Recipe/index.js index 8acc219..e379357 100644 --- a/src/components/Recipe/index.js +++ b/src/components/Recipe/index.js @@ -12,7 +12,7 @@ const Recipes = () => { () => ({ fetchOptions: { headers: { - 'x-hasura-role': 'guest', + 'x-hasura-role': 'all_barista', }, }, }), diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js index ede245e..b84e6f4 100644 --- a/src/context/AuthContext.js +++ b/src/context/AuthContext.js @@ -179,6 +179,7 @@ function AuthProvider({ children }) { type: alertType.ERROR, header: error.extensions.code, message: error.message, + close: true, }) } else { const barista = data.data.barista[0] diff --git a/src/pages/StageForm/Input.js b/src/pages/StageForm/Input.js new file mode 100644 index 0000000..afc4372 --- /dev/null +++ b/src/pages/StageForm/Input.js @@ -0,0 +1,92 @@ +export const TimeInput = ({ + id, + label, + name, + onChange, + value, + min, + disabled, + className, +}) => ( +
+ +
+ +
+

sec

+
+
+
+) + +export const WeightInput = ({ + id, + label, + name, + onChange, + value, + min, + disabled, + className, +}) => ( +
+ +
+ +
+

g

+
+
+
+) + +export const SelectAction = ({ + id, + name, + label, + defaultValue, + value, + onChange, + disabled, + className, +}) => ( +
+ + +
+) diff --git a/src/pages/StageForm/Row.js b/src/pages/StageForm/Row.js new file mode 100644 index 0000000..23886ce --- /dev/null +++ b/src/pages/StageForm/Row.js @@ -0,0 +1,83 @@ +import { SelectAction, TimeInput, WeightInput } from './Input' +import { XCircle } from 'components/Icon' + +const Row = ({ + number, + isFirst, + stage, + setStage, + min, + minWeight, + onRemove, +}) => { + const onChange = ({ target }) => { + const { name, type, value } = target + + setStage( + stage.action === 'serve' && name === 'start' + ? { + ...stage, + start: parseInt(value), + end: parseInt(value), + } + : { + ...stage, + [name]: type === 'number' ? parseInt(value) : value, + } + ) + } + + return ( + <> +
+

+ {number} +

+ + + + + + {!isFirst && ( +
+ +
+ )} +
+ + ) +} + +export default Row diff --git a/src/pages/StageForm/index.js b/src/pages/StageForm/index.js new file mode 100644 index 0000000..987bb92 --- /dev/null +++ b/src/pages/StageForm/index.js @@ -0,0 +1,131 @@ +import { Plus } from 'components/Icon' +import { useState } from 'react' +import Row from './Row' + +function StageForm() { + const [isValid, setIsValid] = useState(null) + const [stages, setStages] = useState([ + { + action: 'pour', + start: 0, + end: 0, + weight: 0, + }, + ]) + + const generateSetStage = (index) => (stage) => { + if (!isValid) setIsValid(null) + setStages([...stages.slice(0, index), stage, ...stages.slice(index + 1)]) + } + + const generateRemove = (index) => () => { + if (!isValid) setIsValid(null) + setStages([...stages.slice(0, index), ...stages.slice(index + 1)]) + } + + const addStage = () => { + const lastStage = stages[stages.length - 1] + if (!isValid) setIsValid(null) + setStages([ + ...stages, + { + action: 'pour', + start: lastStage.end, + end: lastStage.end, + weight: lastStage.weight, + }, + ]) + } + + const submitStages = () => { + setIsValid( + stages.reduce((acc, curr, i) => { + let prevStage = stages[i - 1] + if (stages.length - 1 === i) { + return ( + acc && + curr.action === 'serve' && + curr.start === curr.end && + curr.weight === prevStage.weight && + prevStage.weight <= curr.weight && + prevStage.end <= curr.start + ) + } + if (i === 0) { + return ( + acc && curr.action === 'pour' && curr.end !== 0 && curr.weight !== 0 + ) + } + return ( + acc && prevStage.weight <= curr.weight && prevStage.end <= curr.start + ) + }, true) + ) + } + + return ( +
+
+
+
+

+ Create a playable recipe +

+

+ Write your pour over recipe steps here +

+
+
+ {stages.map((stage, i) => ( + + ))} +
+
+ +
+
+ +
+ + +
+ {isValid !== null && !isValid && ( +
+

+ Invalid recipe steps +

+
+ )} +
+
+ ) +} + +export default StageForm diff --git a/src/queries/Recipe.js b/src/queries/Recipe.js index 2020421..79f84c9 100644 --- a/src/queries/Recipe.js +++ b/src/queries/Recipe.js @@ -134,6 +134,11 @@ const GET_SINGLE_RECIPE = gql` img name } + barista { + id + display_name + avatar + } } } `