Merge pull request #10 from ryosms/refactor-scripts

Refactor scripts

Author: ryosms

src/components/DiaryDetail.vue

@@ -4,15 +4,15 @@
       <md-card-content class="md-layout">
         <md-field class="md-layout-item md-size-75 md-small-size-100">
           <label>Title</label>
-          <md-input v-model="title"></md-input>
+          <md-input v-model="pixel.title"></md-input>
         </md-field>
         <md-field class="md-layout-item md-size-100">
           <label>Body</label>
-          <md-textarea v-model="body"></md-textarea>
+          <md-textarea v-model="pixel.body"></md-textarea>
         </md-field>
       </md-card-content>
       <md-card-actions>
-        <md-button class="md-accent" v-if="quantity" @click="showConfirm=true">Delete</md-button>
+        <md-button class="md-accent" v-if="pixel.quantity" @click="showConfirm=true">Delete</md-button>
         <md-button class="md-primary" :disabled="!canEdit" @click="saveDiary">Save</md-button>
       </md-card-actions>
     </md-card>
@@ -37,7 +37,7 @@
 <script>
   import Vue from 'vue';
   import {MdCard, MdField, MdButton, MdSnackbar, MdDialogConfirm} from 'vue-material/dist/components';
-  import axios from 'axios';
+  import {Pixela} from '@/pixela';
 
   Vue.use(MdCard);
   Vue.use(MdField);
@@ -59,19 +59,22 @@
           return !this.hasError;
         },
         set(ignore) {
-          // unnecessary setter
+          // setter is unnecessary, but add to calm down linter
         },
       },
     },
     data: () => ({
-      quantity: '',
-      title: '',
-      body: '',
+      pixel: {quantity: '', title: '', body: ''},
       hasError: false,
       showErrorMessage: false,
       showCompleteMessage: false,
       showConfirm: false,
+      pixela: null,
     }),
+    created() {
+      this.pixela = new Pixela(this.username, this.token);
+      this.loadDiary();
+    },
     methods: {
       isDateChanged(newDate, oldDate) {
         if (!oldDate) {
@@ -81,80 +84,34 @@
           && newDate.getMonth() === oldDate.getMonth()
           && newDate.getDate() === oldDate.getDate());
       },
-      formatDiaryDate(diaryDate) {
-        return diaryDate.getFullYear()
-          + ('0' + (diaryDate.getMonth() + 1)).slice(-2)
-          + ('0' + diaryDate.getDate()).slice(-2);
-      },
-      loadDiary() {
-        const self = this;
-        const url = 'https://pixe.la/v1/users/' + this.username
-          + '/graphs/' + this.graphId + '/' + this.formatDiaryDate(this.diaryDate);
-        const headers = {
-          'X-USER-TOKEN': this.token,
-          'accept': 'application/json',
-        };
-        axios.get(url, {headers})
-          .then((response) => {
-            self.hasError = false;
-            self.quantity = response.data.quantity;
-            self.parseOptionalData(response.data.optionalData);
-          })
-          .catch((error) => {
-            // FIXME: in case of 404, pixela don't return CORS headers.
-            // self.hasError = (!error.response || error.response.status !== 404);
-            self.quantity = '';
-            self.title = '';
-            self.body = '';
-          });
-      },
-      parseOptionalData(optionalData) {
-        try {
-          const json = JSON.parse(optionalData);
-          this.title = json.title;
-          this.body = json.body;
-        } catch (ignore) {
-          this.title = '';
-          this.body = '';
+      async loadDiary() {
+        this.pixel = {quantity: '', title: '', body: ''};
+        const res = await this.pixela.loadPixel(this.graphId, this.diaryDate);
+        // FIXME: in case of 404, pixela don't return CORS headers.
+        // this.hasError = !res;
+        if (!!res) {
+          this.pixel = res;
         }
       },
-      saveDiary() {
-        const diary = this.quantity ? this.quantity : '1';
-        const optionalData = {title: this.title, body: this.body};
-        const url = 'https://pixe.la/v1/users/' + this.username
-          + '/graphs/' + this.graphId + '/' + this.formatDiaryDate(this.diaryDate);
-        const headers = {
-          'X-USER-TOKEN': this.token,
-        };
-        axios.put(url, {quantity: diary, optionalData: JSON.stringify(optionalData)}, {headers})
-          .then((ignore) => {
-            this.quantity = diary;
-            this.showCompleteMessage = true;
-          })
-          .catch((ignore) => {
-            this.showErrorMessage = true;
-          });
+      async saveDiary() {
+        const res = await this.pixela.postPixel(this.graphId, this.diaryDate, this.pixel);
+        if (!res) {
+          this.showErrorMessage = true;
+        } else {
+          this.pixel = res;
+          this.showCompleteMessage = true;
+        }
       },
-      deleteDiary() {
-        const url = 'https://pixe.la/v1/users/' + this.username
-          + '/graphs/' + this.graphId + '/' + this.formatDiaryDate(this.diaryDate);
-        const headers = {
-          'X-USER-TOKEN': this.token,
-        };
-        axios.delete(url, {headers}).then((ignore) => {
-          this.quantity = '';
-          this.title = '';
-          this.body = '';
+      async deleteDiary() {
+        const res = await this.pixela.deletePixel(this.graphId, this.diaryDate);
+        if (res) {
+          this.pixel = {quantity: '', title: '', body: ''};
           this.showCompleteMessage = true;
-        })
-          .catch((ignore) => {
-            this.showErrorMessage = true;
-          });
+        } else {
+          this.showErrorMessage = true;
+        }
       },
     },
-    created() {
-      this.loadDiary();
-    },
     watch: {
       diaryDate(newDate, oldDate) {
         if (!newDate) {

src/components/PixelaGraph.vue

@@ -4,7 +4,7 @@
 
     <md-dialog :md-active.sync="showDialog">
       <md-dialog-title>Select date</md-dialog-title>
-      <md-dialog-content class="md-layout">
+      <md-dialog-content v-if="!!svg" class="md-layout">
         <div v-html="svg" class="md-layout-item md-size-100" style="width: 300px; max-width: 300px;"></div>
         <MdButton class="md-layout-item md-primary" @click="changeGraphDate(-30)">
           <md-icon class="md-size-2x">replay_30</md-icon>
@@ -24,15 +24,15 @@
 <script>
   import Vue from 'vue';
   import {MdButton, MdDialog} from 'vue-material/dist/components';
-  import axios from 'axios';
   import tippy from 'tippy.js';
   import 'tippy.js/dist/tippy.css';
+  import {Pixela} from '@/pixela';
 
   Vue.use(MdButton);
   Vue.use(MdDialog);
 
   export default {
-    name: "PixelaGraph",
+    name: 'PixelaGraph',
     props: {
       diaryDate: Date,
       username: String,
@@ -41,14 +41,18 @@
     computed: {
       canSelect() {
         return !this.selectedDate;
-      }
+      },
     },
     data: () => ({
       selectedDate: null,
       graphDate: new Date(),
       svg: '',
       showDialog: false,
+      pixela: null,
     }),
+    created() {
+      this.pixela = new Pixela(this.username, null);
+    },
     methods: {
       show() {
         this.selectedDate = null;
@@ -57,29 +61,19 @@
         this.loadSvg();
       },
       loadSvg() {
-        const targetDate = this.graphDate.getFullYear()
-          + ('0' + (this.graphDate.getMonth() + 1)).slice(-2)
-          + ('0' + this.graphDate.getDate()).slice(-2);
-        const url = `https://pixe.la/v1/users/${this.username}/graphs/${this.graphId}`;
-        const params = {
-          'date': targetDate,
-          'mode': 'short',
-        };
-        axios.get(url, {params}).then((response) => {
-          this.svg = response.data;
-        }).then((ignore) => {
-          this.setPixelEvent();
+        this.pixela.loadGraphSvg(this.graphId, this.graphDate).then((svg) => {
+          this.svg = svg;
+        }).then(() => {
+          if (!!this.svg) {
+            this.setPixelEvent();
+          }
         });
       },
       setPixelEvent() {
-        const self = this;
         const pixels = document.querySelectorAll('.each-day');
         tippy(pixels);
-        for (let i = 0; i < pixels.length; i++) {
-          const pixel = pixels[i];
-          pixel.addEventListener('click', function() {
-            self.pixelClicked(this);
-          });
+        for (const pixel of pixels) {
+          pixel.addEventListener('click', (event) => this.pixelClicked(event.target));
         }
       },
       pixelClicked(pixel) {
@@ -89,8 +83,8 @@
       },
       clearActiveClass() {
         const pixels = document.querySelectorAll('.each-day.active');
-        for (let i = 0; i < pixels.length; i++) {
-          pixels[i].classList.remove('active');
+        for (const pixel of pixels) {
+          pixel.classList.remove('active');
         }
       },
       changeGraphDate(days) {

src/components/UserToken.vue

@@ -27,7 +27,7 @@
 <script>
   import Vue from 'vue';
   import {MdField, MdButton, MdSnackbar, MdProgress, MdCard} from 'vue-material/dist/components';
-  import axios from 'axios';
+  import {Pixela} from '@/pixela';
 
   Vue.use(MdField);
   Vue.use(MdButton);
@@ -40,6 +40,7 @@
     data: () => ({
       hasError: false,
       isLoading: false,
+      pixela: new Pixela(),
     }),
     computed: {
       username: {
@@ -62,21 +63,15 @@
     methods: {
       async authentication() {
         this.isLoading = true;
-        try {
-          const res = await axios.get('https://pixe.la/v1/users/' + this.$store.state.username + '/graphs',
-            {headers: {'X-USER-TOKEN': this.$store.state.token}});
-          this.$store.commit('setGraphs', res.data.graphs);
-          this.hasError = false;
+        const pixela = new Pixela(this.username, this.token);
+        const graphs = await pixela.loadGraphs();
+        this.hasError = !graphs;
+        this.isLoading = false;
+        if (!this.hasError) {
+          this.$store.commit('setGraphs', graphs);
           this.$router.push('/graphs');
-        } catch (e) {
-          this.hasError = true;
-        } finally {
-          this.isLoading = false;
         }
       },
     },
   };
 </script>
-
-<style scoped>
-</style>