refactor: app picker: make apps nullable

And use `useFetch`.

This should affect behavior, at least not significantly.
But hopefully makes things clearer.

Author: WofWca

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import classNames from 'classnames'
 import { filesize } from 'filesize'
 import moment from 'moment'
@@ -21,6 +21,7 @@ import {
 } from '../Dialog'
 import SearchInputButton from '../SearchInput/SearchInputButton'
 import { ClickableLink } from '../helpers/ClickableLink'
+import { useFetch } from '../../hooks/useFetch'
 
 const log = getLogger('renderer/components/AppPicker')
 
@@ -70,7 +71,6 @@ type Props = {
 
 export function AppPicker({ onAppSelected }: Props) {
   const tx = useTranslationFunction()
-  const [apps, setApps] = useState<AppInfo[]>([])
   const [searchQuery, setSearchQuery] = useState('')
   const [isOffline, setIsOffline] = useState(false)
   const [selectedCategory, setSelectedCategory] = useState(AppCategoryEnum.home)
@@ -82,44 +82,45 @@ export function AppPicker({ onAppSelected }: Props) {
     AppCategoryEnum.game,
   ]
 
-  useEffect(() => {
-    const fetchApps = async () => {
-      try {
-        const response = await BackendRemote.rpc.getHttpResponse(
-          selectedAccountId(),
-          AppStoreUrl + 'xdcget-lock.json'
-        )
-        const apps = getJsonFromBase64(response.blob) as AppInfo[]
-        if (apps === null) return
-        apps.sort((a: AppInfo, b: AppInfo) => {
-          const dateA = new Date(a.date)
-          const dateB = new Date(b.date)
-          return dateB.getTime() - dateA.getTime() // Show newest first
-        })
-        for (const app of apps) {
-          app.short_description = app.description.split('\n')[0]
-          app.description = app.description.split('\n').slice(1).join('\n')
-          const url = new URL(app.source_code_url)
-          app.author = url.pathname.split('/')[1]
-          app.date = moment(app.date).format('LL')
-        }
-        setApps(apps)
-      } catch (error) {
-        log.error('Failed to fetch apps:', error)
-      }
+  const fetchApps = useCallback(async () => {
+    // This may throw, e.g. on network error.
+    const response = await BackendRemote.rpc.getHttpResponse(
+      selectedAccountId(),
+      AppStoreUrl + 'xdcget-lock.json'
+    )
+    const apps = getJsonFromBase64(response.blob) as AppInfo[]
+    if (apps == null) {
+      throw new Error(`Received \`null\` response from ${AppStoreUrl}`)
+    }
+    apps.sort((a: AppInfo, b: AppInfo) => {
+      const dateA = new Date(a.date)
+      const dateB = new Date(b.date)
+      return dateB.getTime() - dateA.getTime() // Show newest first
+    })
+    for (const app of apps) {
+      app.short_description = app.description.split('\n')[0]
+      app.description = app.description.split('\n').slice(1).join('\n')
+      const url = new URL(app.source_code_url)
+      app.author = url.pathname.split('/')[1]
+      app.date = moment(app.date).format('LL')
     }
-    fetchApps()
-  }, [setApps])
+    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
 
   useEffect(() => {
     const loadIcons = async () => {
-      if (!apps.length) {
+      if (apps == null) {
         const connectivity =
           await BackendRemote.rpc.getConnectivity(selectedAccountId())
         if (connectivity !== C.DC_CONNECTIVITY_CONNECTED) {
           setIsOffline(true)
-          return
         }
+        return
       }
       const newIcons: { [key: string]: string } = {}
       setIcons(newIcons)
@@ -144,6 +145,10 @@ export function AppPicker({ onAppSelected }: Props) {
   }, [apps, isOffline])
 
   const filteredApps = useMemo(() => {
+    if (apps == null) {
+      return null
+    }
+
     const lowerCaseQuery = searchQuery.toLowerCase()
     const findByRelevance = (apps: AppInfo[]) => {
       const queryEqualsAuthor = apps.filter(
@@ -302,7 +307,7 @@ export function AppPicker({ onAppSelected }: Props) {
           />
         )}
         <div className={styles.appPickerList}>
-          {!isOffline && Object.keys(apps).length > 0 ? (
+          {!isOffline && filteredApps != null ? (
             <>
               {selectedAppInfo && (
                 <AppInfoOverlay