From eb9c9688ed4a7cc3947bc77e303c28fc128d73a3 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Tue, 15 Mar 2022 11:42:03 -0500 Subject: [PATCH 1/8] apps/docket: move all status to hook and make more reliable --- pkg/grid/src/nav/search/Apps.tsx | 29 +++++++---------- pkg/grid/src/state/docket.ts | 56 +++++++++++++++++++++++++++----- 2 files changed, 58 insertions(+), 27 deletions(-) diff --git a/pkg/grid/src/nav/search/Apps.tsx b/pkg/grid/src/nav/search/Apps.tsx index c020390ff1..8bd04da581 100644 --- a/pkg/grid/src/nav/search/Apps.tsx +++ b/pkg/grid/src/nav/search/Apps.tsx @@ -3,7 +3,7 @@ import { RouteComponentProps } from 'react-router-dom'; import fuzzy from 'fuzzy'; import { Treaty } from '@urbit/api'; import { ShipName } from '../../components/ShipName'; -import useDocketState, { useAllyTreaties, useAllies } from '../../state/docket'; +import { useAllyTreaties } from '../../state/docket'; import { useLeapStore } from '../Nav'; import { AppList } from '../../components/AppList'; import { addRecentDev } from './Home'; @@ -19,14 +19,12 @@ export const Apps = ({ match }: AppsProps) => { })); const provider = match?.params.ship; const { treaties, status } = useAllyTreaties(provider); - const allies = useAllies(); - const isAllied = provider in allies; useEffect(() => { - if (Object.keys(allies).length > 0 && !isAllied) { - useDocketState.getState().addAlly(provider); + if (provider) { + addRecentDev(provider); } - }, [allies, isAllied, provider]); + }, [provider]); const results = useMemo(() => { if (!treaties) { @@ -74,12 +72,8 @@ export const Apps = ({ match }: AppsProps) => { } }, [results]); - useEffect(() => { - if (provider) { - useDocketState.getState().fetchAllyTreaties(provider); - addRecentDev(provider); - } - }, [provider]); + const showNone = + status === 'error' || ((status === 'success' || status === 'initial') && results?.length === 0); return (
@@ -107,12 +101,11 @@ export const Apps = ({ match }: AppsProps) => {

That's it!

)} - {status === 'error' || - ((status === 'success' || status === 'initial') && results?.length === 0 && ( -

- Unable to find software developed by -

- ))} + {showNone && ( +

+ Unable to find software developed by +

+ )}
); }; diff --git a/pkg/grid/src/state/docket.ts b/pkg/grid/src/state/docket.ts index c94cec3ea0..56e13c04ba 100644 --- a/pkg/grid/src/state/docket.ts +++ b/pkg/grid/src/state/docket.ts @@ -1,6 +1,6 @@ import create, { SetState } from 'zustand'; import produce from 'immer'; -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { omit, pick } from 'lodash'; import { Allies, @@ -27,7 +27,7 @@ import { import api from './api'; import { mockAllies, mockCharges, mockTreaties } from './mock-data'; import { fakeRequest, normalizeUrbitColor, useMockData } from './util'; -import { useAsyncCall } from '../logic/useAsyncCall'; +import { Status, useAsyncCall } from '../logic/useAsyncCall'; export interface ChargeWithDesk extends Charge { desk: string; @@ -269,17 +269,38 @@ export function useAllies() { export function useAllyTreaties(ship: string) { const allies = useAllies(); - const { call: fetchTreaties, status } = useAsyncCall(() => - useDocketState.getState().fetchAllyTreaties(ship) - ); + const isAllied = ship in allies; + const [status, setStatus] = useState('initial'); + const [treaties, setTreaties] = useState(); useEffect(() => { - if (ship in allies) { - fetchTreaties(); + if (Object.keys(allies).length > 0 && !isAllied) { + setStatus('loading'); + useDocketState.getState().addAlly(ship); } - }, [ship, allies]); + }, [allies, isAllied, ship]); - const treaties = useDocketState( + useEffect(() => { + async function fetchTreaties() { + if (isAllied) { + setStatus('loading'); + try { + const newTreaties = await useDocketState.getState().fetchAllyTreaties(ship); + + if (Object.keys(newTreaties).length > 0) { + setTreaties(newTreaties); + setStatus('success'); + } + } catch { + setStatus('error'); + } + } + } + + fetchTreaties(); + }, [ship, isAllied]); + + const storeTreaties = useDocketState( useCallback( (s) => { const charter = s.allies[ship]; @@ -289,7 +310,24 @@ export function useAllyTreaties(ship: string) { ) ); + useEffect(() => { + const timeout = setTimeout(() => { + setStatus('error'); + }, 30 * 1000); // wait 30 secs before timing out + + if (Object.keys(storeTreaties).length > 0) { + setTreaties(storeTreaties); + setStatus('success'); + clearTimeout(timeout); + } + + return () => { + clearTimeout(timeout); + }; + }, [storeTreaties]); + return { + isAllied, treaties, status }; From 1806320786967dd21190036c69180bd0447d6f83 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 21 Mar 2022 11:51:05 -0500 Subject: [PATCH 2/8] tile-grid: ensure we aren't trying to display uninstalled apps --- pkg/grid/src/tiles/TileGrid.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/pkg/grid/src/tiles/TileGrid.tsx b/pkg/grid/src/tiles/TileGrid.tsx index ef7f18de2d..670b0ea497 100644 --- a/pkg/grid/src/tiles/TileGrid.tsx +++ b/pkg/grid/src/tiles/TileGrid.tsx @@ -37,10 +37,20 @@ export const TileGrid = ({ menu }: TileGridProps) => { const hasKeys = order && !!order.length; const chargeKeys = Object.keys(charges); + // Correct order state, fill if none, remove duplicates, and remove + // old uninstalled app keys if (!hasKeys) { useSettingsState.getState().putEntry('tiles', 'order', chargeKeys); } else if (order.length < chargeKeys.length) { useSettingsState.getState().putEntry('tiles', 'order', uniq(order.concat(chargeKeys))); + } else if (order.length > chargeKeys.length) { + useSettingsState + .getState() + .putEntry( + 'tiles', + 'order', + uniq(order.filter((key) => !(key in charges)).concat(chargeKeys)) + ); } }, [charges, order]); @@ -65,7 +75,7 @@ export const TileGrid = ({ menu }: TileGridProps) => { >
{order - .filter((d) => d !== window.desk) + .filter((d) => d !== window.desk && d in charges) .map((desk) => ( From 3cbe8e97feda9dfff9aa71119a0f9202c3a4b1de Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 21 Mar 2022 12:46:42 -0500 Subject: [PATCH 3/8] grid: updating glob and version --- pkg/garden/desk.docket-0 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/garden/desk.docket-0 b/pkg/garden/desk.docket-0 index 660ba7bcfb..349fbea6d8 100644 --- a/pkg/garden/desk.docket-0 +++ b/pkg/garden/desk.docket-0 @@ -1,10 +1,10 @@ :~ title+'System' info+'An app launcher for Urbit.' color+0xee.5432 - glob-http+['https://bootstrap.urbit.org/glob-0vcggb9.v4sgp.jbo30.t34mk.58i52.glob' 0vcggb9.v4sgp.jbo30.t34mk.58i52] + glob-http+['https://bootstrap.urbit.org/glob-0v2.l1df2.utnqo.9bssn.cv55i.s6uoc.glob' 0vcggb9.v4sgp.jbo30.t34mk.58i52] ::glob-ames+~zod^0v0 base+'grid' - version+[1 1 0] + version+[1 1 1] website+'https://tlon.io' license+'MIT' == From ce39c220264b0ce8f1b2fc747d72879096f71865 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 21 Mar 2022 13:05:28 -0500 Subject: [PATCH 4/8] grid: updating bad glob entry --- pkg/garden/desk.docket-0 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/garden/desk.docket-0 b/pkg/garden/desk.docket-0 index 349fbea6d8..2fcfb38a6f 100644 --- a/pkg/garden/desk.docket-0 +++ b/pkg/garden/desk.docket-0 @@ -1,7 +1,7 @@ :~ title+'System' info+'An app launcher for Urbit.' color+0xee.5432 - glob-http+['https://bootstrap.urbit.org/glob-0v2.l1df2.utnqo.9bssn.cv55i.s6uoc.glob' 0vcggb9.v4sgp.jbo30.t34mk.58i52] + glob-http+['https://bootstrap.urbit.org/glob-0v2.l1df2.utnqo.9bssn.cv55i.s6uoc.glob' 0v2.l1df2.utnqo.9bssn.cv55i.s6uoc] ::glob-ames+~zod^0v0 base+'grid' version+[1 1 1] From 3d2472f8b4dfcfa2e314e73e716e3d1e9e6e1214 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 21 Mar 2022 13:23:58 -0500 Subject: [PATCH 5/8] tile-grid: check for charges loaded, updating glob --- pkg/garden/desk.docket-0 | 2 +- pkg/grid/src/tiles/TileGrid.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/garden/desk.docket-0 b/pkg/garden/desk.docket-0 index 2fcfb38a6f..7a4d262a17 100644 --- a/pkg/garden/desk.docket-0 +++ b/pkg/garden/desk.docket-0 @@ -1,7 +1,7 @@ :~ title+'System' info+'An app launcher for Urbit.' color+0xee.5432 - glob-http+['https://bootstrap.urbit.org/glob-0v2.l1df2.utnqo.9bssn.cv55i.s6uoc.glob' 0v2.l1df2.utnqo.9bssn.cv55i.s6uoc] + glob-http+['https://bootstrap.urbit.org/glob-0v7.c3i0g.i6ruv.refhu.n0qc8.dmpil.glob' 0v7.c3i0g.i6ruv.refhu.n0qc8.dmpil] ::glob-ames+~zod^0v0 base+'grid' version+[1 1 1] diff --git a/pkg/grid/src/tiles/TileGrid.tsx b/pkg/grid/src/tiles/TileGrid.tsx index 670b0ea497..7c53f3b34a 100644 --- a/pkg/grid/src/tiles/TileGrid.tsx +++ b/pkg/grid/src/tiles/TileGrid.tsx @@ -43,7 +43,7 @@ export const TileGrid = ({ menu }: TileGridProps) => { useSettingsState.getState().putEntry('tiles', 'order', chargeKeys); } else if (order.length < chargeKeys.length) { useSettingsState.getState().putEntry('tiles', 'order', uniq(order.concat(chargeKeys))); - } else if (order.length > chargeKeys.length) { + } else if (order.length > chargeKeys.length && chargeKeys.length !== 0) { useSettingsState .getState() .putEntry( From 77f0de4cb21c81b617fa5409a158bcd703895434 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 21 Mar 2022 14:08:28 -0500 Subject: [PATCH 6/8] grid: initialize settings, add more checks around order correction --- pkg/grid/src/app.tsx | 6 +++++- pkg/grid/src/state/docket.ts | 2 +- pkg/grid/src/state/settings.ts | 7 +++++-- pkg/grid/src/tiles/TileGrid.tsx | 22 +++++++++++++++------- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/pkg/grid/src/app.tsx b/pkg/grid/src/app.tsx index c18188296d..bbe169269c 100644 --- a/pkg/grid/src/app.tsx +++ b/pkg/grid/src/app.tsx @@ -10,7 +10,7 @@ import useContactState from './state/contact'; import api from './state/api'; import { useMedia } from './logic/useMedia'; import { useHarkStore } from './state/hark'; -import { useTheme } from './state/settings'; +import { useSettingsState, useTheme } from './state/settings'; import { useLocalState } from './state/local'; import { ErrorAlert } from './components/ErrorAlert'; import { useErrorHandler } from './logic/useErrorHandler'; @@ -53,6 +53,10 @@ const AppRoutes = () => { handleError(() => { window.name = 'grid'; + const { initialize: settingsInitialize, fetchAll } = useSettingsState.getState(); + settingsInitialize(api); + fetchAll(); + const { fetchDefaultAlly, fetchAllies, fetchCharges } = useDocketState.getState(); fetchDefaultAlly(); fetchCharges(); diff --git a/pkg/grid/src/state/docket.ts b/pkg/grid/src/state/docket.ts index 56e13c04ba..779ab4c18b 100644 --- a/pkg/grid/src/state/docket.ts +++ b/pkg/grid/src/state/docket.ts @@ -27,7 +27,7 @@ import { import api from './api'; import { mockAllies, mockCharges, mockTreaties } from './mock-data'; import { fakeRequest, normalizeUrbitColor, useMockData } from './util'; -import { Status, useAsyncCall } from '../logic/useAsyncCall'; +import { Status } from '../logic/useAsyncCall'; export interface ChargeWithDesk extends Charge { desk: string; diff --git a/pkg/grid/src/state/settings.ts b/pkg/grid/src/state/settings.ts index 4165d0e34b..1b7c515899 100644 --- a/pkg/grid/src/state/settings.ts +++ b/pkg/grid/src/state/settings.ts @@ -24,7 +24,9 @@ interface BaseSettingsState { tiles: { order: string[]; }; + loaded: boolean; putEntry: (bucket: string, key: string, value: Value) => Promise; + fetchAll: () => Promise; [ref: string]: unknown; } @@ -85,8 +87,8 @@ export const useSettingsState = createState( fetchAll: async () => { const result = (await api.scry(getDeskSettings(window.desk))).desk; const newState = { - loaded: true, - ..._.mergeWith(get(), result, (obj, src) => (_.isArray(src) ? src : undefined)) + ..._.mergeWith(get(), result, (obj, src) => (_.isArray(src) ? src : undefined)), + loaded: true }; set(newState); } @@ -98,6 +100,7 @@ export const useSettingsState = createState( const data = _.get(e, 'settings-event', false); if (data) { reduceStateN(get(), data, reduceUpdate); + set({ loaded: true }); } }) ] diff --git a/pkg/grid/src/tiles/TileGrid.tsx b/pkg/grid/src/tiles/TileGrid.tsx index 7c53f3b34a..81882f6903 100644 --- a/pkg/grid/src/tiles/TileGrid.tsx +++ b/pkg/grid/src/tiles/TileGrid.tsx @@ -25,25 +25,33 @@ export const dragTypes = { TILE: 'tile' }; -export const selTiles = (s: SettingsState) => s.tiles; +export const selTiles = (s: SettingsState) => ({ + order: s.tiles.order, + loaded: s.loaded +}); export const TileGrid = ({ menu }: TileGridProps) => { const charges = useCharges(); const chargesLoaded = Object.keys(charges).length > 0; - const { order } = useSettingsState(selTiles); + const { order, loaded } = useSettingsState(selTiles); const isMobile = useMedia('(pointer: coarse)'); useEffect(() => { const hasKeys = order && !!order.length; const chargeKeys = Object.keys(charges); + const hasChargeKeys = chargeKeys.length > 0; + + if (!loaded) { + return; + } // Correct order state, fill if none, remove duplicates, and remove // old uninstalled app keys - if (!hasKeys) { + if (!hasKeys && hasChargeKeys) { useSettingsState.getState().putEntry('tiles', 'order', chargeKeys); } else if (order.length < chargeKeys.length) { useSettingsState.getState().putEntry('tiles', 'order', uniq(order.concat(chargeKeys))); - } else if (order.length > chargeKeys.length && chargeKeys.length !== 0) { + } else if (order.length > chargeKeys.length && hasChargeKeys) { useSettingsState .getState() .putEntry( @@ -52,7 +60,7 @@ export const TileGrid = ({ menu }: TileGridProps) => { uniq(order.filter((key) => !(key in charges)).concat(chargeKeys)) ); } - }, [charges, order]); + }, [charges, order, loaded]); if (!chargesLoaded) { return Loading...; @@ -77,8 +85,8 @@ export const TileGrid = ({ menu }: TileGridProps) => { {order .filter((d) => d !== window.desk && d in charges) .map((desk) => ( - - + + ))}
From 3c68499b8620d9656bead5d1189981af99587dd7 Mon Sep 17 00:00:00 2001 From: Patrick O'Sullivan Date: Mon, 21 Mar 2022 15:15:39 -0500 Subject: [PATCH 7/8] grid: fix loop caused by useEffect in tilegrid --- pkg/grid/src/tiles/TileGrid.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/pkg/grid/src/tiles/TileGrid.tsx b/pkg/grid/src/tiles/TileGrid.tsx index 7c53f3b34a..b139a29336 100644 --- a/pkg/grid/src/tiles/TileGrid.tsx +++ b/pkg/grid/src/tiles/TileGrid.tsx @@ -46,11 +46,7 @@ export const TileGrid = ({ menu }: TileGridProps) => { } else if (order.length > chargeKeys.length && chargeKeys.length !== 0) { useSettingsState .getState() - .putEntry( - 'tiles', - 'order', - uniq(order.filter((key) => !(key in charges)).concat(chargeKeys)) - ); + .putEntry('tiles', 'order', uniq(order.filter((key) => key in charges).concat(chargeKeys))); } }, [charges, order]); From 6e0b1096c219f5352371361e56dabdedfb594c01 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 21 Mar 2022 15:59:26 -0500 Subject: [PATCH 8/8] grid: updating glob and version --- pkg/garden/desk.docket-0 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/garden/desk.docket-0 b/pkg/garden/desk.docket-0 index 7a4d262a17..d03ad7a472 100644 --- a/pkg/garden/desk.docket-0 +++ b/pkg/garden/desk.docket-0 @@ -1,10 +1,10 @@ :~ title+'System' info+'An app launcher for Urbit.' color+0xee.5432 - glob-http+['https://bootstrap.urbit.org/glob-0v7.c3i0g.i6ruv.refhu.n0qc8.dmpil.glob' 0v7.c3i0g.i6ruv.refhu.n0qc8.dmpil] + glob-http+['https://bootstrap.urbit.org/glob-0v4.t104r.h4pr1.kc9bu.0f8nq.urrhk.glob' 0v4.t104r.h4pr1.kc9bu.0f8nq.urrhk] ::glob-ames+~zod^0v0 base+'grid' - version+[1 1 1] + version+[1 1 2] website+'https://tlon.io' license+'MIT' ==