Finished course by adding axios as a service

README.md

@@ -2,6 +2,11 @@
 
 ## Best Practices:
 
+### Dependencies
+
+- Use `npm outdated` to get a list of all the dependencies that may be outdated in your project.
+- Update a single dependency with `npm update <dependency name>` or update all with `npm update`
+
 ### Router
 
 - Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
@@ -22,6 +27,10 @@
 - Adding a name attribute to a slot `<slot name="heading"></slot>` allows you to use multiple slots in your component definition. Our parent component now would use `<h2 slot="heading">My header</h2>` to place the content appropriately
 - A `template` tag can be added to provide more than one tag within a slot block. The template can also make use of the `slot=` attribute. Using the `template` tag prevents your component code from getting cluttered with divs. You can also use whatever tags and Components are available to this component and pass it into slots.
 
+### API Calls with Axios
+
+- We will use a mock API using `json-server` library and a `db.json` in the root directory file to be a "Data store" for our mock API. Use the command `npx json-server --watch db.json` to start an API server that runs at `http://localhost:3000`.
+
 ## Project setup
 
 ```

db.json

@@ -0,0 +1,49 @@
+{
+  "events": [
+    {
+      "id": 5928101,
+      "user": {
+        "id": "abc123",
+        "name": "Adam"
+      },
+      "category": "animal welfare",
+      "organizer": "Adam",
+      "title": "Cat Cabaret",
+      "description": "Yay felines!",
+      "location": "Meow Town",
+      "date": "2019-01-03T21:54:00.000Z",
+      "time": "2:00",
+      "attendees": []
+    },
+    {
+      "id": 8419988,
+      "user": {
+        "id": "abc123",
+        "name": "Adam"
+      },
+      "category": "animal welfare",
+      "organizer": "Adam",
+      "title": "Kitty Cluster",
+      "description": "Yay cats!",
+      "location": "Catlandia",
+      "date": "2019-01-31T22:09:00.000Z",
+      "time": "7:00",
+      "attendees": []
+    },
+    {
+      "id": 4582797,
+      "user": {
+        "id": "abc123",
+        "name": "Adam"
+      },
+      "category": "animal welfare",
+      "organizer": "Adam",
+      "title": "Puppy Parade",
+      "description": "Yay pups!",
+      "location": "Puptown ",
+      "date": "2019-02-02T23:27:00.000Z",
+      "time": "1:00",
+      "attendees": []
+    }
+  ]
+}

package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
+    "json-server": "^0.14.2",
     "lodash": "^4.17.11",
     "vue": "^2.6.6",
     "vue-router": "^3.0.1",

src/components/EventCard.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link
     class="event-link"
-    :to="{ name: 'event-show', params: { event_id: '1' } }"
+    :to="{ name: 'event-show', params: { id: event.id } }"
   >
     <div class="event-card -shadow">
       <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
@@ -13,25 +13,8 @@
 
 <script>
 export default {
-  data() {
-    return {
-      event: {
-        id: 1,
-        title: 'Beach Clean up',
-        date: 'Tues Aug 19, 2018',
-        time: '6:00',
-        attendees: [
-          {
-            id: 'abc123',
-            name: 'Adam Jahr'
-          },
-          {
-            id: 'abc122',
-            name: 'Drew Bednar'
-          }
-        ]
-      }
-    }
+  props: {
+    event: Object
   }
 }
 </script>

src/router.js

@@ -25,7 +25,7 @@ export default new Router({
       component: EventList
     },
     {
-      path: '/event/:event_id',
+      path: '/event/:id',
       name: 'event-show',
       component: EventShow,
       props: true

src/services/EventService.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'http://localhost:3000',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getEvents() {
+    return apiClient.get('/events')
+  },
+  getEvent(id) {
+    return apiClient.get('/events/' + id)
+  }
+}

src/views/EventList.vue

@@ -1,14 +1,30 @@
 <template>
   <div>
     <h1>Event Listing</h1>
-    <EventCard />
+    <EventCard v-for="event in events" :key="event.id" :event="event" />
   </div>
 </template>
 
 <script>
 import EventCard from '@/components/EventCard.vue'
+import EventService from '@/services/EventService'
 export default {
-  components: { EventCard } // This is shorthand for EventCard: EventCard
+  components: { EventCard }, // This is shorthand for EventCard: EventCard
+  data() {
+    return {
+      events: []
+    }
+  },
+  created() {
+    EventService.getEvents()
+      .then(response => {
+        // console.log(response.data)
+        this.events = response.data
+      })
+      .catch(error => {
+        console.log('An error was found: ' + error.status)
+      })
+  }
 }
 </script>
 

src/views/EventShow.vue

@@ -1,9 +1,74 @@
 <template>
-  <h1>Showing Event #{{ event_id }}</h1>
+  <div>
+    <div class="event-header">
+      <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
+      <h1 class="title">{{ event.title }}</h1>
+      <h5>Organized by {{ event.organizer }}</h5>
+      <h5>Category: {{ event.category }}</h5>
+    </div>
+    <BaseIcon name="map">
+      <h2>Location</h2>
+    </BaseIcon>
+    <address>{{ event.location }}</address>
+    <h2>Event details</h2>
+    <p>{{ event.description }}</p>
+    <h2>
+      Attendees
+      <span class="badge -fill-gradient">{{
+        event.attendees ? event.attendees.length : 0
+      }}</span>
+    </h2>
+    <ul class="list-group">
+      <li
+        v-for="(attendee, index) in event.attendees"
+        :key="index"
+        class="list-item"
+      >
+        <b>{{ attendee.name }}</b>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
+import EventService from '@/services/EventService'
 export default {
-  props: ['event_id']
+  props: ['id'],
+
+  data() {
+    return {
+      event: {}
+    }
+  },
+  created() {
+    EventService.getEvent(this.id)
+      .then(response => {
+        this.event = response.data
+      })
+      .catch(error => {
+        console.log('An error occured: ' + error.status)
+      })
+  }
 }
 </script>
+
+<style scoped>
+.location {
+  margin-bottom: 0;
+}
+.location > .icon {
+  margin-left: 10px;
+}
+.event-header > .title {
+  margin: 0;
+}
+.list-group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.list-group > .list-item {
+  padding: 1em 0;
+  border-bottom: solid 1px #e5e5e5;
+}
+</style>