Show error when searching public rooms fails (#11378)

* Show error when searching public rooms fails

* Fix types

* Improve test coverage

* Improve coverage

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -311,6 +311,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         config,
         setConfig,
         search: searchPublicRooms,
+        error: publicRoomsError,
     } = usePublicRoomDirectory();
     const [showRooms, setShowRooms] = useState(true);
     const [showSpaces, setShowSpaces] = useState(false);
@@ -757,6 +758,23 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
 
         let publicRoomsSection: JSX.Element | undefined;
         if (filter === Filter.PublicRooms) {
+            let content: JSX.Element | JSX.Element[];
+            if (!showRooms && !showSpaces) {
+                content = (
+                    <div className="mx_SpotlightDialog_otherSearches_messageSearchText">
+                        {_t("You cannot search for rooms that are neither a room nor a space")}
+                    </div>
+                );
+            } else if (publicRoomsError) {
+                content = (
+                    <div className="mx_SpotlightDialog_otherSearches_messageSearchText">
+                        {_t("Failed to query public rooms")}
+                    </div>
+                );
+            } else {
+                content = results[Section.PublicRooms].slice(0, SECTION_LIMIT).map(resultMapper);
+            }
+
             publicRoomsSection = (
                 <div
                     className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
@@ -783,16 +801,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             <NetworkDropdown protocols={protocols} config={config ?? null} setConfig={setConfig} />
                         </div>
                     </div>
-                    <div>
-                        {" "}
-                        {showRooms || showSpaces ? (
-                            results[Section.PublicRooms].slice(0, SECTION_LIMIT).map(resultMapper)
-                        ) : (
-                            <div className="mx_SpotlightDialog_otherSearches_messageSearchText">
-                                {_t("You cannot search for rooms that are neither a room nor a space")}
-                            </div>
-                        )}{" "}
-                    </div>
+                    <div>{content}</div>
                 </div>
             );
         }

src/hooks/usePublicRoomDirectory.ts

@@ -51,6 +51,7 @@ export const usePublicRoomDirectory = (): {
     config?: IPublicRoomDirectoryConfig | null;
     setConfig(config: IPublicRoomDirectoryConfig | null): void;
     search(opts: IPublicRoomsOpts): Promise<boolean>;
+    error?: Error | true; // true if an unknown error is encountered
 } => {
     const [publicRooms, setPublicRooms] = useState<IPublicRoomsChunkRoom[]>([]);
 
@@ -60,6 +61,7 @@ export const usePublicRoomDirectory = (): {
 
     const [ready, setReady] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<Error | true | undefined>();
 
     const [updateQuery, updateResult] = useLatestResult<IRoomDirectoryOptions, IPublicRoomsChunkRoom[]>(setPublicRooms);
 
@@ -112,12 +114,14 @@ export const usePublicRoomDirectory = (): {
             }
 
             updateQuery(opts);
+            setLoading(true);
+            setError(undefined);
             try {
-                setLoading(true);
                 const { chunk } = await MatrixClientPeg.safeGet().publicRooms(opts);
                 updateResult(opts, showNsfwPublicRooms ? chunk : chunk.filter(cheapNsfwFilter));
                 return true;
             } catch (e) {
+                setError(e instanceof Error ? e : true);
                 console.error("Could not fetch public rooms for params", opts, e);
                 updateResult(opts, []);
                 return false;
@@ -183,5 +187,6 @@ export const usePublicRoomDirectory = (): {
         config,
         search,
         setConfig,
+        error,
     } as const;
 };

src/i18n/strings/en_EN.json

@@ -3138,9 +3138,10 @@
     "Search for": "Search for",
     "View": "View",
     "Spaces you're in": "Spaces you're in",
+    "You cannot search for rooms that are neither a room nor a space": "You cannot search for rooms that are neither a room nor a space",
+    "Failed to query public rooms": "Failed to query public rooms",
     "Show rooms": "Show rooms",
     "Show spaces": "Show spaces",
-    "You cannot search for rooms that are neither a room nor a space": "You cannot search for rooms that are neither a room nor a space",
     "Other rooms in %(spaceName)s": "Other rooms in %(spaceName)s",
     "Join %(roomAddress)s": "Join %(roomAddress)s",
     "Some results may be hidden for privacy": "Some results may be hidden for privacy",