From d52ab9d97eab3f4516165bd954b4dce09b57cb38 Mon Sep 17 00:00:00 2001 From: Jesse Brault Date: Wed, 14 Aug 2024 08:13:20 -0500 Subject: [PATCH] Working on Recipe star count/star ability. --- src/components/recipe-card/RecipeCard.tsx | 7 +- .../recipe-card/recipe-card.module.css | 10 +++ src/components/star-count/StarCount.tsx | 15 ---- .../star-count/star-count.module.css | 9 --- src/pages/recipe/Recipe.tsx | 73 +++++++++++++++++-- src/pages/recipe/recipe.module.css | 10 +++ src/routes/recipes_/$username.$slug.tsx | 64 +--------------- 7 files changed, 93 insertions(+), 95 deletions(-) delete mode 100644 src/components/star-count/StarCount.tsx delete mode 100644 src/components/star-count/star-count.module.css diff --git a/src/components/recipe-card/RecipeCard.tsx b/src/components/recipe-card/RecipeCard.tsx index 9f51b8d..772731d 100644 --- a/src/components/recipe-card/RecipeCard.tsx +++ b/src/components/recipe-card/RecipeCard.tsx @@ -1,6 +1,6 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { Link } from '@tanstack/react-router' import RecipeVisibilityIcon from '../recipe-visibility-icon/RecipeVisibilityIcon' -import StarCount from '../star-count/StarCount' import UserIconAndName from '../user-icon-and-name/UserIconAndName' import classes from './recipe-card.module.css' @@ -46,7 +46,10 @@ const RecipeCard = ({ >

{title}

- + + + {starCount} +
diff --git a/src/components/recipe-card/recipe-card.module.css b/src/components/recipe-card/recipe-card.module.css index 9430609..fefab9f 100644 --- a/src/components/recipe-card/recipe-card.module.css +++ b/src/components/recipe-card/recipe-card.module.css @@ -23,3 +23,13 @@ margin-block: 0; font-size: 18px; } + +.star-info { + display: flex; + column-gap: 5px; + align-items: center; +} + +.star { + color: var(--primary-yellow); +} diff --git a/src/components/star-count/StarCount.tsx b/src/components/star-count/StarCount.tsx deleted file mode 100644 index b50e0fd..0000000 --- a/src/components/star-count/StarCount.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import classes from './star-count.module.css' - -export interface StarCountProps { - count: number -} - -const StarCount = ({ count }: StarCountProps) => ( - - - {count} - -) - -export default StarCount diff --git a/src/components/star-count/star-count.module.css b/src/components/star-count/star-count.module.css deleted file mode 100644 index 9bd8c79..0000000 --- a/src/components/star-count/star-count.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.star-info { - display: flex; - column-gap: 5px; - align-items: center; -} - -.star { - color: var(--primary-yellow); -} diff --git a/src/pages/recipe/Recipe.tsx b/src/pages/recipe/Recipe.tsx index 6419995..86295f9 100644 --- a/src/pages/recipe/Recipe.tsx +++ b/src/pages/recipe/Recipe.tsx @@ -1,29 +1,90 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { QueryObserverSuccessResult, useQuery, useQueryClient } from '@tanstack/react-query' +import { ApiError } from '../../api/ApiError' +import getImage from '../../api/getImage' +import getRecipe from '../../api/getRecipe' import FullRecipeView from '../../api/types/FullRecipeView' +import { useAuth } from '../../auth' import RecipeVisibilityIcon from '../../components/recipe-visibility-icon/RecipeVisibilityIcon' -import StarCount from '../../components/star-count/StarCount' import UserIconAndName from '../../components/user-icon-and-name/UserIconAndName' import classes from './recipe.module.css' export interface RecipeProps { - recipe: FullRecipeView - imgUrl: string + username: string + slug: string } -const Recipe = ({ recipe, imgUrl }: RecipeProps) => { +const Recipe = ({ username, slug }: RecipeProps) => { + const authContext = useAuth() + const queryClient = useQueryClient() + + const recipeQuery = useQuery( + { + queryKey: ['recipe', username, slug], + queryFn: ({ signal: abortSignal }) => + getRecipe({ + abortSignal, + authContext, + username, + slug + }) + }, + queryClient + ) + + const mainImageQuery = useQuery( + { + enabled: recipeQuery.isSuccess, + queryKey: ['images', recipeQuery.data?.mainImage.owner.username, recipeQuery.data?.mainImage.filename], + queryFn: ({ signal }) => + getImage({ + accessToken: authContext.token, + signal, + url: recipeQuery.data!.mainImage.url + }) + }, + queryClient + ) + + if (recipeQuery.isLoading || mainImageQuery.isLoading) { + return 'Loading...' + } else if (recipeQuery.isError) { + const { error } = recipeQuery + if (error instanceof ApiError) { + if (error.status === 404) { + return 'No such recipe.' + } else { + return `ApiError: ${error.status} ${error.message}` + } + } else { + return `Error: ${error.name} ${error.message}` + } + } else if (mainImageQuery.isError) { + const { error } = mainImageQuery + return `Error: ${error.name} ${error.message}` + } + + const { data: recipe } = recipeQuery as QueryObserverSuccessResult + const { data: mainImageUrl } = mainImageQuery as QueryObserverSuccessResult + return (

{recipe.title}

- +
- +
diff --git a/src/pages/recipe/recipe.module.css b/src/pages/recipe/recipe.module.css index 52c4eb3..0e40bf1 100644 --- a/src/pages/recipe/recipe.module.css +++ b/src/pages/recipe/recipe.module.css @@ -28,3 +28,13 @@ .main-image { width: 100%; } + +.star-button { + display: flex; + column-gap: 5px; + align-items: center; +} + +.star { + color: var(--primary-yellow); +} diff --git a/src/routes/recipes_/$username.$slug.tsx b/src/routes/recipes_/$username.$slug.tsx index 2cf119a..3fd647b 100644 --- a/src/routes/recipes_/$username.$slug.tsx +++ b/src/routes/recipes_/$username.$slug.tsx @@ -1,9 +1,4 @@ -import { useQuery, useQueryClient } from '@tanstack/react-query' import { createFileRoute, useParams } from '@tanstack/react-router' -import { ApiError } from '../../api/ApiError' -import getImage from '../../api/getImage' -import getRecipe from '../../api/getRecipe' -import { useAuth } from '../../auth' import Recipe from '../../pages/recipe/Recipe' export const Route = createFileRoute('/recipes/$username/$slug')({ @@ -11,63 +6,6 @@ export const Route = createFileRoute('/recipes/$username/$slug')({ const { username, slug } = useParams({ from: '/recipes/$username/$slug' }) - const authContext = useAuth() - const queryClient = useQueryClient() - const { - isLoading, - error, - data: recipe - } = useQuery( - { - queryKey: ['recipe', username, slug], - queryFn({ signal: abortSignal }) { - return getRecipe({ - abortSignal, - authContext, - username, - slug - }) - } - }, - queryClient - ) - - const { - isLoading: isImageLoading, - error: imageError, - data: imgUrl - } = useQuery( - { - enabled: recipe !== undefined, - queryKey: ['images', recipe?.mainImage.owner.username, recipe?.mainImage.filename], - queryFn: ({ signal }) => - getImage({ - accessToken: authContext.token, - signal, - url: recipe!.mainImage.url - }) - }, - queryClient - ) - - if (isLoading || isImageLoading) { - return 'Loading...' - } else if (error !== null) { - if (error instanceof ApiError) { - if (error.status === 404) { - return `No such recipe.` - } else { - return `ApiError: ${error.status} ${error.message}` - } - } else { - return `Error: ${error.name} ${error.message}` - } - } else if (imageError !== null) { - return `Image loading error: ${imageError} ${imageError.message}` - } else if (recipe !== undefined && imgUrl !== undefined) { - return - } else { - return null - } + return } })