import React, { useState, useEffect } from 'react'; import './styles.scss'; import { commentsUrl, issueUrl, sidebarUrl, SidebarType, IssueType, CommentType } from './components/data'; const CommentsContext = React.createContext([]); const IssueContext = React.createContext({} as IssueType); const SidebarContext = React.createContext([]); const useComments = () => React.useContext(CommentsContext); const useIssue = () => React.useContext(IssueContext); const useSidebar = () => React.useContext(SidebarContext); const SidebarProvider = ({ children }: { children: React.ReactNode }) => { const [sidebar, setSidebar] = useState(); useEffect(() => { const dataFetch = async () => { fetch(sidebarUrl) .then((r) => r.json()) .then((r) => setSidebar(r)); }; dataFetch(); }, []); return {children}; }; const IssueProvider = ({ children }: { children: React.ReactNode }) => { const [issue, setIssue] = useState(); useEffect(() => { const dataFetch = async () => { fetch(issueUrl) .then((r) => r.json()) .then((r) => setIssue(r)); }; dataFetch(); }, []); return {children}; }; const CommentsProvider = ({ children }: { children: React.ReactNode }) => { const [comments, setComments] = useState(); useEffect(() => { const dataFetch = async () => { fetch(commentsUrl) .then((r) => r.json()) .then((r) => setComments(r)); }; dataFetch(); }, []); return {children}; }; const LoadingSidebar = () => ( <>

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

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

); }; const Sidebar = () => { const data = useSidebar(); return (

{name}

); }; const Comments = () => { const comments = useComments(); return (

{comment}

); }; const Issue = () => { const issue = useIssue(); const comments = useComments(); return (

{issue?.author}

{issue?.description}

{comments ? :

}

); }; const App = () => { const sidebar = useSidebar(); const issue = useIssue(); if (!sidebar) return ; return (

{issue ? : }

); }; export default () => ( );

Chapter 14. Example 8