With auth

type-script-helper/webviews/components/Entries.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { User } from "../types";
+  import type { Entry } from "../types";
+
+  export let user: User;
+  export let accessToken: string;
+  let text = "";
+  let entries: Array<Entry> = [];
+
+  async function addEntry(t: string) {
+    const response = await fetch(`${apiBaseUrl}/entry`, {
+      method: "POST",
+      body: JSON.stringify({
+        text: t,
+      }),
+      headers: {
+        "content-type": "application/json",
+        authorization: `Bearer ${accessToken}`,
+      },
+    });
+    const { entry } = await response.json();
+    entries = [entry, ...entries];
+  }
+
+  onMount(async () => {
+    window.addEventListener("message", async (event) => {
+      const message = event.data;
+      switch (message.type) {
+        case "new-entry":
+          addEntry(message.value);
+          break;
+      }
+    });
+
+    const response = await fetch(`${apiBaseUrl}/entry`, {
+      headers: {
+        authorization: `Bearer ${accessToken}`,
+      },
+    });
+    const payload = await response.json();
+    entries = payload.entries;
+  });
+</script>
+
+<div>Hello: {user.name}</div>
+
+<form
+  on:submit|preventDefault={async () => {
+    addEntry(text);
+    text = "";
+  }}
+>
+  <input bind:value={text} />
+</form>
+
+<ul>
+  {#each entries as entry (entry.id)}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore missing-declaration -->
+    <li
+      class:complete={entry.completed}
+      on:click={async () => {
+        entry.completed = !entry.completed;
+        const response = await fetch(`${apiBaseUrl}/entry`, {
+          method: "PUT",
+          body: JSON.stringify({
+            id: entry.id,
+          }),
+          headers: {
+            "content-type": "application/json",
+            authorization: `Bearer ${accessToken}`,
+          },
+        });
+        console.log(await response.json());
+      }}
+    >
+      {entry.text}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .complete {
+    text-decoration: line-through;
+  }
+</style>

type-script-helper/webviews/components/Sidebar.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { User } from "../types";
+  import Entries from "./Entries.svelte";
+
+  let accessToken = "";
+  let loading = true;
+  let user: User | null = null;
+  let page: "entries" | "contact" =
+    acquiredVsCodeApi.getState()?.page || "entries";
+
+  $: {
+    acquiredVsCodeApi.setState({ page });
+  }
+
+  onMount(async () => {
+    window.addEventListener("message", async (event) => {
+      const message = event.data;
+      switch (message.type) {
+        case "token":
+          accessToken = message.value;
+          const response = await fetch(`${apiBaseUrl}/me`, {
+            headers: {
+              authorization: `Bearer ${accessToken}`,
+            },
+          });
+          const data = await response.json();
+          user = data.user;
+          loading = false;
+      }
+    });
+
+    acquiredVsCodeApi.postMessage({ type: "get-token", value: undefined });
+  });
+</script>
+
+{#if loading}
+  <div>loading...</div>
+{:else if user}
+  {#if page === "entries"}
+    <Entries {user} {accessToken} />
+    <button
+      on:click={() => {
+        page = "contact";
+      }}>go to contact</button
+    >
+  {:else}
+    <div>Contact me here: adlkfjjqioefeqio</div>
+    <button
+      on:click={() => {
+        page = "entries";
+      }}>go back</button
+    >
+  {/if}
+  <!-- svelte-ignore missing-declaration -->
+  <button
+    on:click={() => {
+      accessToken = "";
+      user = null;
+      acquiredVsCodeApi.postMessage({ type: "logout", value: undefined });
+    }}>logout</button
+  >
+{:else}
+  <!-- svelte-ignore missing-declaration -->
+  <button
+    on:click={() => {
+      acquiredVsCodeApi.postMessage({ type: "authenticate", value: undefined });
+    }}>login with GitHub</button
+  >
+{/if}

type-script-helper/webviews/components/WebView.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>WebView 2023-09-23-15-20</h1>

type-script-helper/webviews/globals.d.ts

@@ -0,0 +1,10 @@
+import * as _vscode from "vscode";
+
+declare global {
+  const acquiredVsCodeApi: {
+    postMessage: ({ type: string, value: any }) => void;
+    getState: () => any;
+    setState: (state: any) => void;
+  };
+  const apiBaseUrl: string;
+}

type-script-helper/webviews/pages/sidebar.ts

@@ -0,0 +1,7 @@
+import App from "../components/Sidebar.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

type-script-helper/webviews/pages/webView.ts

@@ -0,0 +1,7 @@
+import App from "../components/WebView.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

type-script-helper/webviews/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "ignoreDeprecations": "5.0",
+    "strict": true
+  },
+  "exclude": [
+    "../node_modules/*"
+  ],
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": [
+    "./**/*"
+  ]
+}

type-script-helper/webviews/types.ts

@@ -0,0 +1,11 @@
+export type User = {
+  id: string;
+  name: string;
+  githubId: string;
+};
+
+export type Entry = {
+  text: string;
+  completed: boolean;
+  id: number;
+};