feat(reports): keep reports on the phone when the network is down

src/app/(map)/signaler/report-form.tsx

@@ -31,7 +31,8 @@ import {
   validateReport,
   type ReportErrors,
 } from '@/lib/reports/validation'
-import { submitReport, type ReportFormState } from './actions'
+import { sendReport } from '@/lib/reports/send'
+import type { ReportFormState } from '@/lib/reports/submit'
 import { REPORT_THEMES } from './report-theme'
 
 const initialState: ReportFormState = {}
@@ -79,10 +80,7 @@ export function ReportForm({
   onBack: () => void
   photoRequired: boolean
 }) {
-  const [state, formAction, pending] = useActionState(
-    submitReport,
-    initialState,
-  )
+  const [state, formAction, pending] = useActionState(sendReport, initialState)
 
   return (
     <div className="flex min-h-0 flex-1 flex-col gap-4">
@@ -122,7 +120,9 @@ export function ReportForm({
           aria-live="polite"
           className="rounded-lg bg-canopee-green/10 px-3 py-2.5 text-sm font-medium text-canopee-forest"
         >
-          Signalement envoyé. Merci!
+          {state.queued
+            ? 'Signalement enregistré. Il partira au retour du réseau.'
+            : 'Signalement envoyé. Merci!'}
         </p>
       )}
 

src/app/(map)/signaler/report-overlay.tsx

@@ -1,11 +1,31 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { drainQueuedReports, pendingReportCount } from '@/lib/reports/send'
 import { ReportFlow } from './report-flow'
 
 export function ReportOverlay({ photoRequired }: { photoRequired: boolean }) {
   const router = useRouter()
+  const [pendingReports, setPendingReports] = useState(0)
+
+  const drain = useCallback(() => {
+    drainQueuedReports()
+      .then(setPendingReports)
+      .catch(() => setPendingReports(0))
+  }, [])
+
+  useEffect(() => {
+    pendingReportCount()
+      .then(setPendingReports)
+      .catch(() => setPendingReports(0))
+
+    drain()
+
+    window.addEventListener('online', drain)
+
+    return () => window.removeEventListener('online', drain)
+  }, [drain])
 
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
@@ -67,6 +87,17 @@ export function ReportOverlay({ photoRequired }: { photoRequired: boolean }) {
           </button>
         </header>
 
+        {pendingReports > 0 && (
+          <p
+            aria-live="polite"
+            className="shrink-0 rounded-lg bg-canopee-green/10 px-3 py-2.5 text-sm font-medium text-canopee-forest"
+          >
+            {pendingReports === 1
+              ? '1 signalement en attente d’envoi.'
+              : `${pendingReports} signalements en attente d’envoi.`}
+          </p>
+        )}
+
         <div className="flex min-h-0 flex-1 flex-col justify-center">
           <ReportFlow photoRequired={photoRequired} />
         </div>

src/app/api/reports/route.ts

@@ -2,6 +2,7 @@ import type { NextRequest } from 'next/server'
 import { getCurrentUserProfile } from '@/lib/auth/current-user'
 import { canAccess } from '@/lib/auth/roles'
 import { listReportPins } from '@/lib/reports/queries'
+import { createReport } from '@/lib/reports/submit'
 import {
   parseCategoriesParam,
   parseStatusParam,
@@ -49,3 +50,27 @@ export async function GET(request: NextRequest) {
     reports,
   })
 }
+
+export async function POST(request: NextRequest) {
+  const profile = await getCurrentUserProfile()
+
+  if (!profile || !canAccess(profile, 'volunteer')) {
+    return Response.json({ error: 'Unauthorized.' }, { status: 401 })
+  }
+
+  let formData: FormData
+
+  try {
+    formData = await request.formData()
+  } catch {
+    return Response.json({ error: 'Expected a form body.' }, { status: 400 })
+  }
+
+  const result = await createReport(profile, formData)
+
+  if (result.errors || result.message) {
+    return Response.json(result, { status: 422 })
+  }
+
+  return Response.json(result)
+}

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next'
 import { Averia_Serif_Libre, Geist_Mono } from 'next/font/google'
 import localFont from 'next/font/local'
 import { PatrolControls } from '@/components/patrol-controls'
+import { ReportSync } from '@/components/report-sync'
 import { getCurrentUserProfile } from '@/lib/auth/current-user'
 import { getActivePatrol } from '@/lib/patrols/queries'
 import 'mapbox-gl/dist/mapbox-gl.css'
@@ -96,6 +97,7 @@ export default async function RootLayout({
       <body className="min-h-full flex flex-col font-sans">
         {children}
         <PatrolControls initialStartedAt={initialStartedAt} />
+        <ReportSync />
       </body>
     </html>
   )

src/components/report-sync.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useEffect } from 'react'
+import { drainQueuedReports } from '@/lib/reports/send'
+
+export function ReportSync() {
+  useEffect(() => {
+    function drain() {
+      void drainQueuedReports().catch(() => {})
+    }
+
+    drain()
+
+    window.addEventListener('online', drain)
+
+    return () => window.removeEventListener('online', drain)
+  }, [])
+
+  return null
+}

src/lib/reports/report-queue.ts

@@ -0,0 +1,117 @@
+const DB_NAME = 'canopee-reports'
+
+const DB_VERSION = 1
+
+const STORE = 'pending'
+
+export const MAX_QUEUED_REPORTS = 50
+
+export type QueuedReport = {
+  id: string
+  fields: Record<string, string>
+  photo: File | null
+  queuedAt: string
+}
+
+let connection: Promise<IDBDatabase> | null = null
+
+export function isReportQueueAvailable(): boolean {
+  return typeof indexedDB !== 'undefined'
+}
+
+function open(): Promise<IDBDatabase> {
+  if (connection) {
+    return connection
+  }
+
+  connection = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+    request.onupgradeneeded = () => {
+      if (!request.result.objectStoreNames.contains(STORE)) {
+        request.result.createObjectStore(STORE, { keyPath: 'id' })
+      }
+    }
+
+    request.onsuccess = () => resolve(request.result)
+    request.onerror = () => reject(request.error)
+  })
+
+  return connection
+}
+
+function run<T>(
+  mode: IDBTransactionMode,
+  action: (store: IDBObjectStore) => IDBRequest<T>,
+): Promise<T> {
+  return open().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const transaction = db.transaction(STORE, mode)
+        const pending = action(transaction.objectStore(STORE))
+
+        pending.onsuccess = () => resolve(pending.result)
+        transaction.onerror = () => reject(transaction.error)
+      }),
+  )
+}
+
+export async function countQueuedReports(): Promise<number> {
+  return run('readonly', (store) => store.count())
+}
+
+export async function readQueuedReports(): Promise<QueuedReport[]> {
+  const rows = await run('readonly', (store) => store.getAll())
+
+  return (rows as QueuedReport[]).sort((a, b) =>
+    a.queuedAt.localeCompare(b.queuedAt),
+  )
+}
+
+export async function deleteQueuedReport(id: string): Promise<void> {
+  await run('readwrite', (store) => store.delete(id))
+}
+
+export async function appendQueuedReport(
+  report: QueuedReport,
+): Promise<number> {
+  await run('readwrite', (store) => store.put(report))
+
+  return countQueuedReports()
+}
+
+export function toFormData(report: QueuedReport): FormData {
+  const formData = new FormData()
+
+  for (const [name, value] of Object.entries(report.fields)) {
+    formData.set(name, value)
+  }
+
+  formData.set('id', report.id)
+
+  if (report.photo) {
+    formData.set('photo', report.photo)
+  }
+
+  return formData
+}
+
+export function fromFormData(formData: FormData, id: string): QueuedReport {
+  const fields: Record<string, string> = {}
+  let photo: File | null = null
+
+  for (const [name, value] of formData.entries()) {
+    if (value instanceof File) {
+      if (name === 'photo' && value.size > 0) {
+        photo = value
+      }
+      continue
+    }
+
+    fields[name] = value
+  }
+
+  delete fields.id
+
+  return { id, fields, photo, queuedAt: new Date().toISOString() }
+}

src/lib/reports/send.ts

@@ -0,0 +1,94 @@
+import {
+  appendQueuedReport,
+  countQueuedReports,
+  deleteQueuedReport,
+  fromFormData,
+  isReportQueueAvailable,
+  readQueuedReports,
+  toFormData,
+} from '@/lib/reports/report-queue'
+import type { ReportFormState } from '@/lib/reports/submit'
+
+const ENDPOINT = '/api/reports'
+
+async function post(formData: FormData): Promise<Response> {
+  return fetch(ENDPOINT, {
+    method: 'POST',
+    body: formData,
+    redirect: 'manual',
+  })
+}
+
+export async function sendReport(
+  _prevState: ReportFormState,
+  formData: FormData,
+): Promise<ReportFormState> {
+  const id = crypto.randomUUID()
+
+  formData.set('id', id)
+
+  try {
+    const response = await post(formData)
+    const state = (await response.json()) as ReportFormState
+
+    if (!response.ok) {
+      return state
+    }
+
+    return { submittedId: state.submittedId ?? id }
+  } catch {
+    if (!isReportQueueAvailable()) {
+      return {
+        message: 'Impossible d’envoyer le signalement. Réessayez.',
+      }
+    }
+
+    await appendQueuedReport(fromFormData(formData, id))
+
+    return { submittedId: id, queued: true }
+  }
+}
+
+export async function drainQueuedReports(): Promise<number> {
+  if (!isReportQueueAvailable()) {
+    return 0
+  }
+
+  const pending = await readQueuedReports()
+
+  for (const report of pending) {
+    let response: Response
+
+    try {
+      response = await post(toFormData(report))
+    } catch {
+      break
+    }
+
+    if (response.ok) {
+      await deleteQueuedReport(report.id)
+      continue
+    }
+
+    const state = (await response
+      .json()
+      .catch(() => null)) as ReportFormState | null
+
+    if (response.status === 422 && state?.errors) {
+      await deleteQueuedReport(report.id)
+      continue
+    }
+
+    break
+  }
+
+  return countQueuedReports()
+}
+
+export async function pendingReportCount(): Promise<number> {
+  if (!isReportQueueAvailable()) {
+    return 0
+  }
+
+  return countQueuedReports()
+}