Skip to content

Commit 7d0a936

Browse files
LowouisLowouis
committed
backend finished, with debug of Redux statements
1 parent a8865cc commit 7d0a936

24 files changed

+536
-210
lines changed

‎.firebase/hosting.YnVpbGQ.cache

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
favicon.ico,1664714895016,87aecafb41d21ea93b7af81398237b980c43ee880676c78630ee2d1e9a6d711f
2+
logo192.png,1664714896578,ebf380e341383bbf65d6a762603f630a9f7610c97f32bd297bc097635bc37ee3
3+
logo512.png,1664714896659,c55d034d9cf7abfac7600919cbf4f4ce2f3ea3478df91d01177e8ff136f58918
4+
manifest.json,1664714896183,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
5+
robots.txt,1664714896740,5fcd5c559ded0c02b3ed7840ca3ee77e95b798730af98d9f18bc627ac898071e
6+
asset-manifest.json,1664914386833,018c434f605016705e809871094a41f4e9d70ab0063b8126271f2f3082db1fd3
7+
static/css/main.3f5d6e40.css,1664914386842,aed4ee0dee103c07c1ed0ace9883bd884377833a5855eccfb2933de410ca246c
8+
index.html,1664914386833,8826b6e41cc6ca508ca9a9b635dc81e50e937d8486ed031e102a8278cb39ace4
9+
static/js/787.0904c1f0.chunk.js,1664914386842,6df459983d03b2738516381ca2ef1ec0560e8bb1bb16312f3debd639c1ceaf8d
10+
static/js/main.c11a53b4.js.LICENSE.txt,1664914386842,5e355196d0c2338147057bc84516216a5a662c583966f9fd8d2b1fbf58fc2a7c
11+
static/css/main.3f5d6e40.css.map,1664914386842,5f7e5a18f5f3e3c13c3f9c434db86641ae9588533a8d5fab330b6edf7029fb8f
12+
static/js/787.0904c1f0.chunk.js.map,1664914386842,76a038e603fedfa8029168f52ab8deebc699f99e6650cf73686aab2cdd2d3cd2
13+
static/js/main.c11a53b4.js,1664914386842,2c826b43f5d8818d1551736f300f1f90f1db4f9876b12038bd7308089a8aeb1d
14+
static/js/main.c11a53b4.js.map,1664914386843,1d64e5e99cce4989df01e6bce92e3b8119c315689e781e42806222aeb2b7b34b

‎.firebaserc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"projects": {
3+
"default": "netflix-clone-8bb18"
4+
}
5+
}

‎firebase.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"hosting": {
3+
"public": "build",
4+
"ignore": [
5+
"firebase.json",
6+
"**/.*",
7+
"**/node_modules/**"
8+
],
9+
"rewrites": [
10+
{
11+
"source": "**",
12+
"destination": "/index.html"
13+
}
14+
]
15+
}
16+
}

‎package-lock.json

Lines changed: 62 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"react": "^18.2.0",
1313
"react-dom": "^18.2.0",
1414
"react-redux": "^8.0.4",
15+
"react-router": "^6.4.1",
16+
"react-router-dom": "^6.4.1",
1517
"react-scripts": "5.0.1",
1618
"web-vitals": "^2.1.4"
1719
},

‎public/index.html

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/732/732228.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
8+
<meta name="description" content="Web site created using create-react-app"/>
129
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
1710
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React Redux App</title>
11+
<title>Netflix Clone</title>
2812
</head>
2913
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
3114
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4215
</body>
4316
</html>

‎src/App.js

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,49 @@
1-
import React from 'react';
1+
import React, {useEffect} from 'react';
22
import './App.css';
3-
import HomeScreen from "./HomeScreen";
3+
import {BrowserRouter as Router, Link } from "react-router-dom";
4+
import HomeScreen from "./screens/HomeScreen";
5+
import { Routes, Route } from "react-router-dom";
6+
import LoginScreen from "./screens/LoginScreen";
7+
import { auth } from "./firebase";
8+
import {useDispatch, useSelector} from "react-redux";
9+
import {logout, login, selectUser} from "./features/userSlice";
10+
import ProfilScreen from "./screens/ProfilScreen";
11+
412
function App() {
5-
return (
6-
<div className="app">
7-
<HomeScreen />
8-
</div>
9-
);
13+
const user = useSelector(selectUser);
14+
const dispatch = useDispatch();
15+
console.log(user);
16+
useEffect(()=>{
17+
const unsubscribe = auth.onAuthStateChanged(userAuth =>{
18+
if(userAuth){
19+
dispatch(
20+
login({
21+
uid: userAuth.uid,
22+
email: userAuth.email,
23+
}
24+
))
25+
}
26+
else{
27+
dispatch(logout());
28+
}
29+
})
30+
return unsubscribe;
31+
},[dispatch])
32+
return (
33+
<div className="app">
34+
<Router>
35+
{!user ? (
36+
<LoginScreen />
37+
) : (
38+
<Routes>
39+
<Route exact path='/profile' element={<ProfilScreen />} />
40+
<Route exact path='/' element={<HomeScreen />} />
41+
</Routes>
42+
)}
43+
</Router>
44+
</div>
45+
46+
);
1047
}
1148

1249
export default App;

‎src/Nav.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React, {useEffect, useState} from "react";
2+
import { useNavigate } from 'react-router-dom';
23
import "./nav.css";
34

45
function Nav(){
56

67
//state
78
const [show,handleShow] = useState(false);
8-
9+
const navigate = useNavigate();
910

1011
const transitionNavBar = ()=>{
1112

1213
if( document.documentElement.scrollTop> 100){
13-
console.log(document.documentElement.scrollTop)
1414
handleShow(true);
1515
}
1616
else{
@@ -26,8 +26,16 @@ function Nav(){
2626
return (
2727
<div className={`nav ${show ? "nav__black" : ""}`}>
2828
<div className="nav__contents">
29-
<img className="nav__logo" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" alt=""/>
30-
<img className="nav__avatar" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png" alt="" />
29+
<img className="nav__logo"
30+
src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png"
31+
alt=""
32+
onClick={()=>{navigate("/")}}
33+
/>
34+
<img
35+
onClick={()=>{navigate("/profile")}}
36+
className="nav__avatar"
37+
src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png"
38+
alt="profile avatar picture" />
3139
</div>
3240
</div>
3341
)

‎src/app/store.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { configureStore } from '@reduxjs/toolkit';
2-
import counterReducer from '../features/counterSlice';
2+
import userReducer from '../features/userSlice';
33

4-
export const store = configureStore({
4+
export default configureStore({
55
reducer: {
6-
counter: counterReducer,
6+
user: userReducer,
77
},
88
});

‎src/features/counter/Counter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
incrementAsync,
88
incrementIfOdd,
99
selectCount,
10-
} from '../counterSlice';
10+
} from '../userSlice';
1111
import styles from './Counter.module.css';
1212

1313
export function Counter() {

‎src/features/counter/Counter.module.css

Lines changed: 0 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +0,0 @@
1-
.row {
2-
display: flex;
3-
align-items: center;
4-
justify-content: center;
5-
}
6-
7-
.row > button {
8-
margin-left: 4px;
9-
margin-right: 8px;
10-
}
11-
.row:not(:last-child) {
12-
margin-bottom: 16px;
13-
}
14-
15-
.value {
16-
font-size: 78px;
17-
padding-left: 16px;
18-
padding-right: 16px;
19-
margin-top: 2px;
20-
font-family: 'Courier New', Courier, monospace;
21-
}
22-
23-
.button {
24-
appearance: none;
25-
background: none;
26-
font-size: 32px;
27-
padding-left: 12px;
28-
padding-right: 12px;
29-
outline: none;
30-
border: 2px solid transparent;
31-
color: rgb(112, 76, 182);
32-
padding-bottom: 4px;
33-
cursor: pointer;
34-
background-color: rgba(112, 76, 182, 0.1);
35-
border-radius: 2px;
36-
transition: all 0.15s;
37-
}
38-
39-
.textbox {
40-
font-size: 32px;
41-
padding: 2px;
42-
width: 64px;
43-
text-align: center;
44-
margin-right: 4px;
45-
}
46-
47-
.button:hover,
48-
.button:focus {
49-
border: 2px solid rgba(112, 76, 182, 0.4);
50-
}
51-
52-
.button:active {
53-
background-color: rgba(112, 76, 182, 0.2);
54-
}
55-
56-
.asyncButton {
57-
composes: button;
58-
position: relative;
59-
}
60-
61-
.asyncButton:after {
62-
content: '';
63-
background-color: rgba(112, 76, 182, 0.15);
64-
display: block;
65-
position: absolute;
66-
width: 100%;
67-
height: 100%;
68-
left: 0;
69-
top: 0;
70-
opacity: 0;
71-
transition: width 1s linear, opacity 0.5s ease 1s;
72-
}
73-
74-
.asyncButton:active:after {
75-
width: 0%;
76-
opacity: 1;
77-
transition: 0s;
78-
}

‎src/features/counter/counterSlice.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import counterReducer, {
22
increment,
33
decrement,
44
incrementByAmount,
5-
} from '../counterSlice';
5+
} from '../userSlice';
66

77
describe('counter reducer', () => {
88
const initialState = {

0 commit comments

Comments
 (0)