Inventory search works

src/views/inventory/views/furniture/InventoryFurnitureView.tsx

@@ -1,5 +1,5 @@
 import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
 import { LocalizeText } from '../../../../utils/LocalizeText';
@@ -8,6 +8,7 @@ import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
 import { FurniCategory } from '../../utils/FurniCategory';
 import { attemptItemPlacement } from '../../utils/FurnitureUtilities';
+import { GroupItem } from '../../utils/GroupItem';
 import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
 import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
 import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
@@ -19,6 +20,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     const { furnitureState = null, dispatchFurnitureState = null } = useInventoryContext();
     const { needsFurniUpdate = false, groupItem = null, groupItems = [] } = furnitureState;
 
+    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(groupItems);
+
     useEffect(() =>
     {
         if(needsFurniUpdate)
@@ -34,6 +37,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         }
         else
         {
+            setFilteredGroupItems(groupItems);
+
             dispatchFurnitureState({
                 type: InventoryFurnitureActions.SET_GROUP_ITEM,
                 payload: {
@@ -97,8 +102,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     return (
         <div className="row h-100">
             <div className="col col-7">
-                <InventoryFurnitureSearchView />
-                <InventoryFurnitureResultsView groupItems={ groupItems } />
+                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
+                <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>
             <div className="d-flex flex-column col col-5 justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />

src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx

@@ -8,11 +8,10 @@ export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProp
 
     return (
         <div className="row row-cols-5 align-content-start g-0 item-container">
-            { groupItems && groupItems.length && groupItems.map((item, index) =>
+            { (groupItems && groupItems.length && groupItems.map((item, index) =>
                 {
                     return <InventoryFurnitureItemView key={ index } groupItem={ item } />
-                })
-            }
+                })) || null }
         </div>
     );
 }

src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx

@@ -1,33 +1,43 @@
-import { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { InventoryFurnitureSearchViewProps } from './InventoryFurnitureSearchView.types';
 
 export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps> = props =>
 {
+    const { groupItems = [], setGroupItems = null } = props;
     const [ searchValue, setSearchValue ] = useState('');
 
-    function onChange(event: ChangeEvent<HTMLInputElement>): void
-    {
-        setSearchValue(event.target.value);
-    }
-
-    function handleSubmit(event: FormEvent<HTMLFormElement>): void
-    {
-        event.preventDefault();
-    }
-
     useEffect(() =>
     {
-        
-    }, [ searchValue ]);
+        let filteredGroupItems = [ ...groupItems ];
+
+        if(searchValue && searchValue.length)
+        {
+            const comparison = searchValue.toLocaleLowerCase();
+
+            filteredGroupItems = filteredGroupItems.filter(item =>
+                {
+                    if(comparison && comparison.length)
+                    {
+                        if(item.name.toLocaleLowerCase().includes(comparison)) return item;
+                    }
+
+                    return null;
+                });
+        }
+
+        setGroupItems(filteredGroupItems);
+    }, [ groupItems, setGroupItems, searchValue ]);
 
     return (
-        <form className="d-flex mb-1" onSubmit={ handleSubmit }>
+        <div className="d-flex me-1 mb-1">
             <div className="d-flex flex-grow-1 me-1">
-                <input type="text" className="form-control form-control-sm" placeholder="search" />
+                <input type="text" className="form-control form-control-sm" placeholder="search" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>
             <div className="d-flex">
-                <button type="submit" className="btn btn-primary btn-sm"><i className="fas fa-search"></i></button>
+                <button type="button" className="btn btn-primary btn-sm">
+                    <i className="fas fa-search"></i>
+                </button>
             </div>
-        </form>
+        </div>
     );
 }

src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.types.ts

@@ -1,4 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+import { GroupItem } from '../../../utils/GroupItem';
+
 export interface InventoryFurnitureSearchViewProps
 {
-    
+    groupItems: GroupItem[];
+    setGroupItems: Dispatch<SetStateAction<GroupItem[]>>;
 }