Additional states for managing ai report

packages/app/src/api/platformServer/weeklyReport.platformApi.ts

@@ -2,6 +2,7 @@ import { platformApiRequest } from '../request'
 
 import { PLATFORM_API_URL, useBetterQuery } from '..'
 import { weeklyReportKeys } from './keys'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 export const useGetAiWeeklyReport = (startOfWeek: string, email?: string) => {
   const queryFn = () =>
@@ -15,3 +16,28 @@ export const useGetAiWeeklyReport = (startOfWeek: string, email?: string) => {
     enabled: !!email,
   })
 }
+
+export const useGenerateAiWeeklyReport = () => {
+  const queryClient = useQueryClient()
+  let startOfWeek: string
+  const mutationFn = (body: {
+    email: string
+    startOfWeek: string
+    weeklyReport: CodeClimbers.WeeklyScores
+  }) => {
+    startOfWeek = body.startOfWeek
+    return platformApiRequest({
+      url: `${PLATFORM_API_URL}/ai-weekly-report`,
+      method: 'POST',
+      body,
+    })
+  }
+  return useMutation({
+    mutationFn,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: weeklyReportKeys.aiWeeklyReports(startOfWeek),
+      })
+    },
+  })
+}

packages/app/src/components/WeeklyReports/AiReportHeader.tsx

@@ -1,23 +1,54 @@
 import { Box, Stack, Typography } from '@mui/material'
-import { CodeClimbersLoadingButton } from '../common/CodeClimbersLoadingButton'
 import { BossImage } from '../common/Icons/BossImage'
 import { CodeClimbersIconButton } from '../common/CodeClimbersIconButton'
 import CloseIcon from '@mui/icons-material/Close'
 import { WeeklyReportDialog } from '../common/WeeklyReportDialog'
 import { useGetCurrentUser } from '../../api/browser/user.api'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { CodeClimbersButton } from '../common/CodeClimbersButton'
+
+const getLoadingTexts = (): string => {
+  return 'Contacting your manager... Choosing excuses... Engaging passive-aggressive behavior... Attempting to sabotage your career... Synergizing with your peers... Scheduling a meeting... Reviewing vieled threats... '
+}
+
+const useLoadingText = (loading?: boolean) => {
+  const [loadingTextIndex, setLoadingTextIndex] = useState(0)
+
+  const [loadingText, setLoadingText] = useState('')
+
+  useEffect(() => {
+    if (!loading) {
+      return
+    }
+    const interval = setInterval(() => {
+      const index =
+        loadingTextIndex > getLoadingTexts().length ? 0 : loadingTextIndex
+      setLoadingText((prevText) => prevText + getLoadingTexts()[index])
+      setLoadingTextIndex((prevIndex) => {
+        const newIndex = prevIndex + 1
+        return newIndex >= getLoadingTexts().length ? 0 : newIndex
+      })
+    }, 100)
+    return () => clearInterval(interval)
+  }, [loadingTextIndex, loadingText, loading])
+  return {
+    loadingText,
+  }
+}
 
 export const AiReportHeader = (props: {
   showCloseButton?: boolean
   aiButton: {
     text: string
     onClick?: () => void
     disabled?: boolean
+    loading?: boolean
   }
   openWeeklyReportModal?: boolean
 }) => {
   const { data: user } = useGetCurrentUser()
   const [isWeeklyReportModalOpen, setIsWeeklyReportModalOpen] = useState(false)
+  const { loadingText } = useLoadingText(props.aiButton.loading)
 
   return (
     <Box
@@ -44,26 +75,43 @@ export const AiReportHeader = (props: {
             </Typography>
           </Stack>
         </Box>
-        <CodeClimbersLoadingButton
-          eventName="generate_ai_weekly_report"
-          variant="contained"
-          fullWidth
-          disabled={props.aiButton.disabled}
-          sx={{
-            '&.Mui-disabled': {
-              backgroundColor: '#E0E0E0', // or any other color you prefer
-              color: '#00000080',
-            },
-          }}
-          onClick={() => {
-            if (props.openWeeklyReportModal) {
-              setIsWeeklyReportModalOpen(true)
-            }
-            props.aiButton.onClick?.()
-          }}
-        >
-          {props.aiButton.text}
-        </CodeClimbersLoadingButton>
+        {props.aiButton.loading ? (
+          <Typography
+            variant="monospace"
+            style={{
+              width: '265px',
+              height: '36.5px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              textWrap: 'nowrap',
+              overflow: 'hidden',
+            }}
+          >
+            {loadingText}
+          </Typography>
+        ) : (
+          <CodeClimbersButton
+            eventName="generate_ai_weekly_report"
+            variant="contained"
+            fullWidth
+            disabled={props.aiButton.disabled}
+            sx={{
+              '&.Mui-disabled': {
+                backgroundColor: '#E0E0E0', // or any other color you prefer
+                color: '#00000080',
+              },
+            }}
+            onClick={() => {
+              if (props.openWeeklyReportModal) {
+                setIsWeeklyReportModalOpen(true)
+              }
+              props.aiButton.onClick?.()
+            }}
+          >
+            {props.aiButton.text}
+          </CodeClimbersButton>
+        )}
       </Box>
       {props.showCloseButton && (
         <Box>

packages/app/src/components/WeeklyReports/BigBrotherReview.tsx

@@ -1,21 +1,25 @@
 import { Box } from '@mui/material'
 import { useGetCurrentUser } from '../../api/browser/user.api'
 import { useGetLocalServerWeeklyReport } from '../../api/localServer/report.localapi'
-import { useGetAiWeeklyReport } from '../../api/platformServer/weeklyReport.platformApi'
+import {
+  useGenerateAiWeeklyReport,
+  useGetAiWeeklyReport,
+} from '../../api/platformServer/weeklyReport.platformApi'
 import { useSelectedWeekDate } from '../../hooks/useSelectedDate'
 import { PerformanceReviewFax } from '../PerformanceReviewFax'
 import { AiReportHeader } from './AiReportHeader'
 
 export const BigBrotherReview = () => {
-  const { selectedDate, isCurrentWeek } = useSelectedWeekDate()
+  const { selectedDate, isCurrentWeek, isMonthAgo } = useSelectedWeekDate()
 
   const { data: user } = useGetCurrentUser()
   const { data: weeklyScores, isPending } =
     useGetLocalServerWeeklyReport(selectedDate)
-  const { data: aiWeeklyReport } = useGetAiWeeklyReport(
-    selectedDate.toISOString(),
-    user?.email,
-  )
+
+  const { data: aiWeeklyReport, isPending: isLoadingAiWeeklyReport } =
+    useGetAiWeeklyReport(selectedDate.toISOString(), user?.email)
+  const { mutate: generateAiWeeklyReport, isPending: isGeneratingReport } =
+    useGenerateAiWeeklyReport()
 
   if (isPending || !weeklyScores) {
     return <div>Loading</div>
@@ -24,6 +28,11 @@ export const BigBrotherReview = () => {
   const reportMissing = !aiWeeklyReport
 
   const getReviewContent = () => {
+    if (isLoadingAiWeeklyReport) {
+      return (
+        <AiReportHeader aiButton={{ text: 'Loading...', disabled: true }} />
+      )
+    }
     if (reportOff) {
       return (
         <AiReportHeader
@@ -45,14 +54,30 @@ export const BigBrotherReview = () => {
       )
     }
 
+    if (isMonthAgo()) {
+      return (
+        <AiReportHeader
+          aiButton={{
+            text: 'Too far back to generate report',
+            disabled: true,
+          }}
+        />
+      )
+    }
+
     if (reportMissing) {
       return (
         <AiReportHeader
           aiButton={{
             text: 'Generate Big Brother Report',
             onClick: () => {
-              console.log('Generate Big Brother Report')
+              generateAiWeeklyReport({
+                email: user?.email,
+                startOfWeek: selectedDate.toISOString(),
+                weeklyReport: weeklyScores,
+              })
             },
+            loading: isGeneratingReport,
           }}
         />
       )

packages/app/src/components/WeeklyReports/ReportsPage.tsx

@@ -13,6 +13,7 @@ import { BigBrotherReview } from './BigBrotherReview'
 import agi2024 from '../../assets/agi_2048.png'
 import { posthog } from 'posthog-js'
 import { useGetCurrentUser } from '../../api/browser/user.api'
+import { LoadingScreen } from '../LoadingScreen'
 
 export const ReportsPage = () => {
   const { selectedDate, setSelectedDate } = useSelectedWeekDate()
@@ -23,7 +24,11 @@ export const ReportsPage = () => {
   const { data: user } = useGetCurrentUser()
 
   if (isPending || !weeklyScores || !user) {
-    return <div>Loading</div>
+    return <LoadingScreen />
+  }
+
+  if (!weeklyScores || !user) {
+    return <div>No weekly scores or no user found</div>
   }
 
   const reportOff = user?.weeklyReportType !== 'ai'

packages/app/src/components/WeeklyReports/WeeklyBarGraph.tsx

@@ -15,7 +15,7 @@ export const WeeklyBarGraph = (props: Props) => {
     const length = record.name.length
     return {
       ...record,
-      name: length > 13 ? `${record.name.slice(0, 12)}..` : record.name,
+      name: length > 11 ? `${record.name.slice(0, 10)}..` : record.name,
     }
   })
 

packages/app/src/hooks/useSelectedDate.ts

@@ -18,18 +18,24 @@ const weekAppStore = create<{
   selectedDate: dayjs.Dayjs
   setSelectedDate: (date: dayjs.Dayjs) => void
   isCurrentWeek: () => boolean
+  isMonthAgo: () => boolean
 }>((set, get) => ({
   selectedDate: dayjs().startOf('week').subtract(1, 'week').add(1, 'day'),
   setSelectedDate: (date) => set({ selectedDate: date }),
   isCurrentWeek: () => {
     const state = get()
     return state.selectedDate.isSame(dayjs().startOf('isoWeek'), 'week')
   },
+  isMonthAgo: () => {
+    const state = get()
+    return state.selectedDate.isBefore(dayjs().subtract(1, 'month'), 'day')
+  },
 }))
 
 const useSelectedWeekDate = () => {
-  const { selectedDate, setSelectedDate, isCurrentWeek } = weekAppStore()
-  return { selectedDate, setSelectedDate, isCurrentWeek }
+  const { selectedDate, setSelectedDate, isCurrentWeek, isMonthAgo } =
+    weekAppStore()
+  return { selectedDate, setSelectedDate, isCurrentWeek, isMonthAgo }
 }
 
 export { useSelectedDate, useSelectedWeekDate }