Add a settings button to force a full sync

config/i18n.json

@@ -1352,6 +1352,7 @@
     "MenuTitle": "Sync & Backups",
     "ProfileErrorTitle": "DIM Sync Download Error",
     "ProfileErrorBody": "We had a problem communicating with DIM Sync. Your latest settings, tags, loadouts, and searches may not be shown. Your data is still on our servers, and any updates you make locally will be saved when we can reconnect. We'll keep retrying while DIM is open.",
+    "RefreshDimSync": "Reload remote data from DIM Sync",
     "UpdateInvalid": "Failed to save data to DIM Sync",
     "UpdateInvalidBody": "Data sent to DIM Sync was invalid and will not be saved.",
     "UpdateInvalidBodyLoadout": "The loadout \"{{name}}\" is invalid and will not be saved. If you imported it from another site, please let them know that they are exporting invalid loadouts.",

src/app/dim-api/actions.ts

@@ -171,8 +171,18 @@ let waitingForApiPermission = false;
  * for whether the user has opted in to Sync, and if they haven't, we prompt.
  * Usually they already made their choice at login, though.
  */
-export function loadDimApiData(forceLoad = false): ThunkResult {
+export function loadDimApiData(
+  options: {
+    /**
+     * forceLoad will load from the server even if the minimum refresh
+     * interval has not passed. Keep in mind the server caches full-profile data for
+     * up to 60 seconds. This will also skip using a sync token to load incremental changes.
+     */
+    forceLoad?: boolean;
+  } = {},
+): ThunkResult {
   return async (dispatch, getState) => {
+    const { forceLoad = false } = options;
     installApiPermissionObserver(dispatch);
 
     // Load from indexedDB if needed
@@ -242,8 +252,8 @@ export function loadDimApiData(forceLoad = false): ThunkResult {
     if (forceLoad || profileOutOfDateOrMissing) {
       try {
         const syncToken =
-          currentAccount && $featureFlags.dimApiSync
-            ? getState().dimApi.profiles[makeProfileKeyFromAccount(currentAccount)].syncToken
+          currentAccount && $featureFlags.dimApiSync && !forceLoad
+            ? getState().dimApi.profiles?.[makeProfileKeyFromAccount(currentAccount)]?.syncToken
             : undefined;
         const profileResponse = await getDimApiProfile(currentAccount, syncToken);
         dispatch(profileLoaded({ profileResponse, account: currentAccount }));
@@ -277,7 +287,7 @@ export function loadDimApiData(forceLoad = false): ThunkResult {
         infoLog(TAG, 'Waiting', waitTime, 'ms before re-attempting profile fetch');
 
         // Wait, then retry. We don't await this here so we don't stop the finally block from running
-        delay(waitTime).then(() => dispatch(loadDimApiData(forceLoad)));
+        delay(waitTime).then(() => dispatch(loadDimApiData(options)));
       } finally {
         // Release the app to load with whatever language was saved or the
         // default. Better to have the wrong language (that fixes itself on

src/app/dim-api/import.ts

@@ -49,7 +49,7 @@ export function importDataBackup(data: ExportResponse, silent = false): ThunkRes
         // dim-api can cache the data for up to 60 seconds. Reload from the
         // server after that so we don't use our faked import data too long. We
         // won't wait for this.
-        delay(60_000).then(() => dispatch(loadDimApiData(true)));
+        delay(60_000).then(() => dispatch(loadDimApiData({ forceLoad: true })));
         infoLog(TAG, 'Successfully imported data into DIM API', result);
         showImportSuccessNotification(result, true);
         return;

src/app/storage/DimApiSettings.tsx

@@ -13,7 +13,7 @@ import Checkbox from 'app/settings/Checkbox';
 import { fineprintClass, horizontalClass, settingClass } from 'app/settings/SettingsPage';
 import { Settings } from 'app/settings/initial-settings';
 import ErrorPanel from 'app/shell/ErrorPanel';
-import { AppIcon, deleteIcon } from 'app/shell/icons';
+import { AppIcon, deleteIcon, refreshIcon } from 'app/shell/icons';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { errorMessage } from 'app/utils/errors';
 import React, { useState } from 'react';
@@ -84,6 +84,10 @@ export default function DimApiSettings() {
     }
   };
 
+  const refreshDimSync = async () => {
+    await dispatch(loadDimApiData({ forceLoad: true }));
+  };
+
   return (
     <section className={styles.storage} id="storage">
       {confirmDialog}
@@ -102,9 +106,14 @@ export default function DimApiSettings() {
         />
         <div className={fineprintClass}>{t('Storage.DimApiFinePrint')}</div>
         {apiPermissionGranted && (
-          <button type="button" className="dim-button" onClick={deleteAllData}>
-            <AppIcon icon={deleteIcon} /> {t('Storage.DeleteAllData')}
-          </button>
+          <>
+            <button type="button" className="dim-button" onClick={refreshDimSync}>
+              <AppIcon icon={refreshIcon} /> {t('Storage.RefreshDimSync')}
+            </button>
+            <button type="button" className="dim-button" onClick={deleteAllData}>
+              <AppIcon icon={deleteIcon} /> {t('Storage.DeleteAllData')}
+            </button>
+          </>
         )}
       </div>
       {profileLoadedError && (

src/locale/en.json

@@ -1336,6 +1336,7 @@
     "MenuTitle": "Sync & Backups",
     "ProfileErrorBody": "We had a problem communicating with DIM Sync. Your latest settings, tags, loadouts, and searches may not be shown. Your data is still on our servers, and any updates you make locally will be saved when we can reconnect. We'll keep retrying while DIM is open.",
     "ProfileErrorTitle": "DIM Sync Download Error",
+    "RefreshDimSync": "Reload remote data from DIM Sync",
     "UpdateErrorBody": "We had a problem saving your data to DIM Sync. We'll keep retrying while DIM is open.",
     "UpdateErrorTitle": "DIM Sync Save Error",
     "UpdateInvalid": "Failed to save data to DIM Sync",