From 12806405dc2e2b33d5bb9b55fcd1687f7dca49dc Mon Sep 17 00:00:00 2001
From: Paul Hovley <rphovley@gmail.com>
Date: Thu, 31 Oct 2024 19:03:44 -0600
Subject: [PATCH] Additional states for managing ai report

---
 .../weeklyReport.platformApi.ts               | 26 ++++++
 .../WeeklyReports/AiReportHeader.tsx          | 92 ++++++++++++++-----
 .../WeeklyReports/BigBrotherReview.tsx        | 39 ++++++--
 .../components/WeeklyReports/ReportsPage.tsx  |  7 +-
 .../WeeklyReports/WeeklyBarGraph.tsx          |  2 +-
 packages/app/src/hooks/useSelectedDate.ts     | 10 +-
 6 files changed, 143 insertions(+), 33 deletions(-)

diff --git a/packages/app/src/api/platformServer/weeklyReport.platformApi.ts b/packages/app/src/api/platformServer/weeklyReport.platformApi.ts
index ff73619..e0d78db 100644
--- a/packages/app/src/api/platformServer/weeklyReport.platformApi.ts
+++ b/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),
+      })
+    },
+  })
+}
diff --git a/packages/app/src/components/WeeklyReports/AiReportHeader.tsx b/packages/app/src/components/WeeklyReports/AiReportHeader.tsx
index 6510693..f3eb614 100644
--- a/packages/app/src/components/WeeklyReports/AiReportHeader.tsx
+++ b/packages/app/src/components/WeeklyReports/AiReportHeader.tsx
@@ -1,11 +1,40 @@
 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
@@ -13,11 +42,13 @@ export const AiReportHeader = (props: {
     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>
diff --git a/packages/app/src/components/WeeklyReports/BigBrotherReview.tsx b/packages/app/src/components/WeeklyReports/BigBrotherReview.tsx
index 01b4df2..e8801f3 100644
--- a/packages/app/src/components/WeeklyReports/BigBrotherReview.tsx
+++ b/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,
           }}
         />
       )
diff --git a/packages/app/src/components/WeeklyReports/ReportsPage.tsx b/packages/app/src/components/WeeklyReports/ReportsPage.tsx
index 1988623..0bf1530 100644
--- a/packages/app/src/components/WeeklyReports/ReportsPage.tsx
+++ b/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'
diff --git a/packages/app/src/components/WeeklyReports/WeeklyBarGraph.tsx b/packages/app/src/components/WeeklyReports/WeeklyBarGraph.tsx
index ca94938..0259930 100644
--- a/packages/app/src/components/WeeklyReports/WeeklyBarGraph.tsx
+++ b/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,
     }
   })
 
diff --git a/packages/app/src/hooks/useSelectedDate.ts b/packages/app/src/hooks/useSelectedDate.ts
index e473f67..a59edfe 100644
--- a/packages/app/src/hooks/useSelectedDate.ts
+++ b/packages/app/src/hooks/useSelectedDate.ts
@@ -18,6 +18,7 @@ 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 }),
@@ -25,11 +26,16 @@ const weekAppStore = create<{
     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 }