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}

{comments ? :

}

); }; const useAllData = () => { const [sidebar, setSidebar] = useState(); const [comments, setComments] = useState(); const [issue, setIssue] = useState(); useEffect(() => { const dataFetch = async () => { fetch(sidebarUrl) .then((r) => r.json()) .then((r) => setSidebar(r)); fetch(issueUrl) .then((r) => r.json()) .then((r) => setIssue(r)); fetch(commentsUrl) .then((r) => r.json()) .then((r) => setComments(r)); }; dataFetch(); }, []); return { sidebar, comments, issue }; }; const App = () => { const { sidebar, issue, comments } = useAllData(); if (!sidebar) return ; return (

{issue ? : }

); }; export default App;

Chapter 14. Example 7