mangamochi/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update MangaCard to use correct DTO types and fix query cache update logic

Browse Source
This commit is contained in:
Rodrigo Verdiani 2026-04-05 20:33:02 -03:00
parent 451b45f2d3
commit 7dab8ec21c
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/features/home/components/MangaCard.tsx
View File

@ -3,8 +3,8 @@ import { Calendar, Database, Heart, Star } from "lucide-react";
import { useCallback } from "react"; import { useCallback } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import type { import type {
DefaultResponseDTOPageMangaListDTO,
MangaListDTO, MangaListDTO,
PageMangaListDTO,
} from "@/api/generated/api.schemas.ts"; } from "@/api/generated/api.schemas.ts";
import { import {
useSetFavorite, useSetFavorite,
@ -18,7 +18,7 @@ import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
interface MangaCardProps { interface MangaCardProps {
manga: MangaListDTO; manga: MangaListDTO;
queryKey: unknown; queryKey: readonly unknown[];
} }
export const MangaCard = ({ manga, queryKey }: MangaCardProps) => { export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
@ -26,14 +26,20 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const updateQueryData = useCallback( const updateQueryData = useCallback(
(oldData: PageMangaListDTO | undefined, isFavorite: boolean) => ({ (
oldData: DefaultResponseDTOPageMangaListDTO | undefined,
isFavorite: boolean,
) => ({
...oldData, ...oldData,
data: {
...oldData?.data,
content: content:
oldData?.content?.map((manga) => oldData?.data?.content?.map((item) =>
manga.id === manga.id ? { ...manga, favorite: isFavorite } : manga, item.id === manga.id ? { ...item, favorite: isFavorite } : item,
) || [], ) || [],
},
}), }),
[], [manga.id],
); );
const { mutate: mutateFavorite, isPending: isPendingFavorite } = const { mutate: mutateFavorite, isPending: isPendingFavorite } =
@ -41,8 +47,8 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
mutation: { mutation: {
onSuccess: () => onSuccess: () =>
queryClient.setQueryData( queryClient.setQueryData(
[queryKey], queryKey,
(oldData: PageMangaListDTO | undefined) => (oldData: DefaultResponseDTOPageMangaListDTO | undefined) =>
updateQueryData(oldData, true), updateQueryData(oldData, true),
), ),
}, },
@ -53,8 +59,8 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
mutation: { mutation: {
onSuccess: () => onSuccess: () =>
queryClient.setQueryData( queryClient.setQueryData(
[queryKey], queryKey,
(oldData: PageMangaListDTO | undefined) => (oldData: DefaultResponseDTOPageMangaListDTO | undefined) =>
updateQueryData(oldData, false), updateQueryData(oldData, false),
), ),
}, },