diff --git a/pkg/grid/src/app.tsx b/pkg/grid/src/app.tsx index c18188296..bbe169269 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 56e13c04b..779ab4c18 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 4165d0e34..1b7c51589 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 7c53f3b34..7daf88a41 100644 --- a/pkg/grid/src/tiles/TileGrid.tsx +++ b/pkg/grid/src/tiles/TileGrid.tsx @@ -25,34 +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 (!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( - '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]); + }, [charges, order, loaded]); if (!chargesLoaded) { return Loading...; @@ -77,8 +81,8 @@ export const TileGrid = ({ menu }: TileGridProps) => { {order .filter((d) => d !== window.desk && d in charges) .map((desk) => ( - - + + ))}