Merge branch 'next/landscape'

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, 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<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/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) => {
     >
       <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'} />