fix error where id was being set same for all new volunteers; add lis…

…tVolunteers helper method; better documentation in component; and confirm / check the phx-update attribute support
floodfx · Feb 8, 2022 · 4ad1b6f · 4ad1b6f
1 parent 233d0bc
commit 4ad1b6f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ This is still in ⍺lpha territory.  You probably shouldn't put this into produc
 ### Implemented Phoenix Bindings
 (See [Phoenix Bindings Docs](https://hexdocs.pm/phoenix_live_view/bindings.html) for more details)
 
-| Binding         | Attribute            | Implemented |
+| Binding         | Attribute            | Supported   |
 |-----------------|----------------------|-------------|
 | Params          | `phx-value-*`        | [x]         |
 | Click Events    | `phx-click`          | [x]         |
@@ -39,7 +39,7 @@ This is still in ⍺lpha territory.  You probably shouldn't put this into produc
 | Key Events      | `phx-window-keydown` | [x]         |
 | Key Events      | `phx-window-keyup`   | [x]         |
 | Key Events      | `phx-key`            | [x]         |
-| DOM Patching    | `phx-update`         | [?]         |
+| DOM Patching    | `phx-update`         | [x]         |
 | DOM Patching    | `phx-remove`         | [?]         |
 | JS Interop      | `phx-hook`           | [x]         |
 | Rate Limiting   | `phx-debounce`       | [x]         |
@@ -48,9 +48,9 @@ This is still in ⍺lpha territory.  You probably shouldn't put this into produc
 
 Other features:
 * [Updating HTML Document Title](https://hexdocs.pm/phoenix_live_view/live-layouts.html#updating-the-html-document-title) - Not yet
-* [View Helpers](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html) - Not yet
+* [View Helpers](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html) - Some...
 * [LiveView Helpers](https://hexdocs.pm/phoenix_live_view/0.10.0/Phoenix.LiveView.Helpers.html) - Not yet
-* []
+* [Temporary Assigns](https://hexdocs.pm/phoenix_live_view/dom-patching.html#temporary-assigns) - Not yet
 
 ### Show me some code! ⌨️
 

diff --git a/src/examples/volunteers/component.ts b/src/examples/volunteers/component.ts
@@ -1,7 +1,7 @@
 import html from "../../server/templates";
 import { BaseLiveViewComponent, LiveViewChangeset, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket, StringPropertyValues } from "../../server/types";
 import { SessionData } from "express-session";
-import { Volunteer, changeset, create_volunteer } from "./data";
+import { Volunteer, changeset, create_volunteer, listVolunteers } 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";
@@ -16,7 +16,7 @@ export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext,
 
   mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<VolunteerContext>) {
     return {
-      volunteers: [],
+      volunteers: listVolunteers(),
       changeset: changeset({}, {})
     }
   };
@@ -65,25 +65,30 @@ export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext,
   }
 
   handleEvent(event: "save", params: StringPropertyValues<Pick<Volunteer, "name" | "phone">>, socket: LiveViewSocket<VolunteerContext>): VolunteerContext {
-    const { volunteers } = socket.context;
-    console.log("save", params);
     const volunteer: Partial<Volunteer> = {
       name: params.name,
       phone: params.phone,
     }
+    // attempt to create the volunteer from the form data
     const createChangeset = create_volunteer(volunteer);
+
+    // valid form data
     if (createChangeset.valid) {
       const newVolunteer = createChangeset.data as Volunteer;
-      const newVolunteers = [newVolunteer, ...volunteers];
-      const newChangeset = changeset({}, {});
+      // only add new volunteer since we're using phx-update="prepend"
+      // which means the new volunteer will be added to the top of the list
+      const newVolunteers = [newVolunteer];
+      const emptyChangeset = changeset({}, {}); // reset form
       return {
         volunteers: newVolunteers,
-        changeset: newChangeset
+        changeset: emptyChangeset
       }
-    } else {
+    }
+    // form data was invalid
+    else {
       return {
-        volunteers,
-        changeset: createChangeset
+        volunteers: [], // no volunteers to prepend
+        changeset: createChangeset // errors for form
       }
     }
   }

diff --git a/src/examples/volunteers/data.ts b/src/examples/volunteers/data.ts
@@ -8,7 +8,7 @@ const phoneRegex = /^\d{3}[\s-.]?\d{3}[\s-.]?\d{4}$/
 // Use Zod to define the schema for the Volunteer model
 // More on Zod - https://github.com/colinhacks/zod
 export const VolunteerSchema = z.object({
-  id: z.string().default(nanoid()),
+  id: z.string().default(nanoid),
   name: z.string().min(2).max(100),
   phone: z.string().regex(phoneRegex, 'Should be a valid phone number'),
   checked_out: z.boolean().default(false),
@@ -20,6 +20,10 @@ export type Volunteer = z.infer<typeof VolunteerSchema>;
 // in memory data store
 export const volunteers: Record<string, Volunteer> = {}
 
+export const listVolunteers = (): Volunteer[] => {
+  return Object.values(volunteers)
+}
+
 export const changeset = (volunteer: Partial<Volunteer>, attrs: Partial<Volunteer>, action?: string): LiveViewChangeset<Volunteer> => {
   const merged = { ...volunteer, ...attrs };
   const result = VolunteerSchema.safeParse(merged);