fix: resolved comment from PR 32 (issue: Add/remove members #2)

Author: DomeT99

src/components/button/button.tsx

@@ -16,14 +16,18 @@ export default component$(
     disabledBtn?: boolean;
   }) => {
     const colors: Record<typeof variant, string> = {
-      primary: "bg-blue-500 hover:bg-blue-700",
-      secondary: "bg-green-500 hover:bg-green-700",
-      danger: "bg-red-500 hover:bg-red-700",
+      primary: `bg-blue-500 ${
+        disabledBtn ? "opacity-50" : "hover:bg-blue-700"
+      }`,
+      secondary: `bg-green-500 ${
+        disabledBtn ? "opacity-50" : "hover:bg-green-700"
+      }`,
+      danger: `bg-red-500 ${disabledBtn ? "opacity-50" : " hover:bg-red-700"}`,
     };
     return (
       <button
         disabled={disabledBtn}
-        class={`bg-blue-500 hover:bg-blue-700 text-white font-bold ${
+        class={`bg-blue-500  text-white font-bold ${
           size === "regular" ? "py-2 px-4" : "py-4 px-8"
         } rounded w-auto ${colors[variant]} ${customClass}`}
         onClick$={onClick$}

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

@@ -1,17 +1,19 @@
-import { $, component$, useComputed$ } from "@builder.io/qwik";
-import type { MemberDataStore, BillStore } from "~/routes/start/[...id]";
+import { $, component$, useComputed$, type QRL } from "@builder.io/qwik";
+import type { MemberDataStore } from "~/routes/start/[...id]";
 import Button from "../button/button";
 import { sum } from "~/utils/math";
 
 export default component$(
   ({
     store,
-    billStore,
     number,
+    deleteMemberFn,
+    membersLength,
   }: {
     store: MemberDataStore;
-    billStore: BillStore;
     number: number;
+    deleteMemberFn: QRL<(id: string) => void>;
+    membersLength: number;
   }) => {
     const total = useComputed$(() =>
       sum(store.items.map(({ price }) => price)),
@@ -61,9 +63,9 @@ export default component$(
           </div>
           <Button onClick$={$(() => store.add())}>Add item</Button>
           <Button
-            disabledBtn={billStore.members.length < 3}
+            disabledBtn={membersLength < 3}
             variant="danger"
-            onClick$={$(() => billStore.deleteMember(store.id!))}
+            onClick$={$(() => deleteMemberFn(store.id!))}
           >
             Remove member
           </Button>

src/routes/index.tsx

@@ -71,14 +71,15 @@ export default component$(() => {
             </div>
             <div>
               <label for="bill-name" class="block mb-2 text-xl font-medium">
-                Number of members (default is 3)
+                Number of members
               </label>
               <input
                 type="number"
                 id="bill-name"
                 class="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                 placeholder="Enter number of members"
                 min={2}
+                value={billData.memberCount}
                 onInput$={(_, el) =>
                   (billData.memberCount = parseInt(el.value))
                 }

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

@@ -116,16 +116,6 @@ 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,
@@ -152,7 +142,8 @@ export default component$(() => {
         <div class="flex flex-col gap-4 flex-1 items-center">
           {store.members.map((member, i) => (
             <MemberData
-              billStore={store}
+              deleteMemberFn={$(() => store.deleteMember(member.id))}
+              membersLength={store.members.length}
               key={i}
               store={member}
               number={i + 1}