Tag: react

AuthContext

import React, {useState} from "react";

export interface AuthContextType {
    isLoggedIn: boolean,
    logIn: () => void,
    logOut: () => void,
}

const AuthContextDefault: AuthContextType = {
    isLoggedIn: false,
    logIn(): void {
    },
    logOut(): void {
    }
};

const AuthContext = React.createContext(AuthContextDefault);

export const AuthContextProvider = (props: any) => {

    // we need to initialize state from local storage because we should keep users logged in on page refresh
    const [isLoggedIn, setIsLoggedIn] = useState(() => {
        if (localStorage.getItem("isLoggedIn") === "1") {
            return true;
        }

        return false;
    });

    const logInHandler = () => {
        setIsLoggedIn(true);
        // save in local storage
        localStorage.setItem("isLoggedIn", "1");
    };

    const logOutHandler = () => {
        setIsLoggedIn(false);
        // remove from local storage
        localStorage.removeItem("isLoggedIn");
    }

    return <AuthContext.Provider value={{isLoggedIn: isLoggedIn, logIn: logInHandler, logOut: logOutHandler}}>
        {props.children}
    </AuthContext.Provider>
        ;
};

export default AuthContext;

index

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import {AuthContextProvider} from "./context/AuthContext";

ReactDOM.render(
    <BrowserRouter>
        <React.StrictMode>
            <AuthContextProvider>
                <App/>
            </AuthContextProvider>
        </React.StrictMode>
    </BrowserRouter>
    ,
    document.getElementById('root')
);

reportWebVitals();

Login

import AuthContext from "../context/AuthContext";
import {useContext} from "react";

function Login() {

    const authCtx = useContext(AuthContext);

    return (
        <div className="m-2">
            <div>
                <span>Username : </span>
                <input type="text" className="input input-bordered w-full max-w-xs ml-2"
                       placeholder="Enter Username"/>
            </div>

            <div>
                <span>Password : </span>
                <input type="password" className="input input-bordered w-full max-w-xs ml-2"
                       placeholder="Enter Password"/>
            </div>
            <div className="mt-4">
                <button type="button" className="btn" onClick={authCtx.logIn}>Login</button>
                <button type="button" className="btn ml-2" onClick={authCtx.logOut}>Logout</button>
            </div>
        </div>
    );
}

export default Login;

User

import AuthContext from "../context/AuthContext";
import {useContext} from "react";

function User() {

    const authCtx = useContext(AuthContext);

    return (
        <div>
            {authCtx.isLoggedIn && "Logged in"}
            {!authCtx.isLoggedIn && "Logged out"}
        </div>
    )
}

export default User;

References
https://reactjs.org/docs/context.html

import {useReducer} from "react";

interface CounterAction {
    type: CounterType,
    data: number
}

enum CounterType {
    INCREASE,
    DECREASE
}

interface CounterState {
    count: number
}

function CounterReducer(state: CounterState, action: CounterAction): CounterState {

    if (action.type === CounterType.INCREASE) {
        return {...state, count: state.count + action.data}
    } else if (action.type === CounterType.DECREASE) {
        return {...state, count: state.count - action.data}
    }

    return {...state};
}

function Counter() {

    // initial value for counter
    const counterInitializerArg: CounterState = {count: 0};
    // counter value
    let counterState: CounterState;
    // this is a function with CounterAction as parameter, it will increase/decrease counter value by 1
    let counterDispatch: (payload: CounterAction) => void;

    [counterState, counterDispatch] = useReducer(CounterReducer, counterInitializerArg);

    return (
        <>
            <div>
                Count : {counterState.count}
            </div>
            <div>
                <button type="button" className="btn"
                        onClick={event => counterDispatch({type: CounterType.INCREASE, data: 1})}>Increase
                </button>
                <button type="button" className="btn"
                        onClick={event => counterDispatch({type: CounterType.DECREASE, data: 1})}>Decrease
                </button>
            </div>
        </>
    );
}

export default Counter;

Specifying the initial state

There are two different ways to initialize useReducer state. You may choose either one depending on the use case. The simplest way is to pass the initial state as a second argument:

const [state, dispatch] = useReducer(
  reducer,
  {count: initialCount}
);

Lazy initialization

You can also create the initial state lazily. To do this, you can pass an init function as the third argument. The initial state will be set to init(initialArg).

It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

References
https://reactjs.org/docs/hooks-reference.html#usereducer
https://dev.to/craigaholliday/using-the-usereducer-hook-in-react-with-typescript-27m1