Search updates

src/api/navigator/TryVisitRoom.ts

@@ -0,0 +1,7 @@
+import { RoomInfoComposer } from 'nitro-renderer';
+import { SendMessageHook } from '../../hooks/messages/message-event';
+
+export function TryVisitRoom(roomId: number): void
+{
+    SendMessageHook(new RoomInfoComposer(roomId, false, true));
+}

src/api/navigator/VisitRoom.ts

@@ -0,0 +1,6 @@
+import { GetRoomSessionManager } from '../nitro';
+
+export function VisitRoom(roomId: number, password: string = null): void
+{
+    GetRoomSessionManager().createSession(roomId, password);
+}

src/events/navigator/NavigatorEvent.ts

@@ -5,8 +5,6 @@ export class NavigatorEvent extends NitroEvent
     public static SHOW_NAVIGATOR: string = 'NE_SHOW_NAVIGATOR';
     public static HIDE_NAVIGATOR: string = 'NE_HIDE_NAVIGATOR';
     public static TOGGLE_NAVIGATOR: string = 'NE_TOGGLE_NAVIGATOR';
-    public static VISIT_ROOM: string = 'NE_VISIT_ROOM';
-    public static TRY_VISIT_ROOM: string = 'NE_TRY_VISIT_ROOM';
 
     private _roomId: number;
     private _password: string;

src/views/navigator/NavigatorView.tsx

@@ -1,6 +1,5 @@
-import { NavigatorInitComposer, NavigatorSearchComposer, RoomInfoComposer, RoomSessionEvent } from 'nitro-renderer';
+import { NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
-import { GetRoomSessionManager } from '../../api';
 import { NavigatorEvent } from '../../events';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
@@ -20,16 +19,6 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
     const [ navigatorState, dispatchNavigatorState ] = useReducer(NavigatorReducer, initialNavigator);
     const { needsNavigatorUpdate = false, topLevelContext = null, topLevelContexts = null } = navigatorState;
 
-    const visitRoom = useCallback((roomId: number, password: string = null) =>
-    {
-        GetRoomSessionManager().createSession(roomId, password);
-    }, []);
-
-    const tryVisitRoom = useCallback((roomId: number) =>
-    {
-        SendMessageHook(new RoomInfoComposer(roomId, false, true));
-    }, []);
-
     const onNavigatorEvent = useCallback((event: NavigatorEvent) =>
     {
         switch(event.type)
@@ -43,20 +32,12 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
             case NavigatorEvent.TOGGLE_NAVIGATOR:
                 setIsVisible(value => !value);
                 return;
-            case NavigatorEvent.VISIT_ROOM:
-                visitRoom(event.roomId, event.password);
-                return;
-            case NavigatorEvent.TRY_VISIT_ROOM:
-                tryVisitRoom(event.roomId);
-                return;
         }
-    }, [ visitRoom, tryVisitRoom ]);
+    }, []);
 
     useUiEvent(NavigatorEvent.SHOW_NAVIGATOR, onNavigatorEvent);
     useUiEvent(NavigatorEvent.HIDE_NAVIGATOR, onNavigatorEvent);
     useUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent);
-    useUiEvent(NavigatorEvent.VISIT_ROOM, onNavigatorEvent);
-    useUiEvent(NavigatorEvent.TRY_VISIT_ROOM, onNavigatorEvent);
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
     {
@@ -70,6 +51,11 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
 
     useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
 
+    const sendSearch = useCallback((searchValue: string, contextCode: string) =>
+    {
+        SendMessageHook(new NavigatorSearchComposer(contextCode, searchValue));
+    }, []);
+
     useEffect(() =>
     {
         if(!isVisible || !needsNavigatorUpdate) return;
@@ -82,21 +68,13 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
         });
         
         SendMessageHook(new NavigatorInitComposer());
-
     }, [ isVisible, needsNavigatorUpdate ]);
 
-    const sendSearch = useCallback((code: string, data: string) =>
-    {
-        SendMessageHook(new NavigatorSearchComposer(code, data));
-    }, []);
-
     useEffect(() =>
     {
         if(!topLevelContexts || !topLevelContexts.length) return;
 
-        const context = topLevelContexts[0];
+        sendSearch('', topLevelContexts[0].code);
-
-        sendSearch(context.code, '');
     }, [ topLevelContexts, sendSearch ]);
 
     return (
@@ -108,11 +86,11 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
                     <NitroCardTabsView>
                         { topLevelContexts.map((context, index) =>
                             {
-                                return <NitroCardTabsItemView key={ index } tabText={ LocalizeText(('navigator.toplevelview.' + context.code)) } isActive={ (topLevelContext === context) } onClick={ event => sendSearch(context.code, '') } />
+                                return <NitroCardTabsItemView key={ index } tabText={ LocalizeText(('navigator.toplevelview.' + context.code)) } isActive={ (topLevelContext === context) } onClick={ event => sendSearch('', context.code) } />
                             }) }
                     </NitroCardTabsView>
                     <NitroCardContentView>
-                        <NavigatorSearchView onSendSearch={ sendSearch } />
+                        <NavigatorSearchView sendSearch={ sendSearch } />
                         <NavigatorSearchResultSetView />
                     </NitroCardContentView>
                 </NitroCardView> }

src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import { RoomDataParser } from 'nitro-renderer';
 import { FC, MouseEvent } from 'react';
-import { NavigatorEvent } from '../../../../events';
+import { TryVisitRoom } from '../../../../api/navigator/TryVisitRoom';
-import { dispatchUiEvent } from '../../../../hooks/events/ui/ui-event';
 import { NavigatorSearchResultItemViewProps } from './NavigatorSearchResultItemView.types';
 
 export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
@@ -39,7 +38,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
 
     function visitRoom(): void
     {
-        dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TRY_VISIT_ROOM, roomData.roomId));
+        TryVisitRoom(roomData.roomId);
     }
 
     return (

src/views/navigator/views/search/NavigatorSearchView.tsx

@@ -1,67 +1,55 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, KeyboardEvent, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../utils/LocalizeText';
-import { INavigatorSearchFilter, NavigatorSearchViewProps } from './NavigatorSearchView.types';
+import { useNavigatorContext } from '../../context/NavigatorContext';
+import { NavigatorSearchViewProps, SearchFilterOptions } from './NavigatorSearchView.types';
 
 export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
 {
-    const searchFilters: INavigatorSearchFilter[] = [
+    const { sendSearch = null } = props;
-        {
+    const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
-            name: 'anything',
+    const [ searchValue, setSearchValue ] = useState('');
-            query: null
+    const [ lastSearchQuery, setLastSearchQuery ] = useState('');
-        },
+    const { navigatorState = null } = useNavigatorContext();
-        {
+    const { topLevelContext = null } = navigatorState;
-            name: 'room.name',
-            query: 'roomname'
-        },
-        {
-            name: 'owner',
-            query: 'owner'
-        },
-        {
-            name: 'tag',
-            query: 'tag'
-        },
-        {
-            name: 'group',
-            query: 'group'
-        }
-    ];
 
-    const [ searchFilter, setSearchFilter ] = useState<number>(0);
+    const processSearch = useCallback(() =>
-    const [ searchString, setSearchString ] = useState<string>('');
-
-    const search = useCallback(() =>
     {
-        if(!searchFilters[searchFilter]) return;
+        if(!topLevelContext) return;
 
-        props.onSendSearch(searchFilters[searchFilter].query, searchString);
+        let searchFilter = SearchFilterOptions[searchFilterIndex];
-    }, [ searchFilter, searchString ]);
 
-    useEffect(() =>
+        if(!searchFilter) searchFilter = SearchFilterOptions[0];
+
+        const searchQuery = ((searchFilter.query ? (searchFilter.query + ':') : '') + searchValue);
+
+        if(lastSearchQuery === searchQuery) return;
+
+        setLastSearchQuery(searchQuery);
+        sendSearch((searchQuery || ''), topLevelContext.code);
+    }, [ lastSearchQuery, searchFilterIndex, searchValue, topLevelContext, sendSearch ]);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
     {
-        search();
+        if(event.key !== 'Enter') return;
-    }, [ searchFilter ]);
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) =>
+        processSearch();
-    {
-        if(event.key === 'Enter') search();
     };
 
     return (
         <div className="d-flex w-100 mb-2">
             <div>
-                <select className="form-select form-select-sm flex-shrink-1" value={ searchFilter } onChange={ event => setSearchFilter(parseInt(event.target.value)) }>
+                <select className="form-select form-select-sm flex-shrink-1" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
-                    { searchFilters.map((filter, index) =>
+                    { SearchFilterOptions.map((filter, index) =>
                     {
-                        return <option value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
+                        return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
                     }) }
                 </select>
             </div>
             <div className="ms-2 flex-grow-1">
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchString }  onChange={ event => setSearchString(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
+                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchValue }  onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
             </div>
             <div className="ms-2">
-                <button type="button" className="btn btn-primary btn-sm" onClick={ search }>
+                <button type="button" className="btn btn-primary btn-sm" onClick={ processSearch }>
                     <i className="fas fa-search"></i>
                 </button>
             </div>

src/views/navigator/views/search/NavigatorSearchView.types.ts

@@ -1,6 +1,6 @@
 export interface NavigatorSearchViewProps
 {
-    onSendSearch: (code: string, data: string) => void;
+    sendSearch: (searchValue: string, contextCode: string) => void;
 }
 
 export interface INavigatorSearchFilter
@@ -8,3 +8,26 @@ export interface INavigatorSearchFilter
     name: string;
     query: string;
 }
+
+export const SearchFilterOptions: INavigatorSearchFilter[] = [
+    {
+        name: 'anything',
+        query: null
+    },
+    {
+        name: 'room.name',
+        query: 'roomname'
+    },
+    {
+        name: 'owner',
+        query: 'owner'
+    },
+    {
+        name: 'tag',
+        query: 'tag'
+    },
+    {
+        name: 'group',
+        query: 'group'
+    }
+];