[MIRROR] adds search bar to normal vendors. Fix an issue with a wrongly used key (#8198)

Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com>

tgui/packages/tgui/interfaces/Vending.jsx

@@ -1,7 +1,19 @@
+import { filter } from 'common/collections';
+import { flow } from 'common/fp';
 import { classes } from 'common/react';
+import { createSearch } from 'common/string';
+import { useState } from 'react';
 
 import { useBackend } from '../backend';
-import { Box, Button, Section, Table, Tooltip } from '../components';
+import {
+  Box,
+  Button,
+  Icon,
+  Input,
+  Section,
+  Table,
+  Tooltip,
+} from '../components';
 import { Window } from '../layouts';
 
 const VendingRow = (props) => {
@@ -9,7 +21,7 @@ const VendingRow = (props) => {
   const { actively_vending } = data;
   const { product } = props;
   return (
-    <Table.Row>
+    <Table.Row className="candystripe">
       <Table.Cell collapsing>
         {(product.isatom && (
           <span
@@ -62,11 +74,16 @@ const VendingRow = (props) => {
 export const Vending = (props) => {
   const { act, data } = useBackend();
   const { panel } = data;
+  const [searchText, setSearchText] = useState('');
+
+  function handleSearchText(value) {
+    setSearchText(value);
+  }
 
   return (
     <Window width={450} height={600}>
       <Window.Content scrollable>
-        <VendingProducts />
+        <VendingProducts searchText={searchText} onSearch={handleSearchText} />
         {panel ? <VendingMaintenance /> : null}
       </Window.Content>
     </Window>
@@ -79,6 +96,7 @@ export const VendingProducts = (props) => {
 
   // Just in case we still have undefined values in the list
   let myproducts = products.filter((item) => !!item);
+  myproducts = prepareSearch(myproducts, props.searchText);
   return (
     <>
       {!!chargesMoney && (
@@ -93,9 +111,21 @@ export const VendingProducts = (props) => {
         </Section>
       )}
       <Section title="Products">
+        <Table mb={1}>
+          <Table.Cell width="8%">
+            <Icon name="search" ml={1.5} />
+          </Table.Cell>
+          <Table.Cell>
+            <Input
+              fluid
+              placeholder="Search for products..."
+              onInput={(e, value) => props.onSearch(value)}
+            />
+          </Table.Cell>
+        </Table>
         <Table>
           {myproducts.map((product) => (
-            <VendingRow key={product.name} product={product} />
+            <VendingRow key={product} product={product} />
           ))}
         </Table>
       </Section>
@@ -135,3 +165,15 @@ export const VendingMaintenance = (props) => {
     </Section>
   );
 };
+
+/**
+ * Search box
+ */
+export const prepareSearch = (products, searchText = '') => {
+  const testSearch =
+    createSearch < ProductRecord > (searchText, (product) => product.name);
+  return flow([
+    // Optional search term
+    searchText && filter(testSearch),
+  ])(products);
+};