Merge branch 'master' into next/vere

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-0v4.t104r.h4pr1.kc9bu.0f8nq.urrhk.glob' 0v4.t104r.h4pr1.kc9bu.0f8nq.urrhk]
     ::glob-ames+~zod^0v0
     base+'grid'
-    version+[1 1 0]
+    version+[1 1 2]
     website+'https://tlon.io'
     license+'MIT'
 ==

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();

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 (
     <div className="dialog-inner-container md:px-6 md:py-8 h4 text-gray-400">
@@ -107,12 +101,11 @@ export const Apps = ({ match }: AppsProps) => {
           <p>That&apos;s it!</p>
         </>
       )}
-      {status === 'error' ||
-        ((status === 'success' || status === 'initial') && results?.length === 0 && (
-          <h2>
-            Unable to find software developed by <ShipName name={provider} className="font-mono" />
-          </h2>
-        ))}
+      {showNone && (
+        <h2>
+          Unable to find software developed by <ShipName name={provider} className="font-mono" />
+        </h2>
+      )}
     </div>
   );
 };

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 } 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<Status>('initial');
+  const [treaties, setTreaties] = useState<Treaties>();
 
   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
   };

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<void>;
+  fetchAll: () => Promise<void>;
   [ref: string]: unknown;
 }
 
@@ -85,8 +87,8 @@ export const useSettingsState = createState<BaseSettingsState>(
     fetchAll: async () => {
       const result = (await api.scry<DeskData>(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<BaseSettingsState>(
         const data = _.get(e, 'settings-event', false);
         if (data) {
           reduceStateN(get(), data, reduceUpdate);
+          set({ loaded: true });
         }
       })
   ]

pkg/grid/src/tiles/TileGrid.tsx

@@ -25,24 +25,38 @@ 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 (!hasKeys) {
+    if (!loaded) {
+      return;
+    }
+
+    // Correct order state, fill if none, remove duplicates, and remove
+    // old uninstalled app keys
+    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 && hasChargeKeys) {
+      useSettingsState
+        .getState()
+        .putEntry('tiles', 'order', uniq(order.filter((key) => key in charges).concat(chargeKeys)));
     }
-  }, [charges, order]);
+  }, [charges, order, loaded]);
 
   if (!chargesLoaded) {
     return <span>Loading...</span>;
@@ -65,10 +79,10 @@ export const TileGrid = ({ menu }: TileGridProps) => {
     >
       <div className="grid justify-center grid-cols-2 sm:grid-cols-[repeat(auto-fit,minmax(auto,250px))] gap-4 px-4 md:px-8 w-full max-w-6xl">
         {order
-          .filter((d) => d !== window.desk)
+          .filter((d) => d !== window.desk && d in charges)
           .map((desk) => (
-            <TileContainer desk={desk}>
-              <Tile key={desk} charge={charges[desk]} desk={desk} disabled={menu === 'upgrading'} />
+            <TileContainer key={desk} desk={desk}>
+              <Tile charge={charges[desk]} desk={desk} disabled={menu === 'upgrading'} />
             </TileContainer>
           ))}
       </div>