POST and GET data with axios

2021-03-17_http-01-starting-setup/package-lock.json

@@ -2460,6 +2460,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5510,8 +5518,7 @@
     "follow-redirects": {
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
+      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
-      "dev": true
     },
     "for-in": {
       "version": "1.0.2",

2021-03-17_http-01-starting-setup/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0"
   },

2021-03-17_http-01-starting-setup/src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <learning-survey @survey-submit="storeSurvey"></learning-survey>
+  <learning-survey></learning-survey>
-  <user-experiences :results="savedSurveyResults"></user-experiences>
+  <user-experiences></user-experiences>
 </template>
 
 <script>
@@ -10,24 +10,24 @@ import UserExperiences from './components/survey/UserExperiences.vue';
 export default {
   components: {
     LearningSurvey,
-    UserExperiences,
+    UserExperiences
-  },
+  }
-  data() {
+  //   data() {
-    return {
+  //     return {
-      savedSurveyResults: [],
+  //       savedSurveyResults: [],
-    };
+  //     };
-  },
+  //   },
-  methods: {
+  //   methods: {
-    storeSurvey(surveyData) {
+  //     storeSurvey(surveyData) {
-      const surveyResult = {
+  //       const surveyResult = {
-        name: surveyData.userName,
+  //         name: surveyData.userName,
-        rating: surveyData.rating,
+  //         rating: surveyData.rating,
-        id: new Date().toISOString(),
+  //         id: new Date().toISOString()
-      };
+  //       };
-      this.savedSurveyResults.push(surveyResult);
+  //       this.savedSurveyResults.push(surveyResult);
-      console.log(surveyResult);
+  //       console.log(surveyResult);
-    },
+  //     }
-  },
+  //   }
 };
 </script>
 
@@ -43,4 +43,4 @@ html {
 body {
   margin: 0;
 }
-</style>
+</style>

2021-03-17_http-01-starting-setup/src/components/survey/LearningSurvey.vue

@@ -9,7 +9,13 @@
         </div>
         <h3>My learning experience was ...</h3>
         <div class="form-control">
-          <input type="radio" id="rating-poor" value="poor" name="rating" v-model="chosenRating" />
+          <input
+            type="radio"
+            id="rating-poor"
+            value="poor"
+            name="rating"
+            v-model="chosenRating"
+          />
           <label for="rating-poor">Poor</label>
         </div>
         <div class="form-control">
@@ -23,12 +29,18 @@
           <label for="rating-average">Average</label>
         </div>
         <div class="form-control">
-          <input type="radio" id="rating-great" value="great" name="rating" v-model="chosenRating" />
+          <input
+            type="radio"
+            id="rating-great"
+            value="great"
+            name="rating"
+            v-model="chosenRating"
+          />
           <label for="rating-great">Great</label>
         </div>
-        <p
+        <p v-if="invalidInput">
-          v-if="invalidInput"
+          One or more input fields are invalid. Please check your provided data.
-        >One or more input fields are invalid. Please check your provided data.</p>
+        </p>
         <div>
           <base-button>Submit</base-button>
         </div>
@@ -38,12 +50,14 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   data() {
     return {
       enteredName: '',
       chosenRating: null,
-      invalidInput: false,
+      invalidInput: false
     };
   },
   emits: ['survey-submit'],
@@ -55,15 +69,20 @@ export default {
       }
       this.invalidInput = false;
 
-      this.$emit('survey-submit', {
+      axios.post(
-        userName: this.enteredName,
+        'https://vue-http-demo-8a928-default-rtdb.europe-west1.firebasedatabase.app/surveys.json',
-        rating: this.chosenRating,
+        { name: this.enteredName, rating: this.chosenRating }
-      });
+      );
+
+      //   this.$emit('survey-submit', {
+      //     userName: this.enteredName,
+      //     rating: this.chosenRating
+      //   });
 
       this.enteredName = '';
       this.chosenRating = null;
-    },
+    }
-  },
+  }
 };
 </script>
 
@@ -77,4 +96,4 @@ input[type='text'] {
   width: 20rem;
   margin-top: 0.5rem;
 }
-</style>
+</style>

2021-03-17_http-01-starting-setup/src/components/survey/UserExperiences.vue

@@ -3,7 +3,9 @@
     <base-card>
       <h2>Submitted Experiences</h2>
       <div>
-        <base-button>Load Submitted Experiences</base-button>
+        <base-button @click="loadExperiences"
+          >Load Submitted Experiences</base-button
+        >
       </div>
       <ul>
         <survey-result
@@ -18,13 +20,41 @@
 </template>
 
 <script>
+import axios from 'axios';
 import SurveyResult from './SurveyResult.vue';
 
 export default {
-  props: ['results'],
   components: {
-    SurveyResult,
+    SurveyResult
   },
+  data() {
+    return {
+      results: []
+    };
+  },
+  methods: {
+    loadExperiences() {
+      axios
+        .get(
+          'https://vue-http-demo-8a928-default-rtdb.europe-west1.firebasedatabase.app/surveys.json'
+        )
+        .then(response => {
+          const data = response.data;
+          const results = [];
+          for (const id in data) {
+            results.push({
+              id: id,
+              name: data[id].name,
+              rating: data[id].rating
+            });
+          }
+          this.results = results;
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  }
 };
 </script>
 
@@ -34,4 +64,4 @@ ul {
   margin: 0;
   padding: 0;
 }
-</style>
+</style>

2021-03-17_http-01-starting-setup/src/main.js

@@ -1,3 +1,5 @@
+'use strict';
+
 import { createApp } from 'vue';
 
 import BaseCard from './components/UI/BaseCard.vue';