Xstate Auth migration (#250)

* auth migrate progress, web only

* wrap home in state provider

* use consistent logged spelling

* use createActorContext

* typo

* fix wraping problem

src/hooks/useAuthMachine.tsx

@@ -0,0 +1,54 @@
+import { createActorContext } from '@xstate/react'
+import { useNavigate } from 'react-router-dom'
+import { paths } from '../Router'
+import { authMachine, TOKEN_PERSIST_KEY } from '../lib/authMachine'
+import withBaseUrl from '../lib/withBaseURL'
+
+export const AuthMachineContext = createActorContext(authMachine)
+
+export const GlobalStateProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const navigate = useNavigate()
+  return (
+    <AuthMachineContext.Provider
+      machine={() =>
+        authMachine.withConfig({
+          actions: {
+            goToSignInPage: () => {
+              navigate(paths.SIGN_IN)
+              logout()
+            },
+            goToIndexPage: () => navigate(paths.INDEX),
+          },
+        })
+      }
+    >
+      {children}
+    </AuthMachineContext.Provider>
+  )
+}
+
+export function useAuthMachine<T>(
+  selector: (
+    state: Parameters<Parameters<typeof AuthMachineContext.useSelector>[0]>[0]
+  ) => T = () => null as T
+): [T, ReturnType<typeof AuthMachineContext.useActor>[1]] {
+  // useActor api normally `[state, send] = useActor`
+  // we're only interested in send because of the selector
+  const send = AuthMachineContext.useActor()[1]
+
+  const selection = AuthMachineContext.useSelector(selector)
+  return [selection, send]
+}
+
+export function logout() {
+  const url = withBaseUrl('/logout')
+  localStorage.removeItem(TOKEN_PERSIST_KEY)
+  return fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+  })
+}