Added basic API endpoint connection

.gitlab-ci.yml

@@ -5,6 +5,7 @@ pages: # the job must be named pages
   image: node:latest
   stage: deploy
   script:
+    - export URI=https://memory-api.herokuapp.com
     - npm ci
     - npm run build
     - mv public public-vue # GitLab Pages hooks on the public folder

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "bootstrap-vue": "^2.14.0",
     "core-js": "^3.6.5",
     "leaflet": "^1.6.0",

src/views/Home.vue

@@ -4,6 +4,16 @@
   <main role="main" class="flex-shrink-0">
     <div class="container">
       <Header/>
+      <section v-if="errored">
+        <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
+      </section>
+
+      <section v-else>
+        <div v-if="loading">Loading...</div>
+        <div v-else>
+          API says: {{ info }}
+        </div>
+      </section>
       <Map/>
       <LogEntryForm/>
     </div>
@@ -16,13 +26,34 @@
 import Header from '@/components/Header.vue'
 import Map from '@/components/Map.vue'
 import LogEntryForm from '@/components/LogEntryForm.vue'
+import axios from 'axios'
 
 export default {
   name: 'Home',
   components: {
     Header,
     Map,
     LogEntryForm
+  },
+  data () {
+    return {
+      info: null,
+      loading: true,
+      errored: false
+    }
+  },
+  mounted () {
+    const URI = process.env.URI || 'http://localhost:4000'
+    axios
+      .get(`${URI}/`)
+      .then(response => {
+        this.info = response.data.msg
+      })
+      .catch(error => {
+        console.log(error)
+        this.errored = true
+      })
+      .finally(() => { this.loading = false })
   }
 }
 </script>