Update Navigator

src/views/navigator/NavigatorMessageHandler.tsx

@@ -5,10 +5,9 @@ import { UpdateDoorStateEvent } from '../../events';
 import { dispatchUiEvent } from '../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
 import { useNavigatorContext } from './context/NavigatorContext';
-import { NavigatorMessageHandlerProps } from './NavigatorMessageHandler.types';
 import { NavigatorActions } from './reducers/NavigatorReducer';
 
-export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =>
+export const NavigatorMessageHandler: FC<{}> = props =>
 {
     const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext();
 

src/views/navigator/NavigatorMessageHandler.types.ts

@@ -1,3 +0,0 @@
-export interface NavigatorMessageHandlerProps
-{
-}

src/views/navigator/NavigatorView.tsx

@@ -9,7 +9,6 @@ import { SendMessageHook } from '../../hooks/messages/message-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { NavigatorContextProvider } from './context/NavigatorContext';
 import { NavigatorMessageHandler } from './NavigatorMessageHandler';
-import { NavigatorViewProps } from './NavigatorView.types';
 import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
 import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
 import { NavigatorRoomDoorbellView } from './views/room-doorbell/NavigatorRoomDoorbellView';
@@ -17,10 +16,10 @@ import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView';
 import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView';
 import { NavigatorRoomPasswordView } from './views/room-password/NavigatorRoomPasswordView';
 import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
-import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView';
+import { NavigatorSearchResultView } from './views/search-result/NavigatorSearchResultView';
 import { NavigatorSearchView } from './views/search/NavigatorSearchView';
 
-export const NavigatorView: FC<NavigatorViewProps> = props =>
+export const NavigatorView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ isCreatorOpen, setCreatorOpen ] = useState(false);
@@ -252,13 +251,12 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
                         </NitroCardTabsItemView>
                     </NitroCardTabsView>
                     <NitroCardContentView>
-                    <div className="d-flex flex-column h-100">
+                        { !isCreatorOpen &&
-                        { !isCreatorOpen && <>
+                            <>
-                            <NavigatorSearchView sendSearch={ sendSearch } />
+                                <NavigatorSearchView sendSearch={ sendSearch } />
-                            <NavigatorSearchResultSetView />
+                                { (navigatorState.searchResult && navigatorState.searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
-                        </> }
+                            </> }
                         { isCreatorOpen && <NavigatorRoomCreatorView /> }
-                    </div>
                     </NitroCardContentView>
                 </NitroCardView> }
             { isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }

src/views/navigator/NavigatorView.types.ts

@@ -1,8 +0,0 @@
-import { RoomDataParser } from '@nitrots/nitro-renderer';
-export interface NavigatorViewProps
-{}
-
-export interface INavigatorContext
-{
-    onTryVisitRoom: (roomData: RoomDataParser) => void;
-}

src/views/navigator/common/INavigatorSearchFilter.ts

@@ -0,0 +1,5 @@
+export interface INavigatorSearchFilter
+{
+    name: string;
+    query: string;
+}

src/views/navigator/common/SearchFilterOptions.ts

@@ -1,13 +1,4 @@
-export interface NavigatorSearchViewProps
+import { INavigatorSearchFilter } from './INavigatorSearchFilter';
-{
-    sendSearch: (searchValue: string, contextCode: string) => void;
-}
-
-export interface INavigatorSearchFilter
-{
-    name: string;
-    query: string;
-}
 
 export const SearchFilterOptions: INavigatorSearchFilter[] = [
     {

src/views/navigator/context/NavigatorContext.tsx

@@ -1,12 +1,18 @@
-import { createContext, FC, useContext } from 'react';
+import { createContext, Dispatch, FC, ProviderProps, useContext } from 'react';
-import { INavigatorContext, NavigatorContextProps } from './NavigatorContext.types';
+import { INavigatorAction, INavigatorState } from '../reducers/NavigatorReducer';
+
+export interface INavigatorContext
+{
+    navigatorState: INavigatorState;
+    dispatchNavigatorState: Dispatch<INavigatorAction>;
+}
 
 const NavigatorContext = createContext<INavigatorContext>({
     navigatorState: null,
     dispatchNavigatorState: null
 });
 
-export const NavigatorContextProvider: FC<NavigatorContextProps> = props =>
+export const NavigatorContextProvider: FC<ProviderProps<INavigatorContext>> = props =>
 {
     return <NavigatorContext.Provider value={ props.value }>{ props.children }</NavigatorContext.Provider>
 }

src/views/navigator/context/NavigatorContext.types.ts

@@ -1,13 +0,0 @@
-import { Dispatch, ProviderProps } from 'react';
-import { INavigatorAction, INavigatorState } from '../reducers/NavigatorReducer';
-
-export interface INavigatorContext
-{
-    navigatorState: INavigatorState;
-    dispatchNavigatorState: Dispatch<INavigatorAction>;
-}
-
-export interface NavigatorContextProps extends ProviderProps<INavigatorContext>
-{
-
-}

src/views/navigator/views/NavigatorViews.scss

@@ -1,5 +1,4 @@
 @import './creator/NavigatorRoomCreatorView';
-@import './search/NavigatorSearchView';
 @import './search-result/NavigatorSearchResultView';
 @import './search-result-item/NavigatorSearchResultItemView';
 @import './room-info/NavigatorRoomInfoView';

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

@@ -1,14 +1,20 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomDataParser } from '@nitrots/nitro-renderer';
-import classNames from 'classnames';
 import { FC, MouseEvent } from 'react';
 import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api';
+import { Flex, FlexProps } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
 import { dispatchUiEvent } from '../../../../hooks';
-import { NavigatorSearchResultItemViewProps } from './NavigatorSearchResultItemView.types';
+
+export interface NavigatorSearchResultItemViewProps extends FlexProps
+{
+    roomData: RoomDataParser
+}
 
 export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
 {
-    const { roomData = null } = props;
+    const { roomData = null, children = null, ...rest } = props;
 
     function getUserCounterColor(): string
     {
@@ -64,8 +70,19 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     }
 
     return (
-        <div className="col">
+        <Flex pointer onClick={ visitRoom } overflow="hidden" gap={ 2 } { ...rest }>
-            <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small cursor-pointer" onClick={ visitRoom }>
+            <Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }>
+                <FontAwesomeIcon icon="user" />
+                { roomData.userCount }
+            </Flex>
+            <Text truncate className="flex-grow-1">{ roomData.roomName }</Text>
+            <Flex reverse alignItems="center" gap={ 1 }>
+                <i className="icon icon-navigator-info" onClick={ openInfo } />
+                { roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group" /> }
+                { (roomData.doorMode !== RoomDataParser.OPEN_STATE) && 
+                    <i className={ ('icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
+            </Flex>
+            {/* <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small cursor-pointer" onClick={ visitRoom }>
                 <div className="d-flex justify-content-between w-100 px-2 py-1">
                     <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
                         <div className={ 'd-flex align-items-center justify-content-center badge p-1 ' + getUserCounterColor() }>
@@ -84,7 +101,8 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
                         }
                     </div>
                 </div>
-            </div>
+            </div> */}
-        </div>
+            { children }
+        </Flex>
     );
 }

src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.types.ts

@@ -1,6 +0,0 @@
-import { RoomDataParser } from '@nitrots/nitro-renderer';
-
-export interface NavigatorSearchResultItemViewProps
-{
-    roomData: RoomDataParser
-}

src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx

@@ -1,23 +0,0 @@
-import { FC } from 'react';
-import { useNavigatorContext } from '../../context/NavigatorContext';
-import { NavigatorSearchResultView } from '../search-result/NavigatorSearchResultView';
-import { NavigatorSearchResultSetViewProps } from './NavigatorSearchResultSetView.types';
-
-export const NavigatorSearchResultSetView: FC<NavigatorSearchResultSetViewProps> = props =>
-{
-    const { navigatorState = null } = useNavigatorContext();
-    const { searchResult = null } = navigatorState;
-
-    if(!searchResult || !searchResult.results.length) return null;
-
-    return (
-        <>
-            <div className="h-100 overflow-auto">
-                { (searchResult.results.map((result, index) =>
-                    {
-                        return <NavigatorSearchResultView key={ index } searchResult={ result } />
-                    })) }
-            </div>
-        </>
-    );
-}

src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.types.ts

@@ -1,4 +0,0 @@
-export interface NavigatorSearchResultSetViewProps
-{
-    
-}

src/views/navigator/views/search-result/NavigatorSearchResultView.tsx

@@ -1,6 +1,10 @@
-import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Grid } from '../../../../common/Grid';
+import { Text } from '../../../../common/Text';
 import { NavigatorSearchResultItemView } from '../search-result-item/NavigatorSearchResultItemView';
 import { NavigatorSearchResultViewDisplayMode, NavigatorSearchResultViewProps } from './NavigatorSearchResultView.types';
 
@@ -49,22 +53,38 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
     }
     
     return (
-        <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
+        <Column className="bg-white rounded p-1" overflow="hidden">
-            <div className="d-flex flex-column">
+            <Flex fullWidth alignItems="center" justifyContent="between" className="p-1">
-                <div className="d-flex align-items-center px-2 py-1 text-black">
+                <Flex alignItems="center" gap={ 1 }>
-                    <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
+                    <FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" onClick={ toggleExtended } />
-                    <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
+                    <Text>{ LocalizeText(getResultTitle()) }</Text>
-                    <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
+                </Flex>
-                </div>
+                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'bars' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'th' : null) } className="text-secondary" onClick={ toggleExtended } />
+            </Flex>
+            <Grid columnCount={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 1 : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 2 : 1) }>
                 { isExtended &&
-                    <div className={ 'nitro-navigator-result-list row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
+                    searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
-                        { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
+                        {
-                            {
+                            return <NavigatorSearchResultItemView key={ index } roomData={ room } />
-                                return <NavigatorSearchResultItemView key={ index } roomData={ room } />
+                        }) }
-                            }) }
+            </Grid>
-                    </div> }
+        </Column>
-            </div>
+        // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
-        </div>
+        //     <div className="d-flex flex-column">
+        //         <div className="d-flex align-items-center px-2 py-1 text-black">
+        //             <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
+        //             <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
+        //             <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
+        //         </div>
+        //         { isExtended &&
+        //             <div className={ 'nitro-navigator-result-list row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
+        //                 { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
+        //                     {
+        //                         return <NavigatorSearchResultItemView key={ index } roomData={ room } />
+        //                     }) }
+        //             </div> }
+        //     </div>
+        // </div>
         // <div className="nitro-navigator-result-list p-2">
         //     <div className="d-flex mb-2 small cursor-pointer" onClick={ toggleList }>
         //         <i className={ "fas " + classNames({ 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i>

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

@@ -1,7 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { FC, KeyboardEvent, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Flex } from '../../../../common/Flex';
+import { SearchFilterOptions } from '../../common/SearchFilterOptions';
 import { useNavigatorContext } from '../../context/NavigatorContext';
-import { NavigatorSearchViewProps, SearchFilterOptions } from './NavigatorSearchView.types';
+
+export interface NavigatorSearchViewProps
+{
+    sendSearch: (searchValue: string, contextCode: string) => void;
+}
 
 export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
 {
@@ -36,23 +44,21 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
     };
 
     return (
-        <div className="d-flex w-100 mb-2">
+        <Flex fullWidth gap={ 1 }>
-            <div>
+            <Flex shrink>
-                <select className="form-select form-select-sm flex-shrink-1" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
+                <select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
                     { SearchFilterOptions.map((filter, index) =>
                     {
                         return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
                     }) }
                 </select>
-            </div>
+            </Flex>
-            <div className="ms-2 flex-grow-1">
+            <Flex fullWidth gap={ 1 }>
                 <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>
+                <Button variant="primary" size="sm" onClick={ processSearch }>
-            <div className="ms-2">
+                    <FontAwesomeIcon icon="search" />
-                <button type="button" className="btn btn-primary btn-sm" onClick={ processSearch }>
+                </Button>
-                    <i className="fas fa-search"></i>
+            </Flex>
-                </button>
+        </Flex>
-            </div>
-        </div>
     );
 }