React Context y LocalStorage en uno Solo!!!

console.log(“Hello Dev”)

Si bien en la clase 5 el profesor Oscar Barajas explica una metodología para usar el React Context. En realidad existen diversas maneras de hacerlo.
Les voy a emplicar la forma como lo hizo @midudev en el curso de React Avanzado
Por si fuera poco, las props se guardarán en el LocalStorage!!!
– Nota –
Antes de empezar, estoy usando styled-components. Para no entrar mucho en detalles, es una libreria que me permite estilar los componentes reemplazando las clases y llamando componentes en lugar de etiquetas html.
Por ello, si se confunden con mi componente Header, les dejo una referencia para aclarar dudas

HeaderContainer == <div>
Button == <button>
Fin Nota

Dicho esto, continuemos …

Creamos un archivo Context.js (puedes ponerle el nombre que quieras)

import React, { createContext, useState } from 'react';

// Exportamos la instancia del objecto Context
export const Context = createContext();

// Creamos un componente Provider el cual recibe como props los children
const Provider = ({ children }) => {

	//En este ejercicio vamos a crear una props darkMode y a su vez la vamos a guardar en el Local Storage ;)
    const [darkMode, setDarkMode] = useState(() => {
        const val = window.localStorage.getItem('darkMode');

//La razon de este if es porque cuando obtenemos datos del LS, este viene desde un JSON lo cual se parsea como un String
//Pero para mi caso lo quiero como un boolean
        if (val === 'true') return true;
        else return false;
    });

//Value es el objeto con los valores y sus respectivas funciones de alteracion de los mismos
// Piensa que aqui van a estar todas las props que quieres compartir y las funciones para cambiar sus valores
    const value = {
        darkMode,
        activateDarkMode: (value) => {
            setDarkMode(value);
            window.localStorage.setItem('darkMode', value)
        }
    }
//Finalmente retornamos el componente Context.Provider y la pasamos como props el value (recuerda, son las props globales que queremos en nuestra app)
    return (
	<Context.Provider value={value}>
            {children}
        </Context.Provider>
    )
}

// Exportamos by defult nuestro componente Provider, pues lo vamos a usar para proveer nuestro Context en la app
export default Provider;

Luego en el index.js …

import React from 'react';
import ReactDOM from 'react-dom';

// importamos nuestro Provider (export default)
import ContextProvider from'./Context/Context';
import App from'./App';

// Luego lo proveemos en nuestra app
ReactDOM.render(
  <React.StrictMode>
    <ContextProvider>
      <App />
    </ContextProvider>
  </React.StrictMode>,
  document.getElementById('app')
);

Finalmente en cualquier componente (En este caso Header)

//Importamos el hook useContext
import React, {useContext} from'react'

//importamos el objecto Context (importante los {})
import { Context } from'../Context/Context';
import {Button, HeaderContainer} from'./styles/Header';
export const Header = () =>{

//Le pasamos el objeto Context al hook useContext, de este modo podemos retornar nuestras props globales
    const {darkMode, activateDarkMode} = useContext(Context)

//Alteramos la prop activateDarkMode con su valor contrario
//Recuerda que tambien se va a cambiar en el LS :D
    const handleClick = () =>{
        activateDarkMode(!darkMode)
    }
    return (
        <HeaderContainer className="Header">
            <h1>ReactHooks</h1>
            <Button darkMode={darkMode} type="button" onClick={handleClick}>{darkMode ? 'Light Mode' : 'Dark Mode'}</Button>
        </HeaderContainer>
    );
}

No olvides comentar y dejar tu like. Me serán muy utiles a la hora de hacer más tutoriales
console.log(“Recuerda que #NuncaParesDeAprender y dile a tu mamá que la amas”)