Alerts

src/App.vue

@@ -9,9 +9,8 @@
         <i id="sub-identifi" class="fa fa-bell-o bell" aria-hidden="true"></i>
       </div>
     </div>
-    <div v-cloak>
-      <GamesList />
-    </div>
+    <Notification />
+    <GamesList />
   </div>
 </template>
 
@@ -35,6 +34,7 @@ body {
 
 <script>
 import GamesList from "./components/GamesList.vue";
+import Notification from "./components/Notification.vue";
 
 export default {
   name: "App",
@@ -45,7 +45,8 @@ export default {
     };
   },
   components: {
-    GamesList
+    GamesList,
+    Notification
   }
 };
 </script>

src/components/Notification.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="noAlert">
+    <div class="alert" :class="alert.color" role="alert">
+      {{ alert.text }}
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      noAlert: true,
+      alert: ""
+    };
+  },
+  created() {
+    this.getAlert();
+  },
+  methods: {
+    getAlert() {
+      this.noAlert = false;
+      axios.get("https://api.gabenparadise.com/api/alert").then(response => {
+        console.log(response);
+        if (response.status === 200) {
+          if (
+            response.data !== undefined ||
+            response.data !== null ||
+            response.data !== ""
+          ) {
+            this.alert = response.data;
+            this.noAlert = true;
+          }
+        }
+      });
+    }
+  }
+};
+</script>