From da3c1b02b2f8f6fddf4a070b1443a60c65115d1c Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Wed, 2 Aug 2023 17:18:35 +0200
Subject: [PATCH] view: separate view logic from template code

moved code that creates the view dom elements into its own module.

deliberately not in ui.ts as view.ts is imported early and has
almost no dependecies except for nostr-tools and ./utils
---
 src/template.ts | 58 +++++++++++++++++++++++++++++++++++++++
 src/view.ts     | 72 +++++++------------------------------------------
 2 files changed, 68 insertions(+), 62 deletions(-)
 create mode 100644 src/template.ts

diff --git a/src/template.ts b/src/template.ts
new file mode 100644
index 0000000..3bcf9a9
--- /dev/null
+++ b/src/template.ts
@@ -0,0 +1,58 @@
+
+import {nip19} from 'nostr-tools';
+import {elem} from './utils/dom';
+
+export type DOMMap = {
+  [id: string]: HTMLElement
+};
+
+export type ViewTemplateOptions = {
+  type: 'feed'
+} | {
+  type: 'note';
+  id: string;
+} | {
+  type: 'profile';
+  id: string;
+} | {
+  type: 'event';
+  id: string;
+};
+
+export const renderViewTemplate = (options: ViewTemplateOptions) => {
+  const content = elem('div', {className: 'content'});
+  const dom: DOMMap = {};
+  switch (options.type) {
+    case 'profile':
+      const pubkey = options.id;
+      const detail = elem('p', {data: {'profileDetails': pubkey}});
+      dom[`detail-${pubkey}`] = detail;
+      const header = elem('header', {className: 'hero'}, [
+        elem('small', {}, nip19.npubEncode(pubkey)),
+        elem('h1', {}, pubkey),
+        detail,
+        elem('footer', {}, [
+          elem('span', {data:{following: pubkey}})
+        ])
+      ]);
+      dom[pubkey] = header;
+      content.append(header);
+      document.title = pubkey;
+      break;
+    case 'note':
+      break;
+    case 'feed':
+      break;
+    case 'event':
+      const id = options.id;
+      const eventHeader = elem('header', {className: 'hero'}, [
+        elem('h1', {}, id),
+      ]);
+      dom[id] = eventHeader;
+      content.append(eventHeader);
+      document.title = id;
+      break;
+  }
+  const view = elem('section', {className: 'view'}, [content]);
+  return {content, dom, view};
+};
\ No newline at end of file
diff --git a/src/view.ts b/src/view.ts
index 043004a..36a4237 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -1,26 +1,8 @@
-import {nip19} from 'nostr-tools';
-import {elem} from './utils/dom';
-
-type ViewOptions = {
-  type: 'feed'
-} | {
-  type: 'note';
-  id: string;
-} | {
-  type: 'profile';
-  id: string;
-} | {
-  type: 'event';
-  id: string;
-};
-
-type DOMMap = {
-  [id: string]: HTMLElement
-};
+import {DOMMap, renderViewTemplate, ViewTemplateOptions} from './template';
 
 type Container = {
   id: string;
-  options: ViewOptions,
+  options: ViewTemplateOptions,
   view: HTMLElement;
   content: HTMLDivElement;
   dom: DOMMap;
@@ -53,62 +35,28 @@ export const setViewElem = (id: string, node: HTMLElement) => {
 
 const mainContainer = document.querySelector('main') as HTMLElement;
 
-const renderView = (options: ViewOptions) => {
-  const content = elem('div', {className: 'content'});
-  const dom: DOMMap = {};
-  switch (options.type) {
-    case 'profile':
-      const pubkey = options.id;
-      const detail = elem('p', {data: {'profileDetails': pubkey}});
-      dom[`detail-${pubkey}`] = detail;
-      const header = elem('header', {className: 'hero'}, [
-        elem('small', {}, nip19.npubEncode(pubkey)),
-        elem('h1', {}, pubkey),
-        detail,
-        elem('footer', {}, [
-          elem('span', {data:{following: pubkey}})
-        ])
-      ]);
-      dom[pubkey] = header;
-      content.append(header);
-      document.title = pubkey;
-      break;
-    case 'note':
-      break;
-    case 'feed':
-      break;
-    case 'event':
-      const id = options.id;
-      const eventHeader = elem('header', {className: 'hero'}, [
-        elem('h1', {}, id),
-      ]);
-      dom[id] = eventHeader;
-      content.append(eventHeader);
-      document.title = id;
-      break;
-  }
-  const view = elem('section', {className: 'view'}, [content]);
-  return {content, dom, view};
-};
-
 const createContainer = (
   route: string,
-  options: ViewOptions,
+  options: ViewTemplateOptions,
 ) => {
-  const {content, dom, view} = renderView(options);
+  const {content, dom, view} = renderViewTemplate(options);
   const container = {id: route, options, view, content, dom};
   mainContainer.append(view);
   containers.push(container);
   return container;
 };
 
-type GetViewOptions = () => ViewOptions;
+type GetViewOptions = () => ViewTemplateOptions;
 
+/**
+ * get options for current view
+ * @returns {id: 'feed' | 'profile' | 'note' | 'event', id?: string}
+ */
 export const getViewOptions: GetViewOptions = () => containers[activeContainerIndex]?.options || {type: 'feed'};
 
 export const view = (
   route: string,
-  options: ViewOptions,
+  options: ViewTemplateOptions,
 ) => {
   const active = containers[activeContainerIndex];
   const nextContainer = containers.find(c => c.id === route) || createContainer(route, options);