# Create your tokens at https://github.com/settings/tokens

## Public token to fetch repository on production
export GH_READONLY_TOKEN=

## Private token to edit repository on local. Don't use in public!!!
export GH_WRITE_TOKEN=

## Target repository
export GH_REPO_OWNER=
export GH_REPO_NAME=

import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

export default (ctx) => {
  const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' })

  // middleware
  const middlewareLink = new ApolloLink((operation, forward) => {
    const token = ctx.env.GH_READONLY_TOKEN

    operation.setContext({
      headers: { authorization: `Bearer ${token}` }
    })
    return forward(operation)
  })
  const link = middlewareLink.concat(httpLink)
  return {
    link,
    cache: new InMemoryCache()
  }
}

query getIssues(
  $repoOwner: String!
  $repoName: String!
  $fetchIssuePerPage: Int = 5
  $endCursor: String
) {
  repository(owner: $repoOwner, name: $repoName) {
    name
    description
    issues(
      orderBy: { field: CREATED_AT, direction: DESC }
      first: $fetchIssuePerPage
      after: $endCursor
    ) {
      totalCount
      pageInfo {
        startCursor
        endCursor
        hasPreviousPage
        hasNextPage
      }
      nodes {
        author {
          avatarUrl
          login
          resourcePath
          url
        }
        id
        number
        title
        body
        createdAt
        updatedAt
        url
      }
    }
  }
}

import getIssues from '~/apollo/queries/getIssues'

export const actions = {
  async nuxtServerInit({ commit, state }, { app, env }) {
    const { GH_REPO_OWNER: repoOwner, GH_REPO_NAME: repoName } = env

    commit('setRepoOwner', repoOwner)
    commit('setRepoName', repoName)

    try {
      const { data } = await app.apolloProvider.defaultClient.query({
        query: getIssues,
        variables: {
          repoOwner,
          repoName,
          fetchIssuePerPage: state.fetchIssuePerPage
        }
      })
      commit('setIssues', data.repository.issues)
    } catch (err) {
      console.error(err)
    }
  }
}

<template>
  <section class="container">
    <header>
      <h2>Issues</h2>
      <small>count: {{totalCount}}</small>
    </header>

    <entry-item
      v-for="post in nodes"
      :key="post.id"
      :post="post"
    />
    <no-ssr>
      <infinite-loading @infinite="loadMore" ref="infiniteLoading">
        <span slot="no-results">
          no more articles
        </span>
        <span slot="no-more">
          no more articles
        </span>
      </infinite-loading>
    </no-ssr>
    <div class="page">
      {{nodes.length}} / {{totalCount}}
    </div>
  </section>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import getIssues from '~/apollo/queries/getIssues'
import EntryItem from '~/components/EntryItem.vue'

export default {
  components: {
    EntryItem
  },
  computed: {
    ...mapState([
      'repoOwner',
      'repoName',
      'fetchIssuePerPage',
      'totalCount',
      'nodes',
      'pageInfo'
    ])
  },

        <div class="body" :class="{hasDiff}">
          <section>
            <vue-markdown
              class="marked"
              :source="previewBody"
              :anchorAttributes="{
                target: '_blank',
                rel: 'noopener'
              }"
            />
          </section>
          <transition name="fade">
          <div
            v-if="isEditing"
            class="editor"
            >
            <textarea
              v-model="editorBody"
              :disabled="isCommiting"
            />
          </div>
          </transition>

          <div class="edit-toggle" v-if="isDev">
            <button @click="toggleEdit">{{isEditing ? 'プレビュー' : '編集'}}</button>
          </div>
          <transition name="edit-action">
          <div class="edit-action" v-if="hasDiff">
            <button
              @click="discardEdit"
              :disabled="isCommiting"
              >変更を破棄</button>
              /
            <button
              @click="saveEdit"
              :disabled="isCommiting"
              >保存</button>
          </div>
          </transition>

        </div>