import React from 'react';
import { AppProvider, useAppValue } from './AppContext';
import FormLogin from './FormLogin';
import FormRegister from './FormRegister';

const App = () => {
  const initialState = {
    page: <FormLogin/>
  }

  const reducer = (state, action) => {
    switch (action.type) {
      case 'loadLogin':
        return {
          ...state,
          page: <FormLogin/>
        };
      case 'loadRegister':
        return {
          ...state,
          page: <FormRegister/>
        };
      default:
        return state;
    }
  };

  let { page } = useAppValue();
  let currentPage = page ? page : <FormLogin/>

  return (
    <AppProvider initialState={initialState} reducer={reducer}>
      <div className="App">
        {currentPage}
      </div>
    </AppProvider>
  );
}

export default App;

import React, { createContext, useContext, useReducer } from 'react';

export const AppContext = createContext();
export const AppProvider = ({reducer, initialState, children}) => (
  <AppContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </AppContext.Provider>
);

export const useAppValue = () => useContext(AppContext);