import React , { Fragment , ReactNode } from 'react' ; import { connect } from 'react-redux' ; import { AppDispatch , RootState } from '../../../store' ; import UilSearch from '@iconscout/react-unicons/icons/uil-search' ; import UilUserCircle from '@iconscout/react-unicons/icons/uil-user-circle' ; import UilUserPlus from '@iconscout/react-unicons/icons/uil-user-plus' ; import UilChatBubbleUser from '@iconscout/react-unicons/icons/uil-chat-bubble-user' ; import UilBuilding from '@iconscout/react-unicons/icons/uil-building' ; import UilUser from '@iconscout/react-unicons/icons/uil-user' ; import UilSignout from '@iconscout/react-unicons/icons/uil-signout' ; import { Dropdown } from 'react-bootstrap' ; import { userSelectors , userThunks } from '../../../store/slices/user' ; import { uiActions } from '../../../store/slices/ui' ; import { storageActions , storageSelectors } from '../../../store/slices/storage' ; import validationService from '../../services/validation.service' ; import { StorageFilters } from '../../../store/slices/storage/storage.model' ; import { sessionSelectors } from '../../../store/slices/session/session.selectors' ; import sessionThunks from '../../../store/slices/session/session.thunks' ; import storageThunks from '../../../store/slices/storage/storage.thunks' ; import navigationService from '../../services/navigation.service' ; import { AppView , Workspace } from '../../types' ; import { UserSettings } from '../../../auth/types' ; import { TeamsSettings } from '../../../teams/types' ; interface NavbarProps { user : UserSettings | undefined ; nameLetters : string ; team : TeamsSettings | undefined | null ; workspace : Workspace ; isTeam : boolean ; storageFilters : StorageFilters ; currentFolderId : number ; dispatch : AppDispatch ; } class Navbar extends React . Component < NavbarProps > { constructor ( props ) { super ( props ) ; } onSearchButtonClicked = ( ) : void => { } ; onAccountButtonClicked = ( ) : void => { navigationService . push ( AppView . Account ) ; } ; onSupportButtonClicked = ( ) : void => { window . open ( 'https://help.internxt.com/' ) ; } ; onChangeWorkspaceButtonClicked = ( ) : void => { const { dispatch , currentFolderId } = this . props ; dispatch ( sessionThunks . changeWorkspaceThunk ( ) ) ; dispatch ( storageThunks . resetNamePathThunk ( ) ) ; dispatch ( storageThunks . fetchFolderContentThunk ( currentFolderId ) ) ; dispatch ( storageThunks . fetchRecentsThunk ( ) ) ; } ; onLogoutButtonClicked = ( ) : void => { this . props . dispatch ( userThunks . logoutThunk ( ) ) ; } ; onInviteMemberClick = ( ) : void => { this . props . dispatch ( uiActions . setIsInviteMemberDialogOpen ( true ) ) ; } ; onSearchInputChange = ( e ) : void => { if ( validationService . validateSearchText ( e . target . value ) ) { this . props . dispatch ( storageActions . setFilters ( { text : e . target . value , } ) ) ; } } ; onGuestInviteCliked = ( ) : void => { this . props . dispatch ( uiActions . setIsGuestInvitationDialogOpen ( true ) ) ; } ; render ( ) { const { user , isTeam , storageFilters , team , nameLetters } = this . props ; const userFullName = user ? `${ user . name } ${ user . lastname }` : '' ; return ( < div className = "flex items-center justify-between w-full py-2.5 border-b border-l-neutral-30 px-8" > < div className = "pl-3 flex w-full" > < input value = { storageFilters . text } onChange = { this . onSearchInputChange } type = "text" placeholder = "Search files" className = "right-icon semi-dense w-72 transform duration-200 no-ring bg-l-neutral-10 focus:w-full max-w-xl" / > < UilSearch onClick = { this . onSearchButtonClicked } className = "text-blue-60 cursor-pointer right-7 relative w-4 top-0.5" / > < /div> < Dropdown > < Dropdown . Toggle id = "app-header-dropdown" className = "flex" > < div className = "flex items-center cursor-pointer" > < div className = "h-6 w6 rounded-2xl mr-2 bg-l-neutral-20 \
              p-1 flex justify-center items-center text-neutral-700 text-sm" > { nameLetters } < /div> < span className = "hidden md:block text-neutral-500 text-base whitespace-nowrap" > { isTeam ? 'Business' : userFullName } < /span> < /div> < /Dropdown.Toggle> < Dropdown . Menu > < Dropdown . Item id = "account" onClick = { this . onAccountButtonClicked } > < UilUserCircle className = "h-5 mr-1" / > < span > Account < /span> < /Dropdown.Item> { user && user . sharedWorkspace && ( < Dropdown . Item id = "guest-invite" onClick = { this . onGuestInviteCliked } > < UilUserPlus className = "text-blue-60 h-5 mr-1" / > < span > Guest < /span> < /Dropdown.Item>)} < Dropdown . Item id = "info" onClick = { this . onSupportButtonClicked } > < UilChatBubbleUser className = "h-5 mr-1" / > < span > Support < /span> < /Dropdown.Item> { team && ( < Dropdown . Item id = "business" onClick = { this . onChangeWorkspaceButtonClicked } > { ! isTeam ? ( < Fragment > < UilBuilding className = "h-5 mr-1" / > < span > Business < /span> < /Fragment>) : (<Fragment> < UilUser className = "h-5 mr-1" / > < span > Personal < /span> < /Fragment>)} < /Dropdown.Item>)} { team ?. isAdmin && isTeam && ( < Fragment > < hr className = "text-l-neutral-30 my-1.5" > < /hr> < Dropdown . Item onClick = { this . onInviteMemberClick } > < UilUserPlus className = "text-blue-60 h-5 mr-1" / > < span > Invite members < /span> < /Dropdown.Item> < /Fragment>)} < hr className = "text-l-neutral-30 my-1.5" > < /hr> < Dropdown . Item id = "logout" className = "text-red-60 hover:text-red-60" onClick = { this . onLogoutButtonClicked } > < UilSignout className = "h-5 mr-1" / > < span > Log out < /span> < /Dropdown.Item> < /Dropdown.Menu> < /Dropdown> < /div>); } } export default connect ( ( state ) => { const isTeam = sessionSelectors . isTeam ( state ) ; return { user : state . user . user , nameLetters : userSelectors . nameLetters ( state ) , team : state . team . team , workspace : state . session . workspace , isTeam , storageFilters : state . storage . filters , currentFolderId : storageSelectors . currentFolderId ( state ) , } ; } ) ( Navbar ) ;