xState service layer

AppContextProvider.tsx

import React from "react";
import { createUserSessionService } from "services/UserSessionService";
import { createNavService } from "services/NavService";

// Wiring up our "IOC container"

const userSessionService = createUserSessionService();

// NavService depends on UserSessionService
const navService = createNavService(userSessionService); 

const dependencies = {
  userSessionService,
  navService
};

const AppContext = React.createContext(dependencies);

const AppContextProvider: React.FC = props => {
  return (
    <AppContext.Provider value={dependencies}>
      {props.children}
    </AppContext.Provider>
  );
};

export { AppContext, AppContextProvider };

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "App";
import { AppContextProvider } from "AppContextProvider";

// Wrapping our app in our "IOC container"
ReactDOM.render(
  <AppContextProvider>
      <App />
  </AppContextProvider>,
  document.getElementById("root")
);

NavBar.tsx

import React from "react";
import { useHistory } from "react-router-dom";
import { SideNav } from "SideNav";
import { useNavService } from "services/NavService";

const Navbar: React.FC = () => {
  const [navState] = useNavService(); // Inject dependency
  
  // Links automatically change based on authentication state
  // from UserSessionService
  const { links } = navState.context; 
  return (
    <>
      <SideNav
        menuItems={links}
        menuHeaderLink="/"
        menuHeaderLinkAlt="Home"
      />
    </>
  );
};

export default Navbar;

NavService.tsx

import { useContext } from "react";
import { Machine, interpret, Interpreter } from "xstate";
import { useService } from "@xstate/react";
import { AppContext } from "AppContextProvider";
import { config, NavContext, NavEvent, NavStateSchema} from "./machine";
import { UserSessionService } from "services/UserSessionService";

// Custom hook for "dependency injection"
export const useNavService = () => {
  const { navService } = useContext(AppContext);
  return useService(navService);
};

export const createNavService = (userSessionService: UserSessionService): NavService => {
  const navMachine = Machine<NavContext, NavStateSchema, NavEvent>(config);
  const navService = interpret(navMachine).start();

  // wire up state transition dependency between
  // NavService and UserSessionService
  userSessionService.onTransition(state => {
    if (state.matches("AUTHENTICATED")) {
      navService.send("SWITCH_TO_AUTHENTICATED_LINKS");
    } else {
      navService.send("SWITCH_TO_UNAUTHENTICATED_LINKS");
    }
  });
  
  return navService;
};

UserSessionService.tsx

import { useContext } from "react";
import { Machine, interpret, Interpreter } from "xstate";
import { useService } from "@xstate/react";
import { AppContext } from "AppContextProvider";
import { config, UserSessionContext, UserSessionStateSchema, UserSessionEvent } from "./machine";

// Custom hook for "dependency injection"
export const useUserSessionService = () => {
  const { userSessionService } = useContext(AppContext);
  return useService(userSessionService);
};

export const createUserSessionService = (): UserSessionService => {
  const userSessionMachine = Machine<UserSessionContext, UserSessionStateSchema, UserSessionEvent>(config);

  return (
    interpret(userSessionMachine)
      .start()
  );
};