jamiehaywood

import axios from "axios";
import { getHeaders } from "./auth/getHeaders";
import { updateTokens } from "./auth/updateTokens";

// https://github.com/axios/axios/issues/1383

const customAxios = axios.create({
  baseURL: process.env.REACT_APP_CAPTURAPI,
});

jamiehaywood

import React from "react";
import "./Button.scss";
import * as SVG from "../../images";
import { Link } from "react-router-dom";

interface ButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {

jamiehaywood

export interface GlobalStateInterface {
  firstname: string;
  lastname: string;
  age: string;
}

jamiehaywood

const GlobalStateContext = createContext({
  state: {} as Partial<GlobalStateInterface>,
  setState: {} as Dispatch<SetStateAction<Partial<GlobalStateInterface>>>,
});

jamiehaywood

const GlobalStateProvider = ({
  children,
  value = {} as GlobalStateInterface,
}: {
  children: React.ReactNode;
  value?: Partial<GlobalStateInterface>;
}) => {
  const [state, setState] = useState(value);
  return (
    <GlobalStateContext.Provider value={{ state, setState }}>

jamiehaywood

const useGlobalState = () => {
  const context = useContext(GlobalStateContext);
  if (!context) {
    throw new Error("useGlobalState must be used within a GlobalStateContext");
  }
  return context;
};

jamiehaywood

import React, { createContext, useState, useContext, Dispatch, SetStateAction } from "react";

export interface GlobalStateInterface {
  firstname: string;
  lastname: string;
  age: string;
}

const GlobalStateContext = createContext({
  state: {} as Partial<GlobalStateInterface>,

jamiehaywood

import React from "react";
import { Route, Switch } from "react-router-dom";
import { GlobalStateProvider } from "./GlobalStateProvider";

import PageOne from "./PageOne";
import PageTwo from "./PageTwo";

function App() {
  return (
    <Switch>

jamiehaywood

import React from "react";
import { useHistory } from "react-router-dom";
import { useForm } from "react-hook-form";

import { useGlobalState, GlobalStateInterface } from "./GlobalStateProvider";

const PageOne = () => {
  const history = useHistory();
  const { handleSubmit, register } = useForm();
  const { setState } = useGlobalState();

jamiehaywood

import React from "react";

import { useGlobalState } from "./GlobalStateProvider";

const PageTwo = () => {
  const { state } = useGlobalState();

  return (
    <div>
      <h1>State from PageOne:</h1>