From 6a4d1c3b2257cc144dcf3fa42ff1fc8813fd54db Mon Sep 17 00:00:00 2001
From: Fabian Stamm <dev@fabianstamm.de>
Date: Wed, 29 Jul 2020 20:47:36 +0200
Subject: [PATCH] Start of UI work

---
 registry/Dockerfile          |  2 +-
 registry/src/deps.ts         |  7 +++++++
 registry/src/http.ts         |  9 +++++++++
 registry/src/http/views.ts   | 16 ++++++++++++++++
 registry/src/renderer.tsx    | 37 ++++++++++++++++++++++++++++++++++++
 registry/src/types/jsx.d.ts  |  5 +++++
 registry/src/views/_base.tsx | 16 ++++++++++++++++
 registry/src/views/index.tsx | 33 ++++++++++++++++++++++++++++++++
 8 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 registry/src/http/views.ts
 create mode 100644 registry/src/renderer.tsx
 create mode 100644 registry/src/types/jsx.d.ts
 create mode 100644 registry/src/views/_base.tsx
 create mode 100644 registry/src/views/index.tsx

diff --git a/registry/Dockerfile b/registry/Dockerfile
index b17c172..da4ff70 100644
--- a/registry/Dockerfile
+++ b/registry/Dockerfile
@@ -29,5 +29,5 @@ ADD src /app/src
 
 RUN /usr/bin/deno cache --unstable src/registry.ts
 
-VOLUME [ "/data" ]
+VOLUME [ "/app/data" ]
 ENTRYPOINT [ "/usr/bin/deno", "run", "-A", "--unstable", "/app/src/registry.ts" ]
diff --git a/registry/src/deps.ts b/registry/src/deps.ts
index f630d34..972a98d 100644
--- a/registry/src/deps.ts
+++ b/registry/src/deps.ts
@@ -15,4 +15,11 @@ export * as Compress from "https://git.stamm.me/Deno/DenReg/raw/branch/master/ta
 
 import DS from "https://raw.githubusercontent.com/hibas123/dndb/master/mod.ts";
 
+/// <reference path="./types/jsx.d.ts" />
+export {
+   React,
+   jsx,
+   Fragment,
+} from "https://deno.hibas123.de/raw/@denreg-jsx/mod.ts";
+
 export const Datastore = DS;
diff --git a/registry/src/http.ts b/registry/src/http.ts
index e6b9023..5caa4e4 100644
--- a/registry/src/http.ts
+++ b/registry/src/http.ts
@@ -1,3 +1,4 @@
+/// <reference path="./types/jsx.d.ts" />
 import { ABC, CorsMW, LoggerMW } from "./deps.ts";
 import config from "./config.ts";
 
@@ -13,6 +14,14 @@ api(app.group("api"));
 import raw from "./http/raw.ts";
 raw(app.group("raw"));
 
+import view from "./http/views.ts";
+view(app.group("/"));
+
+import render from "./renderer.tsx";
+app.renderer = {
+   render: render,
+};
+
 app.start({ port });
 console.log("Running server at http://0.0.0.0:" + port);
 console.log("Open at http://127.0.0.1:" + port);
diff --git a/registry/src/http/views.ts b/registry/src/http/views.ts
new file mode 100644
index 0000000..45a2860
--- /dev/null
+++ b/registry/src/http/views.ts
@@ -0,0 +1,16 @@
+import { ABC } from "../deps.ts";
+import { basicauth } from "../utils.ts";
+
+export default function views(g: ABC.Group) {
+   g.get(
+      "/",
+      async (ctx) => {
+         return ctx.render("index");
+         // const render = await IndexView();
+         // console.log(render);
+         // ctx.response.body = render;
+         // ctx.response.status = 200;
+      },
+      basicauth("views")
+   );
+}
diff --git a/registry/src/renderer.tsx b/registry/src/renderer.tsx
new file mode 100644
index 0000000..190a714
--- /dev/null
+++ b/registry/src/renderer.tsx
@@ -0,0 +1,37 @@
+/// <reference path="./types/jsx.d.ts" />
+import { React, jsx } from "./deps.ts";
+
+class StringReader implements Deno.Reader {
+   private data: Uint8Array;
+   private offset = 0;
+   constructor(text: string) {
+      this.data = new TextEncoder().encode(text);
+   }
+
+   async read(p: Uint8Array): Promise<number | null> {
+      if (this.offset >= this.data.byteLength) return null;
+
+      const forLength = Math.min(p.length, this.data.length - this.offset);
+
+      for (let i = 0; i < forLength; i++) {
+         p[i] = this.data[i + this.offset];
+      }
+
+      this.offset += forLength;
+
+      return forLength;
+   }
+}
+
+export default async function render(
+   name: string,
+   data: any
+): Promise<Deno.Reader> {
+   const component: {
+      default: () => JSX.IntrinsicElements | Promise<JSX.IntrinsicElements>;
+   } = await import(`./views/${name}.tsx`);
+
+   const res = await (<component.default {...data} />).render();
+   console.log(res);
+   return new StringReader(res as string);
+}
diff --git a/registry/src/types/jsx.d.ts b/registry/src/types/jsx.d.ts
new file mode 100644
index 0000000..abc0e8b
--- /dev/null
+++ b/registry/src/types/jsx.d.ts
@@ -0,0 +1,5 @@
+declare namespace JSX {
+    interface IntrinsicElements {
+        [elemName: string]: any;
+    }
+}
\ No newline at end of file
diff --git a/registry/src/views/_base.tsx b/registry/src/views/_base.tsx
new file mode 100644
index 0000000..508c68c
--- /dev/null
+++ b/registry/src/views/_base.tsx
@@ -0,0 +1,16 @@
+/// <reference path="../types/jsx.d.ts" />
+import { React } from "../deps.ts";
+
+export default function Base(d: any, children: any[]) {
+   return (
+      <html>
+         <head>
+            <link
+               rel="stylesheet"
+               href="https://deno.hibas123.de/raw/@hibas123-theme@2.0.2/out/base.css"
+            />
+         </head>
+         <body class="light-theme">{children}</body>
+      </html>
+   );
+}
diff --git a/registry/src/views/index.tsx b/registry/src/views/index.tsx
new file mode 100644
index 0000000..3f632ac
--- /dev/null
+++ b/registry/src/views/index.tsx
@@ -0,0 +1,33 @@
+/// <reference path="../types/jsx.d.ts" />
+import { React, Fragment } from "../deps.ts";
+import Base from "./_base.tsx";
+import DB, { IPackage } from "../db.ts";
+
+function Package({ pkg }: { pkg: IPackage }) {
+   const { name, versions } = pkg;
+
+   return (
+      <div class="card elv-4">
+         <div style="font-weight: bold">{name}</div>
+         <ul class="list">
+            {versions.map((version) => (
+               <li>{version}</li>
+            ))}
+         </ul>
+      </div>
+   );
+}
+
+export default async function index() {
+   const packages = await DB.find({});
+
+   return (
+      <Base>
+         <div class="container">
+            {packages.map((pkg) => (
+               <Package pkg={pkg} />
+            ))}
+         </div>
+      </Base>
+   );
+}