(
16 | ( isAuthenticated )
17 | ? ( )
18 | : ( )
19 | )}
20 |
21 | />
22 | )
23 | }
24 |
25 | PrivateRoute.propTypes = {
26 | isAuthenticated: PropTypes.bool.isRequired,
27 | component: PropTypes.func.isRequired
28 | }
29 |
--------------------------------------------------------------------------------
/src/helpers/fileUpload.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | export const fileUpload = async ( file ) => {
4 |
5 | const cloudUrl = 'https://api.cloudinary.com/v1_1/dx0pryfzn/upload';
6 |
7 | const formData = new FormData();
8 | formData.append('upload_preset','react-journal');
9 | formData.append('file', file );
10 |
11 | try {
12 |
13 | const resp = await fetch( cloudUrl, {
14 | method: 'POST',
15 | body: formData
16 | });
17 |
18 | if ( resp.ok ) {
19 | const cloudResp = await resp.json();
20 | return cloudResp.secure_url;
21 | } else {
22 | return null;
23 | }
24 |
25 | } catch (err) {
26 | throw err;
27 | }
28 |
29 |
30 | // return url de la imagen
31 | }
--------------------------------------------------------------------------------
/src/components/journal/JournalScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Sidebar } from './Sidebar';
3 | import { NoteScreen } from '../notes/NoteScreen';
4 | import { NothingSelected } from './NothingSelected';
5 | import { useSelector } from 'react-redux';
6 |
7 |
8 | export const JournalScreen = () => {
9 |
10 | const { active } = useSelector( state => state.notes );
11 |
12 |
13 | return (
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | {
24 | ( active )
25 | ? ( )
26 | : ( )
27 | }
28 |
29 |
30 |
31 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/tests/components/journal/__snapshots__/Sidebar.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Pruebas en debe de mostrarse correctamente 1`] = `
4 |
45 | `;
46 |
--------------------------------------------------------------------------------
/src/reducers/uiReducer.js:
--------------------------------------------------------------------------------
1 | import { types } from '../types/types';
2 |
3 | const initialState = {
4 | loading: false,
5 | msgError: null
6 | }
7 |
8 |
9 | export const uiReducer = ( state = initialState, action ) => {
10 |
11 | switch ( action.type ) {
12 | case types.uiSetError:
13 | return {
14 | ...state,
15 | msgError: action.payload
16 | }
17 |
18 | case types.uiRemoveError:
19 | return {
20 | ...state,
21 | msgError: null
22 | }
23 |
24 | case types.uiStartLoading:
25 | return {
26 | ...state,
27 | loading: true
28 | }
29 |
30 | case types.uiFinishLoading:
31 | return {
32 | ...state,
33 | loading: false
34 | }
35 |
36 | default:
37 | return state;
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/tests/types/types.test.js:
--------------------------------------------------------------------------------
1 | import { types } from '../../types/types';
2 |
3 |
4 | describe('Pruebas con nuestros tipos', () => {
5 |
6 | test('debe de tener estos tipos', () => {
7 |
8 | expect( types ).toEqual({
9 | login: '[Auth] Login',
10 | logout: '[Auth] Logout',
11 |
12 | uiSetError: '[UI] Set Error',
13 | uiRemoveError: '[UI] Remove Error',
14 |
15 | uiStartLoading: '[UI] Start loading',
16 | uiFinishLoading: '[UI] Finish loading',
17 |
18 | notesAddNew: '[Notes] New note',
19 | notesActive: '[Notes] Set active note',
20 | notesLoad: '[Notes] Load notes',
21 | notesUpdated: '[Notes] Updated note',
22 | notesFileUrl: '[Notes] Updated image url',
23 | notesDelete: '[Notes] Delete note',
24 | notesLogoutCleaning: '[Notes] Logout Cleaning',
25 | })
26 |
27 | })
28 |
29 |
30 |
31 | })
32 |
--------------------------------------------------------------------------------
/src/routers/AuthRouter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Route, Redirect } from 'react-router-dom';
3 |
4 | import { LoginScreen } from '../components/auth/LoginScreen';
5 | import { RegisterScreen } from '../components/auth/RegisterScreen';
6 |
7 | export const AuthRouter = () => {
8 | return (
9 |
10 |
11 |
12 |
17 |
18 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
8 |
17 |
20 |
23 | Hola
24 |
25 |
28 | Mundo
29 |
30 |
31 |
34 |
35 |
36 | Wednesday
37 |
38 |
39 |
40 |
41 | 31st
42 |
43 |
44 |
45 |
7 |
10 |
11 | 28 de agosto 2020
12 |
13 |
24 |
25 |
31 |
37 |
38 |
39 |
42 |
51 |
58 |
59 |
65 |
8 | Register
9 |
,
10 | ,
62 | ]
63 | `;
64 |
--------------------------------------------------------------------------------
/src/components/notes/NotesAppBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { startSaveNote, startUploading } from '../../actions/notes';
4 |
5 | export const NotesAppBar = () => {
6 |
7 | const dispatch = useDispatch();
8 | const { active } = useSelector( state => state.notes );
9 |
10 | const handleSave = () => {
11 | dispatch( startSaveNote( active ) );
12 | }
13 |
14 | const handlePictureClick = () => {
15 | document.querySelector('#fileSelector').click();
16 | }
17 |
18 | const handleFileChange = (e) => {
19 | const file = e.target.files[0];
20 | if ( file ) {
21 | dispatch( startUploading( file ) );
22 | }
23 | }
24 |
25 | return (
26 |
27 |
28 de agosto 2020
28 |
29 |
36 |
37 |
38 |
44 |
45 |
51 |
52 |
24 |
25 | {
26 | url &&
27 |
34 | }
35 |
36 |
37 |
38 | { title }
39 |
40 |
41 | { body }
42 |
43 |
44 |
45 |
46 | { noteDate.format('dddd') }
47 |
{ noteDate.format('Do') }
48 |
49 |
50 |
8 | Login
9 |
,
10 | ,
74 | ]
75 | `;
76 |
--------------------------------------------------------------------------------
/src/tests/routers/AppRouter.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import { Provider } from 'react-redux'
4 | import { MemoryRouter } from 'react-router-dom';
5 |
6 | import configureStore from 'redux-mock-store';
7 | import thunk from 'redux-thunk';
8 |
9 | import '@testing-library/jest-dom';
10 |
11 | import { firebase } from '../../firebase/firebase-config';
12 |
13 |
14 | import { login } from '../../actions/auth';
15 | import { AppRouter } from '../../routers/AppRouter';
16 | import { act } from '@testing-library/react';
17 |
18 |
19 | jest.mock('../../actions/auth', () => ({
20 | login: jest.fn(),
21 | }));
22 |
23 |
24 | const middlewares = [thunk];
25 | const mockStore = configureStore(middlewares);
26 |
27 | const initState = {
28 | auth: {},
29 | ui: {
30 | loading: false,
31 | msgError: null
32 | },
33 | notes: {
34 | active: {
35 | id: 'ABC',
36 | },
37 | notes: []
38 | }
39 | };
40 |
41 | let store = mockStore(initState);
42 | store.dispatch = jest.fn();
43 |
44 |
45 |
46 |
47 |
48 | describe('Pruebas en ', () => {
49 |
50 | test('debe de llamar el login si estoy autenticado', async() => {
51 |
52 | let user;
53 |
54 | await act( async () => {
55 |
56 | const userCred = await firebase.auth().signInWithEmailAndPassword('test@testing.com', '123456');
57 | user = userCred.user;
58 |
59 |
60 | const wrapper = mount(
61 |
62 |
63 |
64 |
65 |
66 |
67 | )
68 |
69 | });
70 |
71 |
72 | expect( login ).toHaveBeenCalledWith('fYYrX6ZV7oOD4bJHtciBV0RZWKB3', null);
73 |
74 |
75 |
76 | })
77 |
78 |
79 | })
80 |
--------------------------------------------------------------------------------
/src/reducers/notesReducer.js:
--------------------------------------------------------------------------------
1 | /*
2 | {
3 | notes: [],
4 | active: null,
5 | active: {
6 | id: 'KASKLDJALKSDJ129387123',
7 | title: '',
8 | body: '',
9 | imageUrl: '',
10 | date: 12387612387126
11 | }
12 | }
13 | */
14 |
15 | import { types } from '../types/types';
16 |
17 | const initialState = {
18 | notes: [],
19 | active: null
20 | }
21 |
22 |
23 | export const notesReducer = ( state = initialState, action ) => {
24 |
25 | switch (action.type) {
26 |
27 | case types.notesActive:
28 | return {
29 | ...state,
30 | active: {
31 | ...action.payload
32 | }
33 | }
34 |
35 | case types.notesAddNew:
36 | return {
37 | ...state,
38 | notes: [ action.payload, ...state.notes ]
39 | }
40 |
41 | case types.notesLoad:
42 | return {
43 | ...state,
44 | notes: [ ...action.payload ]
45 | }
46 |
47 | case types.notesUpdated:
48 | return {
49 | ...state,
50 | notes: state.notes.map(
51 | note => note.id === action.payload.id
52 | ? action.payload.note
53 | : note
54 | )
55 | }
56 |
57 | case types.notesDelete:
58 | return {
59 | ...state,
60 | active: null,
61 | notes: state.notes.filter( note => note.id !== action.payload )
62 | }
63 |
64 | case types.notesLogoutCleaning:
65 | return {
66 | ...state,
67 | active: null,
68 | notes: []
69 | }
70 |
71 | default:
72 | return state
73 | }
74 |
75 |
76 | }
--------------------------------------------------------------------------------
/src/tests/components/journal/Sidebar.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import { Provider } from 'react-redux'
4 |
5 | import configureStore from 'redux-mock-store';
6 | import thunk from 'redux-thunk';
7 |
8 | import '@testing-library/jest-dom';
9 | import { startLogout } from '../../../actions/auth';
10 | import { startNewNote } from '../../../actions/notes';
11 | import { Sidebar } from '../../../components/journal/Sidebar';
12 |
13 |
14 | jest.mock('../../../actions/auth', () => ({
15 | startLogout: jest.fn(),
16 | }));
17 |
18 | jest.mock('../../../actions/notes', () => ({
19 | startNewNote: jest.fn(),
20 | }));
21 |
22 |
23 | const middlewares = [thunk];
24 | const mockStore = configureStore(middlewares);
25 |
26 | const initState = {
27 | auth: {
28 | uid: '1',
29 | name: 'Fernando'
30 | },
31 | ui: {
32 | loading: false,
33 | msgError: null
34 | },
35 | notes: {
36 | active: null,
37 | notes: []
38 | }
39 | };
40 |
41 | let store = mockStore(initState);
42 | store.dispatch = jest.fn();
43 |
44 | const wrapper = mount(
45 |
46 |
47 |
48 |
49 | )
50 |
51 |
52 | describe('Pruebas en ', () => {
53 |
54 |
55 | test('debe de mostrarse correctamente', () => {
56 | // snapshot
57 | expect( wrapper ).toMatchSnapshot();
58 | })
59 |
60 |
61 | test('debe de llamar el startLogout', () => {
62 | // debe de llamar la acción del logout
63 | wrapper.find('button').prop('onClick')();
64 |
65 | expect( startLogout ).toHaveBeenCalled()
66 |
67 | })
68 |
69 | test('debe de llamar el startNewNote', () => {
70 | // debe de llamar la acción startNewNote
71 | wrapper.find('.journal__new-entry').prop('onClick')();
72 | expect( startNewNote ).toHaveBeenCalled();
73 |
74 | })
75 |
76 |
77 | })
78 |
--------------------------------------------------------------------------------
/src/tests/components/auth/LoginScreen.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import { Provider } from 'react-redux'
4 | import { MemoryRouter } from 'react-router-dom';
5 |
6 | import configureStore from 'redux-mock-store';
7 | import thunk from 'redux-thunk';
8 |
9 | import '@testing-library/jest-dom';
10 |
11 | import { LoginScreen } from '../../../components/auth/LoginScreen';
12 | import { startGoogleLogin, startLoginEmailPassword } from '../../../actions/auth';
13 |
14 | jest.mock('../../../actions/auth', () => ({
15 | startGoogleLogin: jest.fn(),
16 | startLoginEmailPassword: jest.fn(),
17 | }))
18 |
19 |
20 |
21 | const middlewares = [thunk];
22 | const mockStore = configureStore(middlewares);
23 |
24 | const initState = {
25 | auth: {},
26 | ui: {
27 | loading: false,
28 | msgError: null
29 | }
30 | };
31 |
32 | let store = mockStore(initState);
33 | store.dispatch = jest.fn();
34 |
35 | const wrapper = mount(
36 |
37 |
38 |
39 |
40 |
41 |
42 | )
43 |
44 | describe('Pruebas en ', () => {
45 |
46 | beforeEach(()=> {
47 | store = mockStore(initState);
48 | jest.clearAllMocks();
49 | })
50 |
51 |
52 | test('debe de mostrarse correctamente', () => {
53 |
54 | expect( wrapper ).toMatchSnapshot();
55 |
56 | });
57 |
58 | test('debe de disparar la acción de startGoogleLogin', () => {
59 |
60 | wrapper.find('.google-btn').prop('onClick')();
61 |
62 | expect( startGoogleLogin ).toHaveBeenCalled();
63 | })
64 |
65 |
66 | test('debe de disparar el startLogin con los respectivos argumentos', () => {
67 |
68 |
69 | wrapper.find('form').prop('onSubmit')({
70 | preventDefault(){}
71 | });
72 |
73 | expect( startLoginEmailPassword ).toHaveBeenLastCalledWith('','');
74 |
75 |
76 | })
77 |
78 |
79 | })
80 |
--------------------------------------------------------------------------------
/src/tests/components/notes/NoteScreen.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import { Provider } from 'react-redux'
4 |
5 | import configureStore from 'redux-mock-store';
6 | import thunk from 'redux-thunk';
7 |
8 | import '@testing-library/jest-dom';
9 | import { activeNote } from '../../../actions/notes';
10 | import { NoteScreen } from '../../../components/notes/NoteScreen';
11 |
12 |
13 | jest.mock('../../../actions/notes', () => ({
14 | activeNote: jest.fn(),
15 | }));
16 |
17 |
18 | const middlewares = [thunk];
19 | const mockStore = configureStore(middlewares);
20 |
21 | const initState = {
22 | auth: {
23 | uid: '1',
24 | name: 'Fernando'
25 | },
26 | ui: {
27 | loading: false,
28 | msgError: null
29 | },
30 | notes: {
31 | active: {
32 | id: 1234,
33 | title: 'Hola',
34 | body: 'mundo',
35 | date: 0
36 | },
37 | notes: []
38 | }
39 | };
40 |
41 | let store = mockStore(initState);
42 | store.dispatch = jest.fn();
43 |
44 | const wrapper = mount(
45 |
46 |
47 |
48 |
49 | )
50 |
51 |
52 |
53 |
54 | describe('Pruebas en ', () => {
55 |
56 | test('debe de mostrarse correctamente', () => {
57 |
58 | expect( wrapper ).toMatchSnapshot();
59 |
60 | })
61 |
62 |
63 | test('debe de disparar el active note', () => {
64 |
65 | wrapper.find('input[name="title"]').simulate('change', {
66 | target: {
67 | name: 'title',
68 | value: 'Hola de nuevo'
69 | }
70 | });
71 |
72 |
73 | expect( activeNote ).toHaveBeenLastCalledWith(
74 | 1234,
75 | {
76 | body: 'mundo',
77 | title: 'Hola de nuevo',
78 | id: 1234,
79 | date: 0
80 | }
81 | );
82 |
83 |
84 | })
85 |
86 |
87 |
88 |
89 |
90 | })
91 |
--------------------------------------------------------------------------------
/src/styles/components/_buttons.scss:
--------------------------------------------------------------------------------
1 |
2 | .btn {
3 | background-color: transparent;
4 | border: none;
5 | color: white;
6 | cursor: pointer;
7 | font-size: 12px;
8 | padding: 7px 10px 7px 10px;
9 |
10 | transition: color .3s ease;
11 |
12 | &:focus {
13 | outline: none;
14 | }
15 |
16 | &:hover {
17 | color: darken($color: white, $amount: 10);
18 | }
19 |
20 | }
21 |
22 |
23 | .btn-primary {
24 | background-color: $primary;
25 | border-radius: 2px;
26 |
27 | &:disabled {
28 | background-color: lighten($color: $primary, $amount: 15);
29 | }
30 |
31 | &:hover {
32 | background-color: darken($color: $primary, $amount: 15);
33 | }
34 | }
35 |
36 | .btn-danger {
37 | background-color: red;
38 |
39 | transition: background-color .3s ease;
40 |
41 | &:hover {
42 | background-color: darken($color: red, $amount: 10);
43 | }
44 | }
45 |
46 | .btn-block {
47 | width: 100%;
48 | }
49 |
50 | .google-btn {
51 | cursor: pointer;
52 | margin-top: 5px;
53 | width: 100%;
54 | height: 42px;
55 | background-color: $google-blue;
56 | border-radius: 2px;
57 | box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
58 |
59 | transition: box-shadow .3s ease;
60 |
61 | .google-icon-wrapper {
62 | position: absolute;
63 | margin-top: 1px;
64 | margin-left: 1px;
65 | width: 40px;
66 | height: 40px;
67 | border-radius: 2px;
68 | background-color: $white;
69 | }
70 | .google-icon {
71 | position: absolute;
72 | margin-top: 11px;
73 | margin-left: 11px;
74 | width: 18px;
75 | height: 18px;
76 | }
77 | .btn-text {
78 | float: right;
79 | margin: 11px 40px 0 0;
80 | color: $white;
81 | font-size: 14px;
82 | letter-spacing: 0.2px;
83 | }
84 | &:hover {
85 | box-shadow: 0 0 6px $google-blue;
86 | }
87 | &:active {
88 | background: $button-active-blue;
89 | }
90 | }
91 |
92 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
28 |
29 |
33 |
34 | Journal App
35 |
36 |
37 |
38 |
39 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/tests/actions/auth.test.js:
--------------------------------------------------------------------------------
1 | import configureStore from 'redux-mock-store';
2 | import thunk from 'redux-thunk';
3 |
4 | import '@testing-library/jest-dom';
5 |
6 | import { types } from '../../types/types';
7 | import { login, logout, startLogout, startLoginEmailPassword } from '../../actions/auth';
8 |
9 |
10 | const middlewares = [thunk];
11 | const mockStore = configureStore(middlewares);
12 |
13 | const initState = {};
14 |
15 | let store = mockStore(initState);
16 |
17 |
18 | describe('Pruebas con las acciones de Auth', () => {
19 |
20 | beforeEach(()=> {
21 | store = mockStore(initState);
22 | })
23 |
24 |
25 |
26 | test('login y logout deben de crear la acción respectiva', () => {
27 |
28 | const uid = 'ABC123';
29 | const displayName = 'Fernando';
30 |
31 | const loginAction = login( uid, displayName );
32 | const logoutAction = logout();
33 |
34 | expect( loginAction ).toEqual({
35 | type: types.login,
36 | payload: {
37 | uid,
38 | displayName
39 | }
40 | });
41 |
42 | expect( logoutAction ).toEqual({
43 | type: types.logout
44 | });
45 |
46 | })
47 |
48 |
49 | test('debe de realizar el startLogout', async() => {
50 |
51 | await store.dispatch( startLogout() );
52 |
53 | const actions = store.getActions();
54 |
55 | expect( actions[0] ).toEqual({
56 | type: types.logout
57 | });
58 |
59 | expect( actions[1] ).toEqual({
60 | type: types.notesLogoutCleaning
61 | });
62 |
63 |
64 | });
65 |
66 |
67 | test('debe de iniciar el startLoginEmailPassword', async() => {
68 |
69 | await store.dispatch( startLoginEmailPassword('test@testing.com','123456') );
70 |
71 | const actions = store.getActions();
72 |
73 | expect( actions[1] ).toEqual({
74 | type: types.login,
75 | payload: {
76 | uid: 'fYYrX6ZV7oOD4bJHtciBV0RZWKB3',
77 | displayName: null
78 | }
79 | })
80 |
81 | })
82 |
83 |
84 |
85 |
86 | })
87 |
--------------------------------------------------------------------------------
/src/routers/AppRouter.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import {
3 | BrowserRouter as Router,
4 | Switch,
5 | Redirect
6 | } from 'react-router-dom';
7 |
8 | import { useDispatch } from 'react-redux';
9 |
10 | import { firebase } from '../firebase/firebase-config'
11 | import { AuthRouter } from './AuthRouter';
12 | import { PrivateRoute } from './PrivateRoute';
13 |
14 | import { JournalScreen } from '../components/journal/JournalScreen';
15 | import { login } from '../actions/auth';
16 | import { PublicRoute } from './PublicRoute';
17 | import { startLoadingNotes } from '../actions/notes';
18 |
19 | export const AppRouter = () => {
20 |
21 | const dispatch = useDispatch();
22 |
23 | const [ checking, setChecking ] = useState(true);
24 | const [ isLoggedIn, setIsLoggedIn ] = useState(false);
25 |
26 |
27 |
28 | useEffect(() => {
29 |
30 | firebase.auth().onAuthStateChanged( async(user) => {
31 |
32 | if ( user?.uid ) {
33 | dispatch( login( user.uid, user.displayName ) );
34 | setIsLoggedIn( true );
35 | dispatch( startLoadingNotes( user.uid ) );
36 |
37 | } else {
38 | setIsLoggedIn( false );
39 | }
40 |
41 | setChecking(false);
42 |
43 | });
44 |
45 | }, [ dispatch, setChecking, setIsLoggedIn ])
46 |
47 |
48 | if ( checking ) {
49 | return (
50 | Wait...
51 | )
52 | }
53 |
54 |
55 | return (
56 |
57 |
58 |
59 |
64 |
65 |
71 |
72 |
73 |
74 |
75 |
76 |
41 |
42 |
43 |
44 |
45 |
46 |
55 |
56 |
63 |
64 | {
65 | (note.url)
66 | && (
67 |
68 |
72 |
73 | )
74 | }
75 |
76 |
77 |
78 |
79 |
80 |
86 |
87 |
Login
33 |
34 |
92 |
93 | )
94 | }
95 |
--------------------------------------------------------------------------------
/src/actions/notes.js:
--------------------------------------------------------------------------------
1 | import Swal from 'sweetalert2';
2 |
3 | import { db } from '../firebase/firebase-config';
4 | import { types } from '../types/types';
5 | import { loadNotes } from '../helpers/loadNotes';
6 | import { fileUpload } from '../helpers/fileUpload';
7 |
8 |
9 | export const startNewNote = () => {
10 | return async( dispatch, getState ) => {
11 |
12 | const { uid } = getState().auth;
13 |
14 | const newNote = {
15 | title: '',
16 | body: '',
17 | date: new Date().getTime()
18 | }
19 |
20 | try {
21 | const doc = await db.collection(`${ uid }/journal/notes`).add( newNote );
22 |
23 | dispatch( activeNote( doc.id, newNote ) );
24 | dispatch( addNewNote( doc.id, newNote ) );
25 |
26 | } catch (error) {
27 | console.log(error);
28 | }
29 |
30 |
31 | }
32 | }
33 |
34 | export const activeNote = ( id, note ) => ({
35 | type: types.notesActive,
36 | payload: {
37 | id,
38 | ...note
39 | }
40 | });
41 |
42 | export const addNewNote = ( id, note ) => ({
43 | type: types.notesAddNew,
44 | payload: {
45 | id, ...note
46 | }
47 | })
48 |
49 |
50 | export const startLoadingNotes = ( uid ) => {
51 | return async( dispatch ) => {
52 |
53 | const notes = await loadNotes( uid );
54 | dispatch( setNotes( notes ) );
55 |
56 | }
57 | }
58 |
59 |
60 | export const setNotes = ( notes ) => ({
61 | type: types.notesLoad,
62 | payload: notes
63 | });
64 |
65 |
66 | export const startSaveNote = ( note ) => {
67 | return async( dispatch, getState ) => {
68 |
69 | const { uid } = getState().auth;
70 |
71 | if ( !note.url ){
72 | delete note.url;
73 | }
74 |
75 | const noteToFirestore = { ...note };
76 | delete noteToFirestore.id;
77 |
78 | await db.doc(`${ uid }/journal/notes/${ note.id }`).update( noteToFirestore );
79 |
80 | dispatch( refreshNote( note.id, noteToFirestore ) );
81 | Swal.fire('Saved', note.title, 'success');
82 | }
83 | }
84 |
85 | export const refreshNote = ( id, note ) => ({
86 | type: types.notesUpdated,
87 | payload: {
88 | id,
89 | note: {
90 | id,
91 | ...note
92 | }
93 | }
94 | });
95 |
96 |
97 | export const startUploading = ( file ) => {
98 | return async( dispatch, getState ) => {
99 |
100 | const { active:activeNote } = getState().notes;
101 |
102 | Swal.fire({
103 | title: 'Uploading...',
104 | text: 'Please wait...',
105 | allowOutsideClick: false,
106 | onBeforeOpen: () => {
107 | Swal.showLoading();
108 | }
109 | });
110 |
111 | const fileUrl = await fileUpload( file );
112 | activeNote.url = fileUrl;
113 |
114 | dispatch( startSaveNote( activeNote ) )
115 |
116 |
117 | Swal.close();
118 | }
119 | }
120 |
121 |
122 | export const startDeleting = ( id ) => {
123 | return async( dispatch, getState ) => {
124 |
125 | const uid = getState().auth.uid;
126 | await db.doc(`${ uid }/journal/notes/${ id }`).delete();
127 |
128 | dispatch( deleteNote(id) );
129 |
130 | }
131 | }
132 |
133 | export const deleteNote = (id) => ({
134 | type: types.notesDelete,
135 | payload: id
136 | });
137 |
138 |
139 | export const noteLogout = () => ({
140 | type: types.notesLogoutCleaning
141 | });
142 |
--------------------------------------------------------------------------------
/src/tests/actions/notes.test.js:
--------------------------------------------------------------------------------
1 | import configureStore from 'redux-mock-store';
2 | import thunk from 'redux-thunk';
3 |
4 |
5 | import { startNewNote, startLoadingNotes, startSaveNote, startUploading } from '../../actions/notes';
6 | import { types } from '../../types/types';
7 | import { db } from '../../firebase/firebase-config';
8 | import { fileUpload } from '../../helpers/fileUpload';
9 |
10 | jest.mock('../../helpers/fileUpload', () => ({
11 | fileUpload: jest.fn( () => {
12 | return 'https://hola-mundo.com/cosa.jpg';
13 | // return Promise.resolve('https://hola-mundo.com/cosa.jpg');
14 | })
15 | }))
16 |
17 |
18 |
19 |
20 | const middlewares = [thunk];
21 | const mockStore = configureStore(middlewares);
22 |
23 | const initState = {
24 | auth: {
25 | uid: 'TESTING'
26 | },
27 | notes: {
28 | active: {
29 | id: '02L6n2ZPdEgpELw8y7ML',
30 | title: 'Hola',
31 | body: 'Mundo'
32 | }
33 | }
34 | };
35 |
36 | let store = mockStore(initState);
37 |
38 |
39 | describe('Pruebas con las acciones de notes', () => {
40 |
41 | beforeEach( () => {
42 |
43 | store = mockStore(initState);
44 |
45 | });
46 |
47 |
48 | test('debe de crear una nueva nota startNewNote', async() => {
49 |
50 | await store.dispatch( startNewNote() );
51 |
52 | const actions = store.getActions();
53 | // console.log(actions);
54 |
55 | expect( actions[0] ).toEqual({
56 | type: types.notesActive,
57 | payload: {
58 | id: expect.any(String),
59 | title: '',
60 | body: '',
61 | date: expect.any(Number)
62 | }
63 | });
64 |
65 | expect( actions[1] ).toEqual({
66 | type: types.notesAddNew,
67 | payload: {
68 | id: expect.any(String),
69 | title: '',
70 | body: '',
71 | date: expect.any(Number)
72 | }
73 | });
74 |
75 | // const docId .... action.... payload.... id
76 | // await ..... db.... doc(``)..... .delete();
77 | const docId = actions[0].payload.id;
78 | await db.doc(`/TESTING/journal/notes/${ docId }`).delete();
79 |
80 |
81 |
82 | })
83 |
84 |
85 | test('startLoadingNotes debe cargar las notas', async() => {
86 |
87 | await store.dispatch( startLoadingNotes('TESTING') );
88 | const actions = store.getActions();
89 |
90 | expect( actions[0] ).toEqual({
91 | type: types.notesLoad,
92 | payload: expect.any(Array)
93 | });
94 |
95 | const expected = {
96 | id: expect.any(String),
97 | title: expect.any(String),
98 | body: expect.any(String),
99 | date: expect.any(Number),
100 | }
101 |
102 | expect( actions[0].payload[0] ).toMatchObject( expected );
103 |
104 |
105 | })
106 |
107 |
108 | test('startSaveNote debe de actualizar la nota', async() => {
109 |
110 | const note = {
111 | id: '02L6n2ZPdEgpELw8y7ML',
112 | title: 'titulo',
113 | body: 'body'
114 | };
115 |
116 | await store.dispatch( startSaveNote( note ) );
117 |
118 | const actions = store.getActions();
119 | // console.log(actions);
120 | expect( actions[0].type ).toBe( types.notesUpdated );
121 |
122 | const docRef = await db.doc(`/TESTING/journal/notes/${ note.id }`).get();
123 |
124 | expect( docRef.data().title ).toBe( note.title );
125 |
126 | })
127 |
128 |
129 | test('startUploading debe de actualizar el url del entry', async() => {
130 |
131 | const file = new File([], 'foto.jpg');
132 | await store.dispatch( startUploading( file ) );
133 |
134 | const docRef = await db.doc('/TESTING/journal/notes/02L6n2ZPdEgpELw8y7ML').get();
135 | expect( docRef.data().url ).toBe('https://hola-mundo.com/cosa.jpg');
136 |
137 | })
138 |
139 |
140 |
141 | })
142 |
--------------------------------------------------------------------------------
/src/components/auth/RegisterScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { useDispatch, useSelector} from 'react-redux';
4 | import validator from 'validator';
5 |
6 | import { useForm } from '../../hooks/useForm';
7 | import { setError, removeError } from '../../actions/ui';
8 | import { startRegisterWithEmailPasswordName } from '../../actions/auth';
9 |
10 | export const RegisterScreen = () => {
11 |
12 | const dispatch = useDispatch();
13 | const { msgError } = useSelector( state => state.ui );
14 |
15 | const [ formValues, handleInputChange ] = useForm({
16 | name: 'Hernando',
17 | email: 'nando@gmail.com',
18 | password: '123456',
19 | password2: '123456',
20 | });
21 |
22 | const { name ,email ,password ,password2 } = formValues;
23 |
24 | const handleRegister = (e) => {
25 | e.preventDefault();
26 |
27 | if ( isFormValid() ) {
28 | dispatch( startRegisterWithEmailPasswordName(email, password, name) );
29 | }
30 |
31 | }
32 |
33 | const isFormValid = () => {
34 |
35 | if ( name.trim().length === 0 ) {
36 | dispatch( setError('Name is required') )
37 | return false;
38 | } else if ( !validator.isEmail( email ) ) {
39 | dispatch( setError('Email is not valid') )
40 | return false;
41 | } else if ( password !== password2 || password.length < 5 ) {
42 | dispatch( setError('Password should be at least 6 characters and match each other') )
43 | return false
44 | }
45 |
46 | dispatch( removeError() );
47 | return true;
48 | }
49 |
50 | return (
51 | <>
52 | Register
53 |
54 |
125 |
126 | )
127 | }
128 |
--------------------------------------------------------------------------------