import UilAngleDoubleRight from '@iconscout/react-unicons/icons/uil-angle-double-right' ; import { Component } from 'react' ; import queryString from 'query-string' ; import { connect } from 'react-redux' ; import tabs , { AccountViewTab , AccountViewTabData } from './tabs' ; import navigationService from '../../services/navigation.service' ; import screenService from '../../services/screen.service' ; import i18n from '../../../i18n/services/i18n.service' ; import { AppDispatch , RootState } from '../../../store' ; import './AccountView.scss' ; import { uiActions } from '../../../store/slices/ui' ; export interface AccountViewProps { dispatch : AppDispatch ; currentTab : AccountViewTab ; } interface AccountViewState { isLgScreen : boolean ; } class AccountView extends Component < AccountViewProps , AccountViewState > { constructor ( props ) { super ( props ) ; this . state = { isLgScreen : screenService . isLg ( ) , } ; } componentDidMount ( ) { const locationQueryParams = queryString . parse ( navigationService . history . location . search ) ; const queryTab = locationQueryParams . tab ; if ( queryTab && Object . values ( AccountViewTab ) . includes ( queryTab as AccountViewTab ) && this . props . currentTab !== queryTab ) { this . props . dispatch ( uiActions . setCurrentAccountTab ( queryTab as AccountViewTab ) ) ; } window . addEventListener ( 'resize' , this . onWindowResized ) ; } componentWillUnmount ( ) { window . removeEventListener ( 'resize' , this . onWindowResized ) ; } onWindowResized = ( ) => { this . setState ( { isLgScreen : screenService . isLg ( ) } ) ; } ; onTabSelected = ( tabKey ) : void => { tabKey && this . props . dispatch ( uiActions . setCurrentAccountTab ( tabKey ) ) ; } ; render ( ) { const { isLgScreen } = this . state ; const { currentTab } = this . props ; const CurrentTabComponent = tabs . find ( ( tab ) => tab . id === currentTab ) ?. component as ( ) => JSX . Element ; const desktopTabItemFactory = ( tab ) => ( < div key = { tab . id } onClick = { ( ) => this . onTabSelected ( tab . id ) } className = { `tab-item desktop ${ tab . id === currentTab ? 'active' : '' }` } > < div className = "flex mb-2" > < tab . icon className = "text-blue-40 mr-2" / > < span className = "font-semibold mr-3 text-base" > { tab . title } < /span> < UilAngleDoubleRight className = "" / > < /div> < p className = "text-sm" > { tab . description } < /p> < /div>); const tableTabItemFactory = ( tab ) => ( < div key = { tab . id } onClick = { ( ) => this . onTabSelected ( tab . id ) } className = { `tab-item tablet ${ tab . id === currentTab ? 'active' : '' }` } > < tab . icon className = "mx-auto text-blue-40 mb-1" > < /tab.icon> < span className = "block w-full text-center font-semibold text-base" > { tab . title } < /span> < /div>); const desktopTabsList = tabs . map ( ( tab ) => desktopTabItemFactory ( tab ) ) ; const tabletTabsList = tabs . map ( ( tab ) => tableTabItemFactory ( tab ) ) ; return ( < div className = "account-view" > { } { isLgScreen ? ( < div className = "mr-8" > < h1 className = "mb-4 pl-3 text-neutral-700 font-semibold" > { i18n . get ( 'views.account.title' ) } < /h1> < div className = "tabs-container" > { desktopTabsList } < /div> < /div>) : (<div className="flex justify-center mb-7">{tabletTabsList}</div > ) } { } < div className = "mx-auto max-w-4xl w-full h-full flex flex-col overflow-y-auto items-start" > < CurrentTabComponent /> < /div> < /div>); } } export default connect ( ( state ) => { return { currentTab : state . ui . currentAccountTab , } ; } ) ( AccountView ) ;