Added support for API

src/views/Project.vue

@@ -13,7 +13,7 @@
         </li>
         <li class="info-text">
           <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
-          <span>{{ getCategoryName(project.category) }}</span>
+          <span>{{ getCategoryName(project.categories)[0] }}</span>
         </li>
         <li class="info-text">
           <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
@@ -26,7 +26,7 @@
         <img :src="`${publicPath}${project.image}`" :alt="project.title">
       </component>
       <div class="content">
-        <p v-for="(description, key) in project.short_description.split('\n')" :key="key">
+        <p v-for="(description, key) in project.description.split('\n')" :key="key">
           {{ description }}
         </p>
       </div>
@@ -44,21 +44,33 @@ export default {
     }
   },
   mounted () {
-    const project = this.getProjects.find(project => project.id === this.$route.params.id)
-    this.project = project
+    if (this.getCategories.length === 0) {
+      this.$store.dispatch('fetchCategories')
+    }
+    this.loadProject(this.$route.params.id)
   },
   computed: {
     getCategories () {
       return this.$store.getters.getCategories
-    },
-    getProjects () {
-      return this.$store.getters.getProjects
     }
   },
   methods: {
-    getCategoryName (slug) {
-      const category = this.getCategories.find(category => category.slug === slug)
-      return category.name
+    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('https://api.kamilcraft.com/projects/' + id)
+        .then(response => response.json())
+        .then(data => {
+          this.project = data
+        })
     }
   }
 }

src/views/Projects.vue

@@ -3,7 +3,7 @@
     <div class="category-menu">
       <ul class="categories">
         <li class="category"
-            v-for="category in $store.getters.getCategories"
+            v-for="category in getCategories"
             :key="category.slug"
             :class="{ 'category-active': categories.active === category.slug }"
             @click="changeCategory(category.slug)">
@@ -104,31 +104,19 @@ export default {
   data () {
     return {
       categories: {
-        active: 'wszystkie'
+        active: 'all'
       },
       publicPath: process.env.BASE_URL,
       projects: []
     }
   },
+  computed: {
+    getCategories () {
+      return this.$store.getters.getCategories
+    }
+  },
   async mounted () {
-    this.$store.commit('setCategories', [
-      {
-        name: 'Wszystkie',
-        slug: 'wszystkie'
-      },
-      {
-        name: 'Wordpress',
-        slug: 'wordpress'
-      },
-      {
-        name: 'Prywatne',
-        slug: 'prywatne'
-      },
-      {
-        name: 'Zlecenia',
-        slug: 'zlecenia'
-      }
-    ])
+    await this.$store.dispatch('fetchCategories')
     await this.$store.dispatch('fetchProjects').then(projects => {
       projects.sort((firstProduct, secondProduct) => {
         return secondProduct.id - firstProduct.id
@@ -146,8 +134,8 @@ export default {
     loadListWhereCategory (category) {
       this.projects = []
       setTimeout(() => {
-        if (category !== 'wszystkie') {
-          const projects = this.$store.getters.getProjects.filter(project => project.category === category)
+        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