nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 00:50:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Inventory search works

Browse Source
This commit is contained in:
Bill 2021-04-28 15:30:04 -04:00
parent ea27520361
commit b62dab0a6f
4 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -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 } />

5
src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
View File

@ -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>
);
}

42
src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
View File

@ -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(() =>
{
let filteredGroupItems = [ ...groupItems ];
}, [ searchValue ]);
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>
</div>
</form>
);
}

6
src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.types.ts
View File

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