many, many changes

1 files changed, 25 insertions, 45 deletions

diff --git a/gui/src/components/app/App.tsx b/gui/src/components/app/App.tsx
index cd9f9ee..e9ef742 100644
--- a/gui/src/components/app/App.tsx
+++ b/gui/src/components/app/App.tsx
@@ -1,53 +1,33 @@
-import Category from '../../types/category';
-import Gbp from '../../types/currency/gbp';
+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 (
-    <>
-      <Histogram categories={categories} />
-    </>
-  )
+    <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>
+  );
 }
 
-const categories: Category[] = [
-  {
-    id: 0,
-    name: 'Groceries',
-    currentBalance: new Gbp(71, 37, 1),
-    currentBudget: {
-      quantity: new Gbp(65, 0, 1),
-      period: 7,
-    },
-  },
-  {
-    id: 1,
-    name: 'Stationery',
-    currentBalance: new Gbp(10, 12, -1),
-    currentBudget: {
-      quantity: new Gbp(12, 0, 1),
-      period: 30,
-    },
-  },
-  {
-    id: 2,
-    name: 'Holidays',
-    currentBalance: new Gbp(325, 0, 1),
-    currentBudget: {
-      quantity: new Gbp(1000, 0, 1),
-      period: 365,
-    },
-  },
-  {
-    id: 3,
-    name: 'Wages',
-    currentBalance: new Gbp(1025, 60, -1),
-    currentBudget: {
-      quantity: new Gbp(2167, 7, -1),
-      period: 30.25,
-    },
-  },
-].map(c => ({ ...c, balanceToBudgetRatio: c.currentBalance.valueOf() / c.currentBudget.quantity.valueOf() }));
-
 export default App