single process working

floodfx · Mar 4, 2022 · 53117a8 · 53117a8
1 parent 4600f2b
commit 53117a8
Show file tree

Hide file tree

Showing 7 changed files with 321 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "phoenix": "^1.6.6",
     "phoenix_html": "^3.2.0",
     "phoenix_live_view": "^0.17.6",
+    "redis": "^4.0.4",
     "ws": "^8.4.2",
     "zod": "^3.11.6"
   },

diff --git a/src/examples/volunteers/component.ts b/src/examples/volunteers/component.ts
@@ -1,7 +1,7 @@
 import { html } from "../../server/templates";
-import { LiveViewChangeset, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket, StringPropertyValues } from "../../server/component/types";
+import { LiveViewChangeset, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewMountParams, LiveViewSocket, StringPropertyValues } from "../../server/component/types";
 import { SessionData } from "express-session";
-import { Volunteer, changeset, createVolunteer, listVolunteers, getVolunteer, updateVolunteer } from "./data";
+import { Volunteer, changeset, createVolunteer, listVolunteers, getVolunteer, updateVolunteer, VolunteerData, subscribe } from "./data";
 import { submit } from "../../server/templates/helpers/submit";
 import { form_for } from "../../server/templates/helpers/form_for";
 import { error_tag, telephone_input, text_input } from "../../server/templates/helpers/inputs";
@@ -14,10 +14,16 @@ export interface VolunteerContext {
 
 type VolunteerEvents = "save" | "validate" | "toggle-status";
 
-export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext, unknown>
-  implements LiveViewExternalEventListener<VolunteerContext, VolunteerEvents, Volunteer> {
+export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext, unknown> implements
+  LiveViewExternalEventListener<VolunteerContext, VolunteerEvents, Volunteer>,
+  LiveViewInternalEventListener<VolunteerContext, VolunteerData> {
+
 
   mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<VolunteerContext>) {
+    if (socket.connected) {
+      console.log("subscribing", socket.id);
+      subscribe(socket);
+    }
     return {
       volunteers: listVolunteers(),
       changeset: changeset({}, {})
@@ -29,44 +35,46 @@ export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext,
     return html`
     <h1>Volunteer Check-In</h1>
     <div id="checkin">
-
+    
       ${form_for<Volunteer>("#", {
-      phx_submit: "save",
-      phx_change: "validate"
-    })}
-
+        phx_submit: "save",
+        phx_change: "validate"
+        })}
+    
         <div class="field">
           ${text_input<Volunteer>(changeset, "name", { placeholder: "Name", autocomplete: "off", phx_debounce: 1000 })}
-          ${error_tag(changeset, "name")}
+            ${error_tag(changeset, "name")}
         </div>
-
+    
         <div class="field">
-          ${telephone_input<Volunteer>(changeset, "phone", { placeholder: "Phone", autocomplete: "off", phx_debounce: "blur" })}
-          ${error_tag(changeset, "phone")}
+          ${telephone_input<Volunteer>(changeset, "phone", {
+            placeholder: "Phone", autocomplete: "off", phx_debounce: "blur"
+            })}
+            ${error_tag(changeset, "phone")}
         </div>
         ${submit("Check In", { phx_disable_with: "Saving..." })}
-      </form>
-
-      <div id="volunteers" phx-update="prepend">
-        ${volunteers.map(this.renderVolunteer)}
-      </div>
+        </form>
+    
+        <div id="volunteers" phx-update="prepend">
+          ${volunteers.map(this.renderVolunteer)}
+        </div>
     </div>
     `
   };
 
   renderVolunteer(volunteer: Volunteer) {
     return html`
-    <div id="${volunteer.id}" class="volunteer ${volunteer.checked_out ? "out" : ""}">
+    <div id="${volunteer.id}" class="volunteer ${volunteer.checked_out ? " out" : "" }">
       <div class="name">
         ${volunteer.name}
       </div>
       <div class="phone">
         📞 ${volunteer.phone}
       </div>
       <div class="status">
-      <button phx-click="toggle-status" phx-value-id="${volunteer.id}" phx-disable-with="Saving...">
-        ${volunteer.checked_out ? "Check In" : "Check Out"}
-      </button>
+        <button phx-click="toggle-status" phx-value-id="${volunteer.id}" phx-disable-with="Saving...">
+          ${volunteer.checked_out ? "Check In" : "Check Out"}
+        </button>
       </div>
     </div>
     `
@@ -121,4 +129,12 @@ export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext,
     }
   }
 
+  handleInfo(event: VolunteerData, socket: LiveViewSocket<VolunteerContext>): VolunteerContext | Promise<VolunteerContext> {
+    console.log("received info", event);
+    return {
+      volunteers: listVolunteers(),
+      changeset: changeset({}, {})
+    }
+  }
+
 }