setup editor

Author: ste-xx

src/App.vue

@@ -1,45 +1,22 @@
 <template>
-  <div>
-    hello world
-  </div>
-  <button @click="login">login</button>
-  <button @click="listQuery">list</button>
+  <LoginScreen v-if="!accessToken" v-model:access-token="accessToken"/>
+  <WorkScreen v-else></WorkScreen>
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from 'vue';
-import {auth} from './auth';
-import listGql from './List.gql';
-import { graphql } from '@octokit/graphql';
+import {ref, watch} from 'vue';
+import {setAccessToken} from "@/useGraphQlClient";
 
-const accessToken = ref<string | null>(null);
+export {default as LoginScreen} from './LoginScreen.vue';
+export {default as WorkScreen} from './WorkScreen.vue';
 
-const graphQlClient = computed(() => {
-  const headers = accessToken.value ? {authorization: `token ${accessToken.value}`}: {};
-  alert(headers);
-  return graphql.defaults({
-    headers
-  });
-});
-
-export const login = async () => {
-  const {access_token} = await auth();
-  accessToken.value = access_token;
-  alert('logged in');
-};
-
-export const listQuery = async () => {
-  if(!graphQlClient.value){
-    return;
-  }
-  const result = await graphQlClient.value(listGql);
-  alert(JSON.stringify(result, null, 2));
-};
+export const accessToken = ref<string | null>(null);
+watch(() => accessToken.value, (accessToken) => setAccessToken(accessToken));
 
 </script>
 
-<style scoped>
-#app {
+<style>
+body {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/AutoLogin.vue

@@ -0,0 +1,22 @@
+<template>
+  <label>Auto login</label>
+  <input
+      v-model="autoLogin"
+      type="checkbox"
+      class="form-checkbox"
+  />
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from "vue";
+
+export const autoLogin =  ref<string | null>( window.localStorage.getItem('autoLogin'));
+
+watch(() => autoLogin.value, (autoLogin) => {
+  if(autoLogin){
+    window.localStorage.setItem('autoLogin', autoLogin.toString());
+  } else {
+    window.localStorage.removeItem('autoLogin');
+  }
+});
+</script>

src/LoginScreen.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <button @click="login">login</button>
+    <div>
+     You need to login to github, to use your gists with this dev tool.
+    </div>
+    <AutoLogin/>
+
+  </div>
+</template>
+
+<script setup="props, {emit}" lang="ts">
+export {default as AutoLogin} from './AutoLogin.vue';
+import {onMounted} from "vue";
+import {auth} from "@/auth";
+
+export const login = async () => {
+  const {access_token} = await auth();
+  emit('update:access-token', access_token);
+};
+
+onMounted(()=> {
+  if(window.localStorage.getItem('autoLogin') !== null){
+    login();
+  }
+});
+
+
+</script>

src/MonacoEditor.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="div"/>
+</template>
+
+<script setup="props, { emit }" lang="ts">
+import {onMounted, ref, watch} from "vue";
+import * as monaco from 'monaco-editor';
+
+declare const props: {
+  code: string;
+};
+
+export const div = ref<HTMLDivElement | null>(null);
+
+onMounted(() => {
+  if (!div.value) {
+    return;
+  }
+
+  const editor = monaco.editor.create(div.value, {
+    value: props.code,
+    language: 'javascript',
+    scrollBeyondLastLine: false,
+    automaticLayout: true
+  });
+
+  watch(() => props.code, () => {
+    if (editor.getValue() !== props.code) {
+      editor.setValue(props.code);
+    }
+  });
+  editor.onDidChangeModelContent(() => {
+    emit('update:code', editor.getValue() ?? '');
+  });
+});
+</script>

src/WorkScreen.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="grid app-grid-template h-screen">
+    <div style="grid-area: head; background-color: red">
+      <AutoLogin/>
+    </div>
+    <div style="grid-area: nav; background-color: green">
+      <button @click="listQuery">refresh</button>
+      <a v-for="entry in gistEntries" :key="entry.id" href="javascript:void(0)" @click="code = entry.code">
+        {{ entry.name }}
+      </a>
+    </div>
+    <div style="grid-area: main; background-color: yellow">
+      <MonacoEditor :code="code" style="height: calc(100% - 50px)"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {List} from "@/__gen_gql/List";
+import listGql from "@/List.gql";
+import {useGraphQlClient} from "@/useGraphQlClient";
+import {onMounted, ref} from "vue";
+export {default as AutoLogin} from './AutoLogin';
+export {default as MonacoEditor} from './MonacoEditor';
+
+const graphQlClient = useGraphQlClient();
+
+interface GistEntries {
+  id: string;
+  name: string;
+  code: string;
+}
+
+export const gistEntries = ref<GistEntries[]>([]);
+export const listQuery = async () => {
+  gistEntries.value = (await graphQlClient.value<List>(listGql)).viewer.gists.edges.map(({node}) => ({
+    id: node.name,
+    name: node.files[0].name,
+    code: node.files[0].text
+  }));
+};
+
+export const code = ref<string>("");
+
+onMounted(() => {
+  listQuery();
+});
+
+</script>
+
+<style scoped>
+.app-grid-template {
+  grid-template-areas:
+      "head head"
+      "nav main";
+  grid-template-rows: 70px 1fr;
+  grid-template-columns: 150px 1fr;
+}
+</style>
+

src/useGraphQlClient.ts

@@ -0,0 +1,15 @@
+import {graphql} from "@octokit/graphql";
+import {computed, ref, Ref} from "vue";
+
+const _accessToken = ref<string | null>(null);
+export const setAccessToken = (accessToken: string | null) => {
+  _accessToken.value = accessToken;
+};
+
+export const useGraphQlClient = (): Ref<typeof graphql> =>
+  computed(() => {
+    const headers = _accessToken.value ? {authorization: `token ${_accessToken.value}`} : {};
+    return graphql.defaults({
+      headers
+    });
+  });