Fix app picker caching (#4650)

* Fix app picker caching

* Differentiate loading or offline (#4654)

* Check apps for null before trying to sort

---------

Co-authored-by: Nico de Haen <[email protected]>

Author: ralphtheninja

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

@@ -273,7 +273,9 @@ export function AppPicker({ className, onSelect, apps = [] }: Props) {
             ))}
           </>
         ) : (
-          <div className={styles.offlineMessage}>{tx('loading')}</div>
+          <div className={styles.offlineMessage}>
+            {tx(isOffline ? 'offline' : 'loading')}
+          </div>
         )}
       </div>
       <div className={styles.tabBar}>

packages/frontend/src/components/composer/AppPickerWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { AppPicker, AppInfo, AppStoreUrl } from '../AppPicker'
 import { getLogger } from '../../../../shared/logger'
 
@@ -27,11 +27,11 @@ const getJsonFromBase64 = (base64: string): any => {
 
 type Props = {
   onAppSelected?: (app: AppInfo) => void
-  apps: AppInfo[]
-  setApps: (apps: AppInfo[]) => void
 }
 
-export const AppPickerWrapper = ({ onAppSelected, apps, setApps }: Props) => {
+export const AppPickerWrapper = ({ onAppSelected }: Props) => {
+  const [apps, setApps] = useState<AppInfo[]>([])
+
   useEffect(() => {
     const fetchApps = async () => {
       try {
@@ -40,6 +40,7 @@ export const AppPickerWrapper = ({ onAppSelected, apps, setApps }: Props) => {
           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)
@@ -52,17 +53,13 @@ export const AppPickerWrapper = ({ onAppSelected, apps, setApps }: Props) => {
           app.author = url.pathname.split('/')[1]
           app.date = moment(app.date).format('LL')
         }
-        if (apps) {
-          setApps(apps)
-        }
+        setApps(apps)
       } catch (error) {
         log.error('Failed to fetch apps:', error)
       }
     }
-    if (!apps?.length) {
-      fetchApps()
-    }
-  }, [apps, setApps])
+    fetchApps()
+  }, [setApps])
 
   return (
     <div className={styles.appPickerContainer}>

packages/frontend/src/components/composer/Composer.tsx

@@ -77,7 +77,6 @@ const Composer = forwardRef<
   const chatId = selectedChat.id
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const [showAppPicker, setShowAppPicker] = useState(false)
-  const [apps, setApps] = useState<AppInfo[]>([])
 
   const emojiAndStickerRef = useRef<HTMLDivElement>(null)
   const pickerButtonRef = useRef<HTMLButtonElement>(null)
@@ -429,11 +428,7 @@ const Composer = forwardRef<
         </div>
         {showAppPicker && (
           <OutsideClickHelper onClick={() => setShowAppPicker(false)}>
-            <AppPickerWrapper
-              onAppSelected={onAppSelected}
-              apps={apps}
-              setApps={setApps}
-            />
+            <AppPickerWrapper onAppSelected={onAppSelected} />
           </OutsideClickHelper>
         )}
         {showEmojiPicker && (