Keeping up with recipe api changes.

src/api/getRecipe.ts

@@ -2,6 +2,7 @@ import { AuthContextType } from '../auth'
 import { ApiError } from './ApiError'
 import ExpiredTokenError from './ExpiredTokenError'
 import FullRecipeView, { RawFullRecipeView, toFullRecipeView } from './types/FullRecipeView'
+import GetRecipeView, { RawGetRecipeView, toGetRecipeView } from './types/GetRecipeView'
 
 export interface GetRecipeDeps {
     authContext: AuthContextType
@@ -10,7 +11,7 @@ export interface GetRecipeDeps {
     abortSignal: AbortSignal
 }
 
-const getRecipe = async ({ authContext, username, slug, abortSignal }: GetRecipeDeps): Promise<FullRecipeView> => {
+const getRecipe = async ({ authContext, username, slug, abortSignal }: GetRecipeDeps): Promise<GetRecipeView> => {
     const headers = new Headers()
     if (authContext.token !== null) {
         headers.set('Authorization', `Bearer ${authContext.token}`)
@@ -21,7 +22,7 @@ const getRecipe = async ({ authContext, username, slug, abortSignal }: GetRecipe
         mode: 'cors'
     })
     if (response.ok) {
-        return toFullRecipeView((await response.json()) as RawFullRecipeView)
+        return toGetRecipeView((await response.json()) as RawGetRecipeView)
     } else if (response.status === 401) {
         throw new ExpiredTokenError()
     } else {

src/api/types/FullRecipeView.ts

@@ -13,7 +13,6 @@ export interface RawFullRecipeView {
     text: string
     owner: UserInfoView
     starCount: number
-    isStarred: boolean | null
     viewerCount: number
     mainImage: RawImageView
     isPublic: boolean
@@ -31,7 +30,6 @@ interface FullRecipeView {
     text: string
     owner: UserInfoView
     starCount: number
-    isStarred: boolean | null
     viewerCount: number
     mainImage: ImageView
     isPublic: boolean
@@ -49,7 +47,6 @@ export const toFullRecipeView = ({
     text,
     owner,
     starCount,
-    isStarred,
     viewerCount,
     mainImage: rawMainImage,
     isPublic
@@ -65,7 +62,6 @@ export const toFullRecipeView = ({
     text,
     owner,
     starCount,
-    isStarred,
     viewerCount,
     mainImage: toImageView(rawMainImage),
     isPublic

src/api/types/GetRecipeView.ts

@@ -0,0 +1,21 @@
+import FullRecipeView, { RawFullRecipeView, toFullRecipeView } from './FullRecipeView'
+
+export interface RawGetRecipeView {
+    recipe: RawFullRecipeView
+    isStarred: boolean | null
+    isOwner: boolean | null
+}
+
+interface GetRecipeView {
+    recipe: FullRecipeView
+    isStarred: boolean | null
+    isOwner: boolean | null
+}
+
+export const toGetRecipeView = ({ recipe, isStarred, isOwner }: RawGetRecipeView): GetRecipeView => ({
+    recipe: toFullRecipeView(recipe),
+    isStarred,
+    isOwner
+})
+
+export default GetRecipeView

src/pages/recipe/Recipe.tsx

@@ -1,15 +1,15 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import addStar from '../../api/addStar'
 import { ApiError } from '../../api/ApiError'
 import getImage from '../../api/getImage'
 import getRecipe from '../../api/getRecipe'
-import FullRecipeView from '../../api/types/FullRecipeView'
+import removeStar from '../../api/removeStar'
+import GetRecipeView from '../../api/types/GetRecipeView'
 import { useAuth } from '../../auth'
 import RecipeVisibilityIcon from '../../components/recipe-visibility-icon/RecipeVisibilityIcon'
 import UserIconAndName from '../../components/user-icon-and-name/UserIconAndName'
 import classes from './recipe.module.css'
-import addStar from '../../api/addStar'
-import removeStar from '../../api/removeStar'
 
 interface RecipeStarInfoProps {
     starCount: number
@@ -112,12 +112,16 @@ const Recipe = ({ username, slug }: RecipeProps) => {
     const mainImageQuery = useQuery(
         {
             enabled: recipeQuery.isSuccess,
-            queryKey: ['images', recipeQuery.data?.mainImage.owner.username, recipeQuery.data?.mainImage.filename],
+            queryKey: [
+                'images',
+                recipeQuery.data?.recipe.mainImage.owner.username,
+                recipeQuery.data?.recipe.mainImage.filename
+            ],
             queryFn: ({ signal }) =>
                 getImage({
                     accessToken: authContext.token,
                     signal,
-                    url: recipeQuery.data!.mainImage.url
+                    url: recipeQuery.data!.recipe.mainImage.url
                 })
         },
         queryClient
@@ -141,8 +145,9 @@ const Recipe = ({ username, slug }: RecipeProps) => {
         return `Error: ${error.name} ${error.message}`
     }
 
-    const { data: recipe } = recipeQuery as QueryObserverSuccessResult<FullRecipeView>
+    const { data: getRecipeView } = recipeQuery as QueryObserverSuccessResult<GetRecipeView>
     const { data: mainImageUrl } = mainImageQuery as QueryObserverSuccessResult<string>
+    const { recipe, isStarred, isOwner } = getRecipeView
 
     return (
         <div className={classes.fullRecipeContainer}>
@@ -150,12 +155,8 @@ const Recipe = ({ username, slug }: RecipeProps) => {
                 <div className={classes.info}>
                     <div className={classes.infoRow}>
                         <h1 className={classes.recipeTitle}>{recipe.title}</h1>
-                        {recipe.isStarred !== null ? (
+                        {isStarred !== null ? (
-                            <RecipeStarButton
+                            <RecipeStarButton starCount={recipe.starCount} {...{ isStarred, username, slug }} />
-                                isStarred={recipe.isStarred}
-                                starCount={recipe.starCount}
-                                {...{ username, slug }}
-                            />
                         ) : (
                             <RecipeStarInfo starCount={recipe.starCount} />
                         )}