Add error handling on skips/noises tasks page

Author: YMagus

src/views/AliasPage.vue

@@ -70,10 +70,13 @@
 
           <!-- Noises task interface -->
           <div v-else-if="taskType === 'noises'">
-            <div v-if="submissionResult.score === -1 && submissionResult.hints.length === 0" class="no-submissions-message">
+            <div v-if="!isSubmitting && submissionResult.score === -1 && submissionResult.hints.length === 0" class="no-submissions-message">
               No submissions yet. Make your first one!
             </div>
-            <div v-else class="submission-result">
+            <div v-if="isSubmitting" class="checking-message">
+              Checking your answer, give us some time...
+            </div>
+            <div v-else-if="submissionResult.score !== -1 || submissionResult.hints.length > 0" class="submission-result">
               <p class="score">Score: {{ submissionResult.score }}</p>
               <div v-if="submissionResult.hints.length" class="hints">
                 <h4>Hints:</h4>
@@ -323,7 +326,7 @@ const submitAnswers = async () => {
           submissionResult.value = {
             score: statusData.score,
             hints: statusData.hints || [],
-            message: statusData.score === 100 ? 'Task solved correctly! Score: 100' : `Task not solved correctly. Score: ${statusData.score}`
+            message: statusData.score === 100 ? 'Task solved correctly!' : `Task not solved correctly. Fix errors and try again.`
           }
           isSubmitting.value = false
         }
@@ -776,6 +779,13 @@ input:checked + .slider:before {
   text-align: center;
 }
 
+.checking-message {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 1.2em;
+  color: var(--text-gray);
+}
+
 .score {
   font-size: 1.2em;
   font-weight: 600;

src/views/SolveNoises.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="solve-noises-page-wrapper">
     <div v-if="loading" class="loading-message">Looking for tasks...</div>
+    <div v-else-if="noTasks" class="no-tasks-message">No tasks available yet. Create a task and be the first to publish!</div>
     <div v-else-if="error" class="error-message">{{ error }}</div>
     <div v-else class="content-container">
       <h2 class="section-header">Available Noises Tasks</h2>
@@ -36,6 +37,7 @@ const limit = ref(10)
 const hasMore = ref(true)
 const loadingMore = ref(false)
 const loadingRandom = ref(false)
+const noTasks = ref(false)
 
 const loadTasks = async () => {
   loading.value = true
@@ -49,9 +51,11 @@ const loadTasks = async () => {
     })
     const data = response.data
     if (data.responseInfo.status === 'OK') {
-      tasks.value = offset.value === 0 ? data.tasks : [...tasks.value, ...data.tasks]
-      hasMore.value = data.tasks.length === limit.value
-      offset.value += data.tasks.length
+      const fetchedTasks = data.tasks || []
+      tasks.value = offset.value === 0 ? fetchedTasks : [...tasks.value, ...fetchedTasks]
+      hasMore.value = fetchedTasks.length === limit.value
+      offset.value += fetchedTasks.length
+      noTasks.value = offset.value === 0 && fetchedTasks.length === 0
     } else {
       throw new Error('Invalid response status')
     }
@@ -163,6 +167,13 @@ onMounted(loadTasks)
   margin-top: clamp(0.625rem, 1.25vw, 1.25rem);
 }
 
+.no-tasks-message {
+  text-align: center;
+  font-size: clamp(1rem, 1.5vw, 1.2em);
+  color: #6f6a6a;
+  margin-top: clamp(0.625rem, 1.25vw, 1.25rem);
+}
+
 .content-container {
   width: 100%;
   display: flex;

src/views/SolveSkips.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="solve-skips-page-wrapper">
     <div v-if="loading" class="loading-message">Looking for tasks...</div>
+    <div v-else-if="noTasks" class="no-tasks-message">No tasks available yet. Create a task and be the first to publish!</div>
     <div v-else-if="error" class="error-message">{{ error }}</div>
     <div v-else class="content-container">
       <h2 class="section-header">Available Skips Tasks</h2>
@@ -36,6 +37,7 @@ const limit = ref(10)
 const hasMore = ref(true)
 const loadingMore = ref(false)
 const loadingRandom = ref(false)
+const noTasks = ref(false)
 
 const loadTasks = async () => {
   loading.value = true
@@ -49,9 +51,11 @@ const loadTasks = async () => {
     })
     const data = response.data
     if (data.responseInfo.status === 'OK') {
-      tasks.value = offset.value === 0 ? data.tasks : [...tasks.value, ...data.tasks]
-      hasMore.value = data.tasks.length === limit.value
-      offset.value += data.tasks.length
+      const fetchedTasks = data.tasks || []
+      tasks.value = offset.value === 0 ? fetchedTasks : [...tasks.value, ...fetchedTasks]
+      hasMore.value = fetchedTasks.length === limit.value
+      offset.value += fetchedTasks.length
+      noTasks.value = offset.value === 0 && fetchedTasks.length === 0
     } else {
       throw new Error('Invalid response status')
     }
@@ -163,6 +167,13 @@ onMounted(loadTasks)
   margin-top: clamp(0.625rem, 1.25vw, 1.25rem);
 }
 
+.no-tasks-message {
+  text-align: center;
+  font-size: clamp(1rem, 1.5vw, 1.2em);
+  color: #6f6a6a;
+  margin-top: clamp(0.625rem, 1.25vw, 1.25rem);
+}
+
 .content-container {
   width: 100%;
   display: flex;