grid: update entrypoints for new api

This commit is contained in:
Liam Fitzgerald 2021-08-23 14:58:29 +10:00
parent 220e6fca10
commit 952d5c0c38
4 changed files with 103 additions and 7353 deletions

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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');
});

View File

@ -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">