From 8ea13f536e08c6b9d27631b14cc1068ad88fa8dc Mon Sep 17 00:00:00 2001
From: MartinsOnuoha <martinsvictor.nd@gmail.com>
Date: Sat, 4 Nov 2023 10:47:12 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(appaddurlpreview.vue):=20add?=
 =?UTF-8?q?=20loading=20state=20to=20preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppAddUrl/AppAddUrl.vue         | 18 ++++++++++++++----
 src/components/AppAddUrl/AppAddUrlPreview.vue  |  7 ++++++-
 ...dUrlError.vue => AppAddUrlSuccessError.vue} |  0
 .../AppAddUrl/_AppAddUrlPreview.scss           |  4 +++-
 4 files changed, 23 insertions(+), 6 deletions(-)
 rename src/components/AppAddUrl/{AppAddUrlError.vue => AppAddUrlSuccessError.vue} (100%)

diff --git a/src/components/AppAddUrl/AppAddUrl.vue b/src/components/AppAddUrl/AppAddUrl.vue
index 9318aba..ced16e2 100644
--- a/src/components/AppAddUrl/AppAddUrl.vue
+++ b/src/components/AppAddUrl/AppAddUrl.vue
@@ -6,7 +6,7 @@ import { ADD_SAMPLE } from '@/graphql/mutations/samples'
 import type { Statement } from '@/entities/Statement'
 import { GET_STATEMENTS } from '@/graphql/queries/statements'
 import { useValidateOgUrl } from '@/composables/useValidateOgUrl'
-import AppAddUrlError from '@/components/AppAddUrl/AppAddUrlError.vue'
+import AppAddUrlError from '@/components/AppAddUrl/AppAddUrlSuccessError.vue'
 import AppAddUrlPreview from '@/components/AppAddUrl/AppAddUrlPreview.vue'
 
 const props = defineProps({
@@ -24,7 +24,11 @@ watch(data, (n) => {
   }
 })
 
-const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE, () => ({
+const {
+  loading: loadingMutation,
+  mutate: addSample,
+  error: mutationError
+} = useMutation(ADD_SAMPLE, () => ({
   variables: {
     objects: {
       statement_id: props.statement?.id,
@@ -54,6 +58,7 @@ const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE,
         required
         name="add-url"
         v-model="inputValue"
+        :disabled="loadingValidation || loadingMutation"
         placeholder="e.g https://dribbble.com/shots..."
         type="text"
       />
@@ -62,11 +67,16 @@ const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE,
       :disabled="!canCreate || loadingValidation || loadingMutation"
       @click="validate(inputValue)"
     >
-      Add Inspiration ✨
+      {{ loadingValidation ? 'Validating URL...' : 'Add Inspiration ✨' }}
     </button>
   </div>
   <AppAddUrlError :msg="data?.error ? 'Provided URL is invalid ❌' : ''" />
-  <AppAddUrlPreview v-if="!data?.error && data?.data" :og-item="data.data" />
+  <AppAddUrlPreview
+    v-if="!data?.error && data?.data"
+    :og-item="data.data"
+    :loading="loadingMutation"
+    :has-error="!!mutationError"
+  />
 </template>
 
 <style lang="scss">
diff --git a/src/components/AppAddUrl/AppAddUrlPreview.vue b/src/components/AppAddUrl/AppAddUrlPreview.vue
index 0cecf2c..1b70141 100644
--- a/src/components/AppAddUrl/AppAddUrlPreview.vue
+++ b/src/components/AppAddUrl/AppAddUrlPreview.vue
@@ -13,7 +13,9 @@ const ogUrl = computed(() => props.ogItem?.ogUrl ?? '')
 const props = defineProps({
   ogItem: {
     type: Object as PropType<OgItem>
-  }
+  },
+  loading: Boolean,
+  hasError: Boolean
 })
 </script>
 
@@ -25,6 +27,9 @@ const props = defineProps({
     :aria-description="ogDescription"
     class="AppAddUrlPreview font--fira"
   >
+    <div class="AppAddUrlPreview__overlay">
+      {{ !loading && !hasError ? 'Inspiration Added 🎉' : 'Adding URL...' }}
+    </div>
     <MdiCheckCircleOutline class="absolute right-1 top-1 text-green-400 text-xl" />
     <div
       class="AppAddUrlPreview__img"
diff --git a/src/components/AppAddUrl/AppAddUrlError.vue b/src/components/AppAddUrl/AppAddUrlSuccessError.vue
similarity index 100%
rename from src/components/AppAddUrl/AppAddUrlError.vue
rename to src/components/AppAddUrl/AppAddUrlSuccessError.vue
diff --git a/src/components/AppAddUrl/_AppAddUrlPreview.scss b/src/components/AppAddUrl/_AppAddUrlPreview.scss
index eeecb1a..f2104b7 100644
--- a/src/components/AppAddUrl/_AppAddUrlPreview.scss
+++ b/src/components/AppAddUrl/_AppAddUrlPreview.scss
@@ -1,6 +1,8 @@
 .AppAddUrlPreview {
   @apply flex h-auto w-full bg-white border rounded-lg mb-4 transition-all overflow-hidden relative;
-
+  &__overlay {
+    @apply absolute w-full h-full bg-gradient-to-tr from-purple-900 to-transparent flex justify-center items-center text-white font-bold text-sm;
+  }
   &__img {
     @apply min-w-[33%] w-1/3 rounded-l-lg bg-cover;
   }