feat: implement grantee report submission system - Add report submission form and validation, integrate with GitHub API, add email confirmation, implement error handling

Author: BoltTouring

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+} 

__tests__/components/ReportPreview.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+// Mock ReactMarkdown
+jest.mock('react-markdown', () => {
+  return function MockReactMarkdown({ children }: { children: string }) {
+    return <div data-testid="markdown-content">{children}</div>
+  }
+})
+
+import ReportPreview from '../../components/ReportPreview'
+
+describe('ReportPreview', () => {
+  it('renders with correct content', () => {
+    const { getByTestId } = render(
+      <ReportPreview
+        project_name="Test Project"
+        report_number="1"
+        time_spent="test progress"
+        next_quarter="test plans"
+        money_usage="test usage"
+        help_needed="test help"
+      />
+    )
+
+    const content = getByTestId('markdown-content').textContent || ''
+    
+    // Just verify the key elements we care about
+    expect(content).toContain('Progress Report # 1')
+    expect(content).toContain('Use of Funds')
+  })
+}) 

components/GrantReportForm.tsx

@@ -10,6 +10,7 @@ interface GrantReportFormProps {
   grantDetails: {
     project_name: string
     issue_number: number
+    email: string
   }
   email_hash: string
 }
@@ -38,6 +39,7 @@ export default function GrantReportForm({
   const [error, setError] = useState<string>()
   const [showPreview, setShowPreview] = useState(false)
   const [recoveredData, setRecoveredData] = useState(false)
+  const [loading, setLoading] = useState(false)
 
   const {
     register,
@@ -170,29 +172,28 @@ export default function GrantReportForm({
   ])
 
   const onSubmit = async (data: GrantReportFormData) => {
+    setLoading(true)
     setError(undefined)
 
     try {
       const response = await fetchPostJSON('/api/report-bot', {
         ...data,
         issue_number: grantDetails.issue_number,
-        email_hash,
+        email: grantDetails.email,
       })
 
       if (response.error) {
         setError(response.error)
+        setLoading(false)
         return
       }
 
-      // Clear all saved form data for this grant after successful submission
-      clearSavedData()
-
-      setSubmitted(true)
+      // Clear saved data
+      localStorage.removeItem('report_draft')
       router.push('/reports/success')
     } catch (e) {
-      setError(
-        'Error submitting report. Your data has been saved locally. Please try again later.'
-      )
+      setError('Failed to submit report. Please try again.')
+      setLoading(false)
     }
   }
 
@@ -511,7 +512,7 @@ export default function GrantReportForm({
                 review it carefully before submitting.
               </p>
               <div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-md">
-                <ReportPreview data={watchAllFields} />
+                <ReportPreview {...watchAllFields} />
               </div>
             </div>
 

components/GrantValidationForm.tsx

@@ -14,6 +14,7 @@ interface ValidationResult {
   grant_details: {
     project_name: string
     issue_number: number
+    email: string
   }
   email_hash: string
 }
@@ -70,13 +71,17 @@ export default function GrantValidationForm({
           grant_details: {
             project_name: response.project_name,
             issue_number: response.issue_number,
+            email: response.email,
           },
           email_hash: response.email_hash,
         })
       } else if (response.grant_details) {
         // Handle old format for backward compatibility
         onValidationSuccess({
-          grant_details: response.grant_details,
+          grant_details: {
+            ...response.grant_details,
+            email: response.email,
+          },
           email_hash: response.email_hash,
         })
       } else {

components/ReportPreview.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+interface ReportPreviewProps {
+  project_name: string
+  report_number: string
+  time_spent: string
+  next_quarter: string
+  money_usage: string
+  help_needed?: string
+}
+
+export default function ReportPreview({
+  project_name,
+  report_number,
+  time_spent,
+  next_quarter,
+  money_usage,
+  help_needed,
+}: ReportPreviewProps) {
+  const reportContent = `
+# Progress Report # ${report_number} for ${project_name}
+
+## Time Spent & Progress Made
+${time_spent}
+
+## Plans for Next Quarter
+${next_quarter}
+
+## Use of Funds
+${money_usage}
+
+${help_needed ? `## Help or Support Needed\n${help_needed}` : ''}
+`
+
+  return (
+    <div className="prose prose-invert mx-auto text-gray-100 prose-headings:text-gray-100">
+      <ReactMarkdown>{reportContent}</ReactMarkdown>
+    </div>
+  )
+}

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  moduleNameMapper: {
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+    '^@/pages/(.*)$': '<rootDir>/pages/$1',
+    '^@/utils/(.*)$': '<rootDir>/utils/$1',
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+  },
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx|mjs)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(react-markdown|vfile|vfile-message|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|micromark|decode-named-character-reference|character-entities|markdown-table|zwitch|unist-util-stringify-position|mdast-util-to-string|space-separated-tokens|comma-separated-tokens|hast-util-whitespace|property-information|hast-util-to-jsx-runtime|devlop|unist-util-visit|unist-util-is|unist-util-position|unist-builder|mdast-util-to-hast|mdast-util-definitions|unist-util-generated|unist-util-position|unist-util-visit|mdast-util-to-string)/)',
+  ],
+} 

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom' 

lib/session.ts

@@ -0,0 +1,47 @@
+import type { IronSessionOptions } from '@/lib/iron-session-compat/next'
+import {
+  GetServerSidePropsContext,
+  GetServerSidePropsResult,
+  NextApiHandler,
+} from 'next'
+import {
+  withIronSessionApiRoute,
+  withIronSessionSsr,
+} from '@/lib/iron-session-compat/next'
+
+export interface SessionData {
+  email?: string
+  email_hash?: string
+  isLoggedIn: boolean
+}
+
+const sessionOptions: IronSessionOptions = {
+  password:
+    process.env.SECRET_COOKIE_PASSWORD ||
+    'complex_password_at_least_32_characters_long',
+  cookieName: 'opensats_session',
+  cookieOptions: {
+    secure: process.env.NODE_ENV === 'production',
+  },
+}
+
+export function withSessionRoute(handler: NextApiHandler) {
+  return withIronSessionApiRoute(handler, sessionOptions)
+}
+
+export function withSessionSsr<
+  P extends { [key: string]: unknown } = { [key: string]: unknown }
+>(
+  handler: (
+    context: GetServerSidePropsContext
+  ) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
+) {
+  return withIronSessionSsr(handler, sessionOptions)
+}
+
+declare module 'iron-session' {
+  interface IronSessionData extends SessionData {
+    // Add any additional session properties here
+    timestamp?: number
+  }
+}