├── README.md
├── useCounter
    └── useCounter.js
├── useFetch
    └── useFetch.js
├── useForm
    └── useForm.js
└── useTodos
    ├── todoReducer.js
    └── useTodos.js


/README.md:
--------------------------------------------------------------------------------
1 | # Custom Hooks
2 | 
3 | Repositorio de custom hooks


--------------------------------------------------------------------------------
/useCounter/useCounter.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react"
 2 | 
 3 | 
 4 | export const useCounter = ( initialValue = 10 ) => {
 5 | 
 6 |     const [ counter, setCounter ] = useState( initialValue )
 7 | 
 8 |     const increment = ( value = 1 ) => {
 9 |         setCounter( (current) => current + value );
10 |     }
11 | 
12 |     const decrement = ( value = 1 ) => {
13 |         // if ( counter === 0 ) return;
14 | 
15 |         setCounter( (current) => current - value );
16 |     }
17 | 
18 |     const reset = () => {
19 |         setCounter( initialValue );
20 |     }
21 | 
22 |     return {
23 |         counter,
24 |         increment,
25 |         decrement,
26 |         reset,
27 |     }
28 | 
29 | }
30 | 
31 | 


--------------------------------------------------------------------------------
/useFetch/useFetch.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | 
 4 | export const useFetch = ( url ) => {
 5 | 
 6 |     const [state, setState] = useState({
 7 |         data: null,
 8 |         isLoading: true,
 9 |         hasError: null,
10 |     })
11 | 
12 | 
13 |     const getFetch = async () => {
14 | 
15 |         setState({
16 |             ...state,
17 |             isLoading: true,
18 |         });
19 | 
20 |         const resp = await fetch(url);
21 |         const data = await resp.json();
22 | 
23 |         setState({
24 |             data,
25 |             isLoading: false,
26 |             hasError: null,
27 |         });
28 |     }
29 | 
30 | 
31 |     useEffect(() => {
32 |         getFetch();
33 |     }, [url])
34 |     
35 | 
36 | 
37 |     return {
38 |         data:      state.data,
39 |         isLoading: state.isLoading,
40 |         hasError:  state.hasError,
41 |     };
42 | }
43 | 


--------------------------------------------------------------------------------
/useForm/useForm.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export const useForm = ( initialForm = {} ) => {
 4 |   
 5 |     const [ formState, setFormState ] = useState( initialForm );
 6 | 
 7 |     const onInputChange = ({ target }) => {
 8 |         const { name, value } = target;
 9 |         setFormState({
10 |             ...formState,
11 |             [ name ]: value
12 |         });
13 |     }
14 | 
15 |     const onResetForm = () => {
16 |         setFormState( initialForm );
17 |     }
18 | 
19 |     return {
20 |         ...formState,
21 |         formState,
22 |         onInputChange,
23 |         onResetForm,
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/useTodos/todoReducer.js:
--------------------------------------------------------------------------------
 1 | // { type: [todo remove], payload: id }
 2 | 
 3 | export const todoReducer = ( initialState = [], action ) => {
 4 | 
 5 | 
 6 |     switch ( action.type ) {
 7 |         case '[TODO] Add Todo':
 8 |             return [ ...initialState, action.payload ];
 9 | 
10 |         case '[TODO] Remove Todo':
11 |             return initialState.filter( todo => todo.id !== action.payload );
12 | 
13 |         case '[TODO] Toggle Todo':
14 |             return initialState.map( todo => {
15 | 
16 |                 if ( todo.id === action.payload ) {// id
17 |                     return {
18 |                         ...todo,
19 |                         done: !todo.done
20 |                     }
21 |                 } 
22 | 
23 |                 return todo;
24 |             });
25 |     
26 |         default:
27 |             return initialState;
28 |     }
29 | 
30 | 
31 | }


--------------------------------------------------------------------------------
/useTodos/useTodos.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useReducer } from 'react';
 2 | import { todoReducer } from './todoReducer';
 3 | 
 4 | const init = () => {
 5 |     return JSON.parse(localStorage.getItem('todos')) || [];
 6 | }
 7 | 
 8 | export const useTodos = () => {
 9 |   
10 |     const [ todos, dispatch ] = useReducer( todoReducer, [], init );
11 | 
12 |     useEffect(() => {
13 |       localStorage.setItem('todos', JSON.stringify( todos ) );
14 |     }, [todos])
15 |     
16 | 
17 |     const handleNewTodo = ( todo ) => {
18 |         const action = {
19 |             type: '[TODO] Add Todo',
20 |             payload: todo
21 |         }
22 | 
23 |         dispatch( action );
24 |     }
25 | 
26 |     const handleDeleteTodo = ( id ) => {
27 |         dispatch({
28 |             type: '[TODO] Remove Todo',
29 |             payload: id
30 |         });
31 |     }
32 | 
33 |     const handleToggleTodo = ( id ) => {
34 |         dispatch({
35 |             type: '[TODO] Toggle Todo',
36 |             payload: id
37 |         });
38 |     }
39 | 
40 |     return {
41 |         todos,
42 | 
43 |         todosCount: todos.length,
44 |         pendingTodosCount: todos.filter(todo=> !todo.done).length,
45 | 
46 |         handleNewTodo,
47 |         handleDeleteTodo,
48 |         handleToggleTodo,
49 |     }
50 | 
51 | }
52 | 


--------------------------------------------------------------------------------