From 94949aaa1a97655c66c0f0b774867285eb68692c Mon Sep 17 00:00:00 2001
From: Donnie Flood <donnie@floodfx.com>
Date: Sun, 30 Jan 2022 11:20:44 -0700
Subject: [PATCH] use typed session parameter on mount

---
 src/examples/autocomplete/component.ts   |  5 +++--
 src/examples/index.ts                    |  7 +++++++
 src/examples/license_liveview.ts         |  7 +++----
 src/examples/light_liveview.ts           | 16 +++++++---------
 src/examples/pagination/component.ts     |  5 +++--
 src/examples/sales_dashboard_liveview.ts |  5 +++--
 src/examples/sorting/component.ts        |  5 +++--
 7 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/examples/autocomplete/component.ts b/src/examples/autocomplete/component.ts
index ece52c9f..eaf1c17c 100644
--- a/src/examples/autocomplete/component.ts
+++ b/src/examples/autocomplete/component.ts
@@ -1,8 +1,9 @@
 import html from "../../server/templates";
-import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewSocket } from "../../server/types";
+import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewMountParams, LiveViewSocket } from "../../server/types";
 import { WebSocket } from "ws";
 import { searchByCity, searchByZip, Store } from "../live-search/data";
 import { suggest } from "./data";
+import { SessionData } from "express-session";
 
 export interface AutocompleteContext {
   zip: string;
@@ -19,7 +20,7 @@ export class AutocompleteLiveViewComponent extends BaseLiveViewComponent<Autocom
   LiveViewInternalEventListener<AutocompleteContext, { type: "run_city_search", city: string }>
 {
 
-  mount(params: any, session: any, socket: LiveViewSocket<AutocompleteContext>) {
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<AutocompleteContext>) {
     const zip = "";
     const city = "";
     const stores: Store[] = [];
diff --git a/src/examples/index.ts b/src/examples/index.ts
index f34bd2b9..22ecc15e 100644
--- a/src/examples/index.ts
+++ b/src/examples/index.ts
@@ -16,6 +16,7 @@ const lvServer = new LiveViewServer({
   // support different templates?
 });
 
+
 export const router: LiveViewRouter = {
   "/license": new LicenseLiveViewComponent(),
   '/sales-dashboard': new SalesDashboardLiveViewComponent(),
@@ -32,5 +33,11 @@ lvServer.registerLiveViewRoutes(router)
 // register single route
 lvServer.registerLiveViewRoute("/servers", new ServersLiveViewComponent())
 
+// add your own routes to the express app
+// lvServer.expressApp.get("/", (req, res) => {
+//   res.send("Hello World!");
+// }
+
 // start server
 lvServer.start();
+
diff --git a/src/examples/license_liveview.ts b/src/examples/license_liveview.ts
index 75b24f86..e6110117 100644
--- a/src/examples/license_liveview.ts
+++ b/src/examples/license_liveview.ts
@@ -1,5 +1,6 @@
+import { SessionData } from "express-session";
 import html from "../server/templates";
-import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewSocket } from "../server/types";
+import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket } from "../server/types";
 import { numberToCurrency } from "./utils";
 
 export interface LicenseContext {
@@ -11,8 +12,7 @@ export class LicenseLiveViewComponent extends BaseLiveViewComponent<LicenseConte
   LiveViewExternalEventListener<LicenseContext, "update", Pick<LicenseContext, "seats">>
 {
 
-  mount(params: any, session: any, socket: LiveViewSocket<LicenseContext>) {
-    // store this somewhere durable
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<LicenseContext>) {
     const seats = 2;
     const amount = calculateLicenseAmount(seats);
     return { seats, amount };
@@ -47,7 +47,6 @@ export class LicenseLiveViewComponent extends BaseLiveViewComponent<LicenseConte
   };
 
   handleEvent(event: "update", params: { seats: string }, socket: LiveViewSocket<LicenseContext>) {
-    // console.log("event:", event, params, socket);
     const seats = Number(params.seats || 2);
     const amount = calculateLicenseAmount(seats);
     return { seats, amount };
diff --git a/src/examples/light_liveview.ts b/src/examples/light_liveview.ts
index f09fb860..479ab708 100644
--- a/src/examples/light_liveview.ts
+++ b/src/examples/light_liveview.ts
@@ -1,5 +1,6 @@
+import { SessionData } from "express-session";
 import html from "../server/templates";
-import { BaseLiveViewComponent, LiveViewComponent, LiveViewExternalEventListener, LiveViewSocket } from "../server/types";
+import { BaseLiveViewComponent, LiveViewComponent, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket } from "../server/types";
 
 export interface LightContext {
   brightness: number;
@@ -9,22 +10,19 @@ export type LightEvent = "on" | "off" | "up" | "down";
 
 export class LightLiveViewComponent extends BaseLiveViewComponent<LightContext, never> implements
   LiveViewComponent<LightContext, never>,
-  LiveViewExternalEventListener<LightContext, "on", any>,
-  LiveViewExternalEventListener<LightContext, "off", any> {
+  LiveViewExternalEventListener<LightContext, LightEvent, never> {
 
 
-  mount(params: any, session: any, socket: LiveViewSocket<LightContext>) {
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<LightContext>) {
     return { brightness: 10 };
   };
 
   render(context: LightContext) {
     return html`
     <div id="light">
-      <h1>Front Porch Light</h1>
+      <h1>Front Porch Light </h1>
       <div class="meter">
-        <span style="width: ${context.brightness} %>%">
-          ${context.brightness}%
-        </span>
+        <div>${context.brightness}%</div><progress id="light_level" value="${context.brightness}" max="100"></progress>
       </div>
 
       <button phx-click="off">
@@ -46,7 +44,7 @@ export class LightLiveViewComponent extends BaseLiveViewComponent<LightContext,
     `
   };
 
-  handleEvent(event: LightEvent, params: any, socket: LiveViewSocket<LightContext>) {
+  handleEvent(event: LightEvent, params: never, socket: LiveViewSocket<LightContext>) {
     const ctx: LightContext = { brightness: socket.context.brightness };
     switch (event) {
       case 'off':
diff --git a/src/examples/pagination/component.ts b/src/examples/pagination/component.ts
index d994bebc..8ddab88a 100644
--- a/src/examples/pagination/component.ts
+++ b/src/examples/pagination/component.ts
@@ -1,8 +1,9 @@
 import { options_for_select } from "../../server/templates/helpers/options_for_select";
 import { live_patch } from "../../server/templates/helpers/live_patch";
 import html, { HtmlSafeString, join } from "../../server/templates";
-import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewSocket, StringPropertyValues } from "../../server/types";
+import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket, StringPropertyValues } from "../../server/types";
 import { almostExpired, Donation, listItems } from "./data";
+import { SessionData } from "express-session";
 
 interface Options {
   page: number;
@@ -16,7 +17,7 @@ export interface PaginateContext {
 
 export class PaginateLiveViewComponent extends BaseLiveViewComponent<PaginateContext, Options> implements LiveViewExternalEventListener<PaginateContext, "select-per-page", Pick<Options, "perPage">> {
 
-  mount(params: any, session: any, socket: LiveViewSocket<PaginateContext>) {
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<PaginateContext>) {
     const options = { page: 1, perPage: 10 }
     return {
       options: options,
diff --git a/src/examples/sales_dashboard_liveview.ts b/src/examples/sales_dashboard_liveview.ts
index 5d1e96c2..f77e1e73 100644
--- a/src/examples/sales_dashboard_liveview.ts
+++ b/src/examples/sales_dashboard_liveview.ts
@@ -1,5 +1,6 @@
+import { SessionData } from "express-session";
 import html from "../server/templates";
-import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewSocket } from "../server/types";
+import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewMountParams, LiveViewSocket } from "../server/types";
 import { numberToCurrency } from "./utils";
 
 // generate a random number between min and max
@@ -23,7 +24,7 @@ export class SalesDashboardLiveViewComponent extends BaseLiveViewComponent<Sales
   LiveViewInternalEventListener<SalesDashboardContext, "tick">
 {
 
-  mount(params: any, session: any, socket: LiveViewSocket<SalesDashboardContext>): SalesDashboardContext {
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<SalesDashboardContext>): SalesDashboardContext {
     if (socket.connected) {
       socket.repeat(() => {
         socket.sendInternal("tick");
diff --git a/src/examples/sorting/component.ts b/src/examples/sorting/component.ts
index a6bbbc15..7ba0eddb 100644
--- a/src/examples/sorting/component.ts
+++ b/src/examples/sorting/component.ts
@@ -1,8 +1,9 @@
 import { options_for_select } from "../../server/templates/helpers/options_for_select";
 import { live_patch } from "../../server/templates/helpers/live_patch";
 import html, { HtmlSafeString, join } from "../../server/templates";
-import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewSocket, StringPropertyValues } from "../../server/types";
+import { BaseLiveViewComponent, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket, StringPropertyValues } from "../../server/types";
 import { almostExpired, Donation, listItems, donations } from "./data";
+import { SessionData } from "express-session";
 
 export interface PaginateOptions {
   page: number;
@@ -23,7 +24,7 @@ export class SortLiveViewComponent extends BaseLiveViewComponent<SortContext, Pa
   LiveViewExternalEventListener<SortContext, "select-per-page", Pick<PaginateOptions & SortOptions, "perPage">>,
   LiveViewExternalEventListener<SortContext, "change-sort", Pick<PaginateOptions & SortOptions, "sort_by" | "sortOrder">> {
 
-  mount(params: any, session: any, socket: LiveViewSocket<SortContext>) {
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<SortContext>) {
     const paginateOptions: PaginateOptions = {
       page: 1,
       perPage: 10,