Handle repos not set up for keymap editor

2 files changed, 49 insertions, 4 deletions

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,