nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Search updates

Browse Source
This commit is contained in:
Bill 2021-05-13 23:28:45 -04:00
parent 2d1d2f2e3f
commit 00532ff69c
7 changed files with 80 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/navigator/TryVisitRoom.ts Normal file
View File

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

6
src/api/navigator/VisitRoom.ts Normal file
View File

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

2
src/events/navigator/NavigatorEvent.ts
View File

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

42
src/views/navigator/NavigatorView.tsx
View File

@ -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(context.code, '');
sendSearch('', topLevelContexts[0].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> }

5
src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx
View File

@ -1,8 +1,7 @@
import classNames from 'classnames';
import { RoomDataParser } from 'nitro-renderer';
import { FC, MouseEvent } from 'react';
import { NavigatorEvent } from '../../../../events';
import { dispatchUiEvent } from '../../../../hooks/events/ui/ui-event';
import { TryVisitRoom } from '../../../../api/navigator/TryVisitRoom';
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 (

74
src/views/navigator/views/search/NavigatorSearchView.tsx
View File

@ -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[] = [
{
name: 'anything',
query: null
},
{
name: 'room.name',
query: 'roomname'
},
{
name: 'owner',
query: 'owner'
},
{
name: 'tag',
query: 'tag'
},
{
name: 'group',
query: 'group'
}
];
const { sendSearch = null } = props;
const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
const [ searchValue, setSearchValue ] = useState('');
const [ lastSearchQuery, setLastSearchQuery ] = useState('');
const { navigatorState = null } = useNavigatorContext();
const { topLevelContext = null } = navigatorState;
const [ searchFilter, setSearchFilter ] = useState<number>(0);
const [ searchString, setSearchString ] = useState<string>('');
const search = useCallback(() =>
const processSearch = useCallback(() =>
{
if(!searchFilters[searchFilter]) return;
props.onSendSearch(searchFilters[searchFilter].query, searchString);
}, [ searchFilter, searchString ]);
if(!topLevelContext) return;
useEffect(() =>
{
search();
}, [ searchFilter ]);
let searchFilter = SearchFilterOptions[searchFilterIndex];
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) =>
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>) =>
{
if(event.key === 'Enter') search();
if(event.key !== 'Enter') return;
processSearch();
};
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)) }>
{ searchFilters.map((filter, index) =>
<select className="form-select form-select-sm flex-shrink-1" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
{ 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>

25
src/views/navigator/views/search/NavigatorSearchView.types.ts
View File

@ -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'
}
];