import './styles.scss'; import { useState, useEffect } from 'react'; type Issue = { id: string; title: string; description: string; author: string; }; const IssuePage = () => { const [issue, setIssue] = useState(); useEffect(() => { fetch('https://api-sage-two-60.vercel.app/mocks/issues/1?delay=1000') .then((r) => r.json()) .then((r) => setIssue(r)); }, []); if (!issue) return <>loading issue page; return (

My issue page

{issue.title}

{issue.description}

); }; type About = { title: string; description: string; }; const AboutPage = () => { const [about, setAbout] = useState(); useEffect(() => { fetch('https://api-sage-two-60.vercel.app/mocks/page?delay=1000') .then((r) => r.json()) .then((r) => setAbout(r)); }, []); if (!about) return <>loading about page; return (

{about.title}

{about.description}

); }; type Page = 'issue' | 'about'; const Layout = () => { const [page, setPage] = useState('about'); return (

{page === 'issue' ? : null} {page === 'about' ? : null}

); }; export default function App() { return (

); }

Chapter 15. Example 3