From 9e5dea026a026515f4c9b89b5f2d1689c3891bcb Mon Sep 17 00:00:00 2001 From: William Yang 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 ( -
  • - + +
    -

    - {barista.display_name} -

    -
    -
    Title
    -
    {brew_type}
    -
    - -
    -
    -
    -
    - - - - - Favorite +
    +
    +
    +
    +
    {brew_type}
    +
    +
    +
    {name}
    +
    {about}
    +
    +
    +
    +
    +
    + {barista.display_name} +
    -
    -
    - - - - Cart +
    +
    +
    {barista.display_name}
    +
    +
    + + {/* */} + {/* 3 min read */}
    -
    • + ) } 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

    Oh no... {error.message}

    return ( -
    -
    -
    -
    -

    Recipes

    +
    +
    +
    +
    +
    +
    +

    + Recipes +

    +
    + Explore coffee recipes here!
    new recipe -
    -
    -
    -
    - {/* */} -
      - {data && data.recipes.map((x, i) => )} -
    - {/* */}
    -
    +
    + {data && data.recipes.map((x, i) => )} +
    +
    ) } From 60ddb8475f0e953427efa87c620191b361fd6860 Mon Sep 17 00:00:00 2001 From: William Yang 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 }) => {

    -
    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']} /> + + +
    +
    + {/**/} + + Some HTML is okay. +
    + +
    +
    + + + + + + + +
    +
    +

    + Stages +

    + + {/**/} + {/*
    +
      +
    • +
      + +
      +
      + + + + +
      +
      +
      +

      Applied to Front End Developer

      +
      +
      + +
      +
      +
      +
      +
      • + +
    • +
      + +
      +
      + + + + +
      +
      +
      +

      Advanced to phone screening by Bethany Blake

      +
      +
      + +
      +
      +
      +
      +
      • + +
    • +
      + +
      +
      + + + + +
      +
      +
      +

      Completed phone screening with Martha Gardner

      +
      +
      + +
      +
      +
      +
      +
      • + +
    • +
      + +
      +
      + + + + +
      +
      +
      +

      Advanced to interview by Bethany Blake

      +
      +
      + +
      +
      +
      +
      +
      • + +
    • +
      +
      +
      + + + + +
      +
      +
      +

      Completed interview with Katherine Snyder

      +
      +
      + +
      +
      +
      +
      +
      • +
    +
    */} +
    + + Go to Recipe Player + +
    +
    +
    + + + + ) +} + +export default RecipeDetails + +/*
    @@ -47,7 +411,6 @@ const RecipeDetails = (props) => {
    - {/* */}
    @@ -59,7 +422,7 @@ const RecipeDetails = (props) => {
    {name}
    - Star: + Star/: {roundToHalfOrWhole( recipe_reviews_aggregate.aggregate.avg.rating )} @@ -74,7 +437,6 @@ const RecipeDetails = (props) => { > buy recipe - {/* TODO - Guest cannot be allowed to make a review. Hide button for guest & route must be authenticated */} {
    - {/* */}
    -
    - ) -} - -export default RecipeDetails + */ 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 (
    -
    Recipe Reviews
    -
      +
        {recipe_reviews.map((n, i) => (
        +
      • +
        +
        + +
        +
        +
        +
        + {n.barista?.display_name} +
        +
        +
        +

        {n.comment}

        +
        +
        + + {n.date_added.substring(0, 10)} + + · + +
        +
        +
        +
        • +
        + ))} +
      +
    + ) +} + +export default RecipeReview + +/*
  • @@ -76,11 +106,4 @@ const RecipeReview = ({ recipe_reviews }) => {
    • - - ))} - - - ) -} - -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 ( -
    -
    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 (
      @@ -27,8 +37,20 @@ const RecipeReview = ({ recipe_reviews }) => { {n.date_added.substring(0, 10)} · -
    From 84f553c1b0f70bb0dcfd753b1eddca9597baee3a Mon Sep 17 00:00:00 2001 From: William Yang 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'}

    -

    {logs.date_added}

    +

    + {logs.date_added.substring(0, 10)} +

    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
    - {date_added} + {date_added.substring(0, 10)}
    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 (
    -
    Edit Review
    +
    Edit Recipe
    { const history = useHistory() @@ -19,7 +20,6 @@ const RecipeDetails = (props) => { query: GET_SINGLE_RECIPE_REVIEWS_AVG_REVIEW, variables: { id }, }) - if (fetching) return

    Loading...

    if (error) return

    Oh no... {error.message}

    const { @@ -155,7 +155,10 @@ const RecipeDetails = (props) => { Rating
    - {roundToHalfOrWhole(recipe_reviews_aggregate)}/5 + {roundToHalfOrWhole( + recipe_reviews_aggregate.aggregate.avg.rating + )} + /5
    @@ -197,58 +200,7 @@ const RecipeDetails = (props) => { )}
    -
    -
    -
    - -
    -
    -
    -
    - - -
    -
    -
    - {/**/} - - Some HTML is okay. -
    - -
    -
    -
    -
    -
    + 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

    Loading...

    - if (error) return

    Oh no... {error.message}

    - const { name } = data.recipes_by_pk - return ( -
    -
    Create Review
    - - - - - +
    +
    +
    + +
    +
    +
    +
    + +