git.r.bdr.sh - rbdr/dasein/blob - app/components/post_form.js

   1 import Axios from 'axios';
   2 import Vue from 'vue';
   3 import AuthService from '../services/auth';
   4
   5 const internals = {};
   6
   7 internals.kPostsRoute = '/api/posts';
   8
   9 export default internals.PostFormComponent = Vue.component('post-form', {
  10   template: '<div class="post-form-container">' +
  11       '<h1>sup.</h1>' +
  12       '<textarea :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
  13       '<p v-show="message" class="post-form-error">{{message}}</p>' +
  14       '<button :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
  15       '</div>',
  16
  17   data() {
  18
  19     return {
  20       content: '',
  21       message: '',
  22       submitting: false,
  23       authService: new AuthService()
  24     };
  25   },
  26
  27   methods: {
  28     submit() {
  29
  30       this.submitting = true;
  31
  32       return Axios({
  33         method: 'post',
  34         headers: {
  35           Authorization: `Bearer ${this.authService.token}`
  36         },
  37         data: {
  38           content: this.content
  39         },
  40         url: internals.kPostsRoute
  41       }).then((response) => {
  42
  43         this.$emit('post-submitted', response.data);
  44         this.content = '';
  45         this.message = '';
  46         this.submitting = false;
  47       }).catch((err) => {
  48
  49         console.error(err.stack);
  50         this.submitting = false;
  51         this.message = 'Error while creating the post...';
  52       });
  53     }
  54   }
  55 });
  56
  57