Improve React Doctor score and badge (#1127)

* fix(react doctor): improve quality score and badge

* fix(react doctor): address review feedback

* fix(review): address final bot feedback

src/components/settings-modal/account-settings/account-settings.tsx

@@ -152,9 +152,11 @@ const AccountSettingsEditor = ({
             accountData.account.subscriptions = [];
           }
           const uniqueSubscriptions = [...accountData.account.subscriptions];
+          const knownSubscriptions = new Set(uniqueSubscriptions);
           for (const address of communityAddresses) {
-            if (!uniqueSubscriptions.includes(address)) {
+            if (!knownSubscriptions.has(address)) {
               uniqueSubscriptions.push(address);
+              knownSubscriptions.add(address);
             }
           }
           accountData.account.subscriptions = uniqueSubscriptions;

src/components/settings-modal/advanced-settings/advanced-settings.tsx

@@ -219,6 +219,14 @@ const PureP2PBrowserSettings = ({ pureP2PBrowserRef }: SettingsProps) => {
 
 const isElectron = window.electronApi?.isElectron === true;
 
+const getTrimmedLines = (value: string | undefined): string[] | undefined => {
+  return value?.split('\n').reduce<string[]>((lines, line) => {
+    const trimmedLine = line.trim();
+    if (trimmedLine) lines.push(trimmedLine);
+    return lines;
+  }, []);
+};
+
 const AdvancedSettings = () => {
   const { t } = useTranslation();
   const account = useAccount() as AccountShape | undefined;
@@ -234,27 +242,15 @@ const AdvancedSettings = () => {
   const pureP2PBrowserRef = useRef<HTMLInputElement>(null);
 
   const handleSave = async () => {
-    const ipfsGatewayUrls = ipfsGatewayUrlsRef.current?.value
-      .split('\n')
-      .map((url) => url.trim())
-      .filter((url) => url !== '');
+    const ipfsGatewayUrls = getTrimmedLines(ipfsGatewayUrlsRef.current?.value);
 
     const mediaIpfsGatewayUrl = mediaIpfsGatewayUrlRef.current?.value.trim();
 
-    const pubsubKuboRpcClientsOptions = pubsubProvidersRef.current?.value
-      .split('\n')
-      .map((url) => url.trim())
-      .filter((url) => url !== '');
+    const pubsubKuboRpcClientsOptions = getTrimmedLines(pubsubProvidersRef.current?.value);
 
-    const ethRpcUrls = ethRpcRef.current?.value
-      .split('\n')
-      .map((url) => url.trim())
-      .filter((url) => url !== '');
+    const ethRpcUrls = getTrimmedLines(ethRpcRef.current?.value);
 
-    const httpRoutersOptions = httpRoutersRef.current?.value
-      .split('\n')
-      .map((url) => url.trim())
-      .filter((url) => url !== '');
+    const httpRoutersOptions = getTrimmedLines(httpRoutersRef.current?.value);
 
     const pkcRpcClientsOptions = p2pRpcRef.current?.value.trim() ? [p2pRpcRef.current.value.trim()] : undefined;
     const dataPath = p2pDataPathRef.current?.value.trim() || undefined;

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx

@@ -177,7 +177,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
         <button
           onClick={() => {
             const newIndex = walletsArray.length;
-            setWalletsArray([...walletsArray, defaultWalletObject]);
+            setWalletsArray((currentWallets) => [...currentWallets, defaultWalletObject]);
             setSelectedWallet(newIndex);
           }}
         >

src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.tsx

@@ -254,11 +254,10 @@ const getBrowserTransferStats = async (client?: Libp2pClientShape): Promise<Tran
     const helia = client?._helia;
     const counterStats = getTransferStatsFromHeliaCounters(helia);
     const metricSources = [helia?.metrics, helia?.libp2p?.metrics].filter(Boolean);
-    let metricStats: TransferStats = {};
-
-    for (const source of metricSources) {
-      metricStats = mergeTransferStats(metricStats, getTransferStatsFromMetricSnapshot(await getMetricSnapshot(source)));
-    }
+    const metricSnapshots = await Promise.all(metricSources.map((source) => getMetricSnapshot(source)));
+    const metricStats = metricSnapshots
+      .map((snapshot) => getTransferStatsFromMetricSnapshot(snapshot))
+      .reduce<TransferStats>((stats, nextStats) => mergeTransferStats(stats, nextStats), {});
 
     return mergeTransferStats(counterStats, metricStats);
   } catch {

src/components/settings-modal/settings-modal.tsx

@@ -32,16 +32,16 @@ const hashToSection = (hash: string, sectionIds = allSectionIds): string | null
 const SettingsModal = () => {
   const { t } = useTranslation();
   const account = useAccount();
-  const location = useLocation();
+  const { hash: locationHash, pathname } = useLocation();
   const navigate = useNavigate();
-  const hash = location.hash.slice(1);
+  const hash = locationHash.slice(1);
   const sectionIds = useMemo(() => (shouldShowP2PSettingsSection(account) ? [...allSectionIds, P2P_STATS_SECTION_ID] : allSectionIds), [account]);
   const hashSection = hashToSection(hash, sectionIds);
 
   const closeModal = useCallback(() => {
-    const newPath = location.pathname.replace(/\/settings$/, '');
+    const newPath = pathname.replace(/\/settings$/, '');
     navigate(newPath);
-  }, [location.pathname, navigate]);
+  }, [pathname, navigate]);
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -77,7 +77,7 @@ const SettingsModal = () => {
 
   const allExpanded = useMemo(() => sectionIds.every((id) => visibleExpandedSections.has(id)), [sectionIds, visibleExpandedSections]);
 
-  const basePath = location.pathname;
+  const basePath = pathname;
 
   const handleCategoryClick = (categoryId: string) => {
     const isOpening = !visibleExpandedSections.has(categoryId);

src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx

@@ -9,7 +9,7 @@ const SubscriptionButton = ({ address }: { address: string }) => {
   const { subscribed, subscribe, unsubscribe } = useSubscribe({ communityAddress: address });
   const [recentlyUnsubscribed, setRecentlyUnsubscribed] = useState(false);
 
-  const handleClick = () => {
+  const toggleSubscription = () => {
     if (recentlyUnsubscribed || !subscribed) {
       subscribe();
       setRecentlyUnsubscribed(false);
@@ -29,10 +29,10 @@ const SubscriptionButton = ({ address }: { address: string }) => {
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            handleClick();
+            toggleSubscription();
           }
         }}
-        onClick={handleClick}
+        onClick={toggleSubscription}
       >
         {recentlyUnsubscribed || !subscribed ? t('subscribe') : t('unsubscribe')}
       </span>