import { useParams, Link as RouterLink } from 'react-router-dom' import { useQuery } from '@tanstack/react-query' import { getCharacter, getEpisode, getLocation } from './api' function Character() { let params = useParams() const characterId = params.characterId! const { status, data } = useQuery({ queryKey: ['character', characterId], queryFn: () => getCharacter(characterId), }) if (status === 'pending') return

if (status === 'error') return

Error :(

const locationUrlParts = data.location.url.split('/').filter(Boolean) const locationId = locationUrlParts[locationUrlParts.length - 1] return (

{data.name}

Gender: {data.gender}

Status: {data.status}

Species: {data.species}

Origin: {data.origin.name}

Location:

Episodes

{data.episode.map((episode: any) => { const episodeUrlParts = episode.split('/').filter(Boolean) const episodeId = episodeUrlParts[episodeUrlParts.length - 1] return })}

) } function Episode({ episodeId }: { episodeId: string }) { const { data, status } = useQuery({ queryKey: ['episode', episodeId], queryFn: () => getEpisode(episodeId), }) if (status === 'success') { return (

{data.episode}. {data.name} - {data.air_date}

) } } function Location({ locationId }: { locationId: string }) { const { data, status } = useQuery({ queryKey: ['location', locationId], queryFn: () => getLocation(locationId), }) if (status === 'pending') return Loading... if (status === 'error') return Error :( return ( {data.name} - {data.type} ) } export default Character