import React, { useState, useEffect } from 'react'; import './styles.scss'; import { commentsUrl, issueUrl, sidebarUrl, SidebarType, IssueType, CommentType, useData } from './components/data'; const LoadingSidebar = () => ( <>

); const LoadingIssue = () => ( <>

); const LoadingScreen = () => { return (

); }; const Sidebar = ({ data }: { data: SidebarType[] }) => { return (

{name}

); }; const Comments = ({ comments }: { comments: CommentType[] }) => { return (

{comment}

); }; const Issue = ({ issue, comments }: { issue: IssueType; comments: CommentType[] }) => { return (

{issue.author}

{issue.description}

); }; const useAllData = () => { const [sidebar, setSidebar] = useState(); const [comments, setComments] = useState(); const [issue, setIssue] = useState(); useEffect(() => { const dataFetch = async () => { const result = (await Promise.all([fetch(sidebarUrl), fetch(issueUrl), fetch(commentsUrl)])).map((r) => r.json()); const [sidebarResult, issueResult, commentsResult] = await Promise.all(result); setSidebar(sidebarResult); setIssue(issueResult); setComments(commentsResult); }; dataFetch(); }, []); return { sidebar, comments, issue }; }; const App = () => { const { sidebar, issue, comments } = useAllData(); if (!sidebar || !issue || !comments) return ; return (

); }; export default App;

Chapter 14. Example 6