challenge2 changes

.env

@@ -0,0 +1 @@
+API_KEY='AIzaSyBLF4iEDjnWFmKrhEtIetO5qRT2aKQqO4o'

package.json

@@ -12,12 +12,15 @@
     "@chakra-ui/react": "^1.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "axios": "^0.21.1",
+    "formik": "^2.2.6",
     "framer-motion": "^2.9.4",
     "next": "latest",
     "node-fetch": "^2.6.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1",
     "yarn": "^1.22.10"
   },

src/components/Card/Card.jsx

@@ -1,19 +1,28 @@
-import { StarIcon } from '@chakra-ui/icons'
 import { Image } from '@chakra-ui/image'
 import { Badge, Box } from '@chakra-ui/layout'
+import { useRouter } from "next/router"
 import React from 'react'
 
-const Card = ({item, index}) => {
+const Card = ({item}) => {
+    const router = useRouter();
     const property = {
-        imageUrl: item.snippet.thumbnails.default.url,
-        imageAlt: "Rear view of modern home with pool",
-        title: item.snippet.channelTitle,
-        reviewCount: 34,
-        rating: 4,
+        videoId: item.id.videoId,
+        imageUrl: item.snippet.thumbnails.high.url,
+        imageAlt: "youtube image",
+        title: item.snippet.title,
+        channelTitle: item.snippet.channelTitle,
+        description: item.snippet.description
       }
+
+    const videoHandler = () => {
+        router.push({
+            pathname: "/videoPlayer",
+            query: property
+        })
+    }
 
     return (
-        <Box key={index} maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+        <Box key={property.videoId} onClick={videoHandler} cursor="pointer" maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
             <Image width="100%" maxW="382px" maxHeight="286px" src={property.imageUrl} alt={property.imageAlt} />
 
             <Box p="6">
@@ -32,19 +41,8 @@ const Card = ({item, index}) => {
             >
                 {property.title}
             </Box>
-
-            <Box d="flex" mt="2" alignItems="center">
-                {Array(5)
-                .fill("")
-                .map((_, i) => (
-                    <StarIcon
-                    key={i}
-                    color={i < property.rating ? "teal.500" : "gray.300"}
-                    />
-                ))}
-                <Box as="span" ml="2" color="gray.600" fontSize="sm">
-                {property.reviewCount} reviews
-                </Box>
+            <Box as="span" color="gray.600" fontSize="sm">
+                {property.channelTitle} 
             </Box>
             </Box>
         </Box>

src/components/CardList/CardList.jsx

@@ -1,25 +1,33 @@
-import { Flex, Grid } from '@chakra-ui/layout';
+import { Flex, Grid } from '@chakra-ui/layout'
+import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
+import fetchData from '../../utils/useFetchData'
 import Card from '../Card/Card'
 
-const CardList = () => {
+const CardList = ({list, IdVid}) => {
     const [data, setData] = useState()
+    const { query } = useRouter()
+    const { search } = query
+    let result = {}
+    useEffect(async () => {
+        if (IdVid) {
+            result = search ?  await fetchData.get("/search", {params: {q: search}}) : await fetchData.get("/search", {params: {relatedToVideoId: IdVid}})
+        } else {
+            result = search ?  await fetchData.get("/search", {params: {q: search}}) : await fetchData.get("/search")
+        }
+        console.log(result.data)
+        setData(result.data)
 
-    const fetchData = async () => {
-        const res = await fetch("https://gist.githubusercontent.com/jparciga/1d4dd34fb06ba74237f8966e2e777ff5/raw/f3af25f1505deb67e2cc9ee625a633f24d8983ff/youtube-videos-mock.json")
-        const result = await res.json()
-        setData(result)
-    }
+        return function cleanup() {
+            search = ""
+        }
+    },[search])
 
-    useEffect(() => {
-        fetchData()
-        console.log(data)
-    },[])
     return (
-        <Grid templateColumns={{"md": "repeat(3, 1fr)", "sm": "repeat(1, 1fr)"}} mb={5} gap={1}>
-            {!data ? "hola" : data.items.map((item,index) => {
+        <Grid templateColumns={!list?{"md": "repeat(3, 1fr)", "sm": "repeat(1, 1fr)"}:"repeat(1, 1fr)"} mb={5} gap={1}>
+            {!data ? "hola" : data.items.map((item) => {
                 return (
-                    <Card item={item} index={index} />
+                    <Card key={item.id.videoId} item={item}/>         
                 )
             })}
         </Grid>

src/components/CardList/CardList.test.jsx

@@ -1,17 +1,31 @@
-import "@testing-library/jest-dom/extend-expect";
-const fetch = require("node-fetch");
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen, cleanup, waitFor } from "@testing-library/react"
+import fetchData from "../../utils/useFetchData"
+import CardList from "./CardList"
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
 
+describe('Testing CardList', () => {
+    afterEach(cleanup)
+    it('Testing data result from API', async () => {
+        const result = await fetchData.get("/search")
+        expect(Object.keys(result).length).not.toBe(0);
+    });
+
+    it('Testing data result from API with params', async () => {
+        const result = await fetchData.get("/search", {params: {q: "hola"}})
+        expect(Object.keys(result).length).not.toBe(0)
+    });
+
+    it('CardList Component', async () => {
 
-const fetchData = async () => {
-    const res = await fetch("https://gist.githubusercontent.com/jparciga/1d4dd34fb06ba74237f8966e2e777ff5/raw/f3af25f1505deb67e2cc9ee625a633f24d8983ff/youtube-videos-mock.json");
-    return res;
-}
+        useRouter.mockImplementationOnce(() => ({
+            query: { search: '' },
+          }))
+
+
+        const { container } = render(<CardList/>)
+        expect(container).toMatchSnapshot()
 
-describe('Testing CardList', () => {
-    it('Testing data result from request', async () => {
-        const result = await fetchData();
-        const obj = await result.json();
-        expect(Object.keys(obj).length).not.toBe(0);
     });
 
 

src/components/CardList/__snapshots__/CardList.test.jsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing CardList CardList Component 1`] = `
+<div>
+  <div
+    class="css-1r9y2ds"
+  >
+    hola
+  </div>
+</div>
+`;

src/components/Navbar/NavBar.jsx

@@ -7,19 +7,31 @@ import React from 'react'
 import SideMenu from '../SideMenu/SideMenu'
 import { useDisclosure, Link } from "@chakra-ui/react"
 import NextLink from "next/link"
-import Title from '../Title/Title'
+import { useRouter } from 'next/router';
 
 const Navbar = () => {
+    const router = useRouter()
     const { isOpen, onOpen, onClose } = useDisclosure();
     const btnRef = React.useRef()
 
+    const submitHandler = (e) => {
+        e.key === "Enter" && router.push({
+                pathname: "/",
+                query: {search: e.target.value}
+            })
+    }
+
     return (
         <>
             <Flex bg="blue.50" alignItems={"center"}>
                 <HamburgerIcon cursor="pointer" ref={btnRef} ml="2" mr="2" onClick={onOpen} />
-                <Title/>
+                <NextLink href="/">
+                    <Link>
+                        <Text fontSize="3xl">Dutube</Text>    
+                    </Link>
+                </NextLink>
                 <Box mx="auto" w="40%">
-                    <Input bg="white" placeholder="Search..." />
+                    <Input onKeyUp={(e) => submitHandler(e)} bg="white" placeholder="Search..." />
                 </Box>
                 <Switch mr="2"/>
                 <NextLink href="/">

src/components/Video/Video.jsx

@@ -0,0 +1,26 @@
+import { Box } from '@chakra-ui/layout';
+import React from 'react'
+
+const Video = ({videoId, title, description}) => {
+    const videoSrc = `https://www.youtube.com/embed/${videoId}`;
+    console.log(description)
+    return (
+        <Box maxW="70%" overflow="hidden">
+            <iframe src={videoSrc} style={{width: "100%", maxHeight: "600px", height: "500px"}}  allowFullScreen title='Video player'/>
+            <Box
+            mt="3"
+            fontWeight="semibold"
+            as="h2"
+            lineHeight="tight"
+            isTruncated
+            >
+                {title}
+            </Box>
+            <Box ml="3" as="span" color="gray.600" fontSize="sm">
+                {description}
+            </Box>
+        </Box>
+    )
+}
+
+export default Video

src/pages/_app.jsx

@@ -1,5 +1,5 @@
 import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react'
-
+import Layout from '../components/Layout/Layout'
 import theme from '../theme'
 
 function MyApp({ Component, pageProps }) {
@@ -10,7 +10,9 @@ function MyApp({ Component, pageProps }) {
           useSystemColorMode: true,
         }}
       >
-        <Component {...pageProps} />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
       </ColorModeProvider>
     </ChakraProvider>
   )

src/pages/index.jsx

@@ -1,10 +1,9 @@
 import CardList from "../components/CardList/CardList"
-import Layout from "../components/Layout/Layout"
 
 const Index = () => (
-  <Layout>
-    <CardList/>
-  </Layout>
+
+  <CardList/>
+
 )
 
 export default Index

src/pages/videoPlayer.jsx

@@ -0,0 +1,29 @@
+import { Box, Flex, Text } from '@chakra-ui/layout'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import CardList from '../components/CardList/CardList'
+import Video from '../components/Video/Video'
+
+const videoPlayer = () => {
+    const { query } = useRouter()
+    const { videoId, title, description } = query
+
+    return (
+        <Flex>
+            <Video videoId={videoId} title={title} description={description} />
+            <Box w="sm">
+                <CardList list={true} IdVid={videoId} />
+            </Box>
+        </Flex>
+
+
+
+
+
+
+
+
+    )
+}
+
+export default videoPlayer

src/utils/useFetchData.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+const KEY = 'AIzaSyBLF4iEDjnWFmKrhEtIetO5qRT2aKQqO4o';
+
+export default axios.create({
+    baseURL: 'https://www.googleapis.com/youtube/v3/',
+    params: {
+        part: 'snippet',
+        maxResults: 15,
+        key: KEY,
+        type: 'video',
+    }
+})