Add channel-creator

src/components/ChannelCreator.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="modalClasses">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Create Channel</p>
+        <button class="delete" aria-label="close" @click="close"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="field">
+          <label for="name" class="label">Name</label>
+          <div class="control"><input type="text" v-model="name" id="name" class="input"/></div>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="create">Add channel</button>
+        <button class="button" @click="close">Cancel</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "ChannelCreator",
+    props:['isOpen'],
+
+    data() {
+      return {
+        'name': ''
+      }
+    },
+
+
+    computed: {
+      modalClasses() {
+        return {'modal': true, 'is-active': this.isOpen}
+      }
+    },
+
+    methods: {
+      close() {
+        this.$store.dispatch('closeChannelCreator')
+        this.name = ''
+      },
+      create() {
+        this.$store.dispatch('createChannel', this.name)
+          .then(() => {
+            this.close()
+          })
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Channels.vue

@@ -3,13 +3,21 @@
     <div class="channels--channel" v-for="channel in channels" :key="channel.uid">
       <slot :channel="channel"></slot>
     </div>
+    <button class="button is-primary" @click="open">+ New Channel</button>
   </div>
 </template>
 
 <script>
+  import ChannelCreator from "./ChannelCreator";
   export default {
     name: "Channels",
-    props: ['className', 'channels']
+    components: {ChannelCreator},
+    props: ['className', 'channels'],
+    methods: {
+      open() {
+        this.$store.dispatch('openChannelCreator')
+      }
+    }
   }
 </script>
 

src/store.js

@@ -13,7 +13,8 @@ export default new Vuex.Store({
       debug: false,
       logged_in: false,
       micropubEndpoint: '',
-      microsubEndpoint: ''
+      microsubEndpoint: '',
+      channelCreatorIsOpen: false
     };
     let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     if (loginData) {
@@ -47,6 +48,9 @@ export default new Vuex.Store({
         items: [],
         paging: {}
       }
+    },
+    setChannelCreatorState(state, open) {
+      state.channelCreatorIsOpen = open
     }
   },
 
@@ -119,6 +123,23 @@ export default new Vuex.Store({
           'like-of': [url]
         }
       })
+    },
+    openChannelCreator({commit}) {
+      commit('setChannelCreatorState', true)
+    },
+    closeChannelCreator({commit}) {
+      commit('setChannelCreatorState', false)
+    },
+    createChannel(x, name) {
+      let url = this.state.microsubEndpoint + '?action=channels&name=' + encodeURIComponent(name)
+      return fetch(url, {
+        method: 'POST',
+        headers: {
+          'Authorization': 'Bearer ' + this.state.access_token
+        }
+      }).then(() => {
+        this.dispatch('fetchChannels')
+      })
     }
   }
 })

src/views/Home.vue

@@ -8,6 +8,8 @@
 
     <Timeline class="timeline" :timeline="this.$store.state.timeline" :channel="this.$store.state.channel"
               @getPage="getPage"></Timeline>
+
+    <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
   </div>
 </template>
 
@@ -16,13 +18,15 @@
   import Timeline from '@/components/Timeline.vue'
   import Channels from '@/components/Channels.vue'
   import Channel from '@/components/Channel.vue'
+  import ChannelCreator from '@/components/ChannelCreator.vue'
 
   export default {
     name: 'home',
     components: {
       Timeline,
       Channels,
-      Channel
+      Channel,
+      ChannelCreator
     },
 
     computed: {