change start challenge to browse challenge for completed challenges

Author: CollinBeczak

src/api/challenge/single.test.ts

@@ -381,6 +381,25 @@ describe('challengeSingle.getRandomTask', () => {
   })
 })
 
+describe('challengeSingle.getFirstTask', () => {
+  it('fetches the first task in the challenge and caches it', async () => {
+    const tasks = [{ id: 33 }] as unknown as Task[]
+    const fetchMock = stubFetch(new Response(JSON.stringify(tasks), { status: 200 }))
+    const queryClient = createTestQueryClient()
+
+    const result = await challengeSingle.getFirstTask(9, queryClient)
+
+    expect(result).toEqual(tasks)
+    expect(queryClient.getQueryData(['task', 33])).toEqual(tasks[0])
+
+    const [request] = fetchMock.mock.calls[0]
+    expect(request.url).toContain('api/v2/challenge/9/tasks')
+    const params = new URL(request.url).searchParams
+    expect(params.get('limit')).toBe('1')
+    expect(params.get('page')).toBe('0')
+  })
+})
+
 describe('challengeSingle.fetchTasksNearby', () => {
   it('fetches nearby tasks using the default limit', async () => {
     const tasks = [{ id: 5 }] as unknown as Task[]

src/api/challenge/single.ts

@@ -211,6 +211,18 @@ export const challengeSingle = {
     return tasks
   },
 
+  // Any task in the challenge, regardless of status - used to drop into read-only
+  // browsing when the challenge has no startable tasks left.
+  getFirstTask: async (challengeId: number, queryClient: QueryClient) => {
+    const tasks = await apiRequest
+      .get(`api/v2/challenge/${challengeId}/tasks`, { searchParams: { limit: 1, page: 0 } })
+      .json<Task[]>()
+    for (const task of tasks) {
+      queryClient.setQueryData(['task', task.id], task)
+    }
+    return tasks
+  },
+
   fetchTasksNearby: async (challengeId: number, taskId: number, limit = 5) => {
     const tasks = await apiRequest
       .get(`api/v2/challenge/${challengeId}/tasksNearby/${taskId}`, {

src/components/Pages/BrowsedChallengePage/ChallengePanel/ChallengeFooter.tsx

@@ -1,11 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { Flag, Map as MapIcon, Play } from 'lucide-react'
+import { Eye, Flag, Map as MapIcon, Play } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
 import { api } from '@/api'
 import { useBrowsedChallengeContext } from '@/components/Pages/BrowsedChallengePage/contexts/BrowsedChallengeContext'
 import { ChallengePausedNotice } from '@/components/shared/ChallengePausedNotice'
 import { Button } from '@/components/ui/Button'
+import { useChallengeProgress } from '@/hooks/useChallengeProgress'
 import { useNavigateToTask } from '@/hooks/useNavigateToTask'
 import { useIntl } from '@/i18n'
 import { logger } from '@/lib/logger'
@@ -19,8 +20,18 @@ export const ChallengeFooter = () => {
   const { showMap, setShowMap } = useMapToggle()
   const { t } = useIntl()
 
+  const { hasActions, tasksRemaining } = useChallengeProgress(
+    challenge.id ?? 0,
+    challenge.completionMetrics
+  )
+
   const [isLoadingTask, setIsLoadingTask] = useState(false)
 
+  // Nothing left to work on (every task is completed, or the challenge has no
+  // tasks at all), so offer read-only browsing instead of a start that can only
+  // fail with "no tasks available".
+  const isBrowseOnly = hasActions && tasksRemaining === 0
+
   const handleStartTask = async () => {
     if (!challenge.id) return
 
@@ -49,6 +60,31 @@ export const ChallengeFooter = () => {
     }
   }
 
+  // Opens a task without claiming it, so completed challenges can still be read through.
+  const handleBrowseTask = async () => {
+    if (!challenge.id) return
+
+    try {
+      setIsLoadingTask(true)
+      const tasks = await api.challenge.getFirstTask(challenge.id, queryClient)
+
+      if (tasks && tasks.length > 0) {
+        await navigateToTask(tasks[0].id, { claim: false })
+      } else {
+        toast.error(
+          t('browsedChallengePage.footer.noTasksToBrowse', undefined, 'This challenge has no tasks')
+        )
+      }
+    } catch (error) {
+      logger.error('Error browsing challenge', { error })
+      toast.error(
+        t('browsedChallengePage.footer.failedToLoadTask', undefined, 'Failed to load task')
+      )
+    } finally {
+      setIsLoadingTask(false)
+    }
+  }
+
   return (
     <div className="shrink-0 rounded-b-xl border-zinc-200/50 border-t bg-white px-6 py-6 dark:border-slate-700/50 dark:bg-slate-800">
       <ChallengeProgress />
@@ -79,7 +115,7 @@ export const ChallengeFooter = () => {
       )}
 
       <div className="mt-4 flex flex-col gap-4">
-        {challenge.paused ? (
+        {challenge.paused && !isBrowseOnly ? (
           <ChallengePausedNotice
             message={t(
               'browsedChallengePage.footer.challengePausedMessage',
@@ -91,13 +127,15 @@ export const ChallengeFooter = () => {
           <Button
             size="lg"
             className="w-full gap-2 rounded-full bg-teal-600 text-white shadow-md transition-all hover:bg-teal-700 hover:shadow-md"
-            onClick={handleStartTask}
+            onClick={isBrowseOnly ? handleBrowseTask : handleStartTask}
             disabled={isLoadingTask}
           >
-            <Play className="size-5" />
+            {isBrowseOnly ? <Eye className="size-5" /> : <Play className="size-5" />}
             {isLoadingTask
               ? t('common.loading2', undefined, 'Loading...')
-              : t('browsedChallengePage.footer.startChallenge', undefined, 'Start Challenge')}
+              : isBrowseOnly
+                ? t('browsedChallengePage.footer.browseChallenge', undefined, 'Browse Challenge')
+                : t('browsedChallengePage.footer.startChallenge', undefined, 'Start Challenge')}
           </Button>
         )}
       </div>

src/i18n/messages/en-US.json

@@ -107,10 +107,12 @@
   "browsedChallengePage.challengeModals.reportModal.submitError": "Failed to submit report. Please try again.",
   "browsedChallengePage.challengeModals.reportModal.submitSuccess": "Report submitted successfully",
   "browsedChallengePage.challengeModals.reportModal.textPlaceholder": "Enter text here",
+  "browsedChallengePage.footer.browseChallenge": "Browse Challenge",
   "browsedChallengePage.footer.challengePausedMessage": "This challenge is currently paused. New tasks cannot be started until it is resumed.",
   "browsedChallengePage.footer.failedToLoadTask": "Failed to load task",
   "browsedChallengePage.footer.hideMap": "Hide Map",
   "browsedChallengePage.footer.noTasksAvailable": "No tasks available for this challenge",
+  "browsedChallengePage.footer.noTasksToBrowse": "This challenge has no tasks",
   "browsedChallengePage.footer.reportedIssueMessage": "This challenge has been reported. Click here to view the issue.",
   "browsedChallengePage.footer.showMap": "Show Map",
   "browsedChallengePage.footer.startChallenge": "Start Challenge",