grid: update entrypoints for new api

pkg/grid/package.json

@@ -10,7 +10,8 @@
     "serve": "vite preview",
     "lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "npm run lint -- --fix",
-    "test": "echo \"No test yet\""
+    "test": "echo \"No test yet\"",
+    "tsc": "tsc --noEmit"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^0.0.20",
@@ -18,6 +19,7 @@
     "@radix-ui/react-polymorphic": "^0.0.13",
     "@radix-ui/react-portal": "^0.0.15",
     "@urbit/http-api": "^1.3.1",
+    "@urbit/api": "^1.4.0",
     "classnames": "^2.3.1",
     "clipboard-copy": "^4.0.1",
     "color2k": "^1.2.4",

pkg/grid/src/app.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import Mousetrap from 'mousetrap';
 import { BrowserRouter, Switch, Route, useHistory } from 'react-router-dom';
 import { Grid } from './pages/Grid';
+import useDocketState from './state/docket';
 
 const AppRoutes = () => {
   const { push } = useHistory();
@@ -9,6 +10,10 @@ const AppRoutes = () => {
   useEffect(() => {
     window.name = 'grid';
 
+    const { fetchAllies, fetchCharges } = useDocketState.getState();
+    fetchCharges();
+    fetchAllies();
+
     Mousetrap.bind(['command+/', 'ctrl+/'], () => {
       push('/leap/search');
     });

pkg/grid/src/pages/Grid.tsx

@@ -1,8 +1,9 @@
-import { map, pick } from 'lodash-es';
+import { map, omit } from 'lodash-es';
 import React, { FunctionComponent, useEffect } from 'react';
 import { Route, RouteComponentProps } from 'react-router-dom';
 import { MenuState, Nav } from '../nav/Nav';
-import useDocketState from '../state/docket';
+import useDocketState, { useCharges } from '../state/docket';
+import { useKilnState } from '../state/kiln';
 import { RemoveApp } from '../tiles/RemoveApp';
 import { SuspendApp } from '../tiles/SuspendApp';
 import { Tile } from '../tiles/Tile';
@@ -12,11 +13,15 @@ type GridProps = RouteComponentProps<{
 }>;
 
 export const Grid: FunctionComponent<GridProps> = ({ match }) => {
-  const { charges, fetchCharges } = useDocketState((s) => pick(s, ['charges', 'fetchCharges']));
+  const charges = useCharges();
   const chargesLoaded = Object.keys(charges).length > 0;
 
   useEffect(() => {
+    const { fetchCharges, fetchAllies } = useDocketState.getState();
+    const { fetchVats } = useKilnState.getState();
     fetchCharges();
+    fetchAllies();
+    fetchVats();
   }, []);
 
   return (
@@ -30,7 +35,9 @@ export const Grid: FunctionComponent<GridProps> = ({ match }) => {
         {chargesLoaded && (
           <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 px-4 md:px-8 w-full max-w-6xl">
             {charges &&
-              map(charges, (charge, desk) => <Tile key={desk} docket={charge} desk={desk} />)}
+              map(omit(charges, 'grid'), (charge, desk) => (
+                <Tile key={desk} charge={charge} desk={desk} />
+              ))}
           </div>
         )}
         <Route exact path="/app/:desk/suspend">