diff --git a/frontend/app/layout/TopHeader.tsx b/frontend/app/layout/TopHeader.tsx index 00a77ee93..6fb8554e0 100644 --- a/frontend/app/layout/TopHeader.tsx +++ b/frontend/app/layout/TopHeader.tsx @@ -1,18 +1,59 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Logo from 'App/layout/Logo'; import TopRight from 'App/layout/TopRight'; -import ProjectDropdown from 'Shared/ProjectDropdown'; import { Layout, Space } from 'antd'; import { useStore } from 'App/mstore'; import { Icon } from 'UI'; -import { observer } from 'mobx-react-lite'; +import { observer, useObserver } from 'mobx-react-lite'; import { INDEXES } from 'App/constants/zindex'; +import { connect } from 'react-redux'; +import { logout } from 'Duck/user'; +import { init as initSite } from 'Duck/site'; +import { fetchListActive as fetchMetadata } from 'Duck/customField'; const { Header } = Layout; -function TopHeader() { +interface Props { + sites: any[]; + account: any; + siteId: string; + boardingCompletion?: number; + showAlerts?: boolean; + fetchMetadata: () => void; + initSite: (site: any) => void; +} + +function TopHeader(props: Props) { const { settingsStore } = useStore(); + const { sites, account, siteId, boardingCompletion = 100, showAlerts = false } = props; + + const name = account.get('name'); + const [hideDiscover, setHideDiscover] = useState(false); + const { userStore, notificationStore } = useStore(); + const initialDataFetched = useObserver(() => userStore.initialDataFetched); + let activeSite = null; + const isPreferences = window.location.pathname.includes('/client/'); + + useEffect(() => { + if (!account.id || initialDataFetched) return; + + setTimeout(() => { + Promise.all([ + userStore.fetchLimits(), + notificationStore.fetchNotificationsCount() + // props.fetchMetadata() // TODO check for this + ]).then(() => { + userStore.updateKey('initialDataFetched', true); + }); + }, 0); + }, [account]); + + useEffect(() => { + activeSite = sites.find((s) => s.id == siteId); + props.initSite(activeSite); + }, [siteId]); + return (
({ + account: state.getIn(['user', 'account']), + siteId: state.getIn(['site', 'siteId']), + sites: state.getIn(['site', 'list']), + boardingCompletion: state.getIn(['dashboard', 'boardingCompletion']) +}); + +const mapDispatchToProps = { + onLogoutClick: logout, + initSite, + fetchMetadata +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(observer(TopHeader));