feat: hide quiz challenge if finished

Author: sifferhans

frontend/app/api/generated.ts

@@ -2615,7 +2615,7 @@ export type ChallengesPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ChallengesPageQuery = { __typename?: 'Query', myCurrentProject: { __typename?: 'Project', challenges: Array<
       | { __typename: 'ExternalChallenge', url: string, id: string, name: string, description: any, image?: string | null, buttonText: string, publishedAt?: any | null, endTime?: any | null, visibleAt?: any | null, userCompletedAt?: any | null }
-      | { __typename: 'QuizChallenge', id: string, name: string, description: any, image?: string | null, buttonText: string, publishedAt?: any | null, endTime?: any | null, visibleAt?: any | null, userCompletedAt?: any | null }
+      | { __typename: 'QuizChallenge', id: string, name: string, description: any, image?: string | null, buttonText: string, publishedAt?: any | null, endTime?: any | null, visibleAt?: any | null, userCompletedAt?: any | null, quiz: { __typename?: 'Quiz', userCanStart: boolean } }
       | { __typename: 'SimpleChallenge', allowSelfCompletion: boolean, id: string, name: string, description: any, image?: string | null, buttonText: string, publishedAt?: any | null, endTime?: any | null, visibleAt?: any | null, userCompletedAt?: any | null }
     > } };
 
@@ -3412,6 +3412,11 @@ export const ChallengesPageDocument = gql`
       ... on ExternalChallenge {
         url
       }
+      ... on QuizChallenge {
+        quiz {
+          userCanStart
+        }
+      }
     }
   }
 }

frontend/app/components/challenges/ChallengeCard.vue

@@ -5,11 +5,18 @@ const props = defineProps<{
 
 const { track } = useAnalytics()
 
+const externalUrl = computed(() => {
+  if (props.challenge.__typename === 'ExternalChallenge') {
+    return props.challenge.url
+  }
+  return null
+})
+
 function onChallengeClick() {
   track(AnalyticsEvent.ChallengeLinkClicked, {
     challenge_id: props.challenge.id,
     challenge_name: props.challenge.name,
-    is_external: !!props.challenge.url,
+    is_external: !!externalUrl.value,
   })
 }
 </script>
@@ -30,7 +37,7 @@ function onChallengeClick() {
       <div class="mt-auto grid">
         <NuxtLink
           :to="
-            challenge.url || {
+            externalUrl || {
               name: 'challenges-challengeId',
               params: { challengeId: challenge.id },
             }

frontend/app/graphql/queries/pages/challenges.gql

@@ -17,6 +17,11 @@ query ChallengesPage {
       ... on ExternalChallenge {
         url
       }
+      ... on QuizChallenge {
+        quiz {
+          userCanStart
+        }
+      }
     }
   }
 }

frontend/app/pages/challenges/index.vue

@@ -4,18 +4,36 @@ const { isAuthReady } = useAuthReady()
 const { data, fetching, error } = useChallengesPageQuery({
   pause: computed(() => !isAuthReady.value),
 })
+
+// Filter out completed quiz challenges that can't be retaken
+const visibleChallenges = computed(() => {
+  if (!data.value?.myCurrentProject.challenges) return []
+
+  return data.value.myCurrentProject.challenges.filter((challenge) => {
+    // Hide completed quiz challenges that don't allow retakes
+    if (challenge.__typename === 'QuizChallenge') {
+      const isCompleted = !!challenge.userCompletedAt
+      const canStart = challenge.quiz.userCanStart
+      // Hide if completed and can't start again
+      if (isCompleted && !canStart) {
+        return false
+      }
+    }
+    return true
+  })
+})
 </script>
 
 <template>
   <PageLayout :title="$t('pages.challenges')">
     <LoadingState v-if="fetching" />
     <ErrorState v-else-if="error" :error />
     <div
-      v-else-if="data?.myCurrentProject.challenges.length"
+      v-else-if="visibleChallenges.length"
       class="space-y-list-section-gap p-list-outside"
     >
       <ChallengeCard
-        v-for="challenge in data.myCurrentProject.challenges"
+        v-for="challenge in visibleChallenges"
         :key="challenge.id"
         :challenge
       />