grid: initialize settings, add more checks around order correction

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/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;

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,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 <span>Loading...</span>;
@@ -77,8 +85,8 @@ export const TileGrid = ({ menu }: TileGridProps) => {
         {order
           .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>