Upgrade to vue 3 (#1)

* updated dependencies

* updated readme

* upgrade to vue 3

* updated buttons

* duplicate id removed

* updated contact

src/views/AboutView.vue

@@ -14,21 +14,53 @@
         Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
       </p>
       <h3>Kursy</h3>
-      <p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
-        <strong><a :href="publicPath + 'download/certyfikat-laravel.pdf'"
-                   target="_blank"
-                   rel="noopener nofollow noreferrer">
-          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.</p>
-      <p>Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
-        wiedzy o nowe doświadczenia.</p>
+      <p>
+        W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+        <strong><a
+          :href="publicPath + 'download/certyfikat-laravel.pdf'"
+          target="_blank"
+          rel="noopener nofollow noreferrer"
+        >
+          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
+      </p>
+      <p>
+        Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
+        wiedzy o nowe doświadczenia.
+      </p>
       <h2>Moje zainteresowania</h2>
-      <p>W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
+      <p>
+        W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
         programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
-        problemów przy prywatnych projektach.</p>
+        problemów przy prywatnych projektach.
+      </p>
     </div>
   </section>
 </template>
 
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+
+const publicPath = process.env.VUE_APP_BASE_URL + '/'
+
+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>
+
 <style lang="scss">
 section#about {
   padding: 45px 0;
@@ -57,25 +89,3 @@ section#about {
   }
 }
 </style>
-
-<script>
-export default {
-  name: 'About',
-  data () {
-    return {
-      publicPath: process.env.VUE_APP_BASE_URL + '/'
-    }
-  },
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
-    }
-    this.$store.commit('setHeader', header)
-  },
-  destroyed () {
-    this.$store.commit('resetHeaderTitle')
-    this.$store.commit('resetHeaderDescription')
-  }
-}
-</script>

src/views/ContactView.vue

@@ -7,24 +7,23 @@
   </section>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import MailContact from '../components/sections/contacts/MailContact'
 import OtherContact from '../components/sections/contacts/OtherContact'
 
-export default {
-  name: 'Contact',
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
-    }
-    this.$store.commit('setHeader', header)
-  },
-  components: {
-    MailContact,
-    OtherContact
+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>
 
 <style lang="scss">

src/views/Home.vue

@@ -1,42 +0,0 @@
-<template>
-  <section class="home">
-    <About />
-    <Experiences />
-    <FavoriteProjects />
-  </section>
-</template>
-
-<script>
-import About from '../components/sections/About'
-import Experiences from '../components/sections/Experiences'
-import FavoriteProjects from '../components/sections/FavoriteProjects'
-
-export default {
-  name: 'Home',
-  data () {
-    return {
-      publicPath: process.env.VUE_APP_BASE_URL + '/',
-      select_projects: []
-    }
-  },
-  mounted () {
-    const header = {
-      title: this.$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.'
-      ]
-    }
-    this.$store.commit('setHeader', header)
-  },
-  destroyed () {
-    this.$store.commit('resetHeaderTitle')
-    this.$store.commit('resetHeaderDescription')
-  },
-  components: {
-    About,
-    Experiences,
-    FavoriteProjects
-  }
-}
-</script>

src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="home">
+    <About />
+    <ExperiencesSection />
+    <FavoriteProjects />
+  </section>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import About from '../components/sections/AboutSection'
+import ExperiencesSection from '../components/sections/ExperiencesSection'
+import FavoriteProjects from '../components/sections/FavoriteProjects'
+
+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')
+})
+</script>

src/views/KamilCraftInfo.vue

@@ -1,42 +0,0 @@
-<template>
-  <section class="info">
-    <div class="container">
-      <h2>{{ $route.meta.title }}</h2>
-      <p>Wersja projektu: {{ project.version }}</p>
-      <p>Użyte paczki:</p>
-      <ul class="package-list">
-        <li v-for="(version, name) in project.dependencies" :key="name">{{ name }}: {{ version }}</li>
-      </ul>
-    </div>
-  </section>
-</template>
-
-<script>
-const nodeProject = require('../../package.json')
-export default {
-  name: 'KamilCraftInfo',
-  data () {
-    return {
-      project: {
-        version: '',
-        dependencies: []
-      }
-    }
-  },
-  mounted () {
-    this.project.version = nodeProject.version
-    this.project.dependencies = nodeProject.dependencies
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-  padding-top: 45px;
-  padding-bottom: 45px;
-
-  .package-list {
-    list-style: inside;
-  }
-}
-</style>

src/views/NotFound.vue

@@ -10,12 +10,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'NotFound'
-}
-</script>
-
 <style lang="scss" scoped>
 .not-found {
   .container {

src/views/ProjectView.vue

@@ -1,94 +1,137 @@
 <template>
-  <section class="project" v-if="project">
+  <section
+    v-if="isLoaded"
+    class="project"
+  >
     <header class="project_header">
       <h1>{{ project.title }}</h1>
       <ul class="project_info">
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
+          <font-awesome-icon
+            class="icon"
+            :icon="['far', 'clock']"
+          />
           <span>{{ project.release_date }}</span>
         </li>
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'user']"/>
+          <font-awesome-icon
+            class="icon"
+            :icon="['far', 'user']"
+          />
           <span>{{ project.author }}</span>
         </li>
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
-          <span>{{ getCategoryName(project.categories)[0] }}</span>
+          <font-awesome-icon
+            class="icon"
+            :icon="['far', 'folder']"
+          />
+          <span>{{ getCategoryName(project.categories) }}</span>
         </li>
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
+          <font-awesome-icon
+            class="icon"
+            :icon="['fas', 'code-branch']"
+          />
           <span>{{ project.project_version }}</span>
         </li>
-        <li class="info_text" v-if="project.project_url">
-          <font-awesome-icon class="icon" :icon="['fas', 'link']"/>
-          <span><a :href="project.project_url"
-                  target="_blank"
-                  rel="noopener nofollow noreferrer">Link</a></span>
+        <li
+          v-if="project.project_url"
+          class="info_text"
+        >
+          <font-awesome-icon
+            class="icon"
+            :icon="['fas', 'link']"
+          />
+          <span><a
+            :href="project.project_url"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+          >Link</a></span>
         </li>
       </ul>
     </header>
     <div class="container">
-      <component :is="`figure`" class="project-photo">
-        <img :src="`${project.images.large}`" :alt="project.title">
+      <component
+        :is="`figure`"
+        class="project-photo"
+      >
+        <img
+          :src="`${project.images.large}`"
+          :alt="project.title"
+        >
       </component>
-      <div class="content" v-html="markdownToHtml"></div>
+      <div
+        class="content"
+        v-html="markdownToHtml"
+      />
     </div>
   </section>
-  <div v-else class="loading">
-    <div class="loading-animation"></div>
+  <div
+    v-else
+    class="loading"
+  >
+    <div class="loading_animation" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import { marked } from 'marked'
 
-export default {
-  name: 'Project',
-  data () {
-    return {
-      publicPath: process.env.BASE_URL,
-      project: null
-    }
-  },
-  mounted () {
-    if (this.getCategories.length === 0) {
-      this.$store.dispatch('fetchCategories')
-    }
-    this.loadProject(this.$route.params.id)
-  },
-  computed: {
-    getCategories () {
-      return this.$store.getters.getCategories
-    },
-    markdownToHtml () {
-      return marked.parse(this.project.description)
-    }
-  },
-  methods: {
-    getCategoryName (categories) {
-      const categoriesText = []
-      categories.forEach(categoryElement => {
-        const cat = this.getCategories.find(category => category.slug === categoryElement)
-        if (cat) {
-          categoriesText.push(cat.name)
-        }
-      })
-      return categoriesText
-    },
-    loadProject (id) {
-      fetch(process.env.VUE_APP_API_URL + '/project/' + id)
-        .then(response => response.json())
-        .then(data => {
-          this.project = data
-        })
-    }
+const route = useRoute()
+const store = useStore()
+
+const isLoaded = ref(false)
+let project = reactive({})
+
+const getCategories = computed(() => store.getters.getCategories)
+const markdownToHtml = computed(() => marked.parse(project.description))
+
+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(process.env.VUE_APP_API_URL + '/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";
 
+.loading {
+  display: flex;
+  align-items: center;
+}
+
 .project {
   .project_header {
     @extend .container;

src/views/Projects.vue

@@ -1,153 +0,0 @@
-<template>
-  <div>
-    <div class="project_categories">
-      <ul class="categories">
-        <li class="categories_element"
-            v-for="category in getCategories"
-            :key="category.slug"
-            :class="{ 'categories_element-active': categories.active === category.slug }"
-            @click="changeCategory(category.slug)">
-          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
-        </li>
-      </ul>
-    </div>
-    <projects :projects="projects" />
-    <div v-if="projects.length === 0" class="loading">
-      <div class="loading_animation"></div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "scss/media";
-
-.project_categories {
-  padding-top: 45px;
-
-  .categories {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-
-    .categories_element {
-      position: relative;
-      cursor: pointer;
-      margin-right: 25px;
-
-      a {
-        color: var(--text-color);
-        &:hover {
-          color: black;
-        }
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &-active {
-        &::after {
-          content: '';
-          position: absolute;
-          margin: 0 auto;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 0;
-          height: 2px;
-          background-color: #A2CF00;
-          transform: translateY(8px);
-          animation: load-underline 300ms forwards;
-        }
-      }
-
-      @include media-mobile {
-        margin-right: 15px;
-      }
-    }
-  }
-}
-
-.projects {
-  padding-top: 25px;
-  padding-bottom: 25px;
-}
-
-@keyframes loading-animation {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes load-underline {
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-}
-</style>
-
-<script>
-import SelectedProjects from '../components/SelectedProjects'
-
-export default {
-  name: 'Projects',
-  data () {
-    return {
-      categories: {
-        active: 'all'
-      },
-      publicPath: process.env.VUE_APP_BASE_URL + '/',
-      projects: []
-    }
-  },
-  computed: {
-    getCategories () {
-      return this.$store.getters.getCategories
-    }
-  },
-  mounted () {
-    this.loadAllData()
-  },
-  destroyed () {
-    this.$store.commit('resetHeaderTitle')
-    this.$store.commit('resetHeaderDescription')
-  },
-  methods: {
-    async loadAllData () {
-      await this.$store.dispatch('fetchCategories')
-      await this.$store.dispatch('fetchProjects').then(projects => {
-        /* projects.sort((firstProduct, secondProduct) => {
-          return secondProduct.id - firstProduct.id
-        }) */
-        this.projects = projects
-      }).catch(error => {
-        console.log(error)
-      })
-    },
-    loadListWhereCategory (category) {
-      this.projects = []
-      setTimeout(() => {
-        if (category !== 'all') {
-          const projects = this.$store.getters.getProjects.filter(project => project.categories.includes(category))
-          this.projects = projects
-        } else {
-          this.projects = this.$store.getters.getProjects
-        }
-      }, 500)
-    },
-    changeCategory (category) {
-      this.categories.active = category
-      this.loadListWhereCategory(category)
-    }
-  },
-  components: {
-    projects: SelectedProjects
-  }
-}
-</script>

src/views/ProjectsView.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div class="project_categories">
+      <ul class="categories">
+        <li
+          v-for="category in getCategories"
+          :key="category.slug"
+          class="categories_element"
+          :class="{ 'categories_element-active': categories.active === category.slug }"
+          @click="changeCategory(category.slug)"
+        >
+          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
+        </li>
+      </ul>
+    </div>
+    <SelectedProjects :projects="projects" />
+    <div
+      v-if="projects.length === 0"
+      class="loading"
+    >
+      <div class="loading_animation" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import SelectedProjects from '../components/SelectedProjects'
+
+const store = useStore()
+
+const categories = reactive({
+  active: 'all'
+})
+const projects = reactive([])
+
+const getCategories = computed(() => store.getters.getCategories)
+
+onMounted(() => {
+  loadAllData()
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+
+function loadAllData () {
+  store.dispatch('fetchCategories')
+  store.dispatch('fetchProjects').then(loadedProjects => {
+    loadedProjects.forEach(project => {
+      projects.push(project)
+    })
+  })
+}
+
+function loadListWhereCategory(category) {
+  projects.splice(0)
+  setTimeout(() => {
+    if (category !== 'all') {
+      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
+      storedProjects.forEach(project => {
+        projects.push(project)
+      })
+    } else {
+      store.getters.getProjects.forEach(project => {
+        projects.push(project)
+      })
+    }
+  }, 500)
+}
+
+function changeCategory(category) {
+  categories.active = category
+  loadListWhereCategory(category)
+}
+</script>
+
+<style lang="scss">
+@import "scss/media";
+
+.project_categories {
+  padding-top: 45px;
+
+  .categories {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+
+    .categories_element {
+      position: relative;
+      cursor: pointer;
+      margin-right: 25px;
+
+      a {
+        color: var(--text-color);
+        &:hover {
+          color: black;
+        }
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &-active {
+        &::after {
+          content: '';
+          position: absolute;
+          margin: 0 auto;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          width: 0;
+          height: 2px;
+          background-color: #A2CF00;
+          transform: translateY(8px);
+          animation: load-underline 300ms forwards;
+        }
+      }
+
+      @include media-mobile {
+        margin-right: 15px;
+      }
+    }
+  }
+}
+
+.projects {
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+
+@keyframes loading-animation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load-underline {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+</style>