- refactoring code

This commit is contained in:
2023-07-31 20:03:00 +02:00
parent 8054be6846
commit 40432da0f2
26 changed files with 608 additions and 822 deletions

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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";

View File

@@ -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 => {