Set up rudimentary state, App, and a test for the App

visions/client/package.json

@@ -3,6 +3,7 @@
     "version": "0.0.1",
     "description": "Shared data types for Visions",
     "main": "visions.js",
+    "types": "dist/lib.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },

visions/ui/src/App.test.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react'
+import { State, Action, Controller, initialState, reducer } from './state'
+import { Client, ClientResponse } from 'visions-client'
+import { AuthResponse, SessionId, UserOverview } from 'visions-types'
+import { useReducer } from 'react'
+import App from './App'
+
+class MockClient implements Client {
+    constructor() {}
+
+    async auth(
+        username: string,
+        password: string,
+    ): Promise<ClientResponse<AuthResponse<SessionId>>> {
+        if (username === 'vakarian' && password === 'aoeu') {
+            return {
+                status: 'ok',
+                content: { type: 'success', content: 'vakarian-session-id' },
+            }
+        } else if (username === 'shephard' && password === 'aoeu') {
+            return {
+                status: 'ok',
+                content: {
+                    type: 'password-reset',
+                    content: 'shephard-session-id',
+                },
+            }
+        } else {
+            return { status: 'unauthorized' }
+        }
+    }
+
+    async listUsers(
+        sessionId: SessionId,
+    ): Promise<ClientResponse<UserOverview[]>> {
+        return { status: 'ok', content: [] }
+    }
+}
+
+
+describe('App tests', async () => {
+    it('shows the login page when the user isn not logged in', () => {
+        const client = new MockClient;
+        const [state, dispatch] = useReducer(reducer, initialState())
+        let controller = new Controller(client, state, dispatch)
+        render(<App state={state} controller={controller} />)
+        expect(screen.getByText(/Login Page/)).toBeInTheDocument();
+    })
+})

visions/ui/src/App.tsx

@@ -1,35 +1,21 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import { State, Controller, sessionId } from "./state"
 
-function App() {
+const LoginPage = () => (
-  const [count, setCount] = useState(0)
+    <div> Login Page </div>
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
 )
+
+interface AppProps {
+    state: State
+    controller: Controller
+}
+
+const App = ({ state, controller }: AppProps) => {
+    if (sessionId(state)) {
+        <div> User is logged in </div>
+    } else {
+        <LoginPage />
+    }
 }
 
 export default App

visions/ui/src/state.ts

@@ -0,0 +1,72 @@
+import { Client } from 'visions-client'
+import { ActionDispatch } from 'react'
+
+export type AuthState =
+    | { type: 'unauthed' }
+    | { type: 'authed'; sessionId: string }
+
+export type State = {
+    auth: AuthState
+}
+
+export const initialState = (): State => ({
+    auth: { type: 'unauthed' },
+})
+
+export const sessionId = (state: State) => string | undefined {
+    if (state.type === 'authed') {
+        return state.sessionId
+    } else {
+        return undefined
+    }
+}
+
+export type Action = { type: 'set-auth'; content: AuthState }
+
+export const reducer = (state: State, action: Action) => {
+    switch (action.type) {
+        case 'set-auth': {
+            return { ...state, auth: action.content }
+        }
+        default: {
+            return state
+        }
+    }
+}
+
+export class Controller {
+    client: Client
+    state: State
+    dispatch: ActionDispatch<[action: Action]>
+
+    constructor(
+        client: Client,
+        state: State,
+        dispatch: ActionDispatch<[action: Action]>,
+    ) {
+        this.client = client
+        this.state = state
+        this.dispatch = dispatch
+    }
+
+    // On any request, there are four options.
+    // The request succeeds. No problem.
+    // The request succeeds, but the user needs to reset their password.
+    // The action fails.
+    // The HTTP request itself fails.
+    async auth(username: string, password: string) {
+        let response = await this.client.auth(username, password)
+        switch (response.status) {
+            case 'ok': {
+                this.dispatch({
+                    type: 'set-auth',
+                    content: {
+                        type: 'authed',
+                        sessionId: response.content.content,
+                    },
+                })
+                return
+            }
+        }
+    }
+}