feat: add removeMember function

Author: DomeT99

src/components/button/button.tsx

@@ -7,11 +7,13 @@ export default component$(
     size = "regular",
     customClass = "",
     variant = "primary",
+    disabledBtn = false,
   }: {
     onClick$?: QRL<() => void>;
     size?: "regular" | "big";
     customClass?: string;
     variant?: "primary" | "secondary" | "danger";
+    disabledBtn?: boolean;
   }) => {
     const colors: Record<typeof variant, string> = {
       primary: "bg-blue-500 hover:bg-blue-700",
@@ -20,6 +22,7 @@ export default component$(
     };
     return (
       <button
+        disabled={disabledBtn}
         class={`bg-blue-500 hover:bg-blue-700 text-white font-bold ${
           size === "regular" ? "py-2 px-4" : "py-4 px-8"
         } rounded w-auto ${colors[variant]} ${customClass}`}

src/components/member-data/member-data.tsx

@@ -1,10 +1,18 @@
 import { $, component$, useComputed$ } from "@builder.io/qwik";
-import type { MemberDataStore } from "~/routes/start/[...id]";
+import type { MemberDataStore, BillStore } from "~/routes/start/[...id]";
 import Button from "../button/button";
 import { sum } from "~/utils/math";
 
 export default component$(
-  ({ store, number }: { store: MemberDataStore; number: number }) => {
+  ({
+    store,
+    billStore,
+    number,
+  }: {
+    store: MemberDataStore;
+    billStore: BillStore;
+    number: number;
+  }) => {
     const total = useComputed$(() =>
       sum(store.items.map(({ price }) => price)),
     );
@@ -52,6 +60,13 @@ export default component$(
             Total: {total}
           </div>
           <Button onClick$={$(() => store.add())}>Add item</Button>
+          <Button
+            disabledBtn={billStore.members.length < 3}
+            variant="danger"
+            onClick$={$(() => billStore.deleteMember(store.id!))}
+          >
+            Remove member
+          </Button>
         </div>
       </div>
     );

src/routes/start/[...id]/index.tsx

@@ -24,6 +24,7 @@ export type MemberDataStore = Member & {
 };
 
 const initialStore: () => MemberDataStore = () => ({
+  id: Math.random().toString(36).slice(2),
   items: [{ id: Math.random().toString(36).slice(2) }],
   add: $(function (this: MemberDataStore) {
     this.items = this.items.concat({
@@ -38,10 +39,11 @@ const initialStore: () => MemberDataStore = () => ({
   }),
 });
 
-type BillStore = {
+export type BillStore = {
   name: string;
   members: MemberDataStore[];
   clearAll: QRL<() => void>;
+  deleteMember: QRL<(id: string) => void>;
 };
 
 const BILL_NAME_DEFAULT = "Untitled Bill";
@@ -54,6 +56,11 @@ export default component$(() => {
     clearAll: $(function (this: BillStore) {
       this.members.forEach((member) => member.clear());
     }),
+    deleteMember: $(function (this: BillStore, id: string) {
+      this.members = this.members.filter(
+        (member: MemberDataStore) => member.id !== id,
+      );
+    }),
   });
   const nav = useNavigate();
   const isDirty = useSignal(true);
@@ -109,10 +116,21 @@ export default component$(() => {
     isDirty.value = false;
     transactions.value = await computeSplit(store.members);
 
+    nav(
+      `/start/?billName=${
+        searchParams.get("billName") || BILL_NAME_DEFAULT
+      }&memberCount=${
+        store.members.length ||
+        searchParams.get("memberCount") ||
+        MEMBER_COUNT_DEFAULT.toString()
+      }`,
+    );
+
     const { id } = await billsStore.save({
       id: params.id || undefined,
       name: store.name,
-      members: store.members.map(({ name, items }) => ({
+      members: store.members.map(({ id, name, items }) => ({
+        id,
         name,
         items,
       })),
@@ -122,7 +140,6 @@ export default component$(() => {
       id,
       name: store.name,
     });
-
     if (!params.id) {
       nav(`/start/${id}`);
     }
@@ -134,7 +151,12 @@ export default component$(() => {
       <div class="flex flex-col md:flex-row gap-8">
         <div class="flex flex-col gap-4 flex-1 items-center">
           {store.members.map((member, i) => (
-            <MemberData key={i} store={member} number={i + 1} />
+            <MemberData
+              billStore={store}
+              key={i}
+              store={member}
+              number={i + 1}
+            />
           ))}
         </div>
         <div class="flex-1 text-center ">

src/types.ts

@@ -6,6 +6,7 @@ export type Bill = {
 };
 
 export type Member = {
+  id: string;
   name?: string;
   items: BillItem[];
 };