From aed7d7f47eb8d9e50e73943bf80e1f7349d7a920 Mon Sep 17 00:00:00 2001
From: shuhanmirza <shuhan.mirza@gmail.com>
Date: Sat, 27 May 2023 20:15:32 +0600
Subject: [PATCH] redirect to 404 if get map fails and format code

---
 .../src/components/PreviewRedirection.vue     | 272 +++++++++---------
 1 file changed, 136 insertions(+), 136 deletions(-)

diff --git a/surelink-vue/src/components/PreviewRedirection.vue b/surelink-vue/src/components/PreviewRedirection.vue
index f0316a6..d0efc9f 100644
--- a/surelink-vue/src/components/PreviewRedirection.vue
+++ b/surelink-vue/src/components/PreviewRedirection.vue
@@ -1,42 +1,42 @@
 <template>
-    <section class="section m-5">
-        <div class="container">
-            <div class="columns is-centered">
-                <div class="column custom-card is-12-mobile">
-                    <div class="card shadow-lg is-cursor-pointer has-text-centered">
-                        <div v-if="isLoading && !loadingFail">
-                            <br/>
-                            <Loader/>
-                            <br/>
-                        </div>
-                        <div v-else-if="loadingFail">
-                            <figure class="">
-                                <img src="../assets/images/sad.svg" class="is-64x64" alt="reload">
-                            </figure>
-                            <div class="content has-text-weight-bold">
-                                <h3></h3>
-                                {{ message }}
-                            </div>
-                            <br/>
-                        </div>
-                        <div v-else>
-                            <div>
-                                <figure class="card-image">
-                                    <img :src="image" class="is-64x64" alt="Placeholder image">
-                                </figure>
-                            </div>
-                            <div class="card-content">
-                                <div class="content has-text-weight-bold is-marginless">
-                                    <h3></h3>
-                                    {{ title }}
-                                </div>
-                                <div class="content has-text-grey-light">
-                                    <h3></h3>
-                                    {{ description }}
-                                </div>
-                            </div>
-                        </div>
-                        <footer class="card-footer has-background-white-bis">
+  <section class="section m-5">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column custom-card is-12-mobile">
+          <div class="card shadow-lg is-cursor-pointer has-text-centered">
+            <div v-if="isLoading && !loadingFail">
+              <br/>
+              <Loader/>
+              <br/>
+            </div>
+            <div v-else-if="loadingFail">
+              <figure class="">
+                <img src="../assets/images/sad.svg" class="is-64x64" alt="reload">
+              </figure>
+              <div class="content has-text-weight-bold">
+                <h3></h3>
+                {{ message }}
+              </div>
+              <br/>
+            </div>
+            <div v-else>
+              <div>
+                <figure class="card-image">
+                  <img :src="image" class="is-64x64" alt="Placeholder image">
+                </figure>
+              </div>
+              <div class="card-content">
+                <div class="content has-text-weight-bold is-marginless">
+                  <h3></h3>
+                  {{ title }}
+                </div>
+                <div class="content has-text-grey-light">
+                  <h3></h3>
+                  {{ description }}
+                </div>
+              </div>
+            </div>
+            <footer class="card-footer has-background-white-bis">
                             <span @click="redirectToLink()"
                                   :class="{
                                            'has-background-success' : !this.isLoading && !this.loadingFail ,
@@ -45,12 +45,12 @@
                                   class="card-footer-item p-5 has-text-weight-bold is-uppercase is-text-wide-1">
                                 {{ proceedText }}
                             </span>
-                        </footer>
-                    </div>
-                </div>
-            </div>
+            </footer>
+          </div>
         </div>
-    </section>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -63,132 +63,132 @@ import "vue-toastification/dist/index.css";
 
 Vue.use(Toast);
 export default {
-    name: "PreviewRedirection",
-    components: {Loader},
-    data() {
-        return {
-            redirectLink: '',
-            title: '',
-            description: '',
-            image: '',
-            url: '',
-            isLoading: true,
-            message: '',
-            loadingFail: false,
-            proceedText: 'Generating Link!'
-        }
-    },
-    mounted() {
-        this.fetchOriginalLink();
-        setTimeout(() => {
-            if (this.title !== '') {
-                this.proceedText = 'Proceed to Link';
-                this.loadingFail = false;
-                this.isLoading = false;
+  name: "PreviewRedirection",
+  components: {Loader},
+  data() {
+    return {
+      redirectLink: '',
+      title: '',
+      description: '',
+      image: '',
+      url: '',
+      isLoading: true,
+      message: '',
+      loadingFail: false,
+      proceedText: 'Generating Link!'
+    }
+  },
+  mounted() {
+    this.fetchOriginalLink();
+    setTimeout(() => {
+      if (this.title !== '') {
+        this.proceedText = 'Proceed to Link';
+        this.loadingFail = false;
+        this.isLoading = false;
 
-            } else {
-                this.message = 'Could not load preview';
-                this.loadingFail = true;
-                this.isLoading = false;
-            }
-        }, 2000)
-    },
-    methods: {
-        fetchOriginalLink() {
-            const link = this.$route.params.link;
-            axios.get('https://api.surel.ink/redirection/get-map', {
-                params: {
-                    "uid": link
-                },
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-            })
-                .then(response => {
-                    this.loadingFail = false;
-                    this.isLoading = false;
-                    this.proceedText = 'Proceed to Link';
-                    this.redirectLink = response.data['url'];
-                    this.generatePreview(link);
-                })
-                .catch(error => {
-                    this.toastFailure("Incorrect Short Link!");
-                    this.proceedText = 'Incorrect Link';
-                });
+      } else {
+        this.message = 'Could not load preview';
+        this.loadingFail = true;
+        this.isLoading = false;
+      }
+    }, 2000)
+  },
+  methods: {
+    fetchOriginalLink() {
+      const link = this.$route.params.link;
+      axios.get('https://api.surel.ink/redirection/get-map', {
+        params: {
+          "uid": link
         },
-        generatePreview(url) {
-            axios.get('https://api.surel.ink/link-preview/', {
-                params: {
-                    "uid": url
-                },
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            })
-                .then(response => {
-                    this.title = response.data['title'];
-                    this.description = response.data['description'];
-                    this.image = response.data['image'];
-                })
-                .catch(error => {
-                    this.title = url
-                    console.log("Could not load preview");
-                })
-
+        headers: {
+          'Content-Type': 'application/json'
         },
-        redirectToLink() {
-            window.location.href = this.redirectLink;
+      })
+          .then(response => {
+            this.loadingFail = false;
+            this.isLoading = false;
+            this.proceedText = 'Proceed to Link';
+            this.redirectLink = response.data['url'];
+            this.generatePreview(link);
+          })
+          .catch(error => {
+            console.log(error)
+            this.$router.push("404")
+          });
+    },
+    generatePreview(url) {
+      axios.get('https://api.surel.ink/link-preview/', {
+        params: {
+          "uid": url
         },
-        toastFailure(message) {
-            this.$toast.error(message, {
-                timeout: 2000,
-                position: 'bottom-center'
-            });
+        headers: {
+          'Content-Type': 'application/json'
         }
+      })
+          .then(response => {
+            this.title = response.data['title'];
+            this.description = response.data['description'];
+            this.image = response.data['image'];
+          })
+          .catch(error => {
+            this.title = url
+            console.log("Could not load preview");
+          })
+
+    },
+    redirectToLink() {
+      window.location.href = this.redirectLink;
+    },
+    toastFailure(message) {
+      this.$toast.error(message, {
+        timeout: 2000,
+        position: 'bottom-center'
+      });
     }
+  }
 }
 </script>
 
 <style scoped>
 
 body {
-    color: #333;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  color: #333;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .cover-image img {
-    transition: transform 1s, filter 2s ease-in-out;
-    -webkit-transition: transform 1s, filter 2s ease-in-out;
-    transform: scale(1.1);
-    -webkit-transform: scale(1.1);
+  transition: transform 1s, filter 2s ease-in-out;
+  -webkit-transition: transform 1s, filter 2s ease-in-out;
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);
 }
 
 .card:hover .cover-image img {
-    cursor: pointer;
-    transform: scale(1.2);
-    -webkit-transform: scale(1.2);
+  cursor: pointer;
+  transform: scale(1.2);
+  -webkit-transform: scale(1.2);
 }
 
 .is-cursor-pointer {
-    cursor: pointer !important;
+  cursor: pointer !important;
 }
 
 .shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
 }
 
 .custom-card {
-    flex: none;
-    width: 40%;
+  flex: none;
+  width: 40%;
 }
 
 .is-64x64 {
-    margin-top: 1.5rem;
+  margin-top: 1.5rem;
 }
 
 .card-content {
-    padding: -1rem;
+  padding: -1rem;
 }
 
 </style>
\ No newline at end of file