10 |
12 |
18 | );
19 | };
20 |
21 | export default ManScreen;
22 |
--------------------------------------------------------------------------------
/09-router-v6/src/pages/WomanScreen.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Card from "../components/Card";
3 | import { Characters } from "../models/Characters";
4 |
5 | const WomanScreen = () => {
6 | const womans = Characters.filter((character) => character.type === "m");
7 |
8 | return (
9 | Mans Screen
11 |12 |
13 | {mans.map((man) => (
14 |
17 |
10 |
12 |
18 | );
19 | };
20 |
21 | export default WomanScreen;
22 |
--------------------------------------------------------------------------------
/00-nivelacion/00-miNivelación/js/ternario.js:
--------------------------------------------------------------------------------
1 | //Forma base
2 | const cuenta = 10;
3 | let mensaje;
4 | if (cuenta > 0) mensaje = "No tenes mas saldo raton";
5 | else mensaje = "pagate el pancho chango";
6 |
7 | console.write(mensaje);
8 |
9 | //Forma mejorada: Operador ternario
10 | const mensaje =
11 | cuenta < 0 ? "No tenes saldo chango" : "Pagate el pancho chango";
12 | console.write(mensaje);
13 |
14 | //operador ternario de una sola 'verdad'
15 | const mensaje1;
16 | if(true) mensaje1 = "hola";
17 | console.write(mensaje1)
18 | //Forma mejorada
19 | const mensaje2 = cuenta > 0&& "hola";
20 | console.write(mensaje2);
--------------------------------------------------------------------------------
/09-router-v6/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "DB App",
3 | "name": "DB App Router",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": "./",
22 | "display": "standalone",
23 | "theme_color": "#0dcaf0",
24 | "background_color": "#555555"
25 | }
26 |
--------------------------------------------------------------------------------
/00-nivelacion/00-miNivelación/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Womans Screen
11 |12 |
13 | {womans.map((woman) => (
14 |
17 | Hola Mundo
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /11-redux-firebase/src/store/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers, compose, applyMiddleware } from "redux"; 2 | import thunk from "redux-thunk"; 3 | 4 | import { authReducer } from "../reducers/authReducer"; 5 | import { nominaReducer } from "../reducers/nominaReducer"; 6 | 7 | const reducers = combineReducers({ 8 | auth: authReducer, 9 | nomina: nominaReducer, 10 | }); 11 | 12 | const composeEnhancers = 13 | (typeof window !== "undefined" && 14 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || 15 | compose; 16 | 17 | export const store = createStore( 18 | reducers, 19 | composeEnhancers(applyMiddleware(thunk)) 20 | ); 21 | -------------------------------------------------------------------------------- /11-redux-firebase/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Nominal App", 3 | "name": "Calculadora Nominal React + Redux + Firebase", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#3fe496", 24 | "background_color": "#088b83" 25 | } 26 | -------------------------------------------------------------------------------- /11-redux-firebase/src/firebase/config-firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/app"; 2 | import "firebase/firestore"; 3 | import "firebase/auth"; 4 | 5 | const firebaseConfig = { 6 | apiKey: "AIzaSyDbMB54QWwqqYJaGq4SswAeT5dk13en2Cs", 7 | authDomain: "crud-react-94987.firebaseapp.com", 8 | projectId: "crud-react-94987", 9 | storageBucket: "crud-react-94987.appspot.com", 10 | messagingSenderId: "746713242296", 11 | appId: "1:746713242296:web:5223ea9ee7d72fd589724d", 12 | }; 13 | 14 | // Initialize Firebase 15 | firebase.initializeApp(firebaseConfig); 16 | 17 | const db = firebase.firestore(); 18 | const googleAuthProvider = new firebase.auth.GoogleAuthProvider(); 19 | 20 | export { firebase, db, googleAuthProvider }; 21 | -------------------------------------------------------------------------------- /09-router-v6/src/App.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useReducer } from "react"; 2 | 3 | import LoginRouter from "./routes/LoginRouter"; 4 | 5 | import { AuthContext } from "./context/AuthContext"; 6 | import { AuthReducer } from "./reducers/AuthReducer"; 7 | 8 | const init = () => { 9 | return JSON.parse(localStorage.getItem("log")) || { log: false }; 10 | }; 11 | 12 | const App = () => { 13 | const [log, dispatch] = useReducer(AuthReducer, {}, init); 14 | 15 | useEffect(() => { 16 | localStorage.setItem("log", JSON.stringify(log)); 17 | }, [log]); 18 | 19 | return ( 20 |
14 | 
15 |
16 |
25 | );
26 | };
27 |
28 | export default Card;
29 |
--------------------------------------------------------------------------------
/00-nivelacion/00-miNivelación/js/functions.js:
--------------------------------------------------------------------------------
1 | function sumar(a, b) {
2 | document.write(a + b);
3 | }
4 | sumar(5, 4);
5 |
6 | //Forma mejorada
7 | function sumar(a, b) {
8 | return a + b;
9 | }
10 | const resultado = sumar(5, 4);
11 | document.write(resultado);
12 | /*Aca podemos sufrir un ataque xs, donde se puede redefinir el codigo*/
13 | //Forma mejorada
14 | const sumar = (a, b) => {
15 | /*Aca uso una FatArrow function, en una constante evitando asi ataques xs*/
16 | return a + b;
17 | };
18 | const resultado = sumar(5, 4);
19 | console.write(resultado);
20 | //Forma aun mas mejorada
21 | const sumar = (a, b) => a + b;
22 | /*Aca mejoramos la FarArrow, que debido a que solo contiene una instruccion, podemos ahorrarnos las llaves y el retun*/
23 | const resultado = sumar(5, 4);
24 | console.write(resultado);
25 |
--------------------------------------------------------------------------------
/00-nivelacion/00-miNivelación/js/variables.js:
--------------------------------------------------------------------------------
1 | // //Var, Let, const
2 | // //var: todo navegador lee primero los var, pero no la asignacion a posterior, ademas que es vulnerable a ser modificado
3 | // var nombre = "Fede";
4 | // document.write(nombre);
5 |
6 | // saludo;
7 | // saludo();
8 | // var saludo = function () {
9 | // document.write(`Hola ${nombre}`);
10 | // };
11 | // /*Let y const: son dos variables que siguen el flujo de ejecucion */
12 | // //let: evita la redefinicion de una misma variable, evitamos cualquier alcance a nivel de scope, no se puede inicializar hasta que haya sido definida, y se puede usar x cantidad de veces y ser modificada en toda la ejecucion
13 | // document.write(nombre);
14 | let nombre = "Fede";
15 | document.write(nombre);
16 | // //const: crea una variable que no puede ser reasignado su variable
17 |
--------------------------------------------------------------------------------
/09-router-v6/src/pages/LoginScreen.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { useNavigate } from "react-router";
3 | import { AuthContext } from "../context/AuthContext";
4 | import { authTypes } from "../types/authTypes";
5 |
6 | const LoginScreen = () => {
7 | const { dispatch } = useContext(AuthContext);
8 |
9 | const navigate = useNavigate();
10 |
11 | const handleLogin = () => {
12 | dispatch({ type: authTypes.login });
13 |
14 | navigate("/");
15 | };
16 |
17 | return (
18 |
17 |
24 | {name}
18 |19 | 20 | Ver Más... 21 | 22 |
23 |
19 | 
20 |
25 | );
26 | };
27 |
28 | export default LoginScreen;
29 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/reducers/nominaReducer.js:
--------------------------------------------------------------------------------
1 | import { types } from "../types/types";
2 |
3 | const initialState = {
4 | data: [],
5 | };
6 |
7 | export const nominaReducer = (state = initialState, action) => {
8 | switch (action.type) {
9 | case types.nominaAdd:
10 | return {
11 | ...state,
12 | data: [...state.data, action.payload],
13 | };
14 |
15 | case types.nominaRead:
16 | return {
17 | ...state,
18 | data: action.payload,
19 | };
20 |
21 | case types.nominaDelete:
22 | return {
23 | ...state,
24 | data: state.data.filter((nomina) => {
25 | return nomina.id !== action.payload;
26 | }),
27 | };
28 |
29 | case types.nominaClean:
30 | return {
31 | ...state,
32 | data: [],
33 | };
34 |
35 | default:
36 | return state;
37 | }
38 | };
39 |
--------------------------------------------------------------------------------
/09-router-v6/src/routes/LoginRouter.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3 |
4 | import AppRouter from "./AppRouter";
5 | import LoginScreen from "../pages/LoginScreen";
6 | import PublicRouter from "./PublicRouter";
7 | import PrivateRouter from "./PrivateRouter";
8 |
9 | const LoginRouter = () => {
10 | return (
11 |
20 | Login Screen
21 | 24 |
22 |
42 | );
43 | };
44 |
45 | export default CharacterScreen;
46 |
--------------------------------------------------------------------------------
/09-router-v6/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
23 |
32 |
33 |
34 |
41 | Nombre: {name}
35 |Desccripción: {description}
36 | 37 | 40 |
18 |
20 | 21 |
24 |
25 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default AppScreen;
51 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/actions/nomina.js:
--------------------------------------------------------------------------------
1 | import { db } from "../firebase/config-firebase";
2 | import { types } from "../types/types";
3 |
4 | export const crearRegistro = (pago) => {
5 | return async (dispatch, getState) => {
6 | const { uid } = getState().auth;
7 |
8 | const datos = {
9 | fecha: new Date().toLocaleDateString(),
10 | pago,
11 | };
12 |
13 | const referencia = await db.collection(`${uid}/nominas/nomina`).add(datos);
14 |
15 | const id = await referencia.id;
16 |
17 | const newData = {
18 | ...datos,
19 | id,
20 | };
21 |
22 | dispatch(crear(newData));
23 | };
24 | };
25 |
26 | export const leerRegistros = (data) => {
27 | return {
28 | type: types.nominaRead,
29 | payload: data,
30 | };
31 | };
32 |
33 | export const crear = (data) => {
34 | return {
35 | type: types.nominaAdd,
36 | payload: data,
37 | };
38 | };
39 |
40 | export const borrarRegistro = (id) => {
41 | return async (dispatch, getState) => {
42 | const { uid } = getState().auth;
43 |
44 | await db.doc(`${uid}/nominas/nomina/${id}`).delete();
45 |
46 | dispatch(borrar(id));
47 | };
48 | };
49 |
50 | export const borrar = (id) => {
51 | return {
52 | type: types.nominaDelete,
53 | payload: id,
54 | };
55 | };
56 |
57 | export const limpiar = () => {
58 | return {
59 | type: types.nominaClean,
60 | };
61 | };
62 |
--------------------------------------------------------------------------------
/11-redux-firebase/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 |
21 |
22 |
23 |
24 |
25 |
29 |
30 |
34 |
35 | Hola {name}
19 |20 | 21 |
| Fecha | 27 |Cantidad | 28 |Borrar | 29 |
|---|---|---|
40 |
43 | {viewForm && (
44 |
72 | );
73 | };
74 |
75 | export default FormAdd;
76 |
--------------------------------------------------------------------------------
/09-router-v6/src/pages/SearchScreen.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { useLocation, useNavigate } from "react-router-dom";
3 | import queryString from "query-string";
4 | import { Characters } from "../models/Characters";
5 | import Card from "../components/Card";
6 |
7 | const SearchScreen = () => {
8 | const location = useLocation();
9 | const navigate = useNavigate();
10 |
11 | const { q = "" } = queryString.parse(location.search);
12 |
13 | const [inputValue, setInputValue] = useState(q);
14 | const [characters, setCharacters] = useState([]);
15 |
16 | const handleChange = (e) => {
17 | const value = e.target.value;
18 | setInputValue(value);
19 | };
20 |
21 | const handleSubmit = (e) => {
22 | e.preventDefault();
23 | navigate(`?q=${inputValue}`);
24 | };
25 |
26 | const getCharacters = () => {
27 | if (inputValue.trim() !== "") {
28 | const value = inputValue.toLocaleLowerCase();
29 | const newValue = Characters.filter((character) =>
30 | character.name.toLocaleLowerCase().includes(value)
31 | );
32 |
33 | setCharacters(newValue);
34 | } else {
35 | setCharacters([]);
36 | }
37 | };
38 |
39 | useEffect(() => {
40 | getCharacters();
41 | }, [q]);
42 |
43 | return (
44 |
45 |
70 | )}
71 |
46 |
47 |
54 |
55 |
56 |
57 |
58 |
65 |
66 |
69 |
45 |
47 |
81 | );
82 | };
83 |
84 | export default SearchScreen;
85 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/09-router-v6/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { NavLink, useNavigate } from "react-router-dom";
3 | import { AuthContext } from "../context/AuthContext";
4 | import { authTypes } from "../types/authTypes";
5 |
6 | const Navbar = () => {
7 | const navigate = useNavigate();
8 |
9 | const { dispatch } = useContext(AuthContext);
10 |
11 | const handleLogout = () => {
12 | dispatch({ type: authTypes.logout });
13 |
14 | navigate("/login");
15 | };
16 |
17 | return (
18 |
76 | );
77 | };
78 |
79 | export default Navbar;
80 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/pages/LoginScreen.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useDispatch } from "react-redux";
3 |
4 | import GoogleButton from "react-google-button";
5 | import { Link } from "react-router-dom";
6 |
7 | import { googleLogin, emailAndPasswordLogin } from "../actions/auth";
8 |
9 | const LoginScreen = () => {
10 | const [data, setData] = useState({
11 | email: "",
12 | password: "",
13 | });
14 |
15 | const { email, password } = data;
16 |
17 | const handleChange = (e) => {
18 | const value = e.target.value;
19 |
20 | setData({
21 | ...data,
22 | [e.target.name]: value,
23 | });
24 | };
25 |
26 | const dispatch = useDispatch();
27 |
28 | const handleGoogleLogin = () => {
29 | dispatch(googleLogin());
30 | };
31 |
32 | const handleEmailLogin = (e) => {
33 | e.preventDefault();
34 |
35 | if (email.trim() === "" || !email.trim().includes("@")) {
36 | return;
37 | }
38 |
39 | if (password.trim().length < 6) {
40 | return;
41 | }
42 |
43 | dispatch(emailAndPasswordLogin(email, password));
44 | };
45 |
46 | return (
47 | Search Screen
46 |47 |
48 |
80 |
49 |
67 | Search
50 | 66 |
68 |
79 | Results: {characters.length}
69 | {characters.length === 0 && ( 70 |
71 | Please Search a Character
72 |
73 | )}
74 |
75 | {characters.map((character) => (
76 |
48 |
50 | 51 |
89 | );
90 | };
91 |
92 | export default LoginScreen;
93 |
--------------------------------------------------------------------------------
/09-router-v6/src/service-worker.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-restricted-globals */
2 |
3 | // This service worker can be customized!
4 | // See https://developers.google.com/web/tools/workbox/modules
5 | // for the list of available Workbox modules, or add any other
6 | // code you'd like.
7 | // You can also remove this file if you'd prefer not to use a
8 | // service worker, and the Workbox build step will be skipped.
9 |
10 | import { clientsClaim } from 'workbox-core';
11 | import { ExpirationPlugin } from 'workbox-expiration';
12 | import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
13 | import { registerRoute } from 'workbox-routing';
14 | import { StaleWhileRevalidate } from 'workbox-strategies';
15 |
16 | clientsClaim();
17 |
18 | // Precache all of the assets generated by your build process.
19 | // Their URLs are injected into the manifest variable below.
20 | // This variable must be present somewhere in your service worker file,
21 | // even if you decide not to use precaching. See https://cra.link/PWA
22 | precacheAndRoute(self.__WB_MANIFEST);
23 |
24 | // Set up App Shell-style routing, so that all navigation requests
25 | // are fulfilled with your index.html shell. Learn more at
26 | // https://developers.google.com/web/fundamentals/architecture/app-shell
27 | const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
28 | registerRoute(
29 | // Return false to exempt requests from being fulfilled by index.html.
30 | ({ request, url }) => {
31 | // If this isn't a navigation, skip.
32 | if (request.mode !== 'navigate') {
33 | return false;
34 | } // If this is a URL that starts with /_, skip.
35 |
36 | if (url.pathname.startsWith('/_')) {
37 | return false;
38 | } // If this looks like a URL for a resource, because it contains // a file extension, skip.
39 |
40 | if (url.pathname.match(fileExtensionRegexp)) {
41 | return false;
42 | } // Return true to signal that we want to use the handler.
43 |
44 | return true;
45 | },
46 | createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
47 | );
48 |
49 | // An example runtime caching route for requests that aren't handled by the
50 | // precache, in this case same-origin .png requests like those from in public/
51 | registerRoute(
52 | // Add in any other file extensions or routing criteria as needed.
53 | ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
54 | new StaleWhileRevalidate({
55 | cacheName: 'images',
56 | plugins: [
57 | // Ensure that once this runtime cache reaches a maximum size the
58 | // least-recently used images are removed.
59 | new ExpirationPlugin({ maxEntries: 50 }),
60 | ],
61 | })
62 | );
63 |
64 | // This allows the web app to trigger skipWaiting via
65 | // registration.waiting.postMessage({type: 'SKIP_WAITING'})
66 | self.addEventListener('message', (event) => {
67 | if (event.data && event.data.type === 'SKIP_WAITING') {
68 | self.skipWaiting();
69 | }
70 | });
71 |
72 | // Any other custom service worker logic can go here.
73 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/service-worker.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-restricted-globals */
2 |
3 | // This service worker can be customized!
4 | // See https://developers.google.com/web/tools/workbox/modules
5 | // for the list of available Workbox modules, or add any other
6 | // code you'd like.
7 | // You can also remove this file if you'd prefer not to use a
8 | // service worker, and the Workbox build step will be skipped.
9 |
10 | import { clientsClaim } from 'workbox-core';
11 | import { ExpirationPlugin } from 'workbox-expiration';
12 | import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
13 | import { registerRoute } from 'workbox-routing';
14 | import { StaleWhileRevalidate } from 'workbox-strategies';
15 |
16 | clientsClaim();
17 |
18 | // Precache all of the assets generated by your build process.
19 | // Their URLs are injected into the manifest variable below.
20 | // This variable must be present somewhere in your service worker file,
21 | // even if you decide not to use precaching. See https://cra.link/PWA
22 | precacheAndRoute(self.__WB_MANIFEST);
23 |
24 | // Set up App Shell-style routing, so that all navigation requests
25 | // are fulfilled with your index.html shell. Learn more at
26 | // https://developers.google.com/web/fundamentals/architecture/app-shell
27 | const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
28 | registerRoute(
29 | // Return false to exempt requests from being fulfilled by index.html.
30 | ({ request, url }) => {
31 | // If this isn't a navigation, skip.
32 | if (request.mode !== 'navigate') {
33 | return false;
34 | } // If this is a URL that starts with /_, skip.
35 |
36 | if (url.pathname.startsWith('/_')) {
37 | return false;
38 | } // If this looks like a URL for a resource, because it contains // a file extension, skip.
39 |
40 | if (url.pathname.match(fileExtensionRegexp)) {
41 | return false;
42 | } // Return true to signal that we want to use the handler.
43 |
44 | return true;
45 | },
46 | createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
47 | );
48 |
49 | // An example runtime caching route for requests that aren't handled by the
50 | // precache, in this case same-origin .png requests like those from in public/
51 | registerRoute(
52 | // Add in any other file extensions or routing criteria as needed.
53 | ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
54 | new StaleWhileRevalidate({
55 | cacheName: 'images',
56 | plugins: [
57 | // Ensure that once this runtime cache reaches a maximum size the
58 | // least-recently used images are removed.
59 | new ExpirationPlugin({ maxEntries: 50 }),
60 | ],
61 | })
62 | );
63 |
64 | // This allows the web app to trigger skipWaiting via
65 | // registration.waiting.postMessage({type: 'SKIP_WAITING'})
66 | self.addEventListener('message', (event) => {
67 | if (event.data && event.data.type === 'SKIP_WAITING') {
68 | self.skipWaiting();
69 | }
70 | });
71 |
72 | // Any other custom service worker logic can go here.
73 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/pages/RegisterScreen.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useDispatch } from "react-redux";
3 | import { Link } from "react-router-dom";
4 |
5 | import { register } from "../actions/auth";
6 |
7 | const RegisterScreen = () => {
8 | const dispatch = useDispatch();
9 |
10 | const [data, setData] = useState({
11 | email: "",
12 | password: "",
13 | password2: "",
14 | username: "",
15 | });
16 |
17 | const { email, username, password, password2 } = data;
18 |
19 | const handleChange = (e) => {
20 | const value = e.target.value;
21 |
22 | setData({
23 | ...data,
24 | [e.target.name]: value,
25 | });
26 | };
27 |
28 | const handleRegister = (e) => {
29 | e.preventDefault();
30 |
31 | if (email.trim() === "" || !email.trim().includes("@")) {
32 | return;
33 | }
34 |
35 | if (username.trim().length < 2) {
36 | return;
37 | }
38 |
39 | if (password.trim().length < 6) {
40 | return;
41 | } else {
42 | if (password.trim() !== password2.trim()) {
43 | return;
44 | }
45 | }
46 |
47 | dispatch(register(email, password, username));
48 | };
49 |
50 | return (
51 | Login
49 |50 | 51 |
52 |
87 |
88 |
52 |
54 | 55 |
116 | );
117 | };
118 |
119 | export default RegisterScreen;
120 |
--------------------------------------------------------------------------------
/09-router-v6/src/serviceWorkerRegistration.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://cra.link/PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
19 | );
20 |
21 | export function register(config) {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Let's check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl, config);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://cra.link/PWA'
45 | );
46 | });
47 | } else {
48 | // Is not localhost. Just register service worker
49 | registerValidSW(swUrl, config);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl, config) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then((registration) => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | if (installingWorker == null) {
62 | return;
63 | }
64 | installingWorker.onstatechange = () => {
65 | if (installingWorker.state === 'installed') {
66 | if (navigator.serviceWorker.controller) {
67 | // At this point, the updated precached content has been fetched,
68 | // but the previous service worker will still serve the older
69 | // content until all client tabs are closed.
70 | console.log(
71 | 'New content is available and will be used when all ' +
72 | 'tabs for this page are closed. See https://cra.link/PWA.'
73 | );
74 |
75 | // Execute callback
76 | if (config && config.onUpdate) {
77 | config.onUpdate(registration);
78 | }
79 | } else {
80 | // At this point, everything has been precached.
81 | // It's the perfect time to display a
82 | // "Content is cached for offline use." message.
83 | console.log('Content is cached for offline use.');
84 |
85 | // Execute callback
86 | if (config && config.onSuccess) {
87 | config.onSuccess(registration);
88 | }
89 | }
90 | }
91 | };
92 | };
93 | })
94 | .catch((error) => {
95 | console.error('Error during service worker registration:', error);
96 | });
97 | }
98 |
99 | function checkValidServiceWorker(swUrl, config) {
100 | // Check if the service worker can be found. If it can't reload the page.
101 | fetch(swUrl, {
102 | headers: { 'Service-Worker': 'script' },
103 | })
104 | .then((response) => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then((registration) => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log('No internet connection found. App is running in offline mode.');
124 | });
125 | }
126 |
127 | export function unregister() {
128 | if ('serviceWorker' in navigator) {
129 | navigator.serviceWorker.ready
130 | .then((registration) => {
131 | registration.unregister();
132 | })
133 | .catch((error) => {
134 | console.error(error.message);
135 | });
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
/11-redux-firebase/src/serviceWorkerRegistration.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://cra.link/PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
19 | );
20 |
21 | export function register(config) {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Let's check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl, config);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://cra.link/PWA'
45 | );
46 | });
47 | } else {
48 | // Is not localhost. Just register service worker
49 | registerValidSW(swUrl, config);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl, config) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then((registration) => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | if (installingWorker == null) {
62 | return;
63 | }
64 | installingWorker.onstatechange = () => {
65 | if (installingWorker.state === 'installed') {
66 | if (navigator.serviceWorker.controller) {
67 | // At this point, the updated precached content has been fetched,
68 | // but the previous service worker will still serve the older
69 | // content until all client tabs are closed.
70 | console.log(
71 | 'New content is available and will be used when all ' +
72 | 'tabs for this page are closed. See https://cra.link/PWA.'
73 | );
74 |
75 | // Execute callback
76 | if (config && config.onUpdate) {
77 | config.onUpdate(registration);
78 | }
79 | } else {
80 | // At this point, everything has been precached.
81 | // It's the perfect time to display a
82 | // "Content is cached for offline use." message.
83 | console.log('Content is cached for offline use.');
84 |
85 | // Execute callback
86 | if (config && config.onSuccess) {
87 | config.onSuccess(registration);
88 | }
89 | }
90 | }
91 | };
92 | };
93 | })
94 | .catch((error) => {
95 | console.error('Error during service worker registration:', error);
96 | });
97 | }
98 |
99 | function checkValidServiceWorker(swUrl, config) {
100 | // Check if the service worker can be found. If it can't reload the page.
101 | fetch(swUrl, {
102 | headers: { 'Service-Worker': 'script' },
103 | })
104 | .then((response) => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then((registration) => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log('No internet connection found. App is running in offline mode.');
124 | });
125 | }
126 |
127 | export function unregister() {
128 | if ('serviceWorker' in navigator) {
129 | navigator.serviceWorker.ready
130 | .then((registration) => {
131 | registration.unregister();
132 | })
133 | .catch((error) => {
134 | console.error(error.message);
135 | });
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
Register
53 |54 | 55 |
56 |
114 |
115 |