refs #355 Add tag search page and fetch initial timeline

src/renderer/components/TimelineSpace/Contents/Hashtag.vue

@@ -0,0 +1,54 @@
+<template>
+<div id="hashtag">
+  <div class="search-header" v-loading="false">
+    <el-form :ineline="true">
+      <input v-model="tag" placeholder="Tag name" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
+    </el-form>
+  </div>
+  <router-view></router-view>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'hashtag',
+  data () {
+    return {
+      tag: ''
+    }
+  },
+  methods: {
+    id () {
+      return this.$route.params.id
+    },
+    search () {
+      this.$router.push({ path: `/${this.id()}/hashtag/${this.tag}` })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#hashtag {
+  border-top: 1px solid var(--theme-border-color);
+
+  .search-header {
+    background-color: var(--theme-selected-background-color);
+    padding: 8px 12px;
+
+    .search-keyword {
+      width: 100%;
+      background-color: var(--theme-background-color);
+      border: none;
+      border-radius: 0 4px 4px 0;
+      color: var(--theme-primary-color);
+      line-height: 40px;
+      height: 40px;
+      padding: 0 15px;
+      outline: 0;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="tag">
+    <transition-group name="timeline" tag="div">
+      <div class="tag-timeline" v-for="message in timeline" v-bind:key="message.id">
+        <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Toot from '../Cards/Toot'
+
+export default {
+  name: 'tag',
+  components: { Toot },
+  computed: {
+    ...mapState({
+      timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline
+    })
+  },
+  mounted () {
+    this.load(this.$route.params.tag)
+  },
+  watch: {
+    '$route': function () {
+      this.load(this.$route.params.tag)
+    }
+  },
+  methods: {
+    load (tag) {
+      this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
+    },
+    updateToot (messag) {
+    },
+    deleteToot (message) {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
+<style src="@/assets/timeline-transition.scss"></style>

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -45,6 +45,12 @@ export default {
         case 'public':
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Public timeline')
           break
+        case 'hashtag-list':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Hashtag')
+          break
+        case 'tag':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$route.params.tag)
+          break
         case 'search':
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Search')
           break
@@ -52,6 +58,7 @@ export default {
           this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
           break
         default:
+          console.log(this.$route)
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Home')
           break
       }

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -48,6 +48,10 @@
         <icon name="globe"></icon>
         <span>Public timeline</span>
       </el-menu-item>
+      <el-menu-item :index="`/${id()}/hashtag/`">
+        <icon name="hashtag"></icon>
+        <span>Hashtag</span>
+      </el-menu-item>
       <el-menu-item :index="`/${id()}/search`">
         <icon name="search"></icon>
         <span>Search</span>

src/renderer/router/index.js

@@ -39,7 +39,7 @@ export default new Router({
       children: [
         {
           path: ':id/',
-          name: 'timeline-space/',
+          name: 'timeline-space',
           component: require('@/components/TimelineSpace').default,
           children: [
             {
@@ -67,6 +67,24 @@ export default new Router({
               name: 'public',
               component: require('@/components/TimelineSpace/Contents/Public').default
             },
+            {
+              path: 'hashtag/',
+              name: 'hashtag',
+              component: require('@/components/TimelineSpace/Contents/Hashtag').default,
+              children: [
+                {
+                  path: '',
+                  name: 'hashtag-list',
+                  component: require('@/components/TimelineSpace/Contents/Hashtag/List').default
+                },
+                {
+                  path: ':tag',
+                  name: 'tag',
+                  component: require('@/components/TimelineSpace/Contents/Hashtag/Tag').default,
+                  props: true
+                }
+              ]
+            },
             {
               path: 'search',
               name: 'search',

src/renderer/store/TimelineSpace/Contents.js

@@ -7,6 +7,7 @@ import Public from './Contents/Public'
 import Search from './Contents/Search'
 import Lists from './Contents/Lists'
 import Cards from './Contents/Cards'
+import Hashtag from './Contents/Hashtag'
 
 const Contents = {
   namespaced: true,
@@ -19,7 +20,8 @@ const Contents = {
     Public,
     Search,
     Lists,
-    Cards
+    Cards,
+    Hashtag
   }
 }
 

src/renderer/store/TimelineSpace/Contents/Hashtag.js

@@ -0,0 +1,12 @@
+import List from './Hashtag/List'
+import Tag from './Hashtag/Tag'
+
+const Hashtag = {
+  namespaced: true,
+  modules: {
+    List,
+    Tag
+  }
+}
+
+export default Hashtag

src/renderer/store/TimelineSpace/Contents/Hashtag/List.js

@@ -0,0 +1,5 @@
+const List = {
+  namespaced: true
+}
+
+export default List

src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.js

@@ -0,0 +1,32 @@
+import Mastodon from 'mastodon-api'
+
+const Tag = {
+  namespaced: true,
+  state: {
+    timeline: []
+  },
+  mutations: {
+    updateTimeline (state, timeline) {
+      state.timeline = timeline
+    }
+  },
+  actions: {
+    fetch ({ commit, rootState }, tag) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          }
+        )
+        client.get(`/timelines/tag/${tag}`, { limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateTimeline', data)
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default Tag