fix: improve grantee report submission feature - Fix TypeScript and ESLint issues, add error handling, improve email template and validation, fix bot token usage

Author: BoltTouring

components/ErrorBoundary.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+interface Props {
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-white px-4 py-16 dark:bg-gray-900 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
+          <div className="mx-auto max-w-max">
+            <main className="sm:flex">
+              <p className="text-4xl font-bold tracking-tight text-orange-500 sm:text-5xl">
+                Oops!
+              </p>
+              <div className="sm:ml-6">
+                <div className="dark:border-gray-700 sm:border-l sm:border-gray-200 sm:pl-6">
+                  <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
+                    Something went wrong
+                  </h1>
+                  <p className="mt-1 text-base text-gray-500 dark:text-gray-400">
+                    {this.state.error?.message ||
+                      'An unexpected error occurred'}
+                  </p>
+                  <div className="mt-6 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
+                    <button
+                      onClick={() => window.location.reload()}
+                      className="inline-flex items-center rounded-md border border-transparent bg-orange-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+                    >
+                      Try again
+                    </button>
+                    <button
+                      onClick={() => (window.location.href = '/')}
+                      className="inline-flex items-center rounded-md border border-transparent bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+                    >
+                      Go back home
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

components/FormButton.tsx

@@ -1,14 +1,63 @@
-function FormButton({ variant, children, ...rest }) {
+interface FormButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'enabled' | 'disabled' | 'primary'
+  loading?: boolean
+  children?: React.ReactNode
+}
+
+function FormButton({
+  variant = 'primary',
+  loading = false,
+  children,
+  className = '',
+  ...rest
+}: FormButtonProps) {
   const defaultVariant =
-    'bg-orange-500 hover:bg-orange-700 text-xl text-white font-bold py-2 px-4 rounded'
+    'inline-flex justify-center items-center bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 ease-in-out border-0'
   const buttonVariants = {
     enabled: defaultVariant,
-    disabled: `${defaultVariant} opacity-50 cursor-not-allowed`,
+    disabled: `${defaultVariant} cursor-not-allowed opacity-50`,
+    primary: defaultVariant,
   }
 
   return (
-    <button className={`${buttonVariants[variant]} ...`} {...rest}>
-      {children}
+    <button
+      className={`${buttonVariants[variant]} ${
+        loading ? 'cursor-not-allowed opacity-50' : ''
+      } ${className}`}
+      disabled={loading}
+      type="submit"
+      {...rest}
+    >
+      {loading ? (
+        <span className="flex w-full items-center justify-center">
+          <svg
+            className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+          Processing...
+        </span>
+      ) : (
+        <span className="flex w-full items-center justify-center">
+          {children || 'Submit'}
+        </span>
+      )}
     </button>
   )
 }

components/GrantReportForm.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { fetchPostJSON } from '../utils/api-helpers'
-import FormButton from '@/components/FormButton'
 import CustomLink from '@/components/Link'
 import { useRouter } from 'next/router'
 import ReportPreview from '@/components/ReportPreview'
@@ -35,7 +34,6 @@ export default function GrantReportForm({
   email_hash,
 }: GrantReportFormProps) {
   const router = useRouter()
-  const [loading, setLoading] = useState(false)
   const [submitted, setSubmitted] = useState(false)
   const [error, setError] = useState<string>()
   const [showPreview, setShowPreview] = useState(false)
@@ -130,7 +128,7 @@ export default function GrantReportForm({
       console.error('Error loading saved form data:', e)
       // If there's an error, we just continue with empty form
     }
-  }, [grantDetails.issue_number, setValue])
+  }, [grantDetails.issue_number, setValue, watchAllFields.report_number])
 
   // Save form data to localStorage whenever it changes
   useEffect(() => {
@@ -172,33 +170,29 @@ export default function GrantReportForm({
   ])
 
   const onSubmit = async (data: GrantReportFormData) => {
-    setLoading(true)
     setError(undefined)
 
     try {
-      const response = await fetchPostJSON('/api/submit-report', {
+      const response = await fetchPostJSON('/api/report-bot', {
         ...data,
         issue_number: grantDetails.issue_number,
         email_hash,
       })
 
       if (response.error) {
         setError(response.error)
-        setLoading(false)
         return
       }
 
       // Clear all saved form data for this grant after successful submission
       clearSavedData()
 
       setSubmitted(true)
-      setLoading(false)
       router.push('/reports/success')
     } catch (e) {
       setError(
         'Error submitting report. Your data has been saved locally. Please try again later.'
       )
-      setLoading(false)
     }
   }
 
@@ -479,9 +473,13 @@ export default function GrantReportForm({
 
       {!showPreview ? (
         <div className="flex justify-end">
-          <FormButton type="button" onClick={() => setShowPreview(true)}>
+          <button
+            type="button"
+            onClick={() => setShowPreview(true)}
+            className="rounded bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+          >
             Preview Report
-          </FormButton>
+          </button>
         </div>
       ) : (
         <>
@@ -498,13 +496,7 @@ export default function GrantReportForm({
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z"
                 />
               </svg>
               Report Preview
@@ -545,9 +537,12 @@ export default function GrantReportForm({
                 </svg>
                 Back to Edit
               </button>
-              <FormButton type="submit" loading={loading}>
+              <button
+                type="submit"
+                className="rounded bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:bg-orange-600 dark:hover:bg-orange-700"
+              >
                 Submit Report
-              </FormButton>
+              </button>
             </div>
           </div>
         </>
@@ -634,4 +629,29 @@ export default function GrantReportForm({
       </div>
     </form>
   )
+
+  if (recoveredData) {
+    return (
+      <div className="mt-4 flex justify-end space-x-2">
+        <button
+          type="button"
+          onClick={() => {
+            clearSavedData()
+            reset({
+              project_name: grantDetails.project_name,
+              report_number: '',
+              time_spent: '',
+              next_quarter: '',
+              money_usage: '',
+              help_needed: '',
+            })
+            setRecoveredData(false)
+          }}
+          className="rounded bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+        >
+          Clear Data
+        </button>
+      </div>
+    )
+  }
 }

components/GrantValidationForm.tsx

@@ -2,8 +2,14 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { fetchPostJSON } from '../utils/api-helpers'
 import FormButton from '@/components/FormButton'
+import dynamic from 'next/dynamic'
 import * as EmailValidator from 'email-validator'
 
+// Dynamically import the component with SSR disabled
+const DynamicFormButton = dynamic(() => Promise.resolve(FormButton), {
+  ssr: false,
+})
+
 interface ValidationResult {
   grant_details: {
     project_name: string
@@ -137,15 +143,14 @@ export default function GrantValidationForm({
         )}
       </div>
 
-      <div className="flex justify-center">
-        <FormButton
-          type="submit"
+      <div className="mt-8 flex justify-center">
+        <DynamicFormButton
           loading={loading}
           variant={loading ? 'disabled' : 'primary'}
-          className="px-8"
+          className="text-base shadow-sm"
         >
           Start Report
-        </FormButton>
+        </DynamicFormButton>
       </div>
 
       {error && (

lib/iron-session-compat/next.ts

@@ -0,0 +1,69 @@
+// Custom implementation of iron-session/next using iron-session
+import { getIronSession } from 'iron-session'
+import {
+  NextApiHandler,
+  GetServerSidePropsContext,
+  GetServerSidePropsResult,
+  NextApiRequest,
+  NextApiResponse,
+} from 'next'
+
+export interface IronSessionOptions {
+  password: string
+  cookieName: string
+  cookieOptions?: {
+    secure?: boolean
+    httpOnly?: boolean
+    sameSite?: boolean | 'none' | 'strict' | 'lax'
+    path?: string
+    domain?: string
+    maxAge?: number
+  }
+  ttl?: number
+}
+
+export interface IronSessionData {
+  [key: string]: unknown
+}
+
+export interface IronSession extends IronSessionData {
+  destroy(): void
+  save(): Promise<void>
+}
+
+export function withIronSessionApiRoute<T extends NextApiHandler>(
+  handler: (
+    req: Parameters<T>[0] & { session: IronSession },
+    res: Parameters<T>[1]
+  ) => ReturnType<T>,
+  options: IronSessionOptions
+): NextApiHandler {
+  return async function withIronSessionApiRouteWrapper(
+    req: NextApiRequest & { session?: IronSession },
+    res: NextApiResponse
+  ) {
+    const session = await getIronSession(req, res, options)
+    req.session = session
+    return handler(req as Parameters<T>[0] & { session: IronSession }, res)
+  }
+}
+
+export function withIronSessionSsr<
+  P extends { [key: string]: unknown } = { [key: string]: unknown }
+>(
+  handler: (
+    context: GetServerSidePropsContext & { req: { session: IronSession } }
+  ) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>,
+  options: IronSessionOptions
+): (
+  context: GetServerSidePropsContext
+) => Promise<GetServerSidePropsResult<P>> {
+  return async function withIronSessionSsrWrapper(context) {
+    const { req, res } = context
+    const session = await getIronSession(req, res, options)
+    ;(req as { session?: IronSession }).session = session
+    return handler(
+      context as GetServerSidePropsContext & { req: { session: IronSession } }
+    )
+  }
+}