Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Setup recipe player stage form #136

Merged
merged 1 commit into from
Feb 9, 2021
Merged

[WIP] Setup recipe player stage form #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ 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'
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 <div className='bg-gray-200'>Test page</div>
Expand Down Expand Up @@ -78,6 +78,9 @@ function App() {
<ContainerRoute path='/hi/:id/name/:slug'>
<PathTest />
</ContainerRoute>
<ContainerRoute path='/form'>
<StageForm />
</ContainerRoute>
<ContainerRoute path='/recipe-player'>
<RecipePlayer />
</ContainerRoute>
Expand All @@ -87,9 +90,6 @@ function App() {
<AuthRoute path='/brewtrak'>
<BrewTrakPage />
</AuthRoute>
{/* <ContainerRoute path='/bean'>
<BeanPage />
</ContainerRoute> */}
<ContainerRoute path='*'>
<NotFound />
</ContainerRoute>
Expand Down
17 changes: 17 additions & 0 deletions src/components/Icon/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import * as Alert from './Alert'
export { Alert }

export const Plus = ({ className = 'w-6 h-6' }) => (
<svg
className={className}
stroke='currentColor'
fill='none'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={2}
d='M12 6v6m0 0v6m0-6h6m-6 0H6'
/>
</svg>
)

export const Heart = ({ className = 'w-6 h-6' }) => (
<svg
className={className}
Expand Down
200 changes: 11 additions & 189 deletions src/components/Recipe/RecipeDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useMemo } from 'react'
import { GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW, DELETE_RECIPES } from 'queries'
import { useQuery, useMutation } from 'urql'
import RecipeReview from './Review/RecipeReview'
Expand All @@ -19,6 +20,16 @@ const RecipeDetails = (props) => {
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 <p>Loading...</p>
if (error) return <p>Oh no... {error.message}</p>
Expand Down Expand Up @@ -219,128 +230,7 @@ const RecipeDetails = (props) => {
</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`}
Expand All @@ -359,71 +249,3 @@ const RecipeDetails = (props) => {
}

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>
</header>
</div>
<main className='-mt-32'>
<div className='max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8'>
<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>
<img
className='w-64 h-64 flex-shrink-0 mx-auto bg-black'
src={bean.img}
alt=''
/>

<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' />/:
{roundToHalfOrWhole(
recipe_reviews_aggregate.aggregate.avg.rating
)}
/5
</div>

<div className='font-bold'>About this Recipe</div>
<div>{about ? about : 'No description available'}</div>
<button
type='button'
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'
>
buy recipe
</button>
<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'
>
submit review
</Link>
<Link
to={`${url}/edit`}
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 RECIPE
</Link>
<button
onClick={deleteRecipePressed}
type='button'
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'
>
delete recipe
</button>
{recipe_reviews.length > 0 ? (
<RecipeReview
recipe_id={id}
recipe_reviews={recipe_reviews}
/>
) : (
'No recipe reviews available.'
)}
</div>
</div>
</div>
</div>
</main>
</div>*/
2 changes: 1 addition & 1 deletion src/components/Recipe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Recipes = () => {
() => ({
fetchOptions: {
headers: {
'x-hasura-role': 'guest',
'x-hasura-role': 'all_barista',
},
},
}),
Expand Down
1 change: 1 addition & 0 deletions src/context/AuthContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
92 changes: 92 additions & 0 deletions src/pages/StageForm/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
export const TimeInput = ({
id,
label,
name,
onChange,
value,
min,
disabled,
className,
}) => (
<div className={className}>
<label htmlFor={id} className='block text-sm font-medium text-gray-700'>
{label}
</label>
<div className='relative mt-1 w-24'>
<input
type='number'
id={id}
name={name}
disabled={disabled}
onChange={onChange}
value={value}
min={min}
className='disabled:opacity-50 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'
/>
<div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
<p className='text-sm text-gray-500'>sec</p>
</div>
</div>
</div>
)

export const WeightInput = ({
id,
label,
name,
onChange,
value,
min,
disabled,
className,
}) => (
<div className={className}>
<label htmlFor={id} className='block text-sm font-medium text-gray-700'>
{label}
</label>
<div className='relative mt-1 w-24'>
<input
type='number'
id={id}
name={name}
disabled={disabled}
onChange={onChange}
value={value}
min={min}
className='disabled:opacity-50 \block w-full pl-3 pr-7 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md'
/>
<div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
<p className='text-sm text-gray-500'>g</p>
</div>
</div>
</div>
)

export const SelectAction = ({
id,
name,
label,
defaultValue,
value,
onChange,
disabled,
className,
}) => (
<div className={className}>
<label htmlFor={id} className='block text-sm font-medium text-gray-700'>
{label}
</label>
<select
id={id}
name={name}
value={value}
onChange={onChange}
defaultValue={defaultValue}
disabled={disabled}
className='disabled:opacity-50 mt-1 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'
>
<option value='pour'>Pour</option>
<option value='serve'>Serve</option>
</select>
</div>
)
Loading