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.css

@@ -1,42 +1,42 @@
 #root {
-  max-width: 1280px;
+    max-width: 1280px;
-  margin: 0 auto;
+    margin: 0 auto;
-  padding: 2rem;
+    padding: 2rem;
-  text-align: center;
+    text-align: center;
 }
 
 .logo {
-  height: 6em;
+    height: 6em;
-  padding: 1.5em;
+    padding: 1.5em;
-  will-change: filter;
+    will-change: filter;
-  transition: filter 300ms;
+    transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+    filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+    filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-  from {
+    from {
-    transform: rotate(0deg);
+        transform: rotate(0deg);
-  }
+    }
-  to {
+    to {
-    transform: rotate(360deg);
+        transform: rotate(360deg);
-  }
+    }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
+    a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
+        animation: logo-spin infinite 20s linear;
-  }
+    }
 }
 
 .card {
-  padding: 2em;
+    padding: 2em;
 }
 
 .read-the-docs {
-  color: #888;
+    color: #888;
 }

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 (
+interface AppProps {
-    <>
+    state: State
-      <div>
+    controller: Controller
-        <a href="https://vite.dev" target="_blank">
+}
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+
-        </a>
+const App = ({ state, controller }: AppProps) => {
-        <a href="https://react.dev" target="_blank">
+    if (sessionId(state)) {
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <div> User is logged in </div>
-        </a>
+    } else {
-      </div>
+        <LoginPage />
-      <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>
-    </>
-  )
 }
 
 export default App

visions/ui/src/index.css

@@ -1,68 +1,68 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+    line-height: 1.5;
-  font-weight: 400;
+    font-weight: 400;
 
-  color-scheme: light dark;
+    color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+    color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    background-color: #242424;
 
-  font-synthesis: none;
+    font-synthesis: none;
-  text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-  font-weight: 500;
+    font-weight: 500;
-  color: #646cff;
+    color: #646cff;
-  text-decoration: inherit;
+    text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  margin: 0;
+    margin: 0;
-  display: flex;
+    display: flex;
-  place-items: center;
+    place-items: center;
-  min-width: 320px;
+    min-width: 320px;
-  min-height: 100vh;
+    min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
+    font-size: 3.2em;
-  line-height: 1.1;
+    line-height: 1.1;
 }
 
 button {
-  border-radius: 8px;
+    border-radius: 8px;
-  border: 1px solid transparent;
+    border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+    padding: 0.6em 1.2em;
-  font-size: 1em;
+    font-size: 1em;
-  font-weight: 500;
+    font-weight: 500;
-  font-family: inherit;
+    font-family: inherit;
-  background-color: #1a1a1a;
+    background-color: #1a1a1a;
-  cursor: pointer;
+    cursor: pointer;
-  transition: border-color 0.25s;
+    transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+    border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
+    :root {
-    color: #213547;
+        color: #213547;
-    background-color: #ffffff;
+        background-color: #ffffff;
-  }
+    }
-  a:hover {
+    a:hover {
-    color: #747bff;
+        color: #747bff;
-  }
+    }
-  button {
+    button {
-    background-color: #f9f9f9;
+        background-color: #f9f9f9;
-  }
+    }
 }

visions/ui/src/main.tsx

@@ -4,7 +4,7 @@ import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
+    <StrictMode>
-    <App />
+        <App />
-  </StrictMode>,
+    </StrictMode>,
 )

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
+            }
+        }
+    }
+}