- refactoring code
This commit is contained in:
@@ -1,25 +1,3 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
|
||||
}
|
||||
store.commit('setHeader', header);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle');
|
||||
store.commit('resetHeaderDescription');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
<p class="font-bold">
|
||||
|
@@ -1,25 +1,11 @@
|
||||
<script setup>
|
||||
import MailContact from '@/components/sections/contacts/MailContact.vue';
|
||||
import OtherContact from '@/components/sections/contacts/OtherContact.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
|
||||
<MailContact />
|
||||
<OtherContact />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import MailContact from '@/components/sections/contacts/MailContact.vue'
|
||||
import OtherContact from '@/components/sections/contacts/OtherContact.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
|
||||
}
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
</script>
|
||||
|
@@ -1,35 +1,13 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute } from 'vue-router';
|
||||
import About from '@/components/sections/AboutSection.vue';
|
||||
import ExperiencesSection from '@/components/sections/ExperiencesSection.vue';
|
||||
import FavoriteProjects from '@/components/sections/FavoriteProjects.vue';
|
||||
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: [
|
||||
'Chciałbym Państwa powitać na mojej stronie!',
|
||||
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
|
||||
],
|
||||
}
|
||||
store.commit('setHeader', header);
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle');
|
||||
store.commit('resetHeaderDescription');
|
||||
})
|
||||
import About from'@/components/sections/AboutSection.vue';
|
||||
import Experiences from'@/components/sections/ExperiencesSection.vue';
|
||||
import FavoriteProjects from'@/components/sections/FavoriteProjects.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home">
|
||||
<About />
|
||||
<ExperiencesSection />
|
||||
<Experiences />
|
||||
<FavoriteProjects />
|
||||
</section>
|
||||
</template>
|
||||
|
@@ -1,3 +1,56 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { clearHeaderTitle, clearHeaderDescription } from '@/HeaderReference';
|
||||
import Markdown from '@/components/markdowns/MarkdownDescription.vue';
|
||||
|
||||
const apiURL = import.meta.env.VITE_APP_API_URL;
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const isLoaded = ref(false);
|
||||
let project = reactive({});
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories);
|
||||
|
||||
onMounted(() => {
|
||||
clearHeaderTitle();
|
||||
clearHeaderDescription();
|
||||
if (getCategories.value.length === 0) {
|
||||
store.dispatch('fetchCategories');
|
||||
}
|
||||
loadProject(route.params.id);
|
||||
})
|
||||
|
||||
function getCategoryName(categories = []) {
|
||||
const categoriesText = [];
|
||||
categories.forEach(categoryElement => {
|
||||
const category = getCategories.value.find(category => category.slug === categoryElement);
|
||||
if (category) {
|
||||
categoriesText.push(category.name);
|
||||
}
|
||||
});
|
||||
return categoriesText[0] ?? undefined;
|
||||
}
|
||||
|
||||
function loadProject(id) {
|
||||
fetch(apiURL + '/project/' + id)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
project.title = data.title;
|
||||
project.description = data.description;
|
||||
project.release_date = data.release_date;
|
||||
project.author = data.author;
|
||||
project.categories = data.categories;
|
||||
project.project_version = data.project_version;
|
||||
project.project_url = data.project_url;
|
||||
project.images = data.images;
|
||||
isLoaded.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
v-if="isLoaded"
|
||||
@@ -78,56 +131,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import Markdown from '@/components/markdowns/MarkdownDescription.vue';
|
||||
|
||||
const apiURL = import.meta.env.VITE_APP_API_URL;
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const isLoaded = ref(false);
|
||||
let project = reactive({});
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories);
|
||||
|
||||
onMounted(() => {
|
||||
if (getCategories.value.length === 0) {
|
||||
store.dispatch('fetchCategories');
|
||||
}
|
||||
loadProject(route.params.id);
|
||||
})
|
||||
|
||||
function getCategoryName(categories = []) {
|
||||
const categoriesText = [];
|
||||
categories.forEach(categoryElement => {
|
||||
const category = getCategories.value.find(category => category.slug === categoryElement);
|
||||
if (category) {
|
||||
categoriesText.push(category.name);
|
||||
}
|
||||
});
|
||||
return categoriesText[0] ?? undefined;
|
||||
}
|
||||
|
||||
function loadProject(id) {
|
||||
fetch(apiURL + '/project/' + id)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
project.title = data.title;
|
||||
project.description = data.description;
|
||||
project.release_date = data.release_date;
|
||||
project.author = data.author;
|
||||
project.categories = data.categories;
|
||||
project.project_version = data.project_version;
|
||||
project.project_url = data.project_url;
|
||||
project.images = data.images;
|
||||
isLoaded.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/default";
|
||||
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import SelectedProjects from '@/components/SelectedProjects.vue';
|
||||
|
||||
@@ -14,11 +14,6 @@ onMounted(() => {
|
||||
loadAllData();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle');
|
||||
store.commit('resetHeaderDescription');
|
||||
});
|
||||
|
||||
function loadAllData () {
|
||||
store.dispatch('fetchCategories');
|
||||
store.dispatch('fetchProjects').then(loadedProjects => {
|
||||
|
Reference in New Issue
Block a user