Skip to content

Commit

Permalink
redirect to 404 if get map fails and format code
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuhanmirza
shuhanmirza committed May 27, 2023
1 parent a74caa0 commit aed7d7f
Showing 1 changed file with 136 additions and 136 deletions.
272 changes: 136 additions & 136 deletions surelink-vue/src/components/PreviewRedirection.vue
View file
Original file line number Diff line number Diff line change
@@ -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 ,
Expand All @@ -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>
Expand All @@ -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>

0 comments on commit aed7d7f

Please sign in to comment.