Disable button

Author: AllanKoder

app/Http/Controllers/CommentController.php

@@ -62,10 +62,10 @@ public function store(StoreCommentRequest $request)
         } catch (Throwable $e) {
             DB::rollBack();
             Log::critical('Failed to save comment', [
-                'error' => $e->getMessage(),
-                'trace' => $e->getTraceAsString(),
                 'validated_data' => $validatedData,
                 'user_id' => Auth::id(),
+                'error' => $e->getMessage(),
+                'trace' => $e->getTraceAsString(),
             ]);
 
             return response()->json(['message' => 'Failed to save comment'], 500);

app/Http/Controllers/UpvoteController.php

@@ -29,6 +29,7 @@ public function downvote($typeKey, $id)
     {
         $result = $this->upvoteService->downvote($typeKey, $id);
 
+        // TODO: REFACTOR TO EXCEPTIONS
         if (isset($result['error'])) {
             return response()->json(['message' => $result['error']], $result['status']);
         }

resources/js/Pages/Resources/Create.vue

@@ -46,6 +46,7 @@ const { isSavedToLocalStorage, hasFormContent, clearLocalStorage } =
 const showReset = ref(false);
 const stepperValue = ref("1");
 const formRef = ref(null);
+const isLoading = ref(false);
 const toast = useToast();
 
 const scrollToForm = () => {
@@ -70,13 +71,15 @@ const resetForm = () => {
 };
 
 const submitForm = async () => {
+    isLoading.value = true;
     try {
         const response = await axios.postForm(
             route("resources.store"),
             formData
         );
-        clearLocalStorage();
 
+        clearLocalStorage();
+        isLoading.value = false;
         router.visit(route("resources.show", { slug: response.data.slug }));
     } catch (err) {
         toast.add({
@@ -89,6 +92,7 @@ const submitForm = async () => {
                     : "An error occurred while creating the resource. Please try again."),
             life: 10000,
         });
+        isLoading.value = false;
         console.error(err);
     }
 };
@@ -161,6 +165,7 @@ const handleFormChange = (newFormData) => {
                                     @change="handleFormChange"
                                     @back="() => navigateToStep('1')"
                                     @next="submitForm"
+                                    :is-loading="isLoading"
                                 />
                             </StepPanel>
                         </StepPanels>

resources/js/Pages/Resources/Form/TagsFields.vue

@@ -14,6 +14,10 @@ const props = defineProps({
         type: Object,
         required: true,
     },
+    isLoading: {
+        type: Boolean,
+        required: true,
+    }
 });
 
 const emit = defineEmits(["change", "next", "back"]);
@@ -97,7 +101,7 @@ const validateAndNext = async () => {
                 <Icon class="mr-2" icon="mdi:arrow-back" />
                 Back
             </SecondaryButton>
-            <PrimaryButton @click="validateAndNext">
+            <PrimaryButton @click="validateAndNext" :disabled="props.isLoading">
                 Submit
                 <Icon class="ml-2" icon="mdi:send" />
             </PrimaryButton>