fix: allow offline usage of app picker

Don't show the list of apps only if we failed to fetch it,
and not whenever we're offline.

This also fixes an annoying bug where the app picker
would show "offline" if you opened it
during "updating" network status,
which notably also happens when you just focused the window
(due to a `rpc.maybeNetwork()` call).
And this has been causing E2E test failures recently.

`getHttpResponse` is able to cache data since not so long ago,
so let's utilize that.

Note that the fact that we have cached the list of apps
doesn't mean that all the apps themselved are cached,
so users might still encounter an error.

However, if the list of apps and the app file is cached,
this allows you, even when offline,
to send an app to the chat and open it.

This change also makes sense even if `getHttpResponse`
didn't do any caching. We do not rely on this.

Author: WofWca

CHANGELOG.md

@@ -9,6 +9,8 @@
 - update `@deltachat/stdio-rpc-server` and `deltachat/jsonrpc-client` to `2.12.0`
 
 ### Fixed
+- fix app picker sometimes incorrectly showing "Offline"
+- allow using the app picker even when offline, as long as the app store data is cached
 - if adding an app from the app picker fails, show an error dialog
 - fix "Recent 3 apps" in the chat header showing apps from another chat sometimes #5265
 - accessibility: improve screen-reader accessibility of the general structure of the app by using landmarks #5067

packages/frontend/src/components/AppPicker/index.tsx

@@ -21,7 +21,8 @@ import {
 } from '../Dialog'
 import SearchInputButton from '../SearchInput/SearchInputButton'
 import { ClickableLink } from '../helpers/ClickableLink'
-import { useFetch } from '../../hooks/useFetch'
+import { useFetch, useRpcFetch } from '../../hooks/useFetch'
+import { unknownErrorToString } from '../helpers/unknownErrorToString'
 
 const log = getLogger('renderer/components/AppPicker')
 
@@ -72,7 +73,6 @@ type Props = {
 export function AppPicker({ onAppSelected }: Props) {
   const tx = useTranslationFunction()
   const [searchQuery, setSearchQuery] = useState('')
-  const [isOffline, setIsOffline] = useState(false)
   const [selectedCategory, setSelectedCategory] = useState(AppCategoryEnum.home)
   const [selectedAppInfo, setSelectedAppInfo] = useState<AppInfo | null>(null)
   const [icons, setIcons] = useState<{ [key: string]: string }>({})
@@ -107,19 +107,26 @@ export function AppPicker({ onAppSelected }: Props) {
     return apps
   }, [])
   const appsFetch = useFetch(fetchApps, [])
-  if (appsFetch.result?.ok === false) {
-    log.error('Failed to fetch apps:', appsFetch.result.err)
-  }
   const apps = appsFetch.result?.ok ? appsFetch.result.value : null
 
+  const appsFetchFailed = appsFetch.result?.ok === false
+  const connectivityFetch = useRpcFetch(BackendRemote.rpc.getConnectivity, [
+    selectedAccountId(),
+  ])
+  const connectivityFetchRefresh = connectivityFetch?.refresh
+  useEffect(() => {
+    if (!appsFetchFailed) {
+      return
+    }
+    connectivityFetchRefresh()
+  }, [appsFetchFailed, connectivityFetchRefresh])
+  const isOffline =
+    connectivityFetch.result?.ok === true &&
+    connectivityFetch.result.value !== C.DC_CONNECTIVITY_CONNECTED
+
   useEffect(() => {
     const loadIcons = async () => {
       if (apps == null) {
-        const connectivity =
-          await BackendRemote.rpc.getConnectivity(selectedAccountId())
-        if (connectivity !== C.DC_CONNECTIVITY_CONNECTED) {
-          setIsOffline(true)
-        }
         return
       }
       const newIcons: { [key: string]: string } = {}
@@ -307,7 +314,19 @@ export function AppPicker({ onAppSelected }: Props) {
           />
         )}
         <div className={styles.appPickerList}>
-          {!isOffline && filteredApps != null ? (
+          {appsFetch.loading ? (
+            <div className={styles.offlineMessage}>{tx('loading')}</div>
+          ) : appsFetch.result.ok !== true ? (
+            <div className={styles.offlineMessage}>
+              {isOffline
+                ? tx('offline')
+                : tx(
+                    'error_x',
+                    'Failed to fetch apps:\n' +
+                      unknownErrorToString(appsFetch.result.err)
+                  )}
+            </div>
+          ) : (
             <>
               {selectedAppInfo && (
                 <AppInfoOverlay
@@ -316,7 +335,9 @@ export function AppPicker({ onAppSelected }: Props) {
                   onSelect={onAppSelected}
                 />
               )}
-              {filteredApps.map(app => (
+              {/* `appsFetch.result.ok === true` implies that
+              this is not null. */}
+              {filteredApps!.map(app => (
                 <button
                   key={app.app_id}
                   className={styles.appListItem}
@@ -326,10 +347,6 @@ export function AppPicker({ onAppSelected }: Props) {
                 </button>
               ))}
             </>
-          ) : (
-            <div className={styles.offlineMessage}>
-              {tx(isOffline ? 'offline' : 'loading')}
-            </div>
           )}
         </div>
         <div className={styles.tabBar}>