create match full page

src/App.tsx

@@ -2,20 +2,24 @@ import React, { FC } from "react";
 import { Switch, Router, Route } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
+import MainLayout from "./layouts/MainLayout";
+
 import Index from "./pages/Index";
 import Detail from "./pages/Detail";
 
 const App: FC = () => (
   <Router history={createBrowserHistory()}>
-    <Switch>
-      <Route exact path="/">
-        <Index />
-      </Route>
+    <MainLayout>
+      <Switch>
+        <Route exact path="/">
+          <Index />
+        </Route>
 
-      <Route exact path="/:slug">
-        <Detail />
-      </Route>
-    </Switch>
+        <Route exact path="/:slug">
+          <Detail />
+        </Route>
+      </Switch>
+    </MainLayout>
   </Router>
 );
 

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import AppBar from "@material-ui/core/AppBar";
+import Link from "@material-ui/core/Link";
 import Toolbar from "@material-ui/core/Toolbar";
 import IconButton from "@material-ui/core/IconButton";
 import Typography from "@material-ui/core/Typography";
@@ -12,6 +13,7 @@ import {
 } from "@material-ui/core/styles";
 import MenuIcon from "@material-ui/icons/Menu";
 import SearchIcon from "@material-ui/icons/Search";
+import { Link as RouterLink } from "react-router-dom";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -86,7 +88,9 @@ const Header: FC<{ title: string }> = ({ title }) => {
             <MenuIcon />
           </IconButton>
           <Typography className={classes.title} variant="h6" noWrap>
-            {title}
+            <Link component={RouterLink} to="/" color="secondary">
+              {title}
+            </Link>
           </Typography>
           <div className={classes.search}>
             <div className={classes.searchIcon}>

src/components/MatchFull.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from "react";
+import Moment from "react-moment";
+import { Container, Typography } from "@material-ui/core";
+
+import IGame from "../types/Game";
+
+const MatchFull: FC<{ game: IGame }> = ({ game }) => (
+  <Container>
+    <Typography gutterBottom variant="h5" component="h3">
+      {game.title}
+    </Typography>
+    <Typography variant="body2" color="textSecondary" component="p">
+      {game.competition.name}
+      <br />
+      <Moment format="DD MMMM YYYY - HH:mm">{game.date}</Moment>
+    </Typography>
+
+    <div dangerouslySetInnerHTML={{ __html: game.videos[0].embed }}></div>
+  </Container>
+);
+
+export default MatchFull;

src/pages/Detail.tsx

@@ -1,18 +1,16 @@
-import React, { FC, useState, useEffect } from "react";
+import React, { FC } from "react";
 import { useRouteMatch } from "react-router-dom";
 
+import { withGame, IGameState } from "../store/GameProvider";
+
 import Loader from "../components/Loader";
-// import MatchItem from "../components/MatchItem";
+import MatchFull from "../components/MatchFull";
 
-const Detail: FC = () => {
-  //   const [game, setGame] = useState([]);
-  const [loading, _] = useState(true);
+const Detail: FC<IGameState> = ({ loading, selectGameByID }) => {
   const { params } = useRouteMatch<{ slug: string }>();
+  const game = selectGameByID(params.slug);
 
-  useEffect(() => {}, []);
-  console.log(params.slug);
-
-  return loading ? <Loader /> : <div>{/* <MatchItem {...game} /> */}</div>;
+  return loading ? <Loader /> : <MatchFull game={game} />;
 };
 
-export default Detail;
+export default withGame((props: IGameState) => <Detail {...props} />);

src/pages/Index.tsx

@@ -1,12 +1,7 @@
 import React, { FC } from "react";
 
 import MatchList from "../components/MatchList";
-import MainLayout from "../layouts/MainLayout";
 
-const Index: FC = () => (
-  <MainLayout>
-    <MatchList />
-  </MainLayout>
-);
+const Index: FC = () => <MatchList />;
 
 export default Index;

src/store/GameProvider.tsx

@@ -8,24 +8,34 @@ export interface IGameState {
   games: IGame[];
   loading: boolean;
   setGames: React.Dispatch<React.SetStateAction<IGame[]>>;
+  selectGameByID: (slug: string) => IGame;
 }
 
 export const GameContext = createContext<IGameState>({
   games: [],
   loading: true,
   setGames: () => {},
+  selectGameByID: () => {
+    return {} as IGame;
+  },
 });
 
 const GameProvider: FC = ({ children }) => {
   const [games, setGames] = useState<IGame[]>([]);
   const [loading, setLoading] = useState(true);
 
+  const selectGameByID = (slug: string): IGame => {
+    const id = parseInt(slug);
+    const game = games[id];
+    return game;
+  };
+
   useEffect(() => {
     apiClient
       .get("/")
       .then(({ data }) => {
-        setLoading(false);
         setGames(data);
+        setLoading(false);
       })
       .catch((err) => {
         setLoading(false);
@@ -35,7 +45,7 @@ const GameProvider: FC = ({ children }) => {
   }, []);
 
   return (
-    <GameContext.Provider value={{ games, loading, setGames }}>
+    <GameContext.Provider value={{ games, loading, setGames, selectGameByID }}>
       {children}
     </GameContext.Provider>
   );