Skip to content

Feat/mini challenge 4 #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lesliedayann wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Feat/mini challenge 4 #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4a3c963
[NEW] Challenge 1 create navigation bar
lesliefigueroa Jul 26, 2021
b8c6f61
[NEW] Challenge 1 home content, videos list
lesliefigueroa Jul 26, 2021
87e878f
[NEW] Unit test
lesliefigueroa Jul 26, 2021
23f0283
[NEW] Coverage file
lesliefigueroa Jul 26, 2021
2c8d337
[NEW] Video search functionality, using YouTube API, fixing eslint issue
lesliefigueroa Aug 2, 2021
143388a
[NEW] adding test
lesliefigueroa Aug 2, 2021
eab6df7
[FIX] changing useYouTube from vanilla JS to hooks
lesliefigueroa Aug 10, 2021
11f2186
[RFG] App, remove unused code
lesliefigueroa Aug 10, 2021
999bfc1
[NEW] App context
lesliefigueroa Aug 10, 2021
e1474bb
[NEW] related videos, dark mode style
lesliefigueroa Aug 10, 2021
9d19f71
[NEW] implementing dark mode style
lesliefigueroa Aug 10, 2021
db13d5d
[NEW] Coverage mini challenge 4
lesliefigueroa Aug 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions coverage.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
--------------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
--------------------------------|----------|----------|----------|----------|-------------------|
All files | 69.81 | 27.27 | 50 | 69.23 | |
components/App | 75 | 100 | 75 | 75 | |
App.component.jsx | 75 | 100 | 75 | 75 | 21,22,23 |
components/Layout | 100 | 100 | 100 | 100 | |
Layout.component.jsx | 100 | 100 | 100 | 100 | |
components/Navabar | 70.37 | 0 | 25 | 69.23 | |
Navbar.component.jsx | 70.37 | 0 | 25 | 69.23 |... 03,106,107,108 |
index.js | 0 | 0 | 0 | 0 | |
components/Switch | 100 | 100 | 100 | 100 | |
ColoredSwitch.component.jsx | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 0 | 0 | |
components/VideoCard | 100 | 100 | 100 | 100 | |
VideoCard.component.jsx | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 0 | 0 | |
components/VideosContainer | 80 | 50 | 50 | 80 | |
VideosContainer.component.jsx | 80 | 50 | 50 | 80 | 35 |
index.js | 0 | 0 | 0 | 0 | |
pages/Home | 100 | 100 | 100 | 100 | |
Home.page.jsx | 100 | 100 | 100 | 100 | |
pages/VideoTemplate | 90 | 50 | 66.67 | 90 | |
Video.page.jsx | 90 | 50 | 66.67 | 90 | 32 |
utils | 69.23 | 100 | 33.33 | 69.23 | |
AppContext.js | 69.23 | 100 | 33.33 | 69.23 | 14,17,22,25 |
utils/hooks | 37.5 | 0 | 33.33 | 37.5 | |
useYouTube.js | 37.5 | 0 | 33.33 | 37.5 |... 34,35,37,38,42 |
--------------------------------|----------|----------|----------|----------|-------------------|
17,309 changes: 17,309 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 6 additions & 13 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,19 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^10.4.9",
"@testing-library/user-event": "^12.1.3",
"axios": "^0.21.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
"react-scripts": "3.4.3",
"styled-components": "^5.3.0"
},
"scripts": {
"start": "react-scripts start",
Expand Down Expand Up @@ -45,17 +50,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"lint-staged": {
"*.{js, jsx, css, json}": [
"yarn run lint:fix",
"pretty-quick --staged",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
Binary file added public/coverage-challenge-4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 23 additions & 45 deletions src/components/App/App.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,35 @@
import React, { useLayoutEffect } from 'react';
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import AuthProvider from '../../providers/Auth';
import HomePage from '../../pages/Home';
import LoginPage from '../../pages/Login';
import NotFound from '../../pages/NotFound';
import SecretPage from '../../pages/Secret';
import Private from '../Private';
import Fortune from '../Fortune';
import Video from '../../pages/VideoTemplate/Video.page';
import Navbar from '../Navabar';
import Layout from '../Layout';
import { random } from '../../utils/fns';
import { AppContext, useAppContextValue } from '../../utils/AppContext';

function App() {
useLayoutEffect(() => {
const { body } = document;

function rotateBackground() {
const xPercent = random(100);
const yPercent = random(100);
body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
}

const intervalId = setInterval(rotateBackground, 3000);
body.addEventListener('click', rotateBackground);

return () => {
clearInterval(intervalId);
body.removeEventListener('click', rotateBackground);
};
}, []);
const appContextValue = useAppContextValue();

return (
<BrowserRouter>
<AuthProvider>
<Layout>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route exact path="/login">
<LoginPage />
</Route>
<Private exact path="/secret">
<SecretPage />
</Private>
<Route path="*">
<NotFound />
</Route>
</Switch>
<Fortune />
</Layout>
</AuthProvider>
</BrowserRouter>
<AppContext.Provider value={appContextValue}>
<BrowserRouter>
<AuthProvider>
<Layout>
<Navbar />
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/video/:id" component={Video} />
<Route path="*">
<NotFound />
</Route>
</Switch>
</Layout>
</AuthProvider>
</BrowserRouter>
</AppContext.Provider>
);
}

Expand Down
14 changes: 14 additions & 0 deletions src/components/App/App.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import { render } from '@testing-library/react';
import App from './App.component';

describe('Testing App component', () => {
let wrapper;
beforeEach(() => {
wrapper = render(<App />);
});

it('should to take snapshop', () => {
expect(wrapper).toMatchSnapshot();
});
});

@ghost ghost Aug 21, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is on this test the App component fetching the real YouTube Api? seems like that. Remember to avoid real YouTube api calls on tests.

Loading