fix: Fix error in start meeting if the user has no teams

packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx

@@ -26,6 +26,7 @@ import NewMeetingSettingsToggleCheckIn from '../NewMeetingSettingsToggleCheckIn'
 import NewMeetingSettingsToggleTeamHealth from '../NewMeetingSettingsToggleTeamHealth'
 import NewMeetingTeamPicker from '../NewMeetingTeamPicker'
 import StyledError from '../StyledError'
+import StyledLink from '../StyledLink'
 import ScheduleMeetingButton from './ScheduleMeetingButton'
 
 interface Props {
@@ -102,7 +103,7 @@ const ActivityDetailsSidebar = (props: Props) => {
     () =>
       availableTeams.find((team) => team.id === preferredTeamId) ??
       templateTeam ??
-      sortByTier(availableTeams)[0]!
+      sortByTier(availableTeams)[0]
   )
 
   const onSelectTeam = (teamId: string) => {
@@ -114,6 +115,15 @@ const ActivityDetailsSidebar = (props: Props) => {
   const {onError, onCompleted, submitting, submitMutation, error} = mutationProps
   const history = useHistory()
 
+  // user has no teams
+  if (!selectedTeam)
+    return (
+      <div className='flex w-full flex-col items-center border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:h-full lg:w-96 lg:flex-1 lg:border-l lg:pt-14'>
+        <div className='self-center italic'>You have no teams to start a meeting with!</div>
+        <StyledLink to='/newteam'>Create a team</StyledLink>
+      </div>
+    )
+
   const handleStartActivity = (name?: string, rrule?: RRule, gcalInput?: CreateGcalEventInput) => {
     if (submitting) return
     submitMutation()

packages/client/components/ActivityLibrary/TeamPickerModal.tsx

@@ -48,18 +48,21 @@ const TeamPickerModal = (props: Props) => {
   )
 
   const [selectedTeam, setSelectedTeam] = useState(
-    teams.find((team) => team.id === preferredTeamId) ?? sortByTier(teams)[0]!
+    teams.find((team) => team.id === preferredTeamId) ?? sortByTier(teams)[0]
   )
 
   const atmosphere = useAtmosphere()
   const {submitting, error, submitMutation, onError, onCompleted} = useMutationProps()
 
   useEffect(() => {
     onCompleted()
-  }, [selectedTeam.id])
+  }, [selectedTeam?.id])
 
   const history = useHistory()
 
+  // user has no teams
+  if (!selectedTeam) return null
+
   const handleSelectTeam = () => {
     if (submitting) {
       return

packages/client/components/DashNavList/DashNavList.tsx

@@ -54,10 +54,6 @@ const DashNavList = (props: Props) => {
 
   const teams = organizations.flatMap((org) => org.viewerTeams)
 
-  if (teams?.length === 0) {
-    return <EmptyTeams>{'It appears you are not a member of any team!'}</EmptyTeams>
-  }
-
   return (
     <div className='w-full p-3 pt-4 pb-0'>
       {sortedOrgs.map((org) => (
@@ -83,6 +79,9 @@ const DashNavList = (props: Props) => {
           <DashNavListTeams onClick={onClick} organizationRef={org} />
         </div>
       ))}
+      {teams?.length === 0 && (
+        <EmptyTeams>{'It appears you are not a member of any team!'}</EmptyTeams>
+      )}
     </div>
   )
 }

packages/client/components/TimelineSuggestedAction.tsx

@@ -57,7 +57,7 @@ function TimelineSuggestedAction(props: Props) {
     viewerRef
   )
   const {suggestedActions} = viewer
-  const [suggestedAction] = suggestedActions
+  const suggestedAction = suggestedActions?.[0]
   let AsyncComponent: ValueOf<typeof lookup> | undefined
   if (suggestedAction) {
     const {__typename} = suggestedAction
@@ -66,7 +66,9 @@ function TimelineSuggestedAction(props: Props) {
   return (
     <Wrapper>
       <DelayUnmount unmountAfter={500}>
-        {AsyncComponent ? <AsyncComponent suggestedAction={suggestedAction!} /> : null}
+        {AsyncComponent && suggestedAction ? (
+          <AsyncComponent suggestedAction={suggestedAction} />
+        ) : null}
       </DelayUnmount>
     </Wrapper>
   )