gui/src/components/app/App.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import { createResource, Match, Resource, Switch } from 'solid-js';
import Histogram from '../histogram/Histogram'
import './App.css'
import { getAllCategories } from '../../ajax/backend';
import { Category } from '../../types/category';

function App() {
  const [categories] = createResource(getAllCategories);

  return (
    <Switch>
      <Match when={categories.state === 'ready'}>
        <Histogram categories={(categories as Extract<Resource<Category[]>, { state: 'ready' }>)()} />
      </Match>
      <Match when={categories.state === 'pending'}>
        <p>Loading...</p>
      </Match>
      <Match when={categories.state === 'unresolved'}>
        <p>Unresolved!</p>
      </Match>
      <Match when={categories.state === 'errored'}>
        <p>Error!</p>
        <p>{JSON.stringify(categories.error, null, 2)}</p>
        <p>{JSON.stringify(categories(), null, 2)}</p>
      </Match>
      <Match when={categories.state === 'refreshing'}>
        <p>Refreshing!</p>
      </Match>
    </Switch>
  );
}

export default App