feat: show insights by default (#10405)

ParabolInc · Oct 24, 2024 · f67328f · f67328f
1 parent b5bd2b4
commit f67328f
Showing 1 changed file with 49 additions and 36 deletions.
diff --git 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,42 +136,55 @@ 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 (
     <DashSectionHeader>
       <TeamHeaderAndAvatars>
         <TeamMeta>
           <DashHeading>{teamName}</DashHeading>
           <TeamLinks>
             <ClassNames>
-              {({css}) => {
-                return (
-                  <NavLink
-                    className={css(linkStyles)}
-                    title={orgName}
-                    to={`/me/organizations/${orgId}/billing`}
-                  >
-                    {orgName}
-                  </NavLink>
-                )
-              }}
+              {({css}) => (
+                <NavLink
+                  className={css(linkStyles)}
+                  title={orgName}
+                  to={`/me/organizations/${orgId}/billing`}
+                >
+                  {orgName}
+                </NavLink>
+              )}
             </ClassNames>
             {'•'}
             <ClassNames>
-              {({css}) => {
-                return (
-                  <NavLink
-                    className={css(secondLink)}
-                    title={'Settings & Integrations'}
-                    to={`/team/${teamId}/settings/`}
-                  >
-                    {'Settings'}
-                  </NavLink>
-                )
-              }}
+              {({css}) => (
+                <NavLink
+                  className={css(secondLink)}
+                  title={'Settings & Integrations'}
+                  to={`/team/${teamId}/settings/`}
+                >
+                  {'Settings'}
+                </NavLink>
+              )}
             </ClassNames>
           </TeamLinks>
         </TeamMeta>
@@ -182,11 +199,7 @@ const TeamDashHeader = (props: Props) => {
         className='full-w max-w-none border-b border-solid border-slate-300'
       >
         {tabs.map((tab) => (
-          <Tab
-            key={tab.path}
-            label={tab.label}
-            onClick={() => history.push(`/team/${teamId}/${tab.path}`)}
-          />
+          <Tab key={tab.path} label={tab.label} onClick={() => handleTabClick(tab.path)} />
         ))}
       </Tabs>
     </DashSectionHeader>