Add category draft state

apps/miniapp/src/App.tsx

@@ -371,6 +371,10 @@ function App() {
   const [editingUtilityBillId, setEditingUtilityBillId] = createSignal<string | null>(null)
   const [editingMemberId, setEditingMemberId] = createSignal<string | null>(null)
   const [editingCategorySlug, setEditingCategorySlug] = createSignal<string | null>(null)
+  const [editingCategoryDraft, setEditingCategoryDraft] = createSignal<{
+    name: string
+    isActive: boolean
+  } | null>(null)
   const [billingSettingsOpen, setBillingSettingsOpen] = createSignal(false)
   const [cycleRentOpen, setCycleRentOpen] = createSignal(false)
   const [addingUtilityBillOpen, setAddingUtilityBillOpen] = createSignal(false)
@@ -2237,8 +2241,30 @@ function App() {
                 currency: value
               }))
             }
-            onOpenCategoryEditor={setEditingCategorySlug}
-            onCloseCategoryEditor={() => setEditingCategorySlug(null)}
+            onOpenCategoryEditor={(slug) => {
+              setEditingCategorySlug(slug)
+              if (slug === '__new__') {
+                setNewCategoryName('')
+                setEditingCategoryDraft(null)
+                return
+              }
+
+              const category =
+                adminSettings()?.categories.find((item) => item.slug === slug) ?? null
+              setEditingCategoryDraft(
+                category
+                  ? {
+                      name: category.name,
+                      isActive: category.isActive
+                    }
+                  : null
+              )
+            }}
+            onCloseCategoryEditor={() => {
+              setEditingCategorySlug(null)
+              setEditingCategoryDraft(null)
+              setNewCategoryName('')
+            }}
             onNewCategoryNameChange={setNewCategoryName}
             onSaveNewCategory={() =>
               handleSaveUtilityCategory({
@@ -2255,41 +2281,28 @@ function App() {
 
               return handleSaveUtilityCategory({
                 slug: category.slug,
-                name: category.name,
+                name: editingCategoryDraft()?.name ?? category.name,
                 sortOrder: category.sortOrder,
-                isActive: category.isActive
+                isActive: editingCategoryDraft()?.isActive ?? category.isActive
               })
             }}
+            editingCategoryDraft={editingCategoryDraft()}
             onEditingCategoryNameChange={(value) =>
-              setAdminSettings((current) =>
-                current && editingCategory()
+              setEditingCategoryDraft((current) =>
+                current
                   ? {
                       ...current,
-                      categories: current.categories.map((item) =>
-                        item.slug === editingCategory()!.slug
-                          ? {
-                              ...item,
-                              name: value
-                            }
-                          : item
-                      )
+                      name: value
                     }
                   : current
               )
             }
             onEditingCategoryActiveChange={(value) =>
-              setAdminSettings((current) =>
-                current && editingCategory()
+              setEditingCategoryDraft((current) =>
+                current
                   ? {
                       ...current,
-                      categories: current.categories.map((item) =>
-                        item.slug === editingCategory()!.slug
-                          ? {
-                              ...item,
-                              isActive: value
-                            }
-                          : item
-                      )
+                      isActive: value
                     }
                   : current
               )

apps/miniapp/src/screens/house-screen.tsx

@@ -69,6 +69,10 @@ type Props = {
   utilityBillDrafts: Record<string, UtilityBillDraft>
   editingCategorySlug: string | null
   editingCategory: MiniAppAdminSettingsPayload['categories'][number] | null
+  editingCategoryDraft: {
+    name: string
+    isActive: boolean
+  } | null
   editingMember: MiniAppAdminSettingsPayload['members'][number] | null
   memberDisplayNameDrafts: Record<string, string>
   memberStatusDrafts: Record<string, 'active' | 'away' | 'left'>
@@ -779,14 +783,15 @@ export function HouseScreen(props: Props) {
             ) : (
               (() => {
                 const category = props.editingCategory
-                if (!category) {
+                const draft = props.editingCategoryDraft
+                if (!category || !draft) {
                   return null
                 }
                 return (
                   <div class="editor-grid">
                     <Field label={props.copy.utilityCategoryName ?? ''} wide>
                       <input
-                        value={category.name}
+                        value={draft.name}
                         onInput={(event) =>
                           props.onEditingCategoryNameChange(event.currentTarget.value)
                         }
@@ -794,7 +799,7 @@ export function HouseScreen(props: Props) {
                     </Field>
                     <Field label={props.copy.utilityCategoryActive ?? ''}>
                       <select
-                        value={category.isActive ? 'true' : 'false'}
+                        value={draft.isActive ? 'true' : 'false'}
                         onChange={(event) =>
                           props.onEditingCategoryActiveChange(event.currentTarget.value === 'true')
                         }