The AppModel

The AppModel first definition

We want to display the list of todos, let’s call it the TodoPage. So we will have 2 app routes: one for "not-found" and the other for the todo page. We will be able to add some over time very easily.

// src/spa-client-side/5-app-model/AppModel-attempt-1.ts

import { ReadonlySignal } from '@/spa-client-side/setup/Signal'

export type AppRoute =
  | { name: 'NotFound' }
  | { name: 'TodoListPage'; make: () => TodoPageModel }

export interface AppModel {
  route: ReadonlySignal<AppRoute>
  goToTodos: () => void
}

type TodoPageModel = unknown // ?

The TodoPageModel definition

Apparently, our app will need such a model, so let’s define it.

We know we will want to display a fetched list of todos.

And to display such a list, we will use the JsonPlaceholderApi.

// src/spa-client-side/5-app-model/TodoPageModel.ts

import { TodoApi, Todo } from '@/spa-client-side/setup/TodoApi'
import {
  createRemoteAction,
  RemoteAction,
} from '@/spa-client-side/setup/RemoteAction'

export interface TodoPageModel {
  getTodoList: RemoteAction<Todo[]>
}

export function makeTodoPageModel(api: TodoApi): TodoPageModel {
  const getTodoList = createRemoteAction(api.getTodos.bind(api))

  return {
    getTodoList,
  }
}

Going back to the AppModel to implement it

// src/spa-client-side/5-app-model/AppModel.ts

import { ReadonlySignal } from '@/spa-client-side/setup/Signal'
import { TodoApi } from '@/spa-client-side/setup/TodoApi'
import { createSignal, ReadonlySignal } from '@/spa-client-side/setup/Signal'
import { makeTodoPageModel, TodoPageModel } from './TodoPageModel'

export type AppRoute =
  | { name: 'NotFound' }
  | { name: 'TodoListPage'; make: () => TodoPageModel }

export interface AppModel {
  route: ReadonlySignal<AppRoute>
  goToTodos: () => void
}

type TodoPageModel = unknown // ? // [!code --]export function makeAppModel(api: TodoApi): AppModel {
  const route = createSignal<AppRoute>({ name: 'NotFound' }) 

  return { 
    route, 
    goToTodos: () =>
      route.set({ 
        name: 'TodoListPage', 
        make: () => makeTodoPageModel(api), 
      }), 
  } 
} 

---

Great, now that we have our app model defined and implemented, let’s display it !

We can start with React then Vue