WIP: GitHub page with Issues list

src/Github/components/ActionSelect.vue

@@ -0,0 +1,27 @@
+<template>
+  <widget>
+    <span slot="header">Action Select</span>
+    <div slot="body">
+      <ul>
+        <li v-for="action in actions">
+          <router-link class="click" :to="action">
+            {{action}}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </widget>
+</template>
+
+<script>
+  import Widget from '@/components/Widget';
+
+  export default {
+    props: [
+      'actions',
+    ],
+    components: {
+      Widget,
+    },
+  };
+</script>

src/Github/components/IssueSelect.vue

@@ -0,0 +1,29 @@
+<template>
+  <widget>
+    <span slot="header">Issue Select</span>
+    <div slot="body">
+      <ul>
+        <li v-for="issue in issues">
+            #{{ issue.number }}: {{ issue.title }}
+        </li>
+      </ul>
+    </div>
+  </widget>
+</template>
+
+<script>
+  import { mapState } from 'vuex';
+  import Widget from '@/components/Widget';
+
+  export default {
+    props: [
+      'issues',
+    ],
+    computed: {
+      ...mapState(['user']),
+    },
+    components: {
+      Widget,
+    },
+  };
+</script>

src/Github/components/Reader.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="root">
+    <header>
+      <div class="reader-nav">
+        <router-link to="cts">CTS API (Perseids)</router-link>
+        &bull;
+        <router-link to="cite-services">cite-services</router-link>
+        &bull;
+        <router-link to="morphgnt">MorphGNT API</router-link>
+      </div>
+      <h1>DeepReader (Github)</h1>
+    </header>
+    <div class="grid-wrapper">
+      <div class="left">
+        <action-select :actions="actions"></action-select>
+        <issue-select :issues="issues"></issue-select>
+      </div>
+
+      <div class="main">
+      </div>
+
+      <div class="right">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import ActionSelect from '@/Github/components/ActionSelect';
+import IssueSelect from '@/Github/components/IssueSelect';
+
+import Github from '@/Github';
+
+export default {
+  name: 'reader',
+  created() {
+    this.$store.commit('setReader', { issue: null });
+    this.fetchData();
+  },
+  data() {
+    return {
+      issues: [],
+      actions: ['Issues'],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {
+    $route: 'fetchData',
+  },
+  methods: {
+    fetchData() {
+      this.asyncData().then(({ issues }) => {
+        this.issues = issues;
+      });
+      // this.$log.log('fetchData() issues = ', issues);
+      // return issues;
+    },
+    async asyncData() {
+      const issues = await Github.issues();
+      return { issues };
+    },
+  },
+  components: {
+    ActionSelect,
+    IssueSelect,
+  },
+};
+</script>

src/Github/index.js

@@ -0,0 +1,14 @@
+import fetch from 'universal-fetch';
+
+export default {
+  apiRoot: 'https://api.github.com',
+  async resource(path) {
+    const resp = await fetch(`${this.apiRoot}${path}`);
+    return resp.json();
+  },
+  async issues() {
+    const url = '/repos/deep-reader/DeepReader/issues';
+    const resp = await this.resource(url);
+    return resp;
+  },
+};

src/router/index.js

@@ -4,6 +4,7 @@ import CTSReader from '@/cts/components/Reader';
 import MorphGNTReader from '@/morphgnt/components/Reader';
 import CiteServicesReader from '@/cite-services/components/Reader';
 import Homepage from '@/components/Homepage';
+import GithubReader from '@/Github/components/Reader';
 
 Vue.use(Router);
 
@@ -29,5 +30,10 @@ export default new Router({
       name: 'CiteServicesReader',
       component: CiteServicesReader,
     },
+    {
+      path: '/Github',
+      name: 'Github',
+      component: GithubReader,
+    },
   ],
 });