diff --git a/packages/client/modules/teamDashboard/components/TeamDashHeader/TeamDashHeader.tsx b/packages/client/modules/teamDashboard/components/TeamDashHeader/TeamDashHeader.tsx index 91805c5cf19..51a1928546a 100644 --- a/packages/client/modules/teamDashboard/components/TeamDashHeader/TeamDashHeader.tsx +++ b/packages/client/modules/teamDashboard/components/TeamDashHeader/TeamDashHeader.tsx @@ -1,25 +1,26 @@ import {ClassNames} from '@emotion/core' import styled from '@emotion/styled' import graphql from 'babel-plugin-relay/macro' -import React from 'react' +import React, {useEffect} from 'react' import {useFragment} from 'react-relay' +import {useLocation} from 'react-router' import {NavLink} from 'react-router-dom' +import DashSectionHeader from '~/components/Dashboard/DashSectionHeader' import DashboardAvatars from '~/components/DashboardAvatars/DashboardAvatars' +import InviteTeamMemberAvatar from '~/components/InviteTeamMemberAvatar' +import Tab from '~/components/Tab/Tab' +import Tabs from '~/components/Tabs/Tabs' +import useRouter from '~/hooks/useRouter' import AgendaToggle from '~/modules/teamDashboard/components/AgendaToggle/AgendaToggle' +import {PALETTE} from '~/styles/paletteV3' +import {Breakpoint} from '~/types/constEnums' import makeMinWidthMediaQuery from '~/utils/makeMinWidthMediaQuery' import {TeamDashHeader_team$key} from '../../../../__generated__/TeamDashHeader_team.graphql' -import DashSectionHeader from '../../../../components/Dashboard/DashSectionHeader' -import InviteTeamMemberAvatar from '../../../../components/InviteTeamMemberAvatar' -import Tab from '../../../../components/Tab/Tab' -import Tabs from '../../../../components/Tabs/Tabs' -import useRouter from '../../../../hooks/useRouter' -import {PALETTE} from '../../../../styles/paletteV3' -import {Breakpoint} from '../../../../types/constEnums' const desktopBreakpoint = makeMinWidthMediaQuery(Breakpoint.SIDEBAR_LEFT) const TeamMeta = styled('div')({ - // define + // Add your styles here }) const TeamLinks = styled('div')({ @@ -65,6 +66,7 @@ const secondLink = { marginRight: 0, marginLeft: 8 } + const TeamHeaderAndAvatars = styled('div')({ flexShrink: 0, width: '100%', @@ -113,6 +115,7 @@ const TeamDashHeader = (props: Props) => { `, teamRef ) + const { organization, id: teamId, @@ -124,6 +127,7 @@ const TeamDashHeader = (props: Props) => { const {name: orgName, id: orgId} = organization const canViewInsights = viewerTeamMember?.isLead && hasInsightsFlag const {history} = useRouter() + const location = useLocation() const tabs = [ {label: 'Activity', path: 'activity'}, @@ -132,10 +136,27 @@ const TeamDashHeader = (props: Props) => { ...(canViewInsights ? [{label: 'Insights', path: 'insights'}] : []) ] + const insightsSeenKey = `insightsSeen_${teamId}` + const isLocalStorageAvailable = typeof window !== 'undefined' && window.localStorage + + useEffect(() => { + if (canViewInsights && isLocalStorageAvailable) { + const hasSeenInsights = localStorage.getItem(insightsSeenKey) === 'true' + if (!hasSeenInsights) { + localStorage.setItem(insightsSeenKey, 'true') + history.push(`/team/${teamId}/insights`) + } + } + }, [canViewInsights, insightsSeenKey, isLocalStorageAvailable, history, teamId]) + const activePath = location.pathname.split('/').pop() const activeTab = tabs.find((tab) => tab.path === activePath) ? activePath : 'activity' const activeIdx = tabs.findIndex((tab) => tab.path === activeTab) + const handleTabClick = (path: string) => { + history.push(`/team/${teamId}/${path}`) + } + return ( @@ -143,31 +164,27 @@ const TeamDashHeader = (props: Props) => { {teamName} - {({css}) => { - return ( - - {orgName} - - ) - }} + {({css}) => ( + + {orgName} + + )} {'•'} - {({css}) => { - return ( - - {'Settings'} - - ) - }} + {({css}) => ( + + {'Settings'} + + )} @@ -182,11 +199,7 @@ const TeamDashHeader = (props: Props) => { className='full-w max-w-none border-b border-solid border-slate-300' > {tabs.map((tab) => ( - history.push(`/team/${teamId}/${tab.path}`)} - /> + handleTabClick(tab.path)} /> ))}