apply other review comments

Author: witoszekdev

locale/defaultMessages.json

@@ -7957,6 +7957,9 @@
   "hYWxeg": {
     "string": "The extension requests permissions you cannot grant or that exceed its allowed scope. Review the extension's manifest and your permissions. {docsLink} ({errorCode})"
   },
+  "hh0xW7": {
+    "string": "Channel Name"
+  },
   "hjEkEH": {
     "string": "All webhooks registered by this extension. In case of failed webhook delivery, list of attempts is displayed."
   },
@@ -8191,10 +8194,6 @@
     "context": "Shown when shipping zone count cannot be determined",
     "string": "Shipping zones: Unknown"
   },
-  "j/vV0n": {
-    "context": "channel name",
-    "string": "Channel Name"
-  },
   "j08fR9": {
     "context": "Product collections",
     "string": "Collections"

src/channels/pages/ChannelsListPage/ChannelsListPage.tsx

@@ -83,11 +83,7 @@ const ChannelsListPage = ({ channelsList, limits, onRemove }: ChannelsListPagePr
             <TableHead>
               <TableRowLink>
                 <TableCellHeader>
-                  <FormattedMessage
-                    id="j/vV0n"
-                    defaultMessage="Channel Name"
-                    description="channel name"
-                  />
+                  <FormattedMessage id="hh0xW7" defaultMessage="Channel Name" />
                 </TableCellHeader>
                 <TableCell />
               </TableRowLink>

src/components/CountryList/CountryList.tsx

@@ -12,7 +12,6 @@ import { ChevronDownIcon, Trash2 } from "lucide-react";
 import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { getStringOrPlaceholder } from "../../misc";
 import { DashboardCard } from "../Card";
 import { groupCountriesByStartingLetter } from "./utils";
 
@@ -109,7 +108,7 @@ const CountryList = (props: CountryListProps) => {
                     defaultMessage="{count, plural, one {# Country} other {# Countries}}"
                     description="number of countries"
                     values={{
-                      number: getStringOrPlaceholder(countries?.length.toString()),
+                      count: countries?.length ?? 0,
                     }}
                   />
                 </TableCell>

src/components/ResponsiveTable/ResponsiveTable.tsx

@@ -1,25 +1,26 @@
+import useDebounce from "@dashboard/hooks/useDebounce";
 import { Table } from "@material-ui/core";
 import { Box, SearchInput, Text } from "@saleor/macaw-ui-next";
 import clsx from "clsx";
 import { X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { ChangeEvent, KeyboardEvent, ReactNode, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { iconSize, iconStrokeWidthBySize } from "../icons";
 import styles from "./ResponsiveTable.module.css";
 
 interface ResponsiveTableProps {
-  children: React.ReactNode | React.ReactNodeArray;
+  children: ReactNode | ReactNode[];
   className?: string;
   onMouseLeave?: () => void;
   key?: string;
   search?: {
     placeholder?: string;
     initialValue?: string;
     onSearchChange?: (query: string) => void;
-    toolbar?: React.ReactNode;
+    toolbar?: ReactNode;
   };
-  footer?: React.ReactNode;
+  footer?: ReactNode;
   /** When 0 and search is active, shows "no results" state */
   filteredItemsCount?: number;
 }
@@ -30,47 +31,32 @@ export const ResponsiveTable = (props: ResponsiveTableProps) => {
 
   const isSearchActive = searchValue.length > 0;
   const showFilteredEmptyState = isSearchActive && filteredItemsCount === 0;
-  const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const debouncedOnSearchChange = useDebounce((value: string) => {
+    search?.onSearchChange?.(value);
+  }, 300);
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
 
     setSearchValue(value);
 
     if (search?.onSearchChange) {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-
-      debounceRef.current = setTimeout(() => {
-        search.onSearchChange?.(value);
-      }, 300);
+      debouncedOnSearchChange(value);
     }
   };
 
   const clearSearch = () => {
     setSearchValue("");
     search?.onSearchChange?.("");
-
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
   };
 
-  const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleSearchKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Escape") {
       clearSearch();
     }
   };
 
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-    };
-  }, []);
-
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>