From 5bddd1790f0c2588bb1decc43c2cd7c1b183a9f9 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Wed, 14 Aug 2024 18:54:16 -0500
Subject: [PATCH] Keeping up with recipe api changes.

---
 src/api/getRecipe.ts            |  5 +++--
 src/api/types/FullRecipeView.ts |  4 ----
 src/api/types/GetRecipeView.ts  | 21 +++++++++++++++++++++
 src/pages/recipe/Recipe.tsx     | 25 +++++++++++++------------
 4 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 src/api/types/GetRecipeView.ts

diff --git a/src/api/getRecipe.ts b/src/api/getRecipe.ts
index 5b8a5f0..dd35498 100644
--- a/src/api/getRecipe.ts
+++ b/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 {
diff --git a/src/api/types/FullRecipeView.ts b/src/api/types/FullRecipeView.ts
index d28ab76..0e3388a 100644
--- a/src/api/types/FullRecipeView.ts
+++ b/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
diff --git a/src/api/types/GetRecipeView.ts b/src/api/types/GetRecipeView.ts
new file mode 100644
index 0000000..a54609b
--- /dev/null
+++ b/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
diff --git a/src/pages/recipe/Recipe.tsx b/src/pages/recipe/Recipe.tsx
index 1530dfd..53b0d1c 100644
--- a/src/pages/recipe/Recipe.tsx
+++ b/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 ? (
-                            <RecipeStarButton
-                                isStarred={recipe.isStarred}
-                                starCount={recipe.starCount}
-                                {...{ username, slug }}
-                            />
+                        {isStarred !== null ? (
+                            <RecipeStarButton starCount={recipe.starCount} {...{ isStarred, username, slug }} />
                         ) : (
                             <RecipeStarInfo starCount={recipe.starCount} />
                         )}