Adding Emojis & Shipping Static Data

Emoji.tsx
import bullsEye from "../assets/bulls-eye.webp";
import thumbsUp from "../assets/thumbs-up.webp";
import meh from "../assets/meh.webp";
import { Image } from "@chakra-ui/react";
import { ImageProps } from "@chakra-ui/react";

interface Props {
    rating: number;
}

const Emoji = ({ rating }: Props) => {
    if (rating < 3) return null;

    const emojiMap: { [key: number]: ImageProps } = {
        3: { src: meh, alt: "meh", boxSize: "25px" },
        4: { src: thumbsUp, alt: "recommended", boxSize: "25px" },
        5: { src: bullsEye, alt: "exceptional", boxSize: "35px" },
    };

    return <Image {...emojiMap[rating]} marginTop={1} />;
};

export default Emoji;

GameCard.tsx
import { Card, Image, CardBody, Heading, HStack } from "@chakra-ui/react";
import { Game } from "../hooks/useGames";
import PlatformIconList from "./PlatformIconList";
import CriticScore from "./CriticScore";
import getCroppedImageUrl from "../services/image-url";
import Emoji from "./emoji";
interface Props {
    game: Game;
}
const GameCard = ({ game }: Props) => {
    return (
        <Card>
            <Image src={getCroppedImageUrl(game.background_image)} />
            <CardBody>
                <HStack justifyContent={"space-between"} marginBottom={3}>
                    <PlatformIconList
                        platforms={game.parent_platforms.map(
                            ({ platform }) => platform
                        )}
                    />
                    <CriticScore score={game.metacritic} />
                </HStack>
                <Heading fontSize="2xl">
                    {game.name}
                    <Emoji rating={game.rating_top}></Emoji>
                </Heading>
            </CardBody>
        </Card>
    );
};

export default GameCard;

useGame.tsx
import { GameQuery } from "../App";
import useData from "./useData";
import { Genre } from "./useGenres";

export interface Platform {
    id: number;
    name: string;
    slug: string;
}

export interface Game {
    id: number;
    name: string;
    metacritic: number;
    rating_top: number;
    background_image: string;
    parent_platforms: { platform: Platform }[];
}

const useGames = (gameQuery: GameQuery) =>
    // 'selectedGenre' is possibly 'null'
    useData<Game>(
        "/games",
        {
            params: {
                genres: gameQuery.genre?.id,
                platforms: gameQuery.platform?.id,
                ordering: gameQuery.sortOrder,
                search: gameQuery.searchText,
            },
        },
        [gameQuery]
    );

export default useGames;

由于左侧分类栏的分类不会经常变化，因此我们可以将其视为静态数据。

到开发者工具中，将请求响应返回的值复制到新建的 data 文件夹，并存入 genres.ts。

对于 platforms 也是同理。

然后将封装好的 hooks 修改一下即可。

import genres from "../data/genres";
...
const useGenres = () => ({ data: genres, isLoading: false, error: null });

2024-09-12 00:56 2024-09-13 00:28

Adding Emojis & Shipping Static Data

评论