From 56405d85e564f2c397dbc3424d6c40520234739d Mon Sep 17 00:00:00 2001
From: Nick Coutsos <nick@coutsos.com>
Date: Sun, 7 Nov 2021 11:49:33 -0500
Subject: Organize github-related components

---
 application/components/app.vue                     |   2 +-
 application/components/github-picker.vue           | 157 --------------------
 application/components/github/api.js               |  99 +++++++++++++
 application/components/github/invalid-repo.vue     |  59 ++++++++
 application/components/github/picker.vue           | 158 +++++++++++++++++++++
 application/components/github/storage.js           |  18 +++
 application/components/initialize.vue              |   2 +-
 application/components/keyboard-picker.vue         |   2 +-
 application/components/messages/invalid-repo.vue   |  59 --------
 application/components/messages/too-many-repos.vue |  37 -----
 application/github.js                              |  99 -------------
 11 files changed, 337 insertions(+), 355 deletions(-)
 delete mode 100644 application/components/github-picker.vue
 create mode 100644 application/components/github/api.js
 create mode 100644 application/components/github/invalid-repo.vue
 create mode 100644 application/components/github/picker.vue
 create mode 100644 application/components/github/storage.js
 delete mode 100644 application/components/messages/invalid-repo.vue
 delete mode 100644 application/components/messages/too-many-repos.vue
 delete mode 100644 application/github.js

diff --git a/application/components/app.vue b/application/components/app.vue
index e53345c..766f901 100644
--- a/application/components/app.vue
+++ b/application/components/app.vue
@@ -6,7 +6,7 @@ import KeyboardPicker from './keyboard-picker.vue'
 import Spinner from './spinner.vue'
 
 import * as config from '../config'
-import * as github from '../github'
+import * as github from './github/api'
 
 export default {
   components: {
diff --git a/application/components/github-picker.vue b/application/components/github-picker.vue
deleted file mode 100644
index e52fcce..0000000
--- a/application/components/github-picker.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <button v-if="!authorized()" @click="login">
-    <i class="fab fa-github" /> Login with GitHub
-  </button>
-  <span v-else>
-    <selector
-      id="repo"
-      label="Repository"
-      :choices="repositoryChoices"
-      v-model="repo"
-    />
-    
-    <spinner v-if="loadingBranches" />
-    <selector
-      v-else
-      v-model="branch"
-      id="branch"
-      label="Branch"
-      :choices="branchChoices"
-    />
-
-    <spinner v-if="loadingKeyboard" />
-
-    <invalid-repo
-      v-if="loadKeyboardError === 'InvalidRepoError'"
-      :otherRepoOrBranchAvailable="repositoryChoices.length > 0 || branchChoices.length > 0"
-      @dismiss="clearSelection"
-    />
-
-  </span>
-
-</template>
-
-<script>
-import find from 'lodash/find'
-import map from 'lodash/map'
-
-import * as github from '../github'
-import InvalidRepo from './messages/invalid-repo.vue'
-import Selector from './selector.vue'
-import Spinner from './spinner.vue'
-
-export default {
-  name: 'GithubPicker',
-  components: { InvalidRepo, Selector, Spinner },
-  emits: ['select'],
-  data() {
-    return {
-      repo: null,
-      branch: null,
-      branches: [],
-      loadingBranches: false,
-      loadingKeyboard: false,
-      loadKeyboardError: null
-    }
-  },
-  mounted() {
-    if (!this.authorized()) {
-      return
-    }
-
-    const selectedRepository = JSON.parse(localStorage.getItem('selectedGithubRepository'))
-
-    if (github.repositories.length === 1) {
-      this.repo = github.repositories[0].full_name
-      this.loadBranches()
-    } else if (selectedRepository && github.repositories.find(repo => repo.full_name === selectedRepository)) {
-      this.repo = selectedRepository
-      this.loadBranches()
-    }
-  },
-  watch: {
-    repo(current, previous) {
-      if (previous !== current) {
-        localStorage.setItem('selectedGithubRepository', JSON.stringify(current))
-        this.loadBranches()
-      }
-    },
-    branch(current, previous) {
-      if (current && previous !== current) {
-        localStorage.setItem('selectedGithubBranch', JSON.stringify(current))
-        this.loadKeyboard()
-      }
-    }
-  },
-  methods: {
-    authorized() {
-      return github.isGitHubAuthorized()
-    },
-    login() {
-      github.beginLoginFlow()
-    },
-    getRepositories() {
-      return github.repositories
-    },
-    async loadBranches() {
-      this.loadingBranches = true
-      this.branches = []
-
-      const repository = github.repositories.find(repo => repo.full_name === this.repo)
-      const branches = await github.fetchRepoBranches(repository)
-
-      this.loadingBranches = false
-      this.branches = branches
-
-      const available = map(branches, 'name')
-      const defaultBranch = repository.default_branch
-      const currentBranch = this.branch
-      const previousBranch = JSON.parse(localStorage.getItem('selectedGithubBranch'))
-      const onlyBranch = branches.length === 1 ? branches[0].name : null
-
-      for (let branch of [onlyBranch, currentBranch, previousBranch, defaultBranch]) {
-        if (available.includes(branch)) {
-          this.branch = branch
-          break
-        }
-      }
-    },
-    async loadKeyboard() {
-      const available = this.getRepositories()
-      const repository = find(available, { full_name: this.repo })?.full_name
-      const branch = this.branch
-
-      this.loadingKeyboard = true
-      this.loadKeyboardError = null
-
-      const response = await github.fetchLayoutAndKeymap(repository, branch)
-
-      this.loadingKeyboard = false
-      if (response.error) {
-        this.loadKeyboardError = response.error
-        return
-      }
-
-      this.$emit('select', { github: { repository, branch }, ...response })
-    },
-    clearSelection() {
-      this.branch = null
-      this.loadKeyboardError = null
-    }
-  },
-  computed: {
-    repositoryChoices() {
-      return this.getRepositories().map(repo => ({
-        id: repo.full_name,
-        name: repo.full_name
-      }))
-    },
-    branchChoices() {
-      return this.branches.map(branch => ({
-        id: branch.name,
-        name: branch.name
-      }))
-    }
-  }
-}
-</script>
diff --git a/application/components/github/api.js b/application/components/github/api.js
new file mode 100644
index 0000000..b2e29e9
--- /dev/null
+++ b/application/components/github/api.js
@@ -0,0 +1,99 @@
+import * as config from '../../config'
+
+let token
+export let installation
+export let repositories
+
+function request (...args) {
+  return fetch(...args).then(res => {
+    return res.status !== 401 ? res : (
+      console.error('Authentication failure. Retrying login'),
+      beginLoginFlow()
+    )
+  })
+}
+
+export async function init () {
+  const param = new URLSearchParams(location.search).get('token')
+  if (!localStorage.auth_token && param) {
+    history.replaceState({}, null, location.pathname)
+    localStorage.auth_token = param
+  }
+
+  if (localStorage.auth_token) {
+    token = localStorage.auth_token
+    const data = await request(`${config.apiBaseUrl}/github/installation`, {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    }).then(res => res.json())
+
+    if (!data.installation) {
+      console.log('no installation found for authenticated user')
+      location.href = `https://github.com/apps/${config.githubAppName}/installations/new`
+    }
+
+    installation = data.installation
+    repositories = data.repositories
+  }
+}
+
+export function beginLoginFlow () {
+  localStorage.removeItem('auth_token')
+  location.href = `${config.apiBaseUrl}/github/authorize`
+}
+
+export function isGitHubAuthorized() {
+  return !!token && installation && repositories && repositories.length
+}
+
+export async function fetchRepoBranches(repository) {
+  const response = await request(
+    `${config.apiBaseUrl}/github/installation/${encodeURIComponent(installation.id)}/${encodeURIComponent(repository.full_name)}/branches`,
+    { headers: { Authorization: `Bearer ${localStorage.auth_token}`} }
+  )
+
+  return response.json()
+}
+
+export async function fetchLayoutAndKeymap(repo, branch) {
+  const repository = repo
+  const url = new URL(`${config.apiBaseUrl}/github/keyboard-files/${encodeURIComponent(installation.id)}/${encodeURIComponent(repository)}`)
+
+  if (branch) {
+    url.search = new URLSearchParams({ branch }).toString()
+  }
+
+  const response = await request(url.toString(), {
+    headers: {
+      Authorization: `Bearer ${localStorage.auth_token}`
+    }
+  })
+
+  if (response.status === 400) {
+    console.error('Failed to load keymap and layout from github')
+    return response.json()
+  }
+  
+  const data = await response.json()
+  const defaultLayout = data.info.layouts.default || data.info.layouts[Object.keys(data.info.layouts)[0]]
+  return {
+    layout: defaultLayout.layout,
+    keymap: data.keymap
+  }
+}
+
+export function commitChanges(repo, branch, layout, keymap) {
+  const installationId = encodeURIComponent(installation.id)
+  const repository = encodeURIComponent(repo)
+  const url = `${config.apiBaseUrl}/github/keyboard-files/${installationId}/${repository}/${encodeURIComponent(branch)}`
+
+  return request(url, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ layout, keymap })
+  })
+}
diff --git a/application/components/github/invalid-repo.vue b/application/components/github/invalid-repo.vue
new file mode 100644
index 0000000..eee706f
--- /dev/null
+++ b/application/components/github/invalid-repo.vue
@@ -0,0 +1,59 @@
+<template>
+  <modal>
+    <div class="dialog">
+      <h2>Hold up a second!</h2>
+      <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p>
+      <p>
+        This app depends on some additional metadata to render the keymap.
+        For an example repository ready to use now or metadata you can apply
+        to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>.
+      </p>
+      <p v-if="otherRepoOrBranchAvailable">
+        If you have another branch or repository the the required metadata files
+        you may switch to them instead.
+      </p>
+      <p>
+        <button
+          class="dismiss"
+          @click="$emit('dismiss')"
+          v-text="dismissText"
+        />
+      </p>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Modal from '../modal.vue'
+
+export default {
+  name: 'InvalidRepo',
+  emits: ['dismiss'],
+  components: { Modal },
+  props: {
+    dismissText: {
+      type: String,
+      default: 'Ok'
+    },
+    otherRepoOrBranchAvailable: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog {
+  background-color: white;
+  padding: 20px 40px;
+  margin: 40px;
+  max-width: 500px;
+  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
+}
+
+.dismiss {
+  display: block;
+  margin: 0 auto;
+}
+</style>
diff --git a/application/components/github/picker.vue b/application/components/github/picker.vue
new file mode 100644
index 0000000..73520a1
--- /dev/null
+++ b/application/components/github/picker.vue
@@ -0,0 +1,158 @@
+<template>
+  <button v-if="!authorized()" @click="login">
+    <i class="fab fa-github" /> Login with GitHub
+  </button>
+  <span v-else>
+    <selector
+      id="repo"
+      label="Repository"
+      :choices="repositoryChoices"
+      v-model="repo"
+    />
+    
+    <spinner v-if="loadingBranches" />
+    <selector
+      v-else
+      v-model="branch"
+      id="branch"
+      label="Branch"
+      :choices="branchChoices"
+    />
+
+    <spinner v-if="loadingKeyboard" />
+
+    <invalid-repo
+      v-if="loadKeyboardError === 'InvalidRepoError'"
+      :otherRepoOrBranchAvailable="repositoryChoices.length > 0 || branchChoices.length > 0"
+      @dismiss="clearSelection"
+    />
+
+  </span>
+
+</template>
+
+<script>
+import find from 'lodash/find'
+import map from 'lodash/map'
+
+import * as github from './api'
+import * as storage from './storage'
+import InvalidRepo from './invalid-repo.vue'
+import Selector from '../selector.vue'
+import Spinner from '../spinner.vue'
+
+export default {
+  name: 'GithubPicker',
+  components: { InvalidRepo, Selector, Spinner },
+  emits: ['select'],
+  data() {
+    return {
+      repo: null,
+      branch: null,
+      branches: [],
+      loadingBranches: false,
+      loadingKeyboard: false,
+      loadKeyboardError: null
+    }
+  },
+  mounted() {
+    if (!this.authorized()) {
+      return
+    }
+
+    const selectedRepository = storage.getPersistedRepository()
+
+    if (github.repositories.length === 1) {
+      this.repo = github.repositories[0].full_name
+      this.loadBranches()
+    } else if (selectedRepository && github.repositories.find(repo => repo.full_name === selectedRepository)) {
+      this.repo = selectedRepository
+      this.loadBranches()
+    }
+  },
+  watch: {
+    repo(value) {
+      storage.setPersistedRepository(value)
+      if (value) {
+        this.loadBranches()
+      }
+    },
+    branch(value) {
+      storage.setPersistedBranch(value)
+      if (value) {
+        this.loadKeyboard()
+      }
+    }
+  },
+  methods: {
+    authorized() {
+      return github.isGitHubAuthorized()
+    },
+    login() {
+      github.beginLoginFlow()
+    },
+    getRepositories() {
+      return github.repositories
+    },
+    async loadBranches() {
+      this.loadingBranches = true
+      this.branches = []
+
+      const repository = github.repositories.find(repo => repo.full_name === this.repo)
+      const branches = await github.fetchRepoBranches(repository)
+
+      this.loadingBranches = false
+      this.branches = branches
+
+      const available = map(branches, 'name')
+      const defaultBranch = repository.default_branch
+      const currentBranch = this.branch
+      const previousBranch = storage.getPersistedBranch()
+      const onlyBranch = branches.length === 1 ? branches[0].name : null
+
+      for (let branch of [onlyBranch, currentBranch, previousBranch, defaultBranch]) {
+        if (available.includes(branch)) {
+          this.branch = branch
+          break
+        }
+      }
+    },
+    async loadKeyboard() {
+      const available = this.getRepositories()
+      const repository = find(available, { full_name: this.repo })?.full_name
+      const branch = this.branch
+
+      this.loadingKeyboard = true
+      this.loadKeyboardError = null
+
+      const response = await github.fetchLayoutAndKeymap(repository, branch)
+
+      this.loadingKeyboard = false
+      if (response.error) {
+        this.loadKeyboardError = response.error
+        return
+      }
+
+      this.$emit('select', { github: { repository, branch }, ...response })
+    },
+    clearSelection() {
+      this.branch = null
+      this.loadKeyboardError = null
+    }
+  },
+  computed: {
+    repositoryChoices() {
+      return this.getRepositories().map(repo => ({
+        id: repo.full_name,
+        name: repo.full_name
+      }))
+    },
+    branchChoices() {
+      return this.branches.map(branch => ({
+        id: branch.name,
+        name: branch.name
+      }))
+    }
+  }
+}
+</script>
diff --git a/application/components/github/storage.js b/application/components/github/storage.js
new file mode 100644
index 0000000..87603a0
--- /dev/null
+++ b/application/components/github/storage.js
@@ -0,0 +1,18 @@
+const REPOSITORY = 'selectedGithubRepository'
+const BRANCH = 'selectedGithubBranch'
+
+export function getPersistedRepository() {
+  return JSON.parse(localStorage.getItem(REPOSITORY))
+}
+
+export function setPersistedRepository(repository) {
+  localStorage.setItem(REPOSITORY, JSON.stringify(repository))
+}
+
+export function getPersistedBranch() {
+  return JSON.parse(localStorage.getItem(BRANCH))
+}
+
+export function setPersistedBranch(branch) {
+  localStorage.setItem(BRANCH, JSON.stringify(branch))
+}
diff --git a/application/components/initialize.vue b/application/components/initialize.vue
index c0146a4..0d5fc1f 100644
--- a/application/components/initialize.vue
+++ b/application/components/initialize.vue
@@ -1,7 +1,7 @@
 <script>
 import keyBy from 'lodash/keyBy'
 
-import * as github from '../github'
+import * as github from './github/api'
 
 import { healthcheck, loadBehaviours } from '../api'
 import { loadKeycodes } from '../keycodes'
diff --git a/application/components/keyboard-picker.vue b/application/components/keyboard-picker.vue
index 12008c2..c3b6383 100644
--- a/application/components/keyboard-picker.vue
+++ b/application/components/keyboard-picker.vue
@@ -21,7 +21,7 @@ import * as config from '../config'
 import { loadLayout } from '../layout.js'
 import { loadKeymap } from '../keymap.js'
 
-import GithubPicker from './github-picker.vue'
+import GithubPicker from './github/picker.vue'
 import Selector from './selector.vue'
 
 export default {
diff --git a/application/components/messages/invalid-repo.vue b/application/components/messages/invalid-repo.vue
deleted file mode 100644
index eee706f..0000000
--- a/application/components/messages/invalid-repo.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <modal>
-    <div class="dialog">
-      <h2>Hold up a second!</h2>
-      <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p>
-      <p>
-        This app depends on some additional metadata to render the keymap.
-        For an example repository ready to use now or metadata you can apply
-        to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>.
-      </p>
-      <p v-if="otherRepoOrBranchAvailable">
-        If you have another branch or repository the the required metadata files
-        you may switch to them instead.
-      </p>
-      <p>
-        <button
-          class="dismiss"
-          @click="$emit('dismiss')"
-          v-text="dismissText"
-        />
-      </p>
-    </div>
-  </modal>
-</template>
-
-<script>
-import Modal from '../modal.vue'
-
-export default {
-  name: 'InvalidRepo',
-  emits: ['dismiss'],
-  components: { Modal },
-  props: {
-    dismissText: {
-      type: String,
-      default: 'Ok'
-    },
-    otherRepoOrBranchAvailable: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.dialog {
-  background-color: white;
-  padding: 20px 40px;
-  margin: 40px;
-  max-width: 500px;
-  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
-}
-
-.dismiss {
-  display: block;
-  margin: 0 auto;
-}
-</style>
diff --git a/application/components/messages/too-many-repos.vue b/application/components/messages/too-many-repos.vue
deleted file mode 100644
index 086e471..0000000
--- a/application/components/messages/too-many-repos.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <modal>
-    <div class="dialog">
-      <h2>Hold up a second!</h2>
-      <p>The Keymap Editor app has been installed for more than one GitHub repository.</p>
-      <p>
-        I'm still working on things, including the ability to pick a specific
-        repo, but in the meantime you should go back to your <a :href="getInstallationUrl()">app configuration</a>
-        and select a single repository containing your keyboard's zmk-config.
-      </p>
-    </div>
-  </modal>
-</template>
-
-<script>
-import Modal from '../modal.vue'
-import * as github from '../../github'
-
-export default {
-  name: 'TooManyRepos',
-  components: { Modal },
-  methods: {
-    getInstallationUrl() {
-      return `https://github.com/settings/installations/${github.installation.id}`
-    }
-  }
-}
-</script>
-
-<style scoped>
-.dialog {
-  background-color: white;
-  padding: 40px;
-  margin: 40px;
-  max-width: 500px;
-}
-</style>
\ No newline at end of file
diff --git a/application/github.js b/application/github.js
deleted file mode 100644
index 0d0782c..0000000
--- a/application/github.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as config from './config'
-
-let token
-export let installation
-export let repositories
-
-function request (...args) {
-  return fetch(...args).then(res => {
-    return res.status !== 401 ? res : (
-      console.error('Authentication failure. Retrying login'),
-      beginLoginFlow()
-    )
-  })
-}
-
-export async function init () {
-  const param = new URLSearchParams(location.search).get('token')
-  if (!localStorage.auth_token && param) {
-    history.replaceState({}, null, location.pathname)
-    localStorage.auth_token = param
-  }
-
-  if (localStorage.auth_token) {
-    token = localStorage.auth_token
-    const data = await request(`${config.apiBaseUrl}/github/installation`, {
-      headers: {
-        Authorization: `Bearer ${token}`
-      }
-    }).then(res => res.json())
-
-    if (!data.installation) {
-      console.log('no installation found for authenticated user')
-      location.href = `https://github.com/apps/${config.githubAppName}/installations/new`
-    }
-
-    installation = data.installation
-    repositories = data.repositories
-  }
-}
-
-export function beginLoginFlow () {
-  localStorage.removeItem('auth_token')
-  location.href = `${config.apiBaseUrl}/github/authorize`
-}
-
-export function isGitHubAuthorized() {
-  return !!token && installation && repositories && repositories.length
-}
-
-export async function fetchRepoBranches(repository) {
-  const response = await request(
-    `${config.apiBaseUrl}/github/installation/${encodeURIComponent(installation.id)}/${encodeURIComponent(repository.full_name)}/branches`,
-    { headers: { Authorization: `Bearer ${localStorage.auth_token}`} }
-  )
-
-  return response.json()
-}
-
-export async function fetchLayoutAndKeymap(repo, branch) {
-  const repository = repo
-  const url = new URL(`${config.apiBaseUrl}/github/keyboard-files/${encodeURIComponent(installation.id)}/${encodeURIComponent(repository)}`)
-
-  if (branch) {
-    url.search = new URLSearchParams({ branch }).toString()
-  }
-
-  const response = await request(url.toString(), {
-    headers: {
-      Authorization: `Bearer ${localStorage.auth_token}`
-    }
-  })
-
-  if (response.status === 400) {
-    console.error('Failed to load keymap and layout from github')
-    return response.json()
-  }
-  
-  const data = await response.json()
-  const defaultLayout = data.info.layouts.default || data.info.layouts[Object.keys(data.info.layouts)[0]]
-  return {
-    layout: defaultLayout.layout,
-    keymap: data.keymap
-  }
-}
-
-export function commitChanges(repo, branch, layout, keymap) {
-  const installationId = encodeURIComponent(installation.id)
-  const repository = encodeURIComponent(repo)
-  const url = `${config.apiBaseUrl}/github/keyboard-files/${installationId}/${repository}/${encodeURIComponent(branch)}`
-
-  return request(url, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${token}`,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({ layout, keymap })
-  })
-}
-- 
cgit v1.2.3