Const TcfVendorsList
TcfVendorsList: FC<{ onSelect?: ComponentProps<typeof TcfVendorsListItem>["onSelect"] }> = observer(({ onSelect }) => {const { tcfStore } = useStores();const { busyVendors, vendors } = tcfStore;const [term, setTerm] = useState("");const [useVendors, setUseVendors] = useState<TcfVendor[]>([]);const handleFilter = useCallback((term: string) =>Array.from(vendors.values()).filter(({ data: { id, name, policyUrl } }) =>term.trim().length? term.split(" ").filter(Boolean).filter((singleTerm) =>// Include policy URL and vendor ID in search index`${name} ${policyUrl} ${id}`.toLowerCase().indexOf(singleTerm.trim().toLowerCase()) > -1).length > 0: true)// We need to manually sort it again cause the `vendor-list.json#vendors` property uses numeric keys and// JavaScript does automatically sort it.sort(({ data: { name: x } }, { data: { name: y } }) => (x < y ? -1 : x > y ? 1 : 0)),[]);useEffect(() => {// Load all my configurations so we can show a "Already created"if (!tcfStore.fetchedAllVendorConfigurations) {tcfStore.fetchVendorConfigurations();}tcfStore.fetchVendors().then(() => {// Initially fill the array to avoid empty listsetUseVendors(handleFilter(""));});}, []);// Create filtered vendorsuseDebounce(term, term === "" ? 0 : 800, (debouncedValue) => {setUseVendors(handleFilter(debouncedValue));});return (<div><div className="wp-clearfix" style={{ marginBottom: 15 }}><Input.SearchautoFocusstyle={{ maxWidth: 400, float: "right" }}placeholder={__("Search vendor by name or ID...")}onChange={(e) => setTerm(e.target.value)}/></div>{busyVendors ? (<TcfVendorsLoadingSkeleton count={10} />) : (<List>{useVendors.map((item) => (<TcfVendorsListItem item={item} key={`${item.data.id}`} onSelect={onSelect} />))}</List>)}</div>);})