From 2d3c6c00824375f8f6a5fbb7079b4a4ed936ba78 Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Mon, 27 Mar 2023 10:11:37 +0300
Subject: [PATCH] feat: add blogs loading
---
src/components/FooterComponent.vue | 27 ++++++++++++-------
src/pages/BlogPage.vue | 43 +++++++++++++++++++-----------
src/pages/BlogsPage.vue | 22 +++++++--------
src/plugins/store.js | 23 ++++++++++++++++
4 files changed, 80 insertions(+), 35 deletions(-)
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index cd086ab..7b54656 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -18,7 +18,9 @@
<p
class="text-center text-blue-text mt-[11px] text-lg leading-[1.625rem]"
>
- <a :href="`mailto:${$store.state.footer.contact_mail}`"> {{ $store.state.footer.contact_mail }}</a>
+ <a :href="`mailto:${$store.state.footer.contact_mail}`">
+ {{ $store.state.footer.contact_mail }}</a
+ >
</p>
</article>
@@ -28,7 +30,9 @@
<p
class="text-center text-blue-text mt-[9px] text-lg leading-[1.625rem]"
>
- <a :href="`tel:${$store.state.footer.contact_phone}`"> {{ $store.state.footer.contact_phone }} </a>
+ <a :href="`tel:${$store.state.footer.contact_phone}`">
+ {{ $store.state.footer.contact_phone }}
+ </a>
</p>
</article>
@@ -50,12 +54,17 @@
</div>
<p class="text-black mt-[70px] mb-[21px] text-sm leading-4 text-center">
- <router-link :to="`${$publicPath}terms-of-service`" class="text-blue-line"
- >Terms of Service </router-link
- >
+ <router-link
+ :to="`${$publicPath}terms-of-service`"
+ class="text-blue-line"
+ >Terms of Service
+ </router-link>
<span class="font-gilroy font-normal">and</span>
- <router-link :to="`${$publicPath}privacy-policy`" class="text-blue-line"
- > Privacy Policy</router-link
+ <router-link
+ :to="`${$publicPath}privacy-policy`"
+ class="text-blue-line"
+ >
+ Privacy Policy</router-link
>.
</p>
</div>
@@ -77,8 +86,8 @@ import FacebookSvg from "./svg/FacebookSvg.vue";
import LinkedInSvg from "./svg/LinkedInSvg.vue";
export default {
name: "FooterComponent",
- mounted(){
- this.$store.dispatch('getFooter')
+ mounted() {
+ this.$store.dispatch("getFooter");
},
components: {
FeatureSvg,
diff --git a/src/pages/BlogPage.vue b/src/pages/BlogPage.vue
index 80f81f7..152c286 100644
--- a/src/pages/BlogPage.vue
+++ b/src/pages/BlogPage.vue
@@ -20,18 +20,24 @@
Back to all articles
</router-link>
- <h1 class="text-dark text-5xl mt-11 leading-[3.32.rem]">
- {{ blog.title }}
- </h1>
- <p class="mt-5 leading-5 text-gray-400">
- <small>{{ blog.date }}</small>
- </p>
+ <div v-if="blog.attributes">
+ <h1 class="text-dark text-5xl mt-11 leading-[3.32.rem]">
+ {{ blog.attributes.title }}
+ </h1>
+ <p class="mt-5 leading-5 text-gray-400">
+ <small>{{ blog.attributes.date }}</small>
+ </p>
- <img :src="blog.image" alt="Title image" class="w-full mt-5" />
- <p
- class="mt-6 text-gray-600 text-xl leading-7"
- v-html="blog.content"
- ></p>
+ <img
+ :src="`${apiUrl}${blog.attributes.image.data.attributes.url}`"
+ alt="Title image"
+ class="w-full mt-5"
+ />
+ <p
+ class="mt-6 text-gray-600 text-xl leading-7"
+ v-html="blog.attributes.content"
+ ></p>
+ </div>
</section>
<div
class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[238px] h-[238px] z-0 -left-[91px] top-[50%]"
@@ -53,6 +59,7 @@ export default {
return {
scroll: window.scrollY,
blog: {},
+ apiUrl: process.env.VUE_APP_API_URL,
};
},
mounted() {
@@ -63,7 +70,13 @@ export default {
return;
}
- this.blog = this.blogs[this.$route.params.id - 1];
+ this.$store.dispatch("getBlogs").then(() => {
+ this.$store.state.blogs.forEach((blog) => {
+ if (blog.id == this.$route.params.id) {
+ this.blog = blog;
+ }
+ });
+ });
},
beforeDestroy() {
window.removeEventListener("scroll", this.onScroll);
@@ -72,9 +85,9 @@ export default {
onScroll() {
this.scroll = window.scrollY;
},
- scrollToContacts(){
- this.$refs.contacts.$el.scrollIntoView({ behavior: 'smooth' });
- }
+ scrollToContacts() {
+ this.$refs.contacts.$el.scrollIntoView({ behavior: "smooth" });
+ },
},
components: { HeaderComponent, FooterComponent, LeftArrow },
mixins: [BlogsMixin],
diff --git a/src/pages/BlogsPage.vue b/src/pages/BlogsPage.vue
index dff82b7..da989d2 100644
--- a/src/pages/BlogsPage.vue
+++ b/src/pages/BlogsPage.vue
@@ -6,7 +6,7 @@
:with-shadow="scroll > 50"
@onButtonClick="scrollToContacts"
></HeaderComponent>
- <div class="overflow-hidden mt-[-80px] pt-20">
+ <div class="overflow-hidden mt-[-80px] pt-20 relative">
<div
class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]"
></div>
@@ -20,23 +20,23 @@
</h1>
<ul class="mt-2">
- <li v-for="blog in blogs" :key="blog.id">
+ <li v-for="blog in $store.state.blogs" :key="blog.id">
<article class="p-4 mt-6 rounded-2xl bg-white shadow-3x28">
- <img :src="blog.image" alt="Title image" class="w-full mb-4" />
+ <img :src="`${apiUrl}${blog.attributes.image.data.attributes.url}`" alt="Title image" class="w-full mb-4" />
<router-link
:to="`${$publicPath}blogs/${blog.id}`"
class="font-medium text-xl text-dark leading-[1.66rem] hover:text-blue-text transition-colors"
>
- {{ blog.title }}
+ {{ blog.attributes.title }}
</router-link>
<p class="mt-2 leading-5 text-gray-text">
- <small>{{ blog.date }}</small>
+ <small>{{ blog.attributes.date }}</small>
</p>
<p class="mt-4 text-gray-600">
{{
- blog.content.length > 340
- ? blog.content.slice(0, 340) + "..."
- : blog.content
+ blog.attributes.content.length > 340
+ ? blog.attributes.content.slice(0, 340) + "..."
+ : blog.attributes.content
}}
</p>
</article>
@@ -52,7 +52,6 @@
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
import FeatureSvg from "../components/svg/FeatureSvg.vue";
-import BlogsMixin from "../components/mixins/BlogsMixin.vue";
import FooterComponent from "../components/FooterComponent.vue";
export default {
@@ -60,10 +59,12 @@ export default {
data() {
return {
scroll: window.scrollY,
+ apiUrl: process.env.VUE_APP_API_URL,
};
},
mounted() {
window.addEventListener("scroll", this.onScroll);
+ this.$store.dispatch('getBlogs');
},
beforeDestroy() {
window.removeEventListener("scroll", this.onScroll);
@@ -76,7 +77,6 @@ export default {
this.$refs.contacts.$el.scrollIntoView({ behavior: 'smooth' });
}
},
- components: { HeaderComponent, FeatureSvg, FooterComponent },
- mixins: [BlogsMixin],
+ components: { HeaderComponent, FeatureSvg, FooterComponent }
};
</script>
diff --git a/src/plugins/store.js b/src/plugins/store.js
index a8bfc95..55f67e5 100644
--- a/src/plugins/store.js
+++ b/src/plugins/store.js
@@ -11,6 +11,7 @@ export default new Vuex.Store({
reviews: [],
team: [],
footer: null,
+ blogs: []
},
mutations: {
setServices(state, services) {
@@ -39,6 +40,9 @@ export default new Vuex.Store({
setFooter(state, payload) {
state.footer = payload;
},
+ setBlogs(state, payload) {
+ state.blogs = payload;
+ },
},
actions: {
async getServices(state) {
@@ -121,6 +125,22 @@ export default new Vuex.Store({
});
});
},
+ async getBlogs(state) {
+ return new Promise((resolve) => {
+ if (!state.getters.isBlogsEmpty) {
+ resolve();
+ return;
+ }
+ axios
+ .get(`/V1/blogs?populate=*`)
+ .then((response) => {
+ state.commit("setBlogs", response.data.data);
+ })
+ .finally(() => {
+ resolve();
+ });
+ });
+ },
},
getters: {
isServicesEmpty(state) {
@@ -138,5 +158,8 @@ export default new Vuex.Store({
isFooterEmpty(state) {
return state.footer ? false : true;
},
+ isBlogsEmpty(state) {
+ return state.blogs.length <= 0;
+ },
},
});
--
GitLab