Added support for API

src/components/SelectedProjects.vue

@@ -8,7 +8,7 @@
         <img class="project-image" :src="project.image" :alt="project.title" />
         <div class="project-content">
           <h3 class="title">{{ project.title }}</h3>
-          <div class="release">{{ project.version }} - {{ project.release_data }}</div>
+          <div class="release">{{ project.version }}</div>
           <div class="description">
             <p>{{ project.short_description }}</p>
           </div>

src/components/sections/FavoriteProjects.vue

@@ -27,56 +27,16 @@ export default {
     }
   },
   mounted () {
-    this.select_projects = [
+    this.loadProjectList()
-      {
-        title: 'KamilCraft.com',
-        category: 'private',
-        image: `${this.publicPath}assets/me.jpg`,
-        release_data: '29.08.2021',
-        version: 'v1.0.1',
-        short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
   },
-      {
+  methods: {
-        title: 'Projekt 4',
+    loadProjectList () {
-        category: '',
+      fetch('https://api.kamilcraft.com/projects/category/selected')
-        image: `${this.publicPath}assets/me.jpg`,
+        .then(response => response.json())
-        release_data: '29.08.2021',
+        .then(data => {
-        version: 'v1.0.0',
+          this.select_projects = data
-        short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        })
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
-      },
-      {
-        title: 'Projekt 3',
-        category: '',
-        image: `${this.publicPath}assets/me.jpg`,
-        release_data: '29.08.2021',
-        version: 'v1.0.0',
-        short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
-      },
-      {
-        title: 'Projekt 1',
-        category: '',
-        image: `${this.publicPath}assets/me.jpg`,
-        release_data: '29.08.2021',
-        version: 'v1.0.0',
-        short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
     }
-    ]
   },
   components: {
     GhostButton,

src/store/index.js

@@ -25,12 +25,20 @@ const moduleSettings = {
   },
   actions: {
     fetchProjects (store) {
-      return fetch('/api/projects.json')
+      return fetch('https://api.kamilcraft.com/projects')
         .then(response => response.json())
         .then(data => {
           store.commit('setProjects', data)
           return store.getters.getProjects
         })
+    },
+    fetchCategories (store) {
+      return fetch('https://api.kamilcraft.com/categories')
+        .then(response => response.json())
+        .then(data => {
+          store.commit('setCategories', data)
+          return store.getters.getCategories
+        })
     }
   },
   mutations: {

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)
+    if (this.getCategories.length === 0) {
-    this.project = project
+      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) {
+    getCategoryName (categories) {
-      const category = this.getCategories.find(category => category.slug === slug)
+      const categoriesText = []
-      return category.name
+      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: []
     }
   },
-  async mounted () {
+  computed: {
-    this.$store.commit('setCategories', [
+    getCategories () {
-      {
+      return this.$store.getters.getCategories
-        name: 'Wszystkie',
-        slug: 'wszystkie'
-      },
-      {
-        name: 'Wordpress',
-        slug: 'wordpress'
-      },
-      {
-        name: 'Prywatne',
-        slug: 'prywatne'
-      },
-      {
-        name: 'Zlecenia',
-        slug: 'zlecenia'
     }
-    ])
+  },
+  async mounted () {
+    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') {
+        if (category !== 'all') {
-          const projects = this.$store.getters.getProjects.filter(project => project.category === category)
+          const projects = this.$store.getters.getProjects.filter(project => project.categories.includes(category))
           this.projects = projects
         } else {
           this.projects = this.$store.getters.getProjects