Add refresh button

src/containers/MainBody/ServerList/SearchBar.tsx

@@ -1,5 +1,5 @@
 import { t } from "i18next";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import {
   Pressable,
   StyleSheet,
@@ -20,6 +20,7 @@ import { usePersistentServers, useServers } from "../../../states/servers";
 import { useTheme } from "../../../states/theme";
 import { sc } from "../../../utils/sizeScaler";
 import { Log } from "../../../utils/logger";
+import { fetchServers } from "../../../utils/helpers";
 
 interface SearchBarProps {
   onChange: (query: string) => void;
@@ -69,6 +70,7 @@ const ActionIcon = memo<ActionIconProps>(
 
 const SearchBar = memo<SearchBarProps>(({ onChange }) => {
   const { theme, themeType } = useTheme();
+  const refreshLockRef = useRef(false);
   const { listType } = useGenericTempState();
   const [searchQuery, setSearchQuery] = useState("");
   const { filterMenu, showFilterMenu, searchData } = useGenericTempState();
@@ -157,6 +159,23 @@ const SearchBar = memo<SearchBarProps>(({ onChange }) => {
     }
   }, [clearRecentlyJoined]);
 
+  const handleRefreshServers = useCallback(async () => {
+    if (refreshLockRef.current) return;
+    refreshLockRef.current = true;
+
+    try {
+      const targetListType =
+        listType === "favorites" ? "favorites" : "internet";
+      await fetchServers(true, targetListType);
+    } catch (error) {
+      Log.error("Error refreshing servers:", error);
+    } finally {
+      setTimeout(() => {
+        refreshLockRef.current = false;
+      }, 500);
+    }
+  }, [listType]);
+
   return (
     <View style={styles.searchContainer}>
       <TouchableOpacity
@@ -265,6 +284,15 @@ const SearchBar = memo<SearchBarProps>(({ onChange }) => {
           buttonColor={"#7AF1AA"}
           onPress={handleAddServer}
         />
+        <ActionIcon
+          svg
+          title={t("refresh_servers")}
+          icon={images.icons.refresh}
+          iconSize={sc(18)}
+          iconColor={theme.textSecondary}
+          buttonColor={theme.itemBackgroundColor}
+          onPress={handleRefreshServers}
+        />
         <ActionIcon
           svg
           title={

src/utils/helpers.ts

@@ -80,29 +80,33 @@ const updateServersInBatches = (
   });
 };
 
-export const fetchServers = async (cached: boolean = true): Promise<void> => {
+export const fetchServers = async (
+  cached: boolean = true,
+  listType: "internet" | "favorites" | "all" = "all"
+): Promise<void> => {
   if (!cached) return;
 
   try {
-    // Import getCachedList from the API layer
     const { getCachedList } = await import("../api/apis");
-
-    // Update favorites in batches
     const { favorites } = usePersistentServers.getState();
-    if (Array.isArray(favorites) && favorites.length > 0) {
+
+    // Refresh favorites
+    if ((listType === "favorites" || listType === "all") && favorites?.length) {
       updateServersInBatches(favorites, "favorites");
     }
 
-    // Fetch and set servers through the API
-    const response = await getCachedList();
-    if (response.success && response.data.length > 0) {
-      updateServersInBatches(response.data, "internet");
-      Log.debug(`Fetched ${response.data.length} servers`);
-    } else {
-      Log.warn(
-        "Failed to fetch servers or received empty list",
-        response.error
-      );
+    // Refresh internet list
+    if (listType === "internet" || listType === "all") {
+      const response = await getCachedList();
+      if (response.success && response.data.length > 0) {
+        updateServersInBatches(response.data, "internet");
+        Log.debug(`Fetched ${response.data.length} servers`);
+      } else {
+        Log.warn(
+          "Failed to fetch servers or received empty list",
+          response.error
+        );
+      }
     }
   } catch (error) {
     Log.error("Failed to fetch servers:", error);