L5 ending with comments

Author: atomjar

package-lock.json

@@ -21,6 +21,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0-0",
     "@vue/eslint-config-prettier": "^6.0.0",
+    "axios": "^0.20.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",

package.json

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'https://my-json-server.typicode.com/Code-Pop/Real-World_Vue-3',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getEvents() {
+    return apiClient.get('/events')
+  }
+}

src/services/EventService.js

@@ -5,52 +5,31 @@
 </template>
 
 <script>
-// @ is an alias to /src
 import EventCard from '@/components/EventCard.vue'
+import EventService from '@/services/EventService.js'
+// import axios from 'axios'
 
 export default {
-  name: 'Home',
+  name: 'EventList',
   components: {
     EventCard
   },
   data() {
     return {
-      events: [
-        {
-          id: 5928101,
-          category: 'animal welfare',
-          title: 'Cat Adoption Day',
-          description: 'Find your new feline friend at this event.',
-          location: 'Meow Town',
-          date: 'January 28, 2022',
-          time: '12:00',
-          petsAllowed: true,
-          organizer: 'Kat Laydee'
-        },
-        {
-          id: 4582797,
-          category: 'food',
-          title: 'Community Gardening',
-          description: 'Join us as we tend to the community edible plants.',
-          location: 'Flora City',
-          date: 'March 14, 2022',
-          time: '10:00',
-          petsAllowed: true,
-          organizer: 'Fern Pollin'
-        },
-        {
-          id: 8419988,
-          category: 'sustainability',
-          title: 'Beach Cleanup',
-          description: 'Help pick up trash along the shore.',
-          location: 'Playa Del Carmen',
-          date: 'July 22, 2022',
-          time: '11:00',
-          petsAllowed: false,
-          organizer: 'Carey Wales'
-        }
-      ]
+      events: null
     }
+  },
+  created() {
+    EventService.getEvents()
+      // .get(
+      //   'https://my-json-server.typicode.com/Code-Pop/Real-World_Vue-3/events'
+      // )
+      .then(response => {
+        this.events = response.data
+      })
+      .catch(error => {
+        console.log(error)
+      })
   }
 }
 </script>