Handle repos not set up for keymap editor

5 files changed, 73 insertions, 8 deletions

diff --git a/api/routes/github.js b/api/routes/github.js
index 19d87ad..9594b5c 100644
--- a/api/routes/github.js
+++ b/api/routes/github.js
@@ -10,7 +10,8 @@ const {
   fetchKeyboardFiles,
   createOauthFlowUrl,
   createOauthReturnUrl,
-  commitChanges
+  commitChanges,
+  InvalidRepoError,
 } = require('../services/github')
 const { parseKeymap } = require('../services/zmk/keymap')
 
@@ -88,6 +89,12 @@ const getKeyboardFiles = async (req, res, next) => {
     keyboardFiles.keymap = parseKeymap(keyboardFiles.keymap)
     res.json(keyboardFiles)
   } catch (err) {
+    if (err instanceof InvalidRepoError) {
+      return res.status(400).json({
+        error: 'InvalidRepoError'
+      })
+    }
+
     next(err)
   }
 }
diff --git a/api/services/github/files.js b/api/services/github/files.js
index 5f5837f..40bcb41 100644
--- a/api/services/github/files.js
+++ b/api/services/github/files.js
@@ -4,12 +4,22 @@ const zmk = require('../zmk')
 
 const MODE_FILE = '100644'
 
+class InvalidRepoError extends Error {}
+
 async function fetchKeyboardFiles (installationId, repository) {
   const { data: { token: installationToken } } = await auth.createInstallationToken(installationId)
-  const { data: info } = await fetchFile(installationToken, repository, 'config/info.json', true)
-  const { data: keymap } = await fetchFile(installationToken, repository, 'config/keymap.json', true)
+  try {
+    const { data: info } = await fetchFile(installationToken, repository, 'config/info.json', true)
+    const { data: keymap } = await fetchFile(installationToken, repository, 'config/keymap.json', true)
+
+    return { info, keymap }
+  } catch (err) {
+    if (err.response && err.response.status === 404) {
+      throw new InvalidRepoError()
+    }
 
-  return { info, keymap }
+    throw err
+  }
 }
 
 function fetchFile (installationToken, repository, path, raw = false) {
@@ -76,6 +86,7 @@ async function commitChanges (installationId, repository, layout, keymap) {
 }
 
 module.exports = {
+  InvalidRepoError,
   fetchKeyboardFiles,
   commitChanges
 }
diff --git a/api/services/github/index.js b/api/services/github/index.js
index 34a0654..8443dd7 100644
--- a/api/services/github/index.js
+++ b/api/services/github/index.js
@@ -13,6 +13,7 @@ const {
 } = require('./installations')
 
 const {
+  InvalidRepoError,
   fetchKeyboardFiles,
   commitChanges
 } = require('./files')
@@ -26,6 +27,7 @@ module.exports = {
   verifyUserToken,
   fetchInstallation,
   fetchInstallationRepos,
+  InvalidRepoError,
   fetchKeyboardFiles,
   commitChanges
 }
diff --git a/application/components/app.vue b/application/components/app.vue
index 80a14d4..6aed63d 100644
--- a/application/components/app.vue
+++ b/application/components/app.vue
@@ -36,6 +36,7 @@ export default {
       behaviours: [],
       indexedBehaviours: {},
       tooManyRepos: false,
+      loadKeyboardError: null,
       keymap: {},
       layout: [],
       layers: [],
@@ -57,7 +58,13 @@ export default {
       }
       const loadKeyboardData = async () => {
         if (config.enableGitHub && github.isGitHubAuthorized()) {
-          return github.fetchLayoutAndKeymap()
+          const response = await github.fetchLayoutAndKeymap()
+          if (response.error) {
+            this.loadKeyboardError = response.error
+            return { layout: [], keymap: { layers: [] } }
+          }
+
+          return response
         } else if (config.enableLocal) {
           const [layout, keymap] = await Promise.all([
             loadLayout(),
@@ -113,7 +120,6 @@ export default {
       })
     },
     getInstallationUrl() {
-      console.log(github.installation, github.repositories, github)
       return `https://github.com/settings/installations/${github.installation.id}`
     },
     async doReadyCheck() {
@@ -139,6 +145,19 @@ export default {
         </div>
       </modal>
     </div>
+    <div v-else-if="loadKeyboardError === 'InvalidRepoError'">
+      <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>
+        </div>
+      </modal>
+    </div>
     <template v-else>
       <keymap :layout="layout" :keymap="editingKeymap.keyboard ? editingKeymap : keymap" @update="handleUpdateKeymap" />
       <div id="actions">
@@ -164,6 +183,9 @@ export default {
         />
       </div>
     </template>
+    <a class="github-link" href="https://github.com/nickcoutsos/keymap-editor">
+      <i class="fab fa-github" />/nickcoutsos/keymap-editor
+    </a>
   </loader>
 </template>
 
@@ -192,4 +214,20 @@ button[disabled] {
   max-width: 500px;
 }
 
+.github-link {
+  display: inline-block;
+  position: absolute;
+  z-index: 100;
+  bottom: 5px;
+  left: 5px;
+  font-size: 110%;
+  font-style: italic;
+  background-color: white;
+  border-radius: 20px;
+  padding: 5px 10px;
+  text-decoration: none;
+
+  color: royalblue;
+}
+
 </style>
diff --git a/application/github.js b/application/github.js
index 5a06f54..08fd664 100644
--- a/application/github.js
+++ b/application/github.js
@@ -48,10 +48,17 @@ export function isGitHubAuthorized() {
 }
 
 export async function fetchLayoutAndKeymap() {
-  const data = await request(
+  const response = await request(
     `${config.apiBaseUrl}/github/keyboard-files/${encodeURIComponent(installation.id)}/${encodeURIComponent(repositories[0].full_name)}`,
     { headers: { Authorization: `Bearer ${localStorage.auth_token}`} }
-  ).then(res => res.json())
+  )
+
+  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,