🌲 User Context

Use React context to access user data

After this lesson, your App.tsx should look like this:

import { createContext } from "react";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import MessageBoard from "./MessageBoard";
import AllPosts from "./AllPosts";
import PostView from "./PostView";
import Welcome, { welcomeLoader } from "./Welcome";
import NavBar from "./NavBar";
import { SupashipUserInfo, useSession } from "./use-session";

const router = createBrowserRouter([
  /* routing hasn't changed */
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

export const UserContext = createContext<SupashipUserInfo>({
  session: null,
  profile: null,
});

function Layout() {
  const supashipUserInfo = useSession();
  return (
    <>
      <UserContext.Provider value={supashipUserInfo}>
        <NavBar />
        <Outlet />
      </UserContext.Provider>
    </>
  );
}

Questions? Let's chat

Open Discord