From 5aa87994c14974334a0ca1d9ca184a96e5e46625 Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 14:37:16 -0300
Subject: [PATCH 1/8] criado endpoint para busca de videos relacionados

---
 src/api/service.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/api/service.js b/src/api/service.js
index ea02130..05b9229 100644
--- a/src/api/service.js
+++ b/src/api/service.js
@@ -1,8 +1,9 @@
 const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3';
 const YOUTUBE_AUTH_KEY = () => {
-  const auth = process.env.NODE_ENV === 'development'
-    ? process.env.REACT_APP_API_KEY
-    : null;
+  const auth =
+    process.env.NODE_ENV === 'development'
+      ? process.env.REACT_APP_API_KEY
+      : null;
   return auth;
 };
 
@@ -43,3 +44,16 @@ export const getVideoComments = async (videoId) => {
     return error;
   }
 };
+
+export const getRelatedVideos = async (videoId) => {
+  const urlParams = `part=snippet&relatedToVideoId=${videoId}&type=video&key=${YOUTUBE_AUTH_KEY()}`;
+  const URL = `${YOUTUBE_API_URL}/search?${urlParams}`;
+
+  try {
+    const response = await fetch(URL);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    return error;
+  }
+};

From 3d8399d2934653e545554c25bb7fe182c25085c3 Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 14:53:23 -0300
Subject: [PATCH 2/8] implementando videos laterais

---
 src/components/content/VideoPage/VideoPage.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/content/VideoPage/VideoPage.js b/src/components/content/VideoPage/VideoPage.js
index 6c6b2df..33bf932 100644
--- a/src/components/content/VideoPage/VideoPage.js
+++ b/src/components/content/VideoPage/VideoPage.js
@@ -5,7 +5,7 @@ import VideoPlayerDescription from './VideoPlayer/VideoPlayerDescription';
 import VideoPlayerInfo from './VideoPlayer/VideoPlayerInfo';
 import VideoPlayerComments from './VideoPlayerComments/VideoPlayerComments';
 import VideoSideBar from './VideoSideBar/VideoSideBar';
-import { getVideoInfo, getVideoComments } from '../../../api/service';
+import { getVideoInfo, getVideoComments, getRelatedVideos } from '../../../api/service';
 
 class VideoPage extends Component {
   constructor(props) {
@@ -18,7 +18,7 @@ class VideoPage extends Component {
 
     this.state = {
       videoId,
-      relatedVideos: data,
+      relatedVideos: [],
       shouldRedirect: false,
       videoInfo: null,
       videoComments: null,
@@ -35,6 +35,11 @@ class VideoPage extends Component {
     this.setState({ videoId }, () => {
       getVideoInfo(videoId).then((data) => this.setState({ videoInfo: data.items[0] }));
       getVideoComments(videoId).then((data) => this.setState({ videoComments: data.items }));
+      getRelatedVideos(videoId).then((data) => this.setState({
+        relatedVideos: data
+          .items
+          .slice(0, 24),
+      }));
     });
 
     return this.setState({ shouldRedirect: true });
@@ -42,9 +47,14 @@ class VideoPage extends Component {
 
   mountVideoPage() {
     const { videoId } = this.state;
-    this.setState({ shouldRedirect: false });
     getVideoInfo(videoId).then((data) => this.setState({ videoInfo: data.items[0] }));
     getVideoComments(videoId).then((data) => this.setState({ videoComments: data.items }));
+    getRelatedVideos(videoId).then((data) => this.setState({
+      relatedVideos: data
+        .items
+        .slice(0, 24),
+    }));
+    this.setState({ shouldRedirect: false });
   }
 
   renderVideoPage(videoId, videoInfo, videoComments, relatedVideos) {

From b0e02130e213f8a51753ae532aae7a61756b3c38 Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 16:07:26 -0300
Subject: [PATCH 3/8] Task implementar sidebar dinamica

---
 src/__tests__/AltHeader.test.js               | 50 ++++++++++++
 src/__tests__/AltVideoPage.test.js            | 76 +++++++++++++++++++
 src/api/service.js                            |  7 +-
 src/components/content/SearchResult/index.js  |  5 +-
 src/components/content/VideoPage/VideoPage.js |  5 +-
 5 files changed, 131 insertions(+), 12 deletions(-)
 create mode 100644 src/__tests__/AltHeader.test.js
 create mode 100644 src/__tests__/AltVideoPage.test.js

diff --git a/src/__tests__/AltHeader.test.js b/src/__tests__/AltHeader.test.js
new file mode 100644
index 0000000..ee7c0d5
--- /dev/null
+++ b/src/__tests__/AltHeader.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import App from '../App';
+import mockSearchVideo from '../__mocks__/mockSearchVideo';
+import * as api from '../api/service';
+
+jest.mock('react-router-dom', () => {
+  const moduloOriginal = jest.requireActual('react-router-dom');
+  return {
+    ...moduloOriginal,
+    BrowserRouter: ({ children }) => <div>{children}</div>,
+  };
+});
+
+jest.mock('../api/service');
+api.searchVideos.mockImplementation(() => Promise.resolve(mockSearchVideo));
+
+function renderWithRouter(ui, routeConfigs = {}) {
+  const route = routeConfigs.route || '/';
+  const history = routeConfigs.history || createMemoryHistory({ initialEntries: [route] });
+  return {
+    ...render(<Router history={history}>{ui}</Router>),
+    history,
+  };
+}
+
+describe('Funcionalidades Componente Header', () => {
+  it('Renderiza apenas um link na tela', () => {
+    const { container } = renderWithRouter(<App />);
+    const links = container.querySelectorAll('a');
+    expect(links.length).toBe(2);
+    expect(links[1].href).toMatch('/results');
+  });
+
+  it('Ao fazer uma busca redireciona a página de resultados', async () => {
+    const { getAllByRole, getByPlaceholderText, history } = renderWithRouter(
+      <App />,
+    );
+    expect(history.location.pathname).toBe('/');
+
+    const searchText = 'bugs';
+    fireEvent.change(getByPlaceholderText(/search/i), { target: { value: searchText } });
+    fireEvent.click(getAllByRole('link')[1]);
+
+    await waitFor(() => expect(api.searchVideos).toHaveBeenCalled());
+    expect(history.location.pathname).toBe(`/results/${searchText}`);
+  });
+});
diff --git a/src/__tests__/AltVideoPage.test.js b/src/__tests__/AltVideoPage.test.js
new file mode 100644
index 0000000..e2a6a7b
--- /dev/null
+++ b/src/__tests__/AltVideoPage.test.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import VideoPage from '../components/content/VideoPage/VideoPage';
+import mockSearchVideo from '../__mocks__/mockSearchVideo';
+import mockGetVideoInfo from '../__mocks__/mockGetVideoInfo';
+import mockGetVideoComments from '../__mocks__/mockGetVideoComments';
+import * as api from '../api/service';
+
+jest.mock('react-router-dom', () => {
+  const moduloOriginal = jest.requireActual('react-router-dom');
+  return {
+    ...moduloOriginal,
+    BrowserRouter: ({ children }) => <div>{children}</div>,
+    useHistory: () => ({ push: jest.fn() }),
+  };
+});
+
+jest.mock('../api/service');
+api.getVideoInfo.mockImplementation(() => Promise.resolve(mockGetVideoInfo));
+api.getVideoComments.mockImplementation(() => Promise.resolve(mockGetVideoComments));
+api.getRelatedVideos.mockImplementation(() => Promise.resolve(mockSearchVideo));
+
+function renderWithRouter(ui, routeConfigs = {}) {
+  const route = routeConfigs.route || '/';
+  const history = routeConfigs.history || createMemoryHistory({ initialEntries: [route] });
+  return {
+    ...render(<Router history={history}>{ui}</Router>),
+    history,
+  };
+}
+
+describe('Funcionalidades Componente Video Page', () => {
+  it('Renderiza dados no vídeo na página', async () => {
+    const randomVideoID = mockSearchVideo.items[1].id.videoId;
+
+    renderWithRouter(
+      <VideoPage
+        match={{ params: { videoId: randomVideoID } }}
+        location={{ state: { data: mockSearchVideo.items } }}
+      />,
+    );
+
+    await waitFor(() => expect(api.getVideoInfo).toHaveBeenCalled());
+    await waitFor(() => expect(api.getVideoComments).toHaveBeenCalled());
+
+    expect(screen.getByTestId('videoplayer')).toBeInTheDocument();
+    expect(screen.getByTestId('videoinfo')).toBeInTheDocument();
+    expect(screen.getByTestId('channelinfo')).toBeInTheDocument();
+    expect(screen.getByTestId('comments')).toBeInTheDocument();
+  });
+
+  it('Vídeo selecionado atualiza os dados do vídeo atual na página', async () => {
+    const randomVideoID = mockSearchVideo.items[1].id.videoId;
+    const { history } = renderWithRouter(
+      <VideoPage
+        match={{ params: { videoId: randomVideoID } }}
+        location={{ state: { data: mockSearchVideo.items } }}
+      />,
+      { route: `/watch/${randomVideoID}` },
+    );
+
+    await waitFor(() => expect(api.getVideoInfo).toHaveBeenCalled());
+    await waitFor(() => expect(api.getVideoComments).toHaveBeenCalled());
+    await waitFor(() => expect(api.getRelatedVideos).toHaveBeenCalled());
+    expect(history.location.pathname).toBe(`/watch/${randomVideoID}`);
+
+    fireEvent.click(screen.getAllByTestId('selectedVideo')[2]);
+    await waitFor(() => expect(api.getVideoInfo).toHaveBeenCalled());
+    await waitFor(() => expect(api.getVideoComments).toHaveBeenCalled());
+    await waitFor(() => expect(api.getRelatedVideos).toHaveBeenCalled());
+
+    expect(history.location.pathname).not.toEqual(`/watch/${randomVideoID}`);
+  });
+});
diff --git a/src/api/service.js b/src/api/service.js
index 05b9229..a580372 100644
--- a/src/api/service.js
+++ b/src/api/service.js
@@ -1,9 +1,8 @@
 const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3';
 const YOUTUBE_AUTH_KEY = () => {
-  const auth =
-    process.env.NODE_ENV === 'development'
-      ? process.env.REACT_APP_API_KEY
-      : null;
+  const auth = process.env.NODE_ENV === 'development'
+    ? process.env.REACT_APP_API_KEY
+    : null;
   return auth;
 };
 
diff --git a/src/components/content/SearchResult/index.js b/src/components/content/SearchResult/index.js
index 5201187..2c3add8 100644
--- a/src/components/content/SearchResult/index.js
+++ b/src/components/content/SearchResult/index.js
@@ -46,10 +46,7 @@ class SearchResult extends Component {
           <Link
             className="thumbnail-card"
             key={item.etag}
-            to={{
-              pathname: `/watch/${item.id.videoId}`,
-              state: { data },
-            }}
+            to={`/watch/${item.id.videoId}`}
           >
             <VideoCard video={item} />
           </Link>
diff --git a/src/components/content/VideoPage/VideoPage.js b/src/components/content/VideoPage/VideoPage.js
index 33bf932..5958227 100644
--- a/src/components/content/VideoPage/VideoPage.js
+++ b/src/components/content/VideoPage/VideoPage.js
@@ -11,10 +11,7 @@ class VideoPage extends Component {
   constructor(props) {
     super(props);
 
-    const {
-      match: { params: { videoId } },
-      location: { state: { data } },
-    } = this.props;
+    const { match: { params: { videoId } } } = this.props;
 
     this.state = {
       videoId,

From 35a77ff60f93821561d5a8ea4f22b2780a9be580 Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 16:45:54 -0300
Subject: [PATCH 4/8] =?UTF-8?q?implementa=C3=A7=C3=A3o=20de=20testes=20de?=
 =?UTF-8?q?=20novas=20funcionalidades=20e=20iniciando=20pagina=20de=20vide?=
 =?UTF-8?q?os=20assistidos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/AltHeader.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/AltHeader.test.js b/src/__tests__/AltHeader.test.js
index ee7c0d5..b18ddf6 100644
--- a/src/__tests__/AltHeader.test.js
+++ b/src/__tests__/AltHeader.test.js
@@ -27,7 +27,7 @@ function renderWithRouter(ui, routeConfigs = {}) {
 }
 
 describe('Funcionalidades Componente Header', () => {
-  it('Renderiza apenas um link na tela', () => {
+  it('Renderiza dois links na tela', () => {
     const { container } = renderWithRouter(<App />);
     const links = container.querySelectorAll('a');
     expect(links.length).toBe(2);

From f117d864ebb1bd8adcc76e7493a22632ff530f86 Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 17:39:21 -0300
Subject: [PATCH 5/8] atualizando

---
 src/__tests__/AltSearchResults.test.js        | 65 +++++++++++++++++++
 src/__tests__/SearchResult.test.js            | 18 ++---
 src/components/ViewedVideos.js                | 13 ++++
 .../SearchResult/VideoCard/VideoCard.js       |  9 ++-
 src/components/content/SearchResult/index.js  |  2 +-
 src/components/content/VideoPage/VideoPage.js | 20 +++++-
 .../VideoPage/VideoPlayer/VideoPlayer.js      |  2 +-
 7 files changed, 116 insertions(+), 13 deletions(-)
 create mode 100644 src/__tests__/AltSearchResults.test.js
 create mode 100644 src/components/ViewedVideos.js

diff --git a/src/__tests__/AltSearchResults.test.js b/src/__tests__/AltSearchResults.test.js
new file mode 100644
index 0000000..27a842a
--- /dev/null
+++ b/src/__tests__/AltSearchResults.test.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  fireEvent,
+  getByRole,
+  waitFor,
+} from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import SearchResult from '../components/content/SearchResult/index';
+import App from '../App';
+import mockSearchVideo from '../__mocks__/mockSearchVideo';
+import mockGetVideoInfo from '../__mocks__/mockGetVideoInfo';
+import mockGetVideoComments from '../__mocks__/mockGetVideoComments';
+import * as api from '../api/service';
+
+jest.mock('react-router-dom', () => {
+  const moduloOriginal = jest.requireActual('react-router-dom');
+  return {
+    ...moduloOriginal,
+    BrowserRouter: ({ children }) => <div>{children}</div>,
+  };
+});
+
+jest.mock('../api/service');
+api.searchVideos.mockImplementation(() => Promise.resolve(mockSearchVideo));
+api.getVideoInfo.mockImplementation(() => Promise.resolve(mockGetVideoInfo));
+api.getVideoComments.mockImplementation(() => Promise.resolve(mockGetVideoComments));
+api.getRelatedVideos.mockImplementation(() => Promise.resolve(mockSearchVideo));
+
+function renderWithRouter(ui, routeConfigs = {}) {
+  const route = routeConfigs.route || '/';
+  const history = routeConfigs.history || createMemoryHistory({ initialEntries: [route] });
+  return {
+    ...render(<Router history={history}>{ui}</Router>),
+    history,
+  };
+}
+
+describe('Funcionalidades Componente Search Result', () => {
+  it('Renderiza uma lista de videos em cima da busca', async () => {
+    renderWithRouter(
+      <SearchResult match={{ params: { searchParam: 'bugs' } }} />,
+    );
+    await waitFor(() => expect(api.searchVideos).toHaveBeenCalled());
+    expect(screen.getAllByRole('link').length).toBeLessThan(
+      mockSearchVideo.items.length,
+    );
+  });
+
+  it('Ao clicar em um video redireciona a pagina de display', async () => {
+    const { history } = renderWithRouter(<App />, { route: '/results/bugs' });
+    await waitFor(() => expect(api.searchVideos).toHaveBeenCalled());
+
+    const videoLink = screen.getAllByRole('link')[2];
+    fireEvent.click(videoLink);
+    expect(history.location.pathname).toMatch(/watch/i);
+
+    await waitFor(() => expect(api.getVideoInfo).toHaveBeenCalled());
+    await waitFor(() => expect(api.getVideoComments).toHaveBeenCalled());
+
+    expect(screen.getByTestId('videoplayer')).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/SearchResult.test.js b/src/__tests__/SearchResult.test.js
index 3ee1ff0..07898d2 100644
--- a/src/__tests__/SearchResult.test.js
+++ b/src/__tests__/SearchResult.test.js
@@ -7,7 +7,7 @@ import App from '../App';
 import mockSearchVideo from '../__mocks__/mockSearchVideo';
 import mockGetVideoInfo from '../__mocks__/mockGetVideoInfo';
 import mockGetVideoComments from '../__mocks__/mockGetVideoComments';
-import * as api from '../api/service'
+import * as api from '../api/service';
 
 jest.mock('react-router-dom', () => {
   const moduloOriginal = jest.requireActual('react-router-dom');
@@ -15,17 +15,17 @@ jest.mock('react-router-dom', () => {
     ...moduloOriginal,
     BrowserRouter: ({ children }) => (<div>{children}</div>),
   };
-})
+});
 
 jest.mock('../api/service');
 api.searchVideos.mockImplementation(
-  () => Promise.resolve(mockSearchVideo)
+  () => Promise.resolve(mockSearchVideo),
 );
 api.getVideoInfo.mockImplementation(
-  () => Promise.resolve(mockGetVideoInfo)
+  () => Promise.resolve(mockGetVideoInfo),
 );
 api.getVideoComments.mockImplementation(
-  () => Promise.resolve(mockGetVideoComments)
+  () => Promise.resolve(mockGetVideoComments),
 );
 
 function renderWithRouter(ui, routeConfigs = {}) {
@@ -42,7 +42,7 @@ describe('Funcionalidades Componente Search Result', () => {
     renderWithRouter(<SearchResult match={{ params: { searchParam: 'bugs' } }} />);
     await waitFor(() => expect(api.searchVideos).toHaveBeenCalled());
     expect(screen.getAllByRole('link').length).toBeLessThan(mockSearchVideo.items.length);
-  })
+  });
 
   it('Ao clicar em um video redireciona a pagina de display', async () => {
     const { history } = renderWithRouter(<App />, { route: '/results/bugs' });
@@ -54,7 +54,7 @@ describe('Funcionalidades Componente Search Result', () => {
 
     await waitFor(() => expect(api.getVideoInfo).toHaveBeenCalled());
     await waitFor(() => expect(api.getVideoComments).toHaveBeenCalled());
-  
+
     expect(screen.getByTestId('videoplayer')).toBeInTheDocument();
-  })
-})
\ No newline at end of file
+  });
+});
diff --git a/src/components/ViewedVideos.js b/src/components/ViewedVideos.js
new file mode 100644
index 0000000..8de8495
--- /dev/null
+++ b/src/components/ViewedVideos.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class ViewedVideos extends Component {
+  constructor(props) {
+    super(props);
+    this
+  }
+  render() {
+    return <div></div>;
+  }
+}
+
+export default ViewedVideos;
diff --git a/src/components/content/SearchResult/VideoCard/VideoCard.js b/src/components/content/SearchResult/VideoCard/VideoCard.js
index 7cb82ef..a3efb85 100644
--- a/src/components/content/SearchResult/VideoCard/VideoCard.js
+++ b/src/components/content/SearchResult/VideoCard/VideoCard.js
@@ -7,8 +7,15 @@ class VideoCard extends Component {
     return !!(props === param1 || props === param2);
   }
 
-  render() {
+  constructor(props) {
+    super(props);
     const { video } = this.props;
+
+    this.state = { video };
+  }
+
+  render() {
+    const { video } = this.state;
     const { id: { kind }, snippet } = video;
     const { thumbnails: { medium: { url } }, channelTitle, description, title } = snippet;
     return (
diff --git a/src/components/content/SearchResult/index.js b/src/components/content/SearchResult/index.js
index 2c3add8..90ef9fa 100644
--- a/src/components/content/SearchResult/index.js
+++ b/src/components/content/SearchResult/index.js
@@ -46,7 +46,7 @@ class SearchResult extends Component {
           <Link
             className="thumbnail-card"
             key={item.etag}
-            to={`/watch/${item.id.videoId}`}
+            to={{ pathname: `/watch/${item.id.videoId}`, state: { item } }}
           >
             <VideoCard video={item} />
           </Link>
diff --git a/src/components/content/VideoPage/VideoPage.js b/src/components/content/VideoPage/VideoPage.js
index 5958227..1cb9bc3 100644
--- a/src/components/content/VideoPage/VideoPage.js
+++ b/src/components/content/VideoPage/VideoPage.js
@@ -5,7 +5,11 @@ import VideoPlayerDescription from './VideoPlayer/VideoPlayerDescription';
 import VideoPlayerInfo from './VideoPlayer/VideoPlayerInfo';
 import VideoPlayerComments from './VideoPlayerComments/VideoPlayerComments';
 import VideoSideBar from './VideoSideBar/VideoSideBar';
-import { getVideoInfo, getVideoComments, getRelatedVideos } from '../../../api/service';
+import {
+  getVideoInfo,
+  getVideoComments,
+  getRelatedVideos,
+} from '../../../api/service';
 
 class VideoPage extends Component {
   constructor(props) {
@@ -25,6 +29,7 @@ class VideoPage extends Component {
   }
 
   componentDidMount() {
+    this.saveViewedVideos();
     this.mountVideoPage();
   }
 
@@ -54,6 +59,19 @@ class VideoPage extends Component {
     this.setState({ shouldRedirect: false });
   }
 
+  saveViewedVideos() {
+    const { location: { state: { item } } } = this.props;
+    const viewedVideos = JSON.parse(
+      localStorage.getItem('viewedVideos') || '[]',
+    );
+    const viewedArray = viewedVideos.filter((element) => element !== item);
+    const storeviewedVideo = localStorage.setItem(
+      'viewedVideos',
+      JSON.stringify([...viewedArray, item]),
+    );
+    return storeviewedVideo;
+  }
+
   renderVideoPage(videoId, videoInfo, videoComments, relatedVideos) {
     return (
       <main>
diff --git a/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js b/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js
index b90e78b..ff2d81c 100644
--- a/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js
+++ b/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js
@@ -5,7 +5,7 @@ import '../../../../css/chanelInfo.css';
 class VideoPlayer extends Component {
   render() {
     const { embedId, title } = this.props;
-    const playerURL = `https://www.youtube.com/embed/${embedId}`;
+    const playerURL = `https://www.youtube.com/embed/${embedId}?autoplay=1`;
     return (
       <div className="youtube-player">
         <iframe

From a9f2a402f790a45f863086c0db2e04acdc10667c Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 18:08:17 -0300
Subject: [PATCH 6/8] implementando pagina de profile

---
 src/api/localStorage.js                |  7 +++++
 src/components/Profile/ViewedVideos.js | 37 ++++++++++++++++++++++++++
 src/components/ViewedVideos.js         | 13 ---------
 src/components/header/SearchBar.js     |  7 +++--
 4 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 src/api/localStorage.js
 create mode 100644 src/components/Profile/ViewedVideos.js
 delete mode 100644 src/components/ViewedVideos.js

diff --git a/src/api/localStorage.js b/src/api/localStorage.js
new file mode 100644
index 0000000..7b8e547
--- /dev/null
+++ b/src/api/localStorage.js
@@ -0,0 +1,7 @@
+export default function addToLocalStorage(key, value) {
+  const jsonKey = JSON.stringify(key);
+  if (!localStorage[jsonKey]) localStorage[jsonKey] = JSON.stringify([]);
+  const searchHistory = JSON.parse(localStorage[jsonKey]);
+  const updatedSearchHistory = [...searchHistory, value];
+  localStorage[jsonKey] = JSON.stringify(updatedSearchHistory);
+}
diff --git a/src/components/Profile/ViewedVideos.js b/src/components/Profile/ViewedVideos.js
new file mode 100644
index 0000000..d06ffab
--- /dev/null
+++ b/src/components/Profile/ViewedVideos.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import VideoCard from './VideoCard/VideoCard';
+import '../../../css/sideBar.css';
+
+class ViewedVideos extends Component {
+  constructor(props) {
+    super(props);
+
+    const data = JSON.parse(
+      localStorage.getItem('viewedVideos') || '[]',
+    );
+
+    this.state = {
+      data,
+    }
+  }
+  render() {
+    const { data } = this.state;
+
+    return (
+      <div>
+        {data.map((item) => (
+          <Link
+            className="thumbnail-card"
+            key={item.etag}
+            to={{ pathname: `/watch/${item.id.videoId}`, state: { item } }}
+          >
+            <VideoCard video={item} />
+          </Link>
+        ))}
+      </div>
+    );
+  }
+}
+
+export default ViewedVideos;
diff --git a/src/components/ViewedVideos.js b/src/components/ViewedVideos.js
deleted file mode 100644
index 8de8495..0000000
--- a/src/components/ViewedVideos.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-
-class ViewedVideos extends Component {
-  constructor(props) {
-    super(props);
-    this
-  }
-  render() {
-    return <div></div>;
-  }
-}
-
-export default ViewedVideos;
diff --git a/src/components/header/SearchBar.js b/src/components/header/SearchBar.js
index 8ae3f55..13aa419 100644
--- a/src/components/header/SearchBar.js
+++ b/src/components/header/SearchBar.js
@@ -9,7 +9,7 @@ class SearchBar extends Component {
 
     this.state = {
       searchInput: '',
-      keyEnter: false
+      keyEnter: false,
     };
 
     this.handleSearchInput = this.handleSearchInput.bind(this);
@@ -17,12 +17,10 @@ class SearchBar extends Component {
   }
 
   pressEnterKey(event) {
-    const { searchInput } = this.state;
     const enterOrSpace = event.key === 'Enter'
       || event.keyCode === 13;
 
     if (enterOrSpace) {
-      console.log('enter')
       event.preventDefault();
       this.setState({ keyEnter: true });
     }
@@ -42,7 +40,8 @@ class SearchBar extends Component {
         <Redirect
           to={{ pathname: `/results/${searchInput}`, state: { searchInput } }}
         />
-      )}
+      );
+    }
 
     return (
       <div className="searchbar">

From 38a8fe7c952310ddaa6e4b6005f183d416c19066 Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 18:58:28 -0300
Subject: [PATCH 7/8] =?UTF-8?q?implementa=C3=A7=C3=A3o=20parcial=20dos=20v?=
 =?UTF-8?q?ideos=20assistidos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                                    |  3 ++-
 src/api/localStorage.js                       | 11 +++++----
 src/components/Profile/ViewedVideos.js        | 21 ++++++++++-------
 src/components/Profile/index.js               | 23 +++++++++++++++++++
 src/components/content/VideoPage/VideoPage.js | 21 ++++-------------
 .../VideoPage/VideoSideBar/VideoSideBar.js    |  2 +-
 src/components/header/ProfileFeatures.js      | 10 ++++----
 7 files changed, 56 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Profile/index.js

diff --git a/src/App.js b/src/App.js
index 77dddb4..46930bd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ import Header from './components/header/Header';
 import VideoPage from './components/content/VideoPage/VideoPage';
 import SearchResult from './components/content/SearchResult';
 import NotFound from './components/content/NotFound';
-import InitialPage from './components/content/InitialPage';
+import Profile from './components/Profile';
 
 class App extends Component {
   render() {
@@ -28,6 +28,7 @@ class App extends Component {
               path="/results/:searchParam"
               render={(props) => <SearchResult {...props} />}
             />
+            <Route to="/profile" component={Profile} />
             <Route path="*" component={NotFound} />
           </Switch>
         </div>
diff --git a/src/api/localStorage.js b/src/api/localStorage.js
index 7b8e547..2ed4b7d 100644
--- a/src/api/localStorage.js
+++ b/src/api/localStorage.js
@@ -1,7 +1,8 @@
 export default function addToLocalStorage(key, value) {
-  const jsonKey = JSON.stringify(key);
-  if (!localStorage[jsonKey]) localStorage[jsonKey] = JSON.stringify([]);
-  const searchHistory = JSON.parse(localStorage[jsonKey]);
-  const updatedSearchHistory = [...searchHistory, value];
-  localStorage[jsonKey] = JSON.stringify(updatedSearchHistory);
+  // const jsonKey = JSON.stringify(key);
+  if (!localStorage[key]) localStorage[key] = JSON.stringify([]);
+  const searchHistory = JSON.parse(localStorage[key]);
+  const historyArray = searchHistory.filter((element) => element.etag !== value.etag);
+  const updatedSearchHistory = [...historyArray, value];
+  localStorage[key] = JSON.stringify(updatedSearchHistory);
 }
diff --git a/src/components/Profile/ViewedVideos.js b/src/components/Profile/ViewedVideos.js
index d06ffab..0d5f667 100644
--- a/src/components/Profile/ViewedVideos.js
+++ b/src/components/Profile/ViewedVideos.js
@@ -1,20 +1,25 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import VideoCard from './VideoCard/VideoCard';
-import '../../../css/sideBar.css';
+import VideoCard from '../content/SearchResult/VideoCard/VideoCard';
+import '../../css/sideBar.css';
 
 class ViewedVideos extends Component {
   constructor(props) {
     super(props);
 
-    const data = JSON.parse(
-      localStorage.getItem('viewedVideos') || '[]',
-    );
+    this.state = { data: [] };
+  }
 
-    this.state = {
-      data,
-    }
+  componentDidMount() {
+    this.mountViewedComponent();
   }
+
+  mountViewedComponent() {
+    const data = JSON.parse(localStorage.getItem('viewedVideos'));
+    console.log(data, JSON.parse(localStorage.getItem('viewedVideos')));
+    return this.setState({ data: [...data] });
+  }
+
   render() {
     const { data } = this.state;
 
diff --git a/src/components/Profile/index.js b/src/components/Profile/index.js
new file mode 100644
index 0000000..ee1bc25
--- /dev/null
+++ b/src/components/Profile/index.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import ViewedVideos from './ViewedVideos';
+
+class Profile extends Component {
+  render() {
+    return <section>
+      <div>
+        <h3>Vídeos Pesquisados</h3>
+      </div>
+      <div>
+    <ViewedVideos/>
+      </div>
+      <div>
+        <h3>Vídeos Favoritos</h3>
+      </div>
+      <div>
+        <h3>Assistir mais tarde</h3>
+      </div>
+    </section>;
+  }
+}
+
+export default Profile;
diff --git a/src/components/content/VideoPage/VideoPage.js b/src/components/content/VideoPage/VideoPage.js
index 1cb9bc3..9a35ee1 100644
--- a/src/components/content/VideoPage/VideoPage.js
+++ b/src/components/content/VideoPage/VideoPage.js
@@ -10,6 +10,7 @@ import {
   getVideoComments,
   getRelatedVideos,
 } from '../../../api/service';
+import addToLocalStorage from '../../../api/localStorage';
 
 class VideoPage extends Component {
   constructor(props) {
@@ -29,11 +30,12 @@ class VideoPage extends Component {
   }
 
   componentDidMount() {
-    this.saveViewedVideos();
+    const { location: { state: { item } } } = this.props;
+    addToLocalStorage('viewedVideos', item);
     this.mountVideoPage();
   }
 
-  handleSelectedVideo(videoId) {
+  handleSelectedVideo(videoId, video) {
     this.setState({ videoId }, () => {
       getVideoInfo(videoId).then((data) => this.setState({ videoInfo: data.items[0] }));
       getVideoComments(videoId).then((data) => this.setState({ videoComments: data.items }));
@@ -43,7 +45,7 @@ class VideoPage extends Component {
           .slice(0, 24),
       }));
     });
-
+    addToLocalStorage('viewedVideos', video);
     return this.setState({ shouldRedirect: true });
   }
 
@@ -59,19 +61,6 @@ class VideoPage extends Component {
     this.setState({ shouldRedirect: false });
   }
 
-  saveViewedVideos() {
-    const { location: { state: { item } } } = this.props;
-    const viewedVideos = JSON.parse(
-      localStorage.getItem('viewedVideos') || '[]',
-    );
-    const viewedArray = viewedVideos.filter((element) => element !== item);
-    const storeviewedVideo = localStorage.setItem(
-      'viewedVideos',
-      JSON.stringify([...viewedArray, item]),
-    );
-    return storeviewedVideo;
-  }
-
   renderVideoPage(videoId, videoInfo, videoComments, relatedVideos) {
     return (
       <main>
diff --git a/src/components/content/VideoPage/VideoSideBar/VideoSideBar.js b/src/components/content/VideoPage/VideoSideBar/VideoSideBar.js
index 1c154ab..8f61b7b 100644
--- a/src/components/content/VideoPage/VideoSideBar/VideoSideBar.js
+++ b/src/components/content/VideoPage/VideoSideBar/VideoSideBar.js
@@ -29,7 +29,7 @@ class VideoSideBar extends Component {
               tabIndex={0}
               data-testid="selectedVideo"
               className="suggested-video"
-              onClick={() => handleSelectedVideo(video.id.videoId)}
+              onClick={() => handleSelectedVideo(video.id.videoId, video)}
               onKeyPress={(event) => VideoSideBar.onKeyPress(
                 event,
                 handleSelectedVideo,
diff --git a/src/components/header/ProfileFeatures.js b/src/components/header/ProfileFeatures.js
index 262dfe9..8f810e4 100644
--- a/src/components/header/ProfileFeatures.js
+++ b/src/components/header/ProfileFeatures.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import { Link } from 'react-router-dom';
 import '../../css/featureIcons.css';
 
 class ProfileFeatures extends Component {
@@ -11,9 +11,11 @@ class ProfileFeatures extends Component {
         <i className="material-icons">message</i>
         <i className="material-icons">notifications</i>
         <span className="bell-icon-badge">9+</span>
-        <i className="material-icons account-icon login-account">
-          account_circle
-        </i>
+        <Link to="/profile">
+          <i className="material-icons account-icon login-account">
+            account_circle
+          </i>
+        </Link>
       </div>
     );
   }

From ab5c52c4e90c9b4a95449b1f1fb641b4b20dca9a Mon Sep 17 00:00:00 2001
From: Hfreitas <hfreitas86@gmail.com>
Date: Fri, 3 Jul 2020 19:22:29 -0300
Subject: [PATCH 8/8] funcionalidade de videos assistidos precisa de ajuste

---
 src/__tests__/AltHeader.test.js        | 2 +-
 src/__tests__/AltSearchResults.test.js | 2 +-
 src/api/localStorage.js                | 2 +-
 src/components/Profile/ViewedVideos.js | 5 ++---
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/AltHeader.test.js b/src/__tests__/AltHeader.test.js
index b18ddf6..43a0715 100644
--- a/src/__tests__/AltHeader.test.js
+++ b/src/__tests__/AltHeader.test.js
@@ -30,7 +30,7 @@ describe('Funcionalidades Componente Header', () => {
   it('Renderiza dois links na tela', () => {
     const { container } = renderWithRouter(<App />);
     const links = container.querySelectorAll('a');
-    expect(links.length).toBe(2);
+    expect(links.length).toBe(3);
     expect(links[1].href).toMatch('/results');
   });
 
diff --git a/src/__tests__/AltSearchResults.test.js b/src/__tests__/AltSearchResults.test.js
index 27a842a..c0d0bea 100644
--- a/src/__tests__/AltSearchResults.test.js
+++ b/src/__tests__/AltSearchResults.test.js
@@ -53,7 +53,7 @@ describe('Funcionalidades Componente Search Result', () => {
     const { history } = renderWithRouter(<App />, { route: '/results/bugs' });
     await waitFor(() => expect(api.searchVideos).toHaveBeenCalled());
 
-    const videoLink = screen.getAllByRole('link')[2];
+    const videoLink = screen.getAllByRole('link')[3];
     fireEvent.click(videoLink);
     expect(history.location.pathname).toMatch(/watch/i);
 
diff --git a/src/api/localStorage.js b/src/api/localStorage.js
index 2ed4b7d..b4b8498 100644
--- a/src/api/localStorage.js
+++ b/src/api/localStorage.js
@@ -2,7 +2,7 @@ export default function addToLocalStorage(key, value) {
   // const jsonKey = JSON.stringify(key);
   if (!localStorage[key]) localStorage[key] = JSON.stringify([]);
   const searchHistory = JSON.parse(localStorage[key]);
-  const historyArray = searchHistory.filter((element) => element.etag !== value.etag);
+  const historyArray = searchHistory.filter((element) => element !== value);
   const updatedSearchHistory = [...historyArray, value];
   localStorage[key] = JSON.stringify(updatedSearchHistory);
 }
diff --git a/src/components/Profile/ViewedVideos.js b/src/components/Profile/ViewedVideos.js
index 0d5f667..9faf3d5 100644
--- a/src/components/Profile/ViewedVideos.js
+++ b/src/components/Profile/ViewedVideos.js
@@ -15,14 +15,13 @@ class ViewedVideos extends Component {
   }
 
   mountViewedComponent() {
-    const data = JSON.parse(localStorage.getItem('viewedVideos'));
-    console.log(data, JSON.parse(localStorage.getItem('viewedVideos')));
+    const data = new Set(JSON.parse(localStorage.getItem('viewedVideos') || '[]'));
     return this.setState({ data: [...data] });
   }
 
   render() {
     const { data } = this.state;
-
+    if (!data) return <h4>Sem vídeos favoritos</h4>;
     return (
       <div>
         {data.map((item) => (