Skip to content

Commit 0e004ad

Browse files
author
Edgar Vega
committed
v1
1 parent 7316977 commit 0e004ad

File tree

118 files changed

+3217
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+3217
-103
lines changed

‎package.json

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,27 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@apollo/client": "^3.3.19",
67
"@testing-library/jest-dom": "^5.11.4",
78
"@testing-library/react": "^11.1.0",
89
"@testing-library/user-event": "^12.1.10",
10+
"apollo-link-context": "^1.0.20",
11+
"apollo-upload-client": "^16.0.0",
12+
"formik": "^2.2.9",
13+
"graphql": "^15.5.0",
14+
"jwt-decode": "^3.1.2",
15+
"lodash": "^4.17.21",
916
"react": "^17.0.2",
1017
"react-dom": "^17.0.2",
18+
"react-dropzone": "^11.3.2",
19+
"react-router-dom": "^5.2.0",
1120
"react-scripts": "4.0.3",
12-
"web-vitals": "^1.0.1"
21+
"react-toastify": "^7.0.4",
22+
"sass": "^1.34.1",
23+
"semantic-ui-css": "^2.4.1",
24+
"semantic-ui-react": "^2.0.3",
25+
"web-vitals": "^1.0.1",
26+
"yup": "^0.32.9"
1327
},
1428
"scripts": {
1529
"start": "react-scripts start",

‎public/favicon.ico

64.2 KB
Binary file not shown.

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="Social Network"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1313
<!--
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Instaclone</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,64 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import React, {useState, useEffect, useMemo} from 'react';
2+
import {ApolloProvider} from '@apollo/client';
3+
import {ToastContainer} from 'react-toastify';
4+
import client from './config/apollo';
5+
import Auth from './pages/Auth';
6+
import Navigation from './routes/Navigation';
7+
import AuthContext from './context/AuthContext';
8+
import { getToken,removeToken,decodeToken } from './utils/token';
9+
10+
export default function App() {
11+
const [auth, setAuth] = useState(undefined);
12+
//Se ejecuta este método cada vez que el componente se renderiza
13+
useEffect(() => {
14+
const token = getToken();
15+
if (token) {
16+
setAuth(decodeToken(token));
17+
} else {
18+
setAuth(null);
19+
}
20+
}, []);
21+
22+
const logout = () => {
23+
removeToken();
24+
setAuth(null);
25+
};
26+
27+
const setUser = (user) => {
28+
setAuth(user);
29+
};
30+
/*
31+
Una función que guarda datos o funciones la primera vez y cada vez que se renderiza la variable
32+
compara los datos nuevos con los actuales, si hay cambios se actualiza la función y se renderiza el
33+
componente, si no, no se renderiza el componente y no se actualizan los valores de la función
34+
*/
35+
const authData = useMemo(
36+
() => ({
37+
auth,
38+
logout,
39+
setUser,
40+
}),
41+
[auth]
42+
);
43+
44+
if (auth === undefined) return null;
345

4-
function App() {
546
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
47+
<ApolloProvider client={client}>
48+
<AuthContext.Provider value={authData}>
49+
{!auth ? <Auth /> : <Navigation />}
50+
<ToastContainer
51+
position="top-right"
52+
autoClose={3000}
53+
hideProgressBar
54+
newestOnTop
55+
closeOnClick
56+
rtl={false}
57+
pauseOnFocusLoss
58+
draggable
59+
pauseOnHover
60+
/>
61+
</AuthContext.Provider>
62+
</ApolloProvider>
2263
);
2364
}
24-
25-
export default App;

‎src/assets/png/avatar.png

49.4 KB
Loading

‎src/assets/png/instaclone.png

32.8 KB
Loading

‎src/components/Auth/LoginForm/LoginForm.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React,{useState} from 'react';
2+
import {Form,Button} from 'semantic-ui-react';
3+
import {useFormik} from 'formik';
4+
import * as Yup from 'yup';
5+
import {toast} from 'react-toastify';
6+
import {useMutation} from '@apollo/client';
7+
import {LOGIN} from '../../../gql/user';
8+
import modelLogin from './modelLogin';
9+
import {setToken,decodeToken} from '../../../utils/token';
10+
import useAuth from '../../../hooks/useAuth';
11+
import './LoginForm.scss';
12+
13+
export default function LoginForm() {
14+
const [error,setError] = useState("");
15+
const [login] = useMutation(LOGIN);
16+
//AuthData de App.js
17+
const {setUser} = useAuth();
18+
19+
20+
const formik = useFormik({
21+
initialValues: modelLogin(),
22+
validationSchema: Yup.object(modelLogin(true)),
23+
onSubmit: async (formData) =>{
24+
setError("");
25+
try {
26+
const result = await login({
27+
variables: {
28+
input: formData
29+
}
30+
});
31+
toast.success("Has iniciado sesión correctamente.");
32+
const {token} = result.data.login;
33+
setToken(token);
34+
setUser(decodeToken(token));
35+
} catch (err) {
36+
setError(err.message);
37+
toast.error(err.message);
38+
}
39+
}
40+
});
41+
return (
42+
<Form className="login-form" onSubmit={formik.handleSubmit}>
43+
<h2>Entra para ver las fotos y vídeos de tus amigos</h2>
44+
<Form.Input
45+
type="text"
46+
placeholder="Correo electrónico"
47+
name="email"
48+
value={formik.values.email}
49+
onChange={formik.handleChange}
50+
error={formik.errors.email}
51+
/>
52+
<Form.Input
53+
type="password"
54+
placeholder="Contraseña"
55+
name="password"
56+
value={formik.values.password}
57+
onChange={formik.handleChange}
58+
error={formik.errors.password && true}
59+
/>
60+
<Button type="submit" className="btn-submit">Iniciar Sesion</Button>
61+
{error && <div className="div-error"><p className="submit-error">{error}</p></div>}
62+
</Form>
63+
);
64+
}

‎src/components/Auth/LoginForm/LoginForm.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '../../../scss/index.scss';
2+
3+
.login-form{
4+
h2{
5+
font-size: 17px !important;
6+
text-align: center;
7+
margin-bottom: 20px;
8+
}
9+
input{
10+
padding: 15px !important;
11+
background-color: #f9f9f9 !important;
12+
}
13+
}

‎src/components/Auth/LoginForm/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default} from './LoginForm';

0 commit comments

Comments
 (0)