Replace EditCategoryDialog

app/accounts/[id]/categories/[categoryId]/edit.tsx

@@ -0,0 +1,87 @@
+import { Stack, useRouter, useSearchParams } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { IconButton, TextInput } from "react-native-paper";
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  Account,
+  restoreAccount,
+  updateCategory,
+} from "../../../../../lib/account";
+import { createEvent, getEvents } from "../../../../../lib/api";
+
+function Inner(): JSX.Element {
+  const params = useSearchParams();
+  const accountId = `${params.id}`;
+  const nameDefault = decodeURIComponent(`${params.name}`);
+  const categoryId = `${params.categoryId}`;
+  const insets = useSafeAreaInsets();
+  const [account, setAccount] = useState<Account | null>(null);
+  const [name, setName] = useState<string>(nameDefault);
+  const router = useRouter();
+
+  useEffect(() => {
+    getEvents(accountId)
+      .then((events) => restoreAccount(events))
+      .then((account) => setAccount(account));
+  }, []);
+
+  const onClickOk = () => {
+    if (account === null) return;
+    const [_, event] = updateCategory(account, categoryId, name);
+    createEvent(event).then((_) => {
+      router.back();
+    });
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+        },
+      ]}
+    >
+      <StatusBar style="auto" />
+      <Stack.Screen
+        options={{
+          title: "Edit Category",
+          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+        }}
+      />
+      <View style={{ flex: 1, width: "100%" }}>
+        <TextInput
+          label="Name"
+          mode="outlined"
+          onChangeText={setName}
+          style={styles.input}
+          value={name}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default function AccountNew() {
+  return (
+    <SafeAreaProvider>
+      <Inner />
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+  input: {
+    margin: 16,
+  },
+});

app/accounts/[id]/categories/index.tsx

@@ -1,35 +1,33 @@
-import { useSearchParams } from "expo-router";
+import { usePathname, useRouter, useSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { FAB } from "react-native-paper";
 import { CategoryList } from "../../../../components/CategoryList";
 import { DeleteCategoryDialog } from "../../../../components/DeleteCategoryDialog";
-import { EditCategoryDialog } from "../../../../components/EditCategoryDialog";
 import {
   Account,
-  createCategory,
   deleteCategory,
   restoreAccount,
-  updateCategory,
 } from "../../../../lib/account";
 import { createEvent, getEvents } from "../../../../lib/api";
 
 export default function Categories(): JSX.Element {
+  const pathname = usePathname();
   const params = useSearchParams();
+  const router = useRouter();
   const accountId = `${params.id}`;
   const [account, setAccount] = useState<Account | null>(null);
   const [name, setName] = useState<string>("");
   const [categoryId, setCategoryId] = useState<string | null>(null);
-  const [editDialogVisible, setEditDialogVisible] = useState<boolean>(false);
   const [deleteDialogVisible, setDeleteDialogVisible] =
     useState<boolean>(false);
   useEffect(() => {
     getEvents(accountId)
       .then((events) => restoreAccount(events))
       .then((account) => setAccount(account));
-  }, [account?.version]);
+  }, [pathname]);
   return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+    <View style={styles.container}>
       <CategoryList
         data={account?.categories ?? []}
         onLongPressCategory={(category) => {
@@ -38,15 +36,27 @@ export default function Categories(): JSX.Element {
           setDeleteDialogVisible(true);
         }}
         onPressCategory={(category) => {
-          setName(category.name);
-          setCategoryId(category.id);
-          setEditDialogVisible(true);
+          router.push({
+            pathname: "/accounts/[id]/categories/[categoryId]/edit",
+            params: {
+              id: accountId,
+              categoryId: category.id,
+              name: encodeURIComponent(category.name),
+            },
+          });
         }}
       />
       <FAB
         icon="plus"
         style={styles.fab}
-        onPress={() => setEditDialogVisible(true)}
+        onPress={() => {
+          router.push({
+            pathname: "/accounts/[id]/categories/new",
+            params: {
+              id: accountId,
+            },
+          });
+        }}
       />
       <DeleteCategoryDialog
         id={categoryId}
@@ -75,56 +85,16 @@ export default function Categories(): JSX.Element {
         }}
         visible={deleteDialogVisible}
       />
-      <EditCategoryDialog
-        id={categoryId}
-        name={name}
-        onChangeName={setName}
-        onClickCancel={() => {
-          setName("");
-          setCategoryId(null);
-          setEditDialogVisible(false);
-        }}
-        onClickOk={() => {
-          if (account === null) return;
-          if (categoryId === null) {
-            // update local state
-            const [newAccount, newEvent] = createCategory(account, name);
-
-            // update remote state
-            setAccount(newAccount);
-            createEvent(newEvent).catch((_) => {
-              setAccount(account);
-            });
-
-            setName("");
-            setCategoryId(null);
-            setEditDialogVisible(false);
-          } else {
-            // update local state
-            const [newAccount, newEvent] = updateCategory(
-              account,
-              categoryId,
-              name
-            );
-
-            // update remote state
-            setAccount(newAccount);
-            createEvent(newEvent).catch((_) => {
-              setAccount(account);
-            });
-
-            setName("");
-            setCategoryId(null);
-            setEditDialogVisible(false);
-          }
-        }}
-        visible={editDialogVisible}
-      />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
   fab: {
     bottom: 0,
     margin: 16,

app/accounts/[id]/categories/new.tsx

@@ -0,0 +1,85 @@
+import { Stack, useRouter, useSearchParams } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { IconButton, TextInput } from "react-native-paper";
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  Account,
+  createCategory,
+  restoreAccount,
+} from "../../../../lib/account";
+import { createEvent, getEvents } from "../../../../lib/api";
+
+function Inner(): JSX.Element {
+  const params = useSearchParams();
+  const accountId = `${params.id}`;
+  const insets = useSafeAreaInsets();
+  const [account, setAccount] = useState<Account | null>(null);
+  const [name, setName] = useState<string>("");
+  const router = useRouter();
+
+  useEffect(() => {
+    getEvents(accountId)
+      .then((events) => restoreAccount(events))
+      .then((account) => setAccount(account));
+  }, []);
+
+  const onClickOk = () => {
+    if (account === null) return;
+    const [_, event] = createCategory(account, name);
+    createEvent(event).then((_) => {
+      router.back();
+    });
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+        },
+      ]}
+    >
+      <StatusBar style="auto" />
+      <Stack.Screen
+        options={{
+          title: "Add Category",
+          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+        }}
+      />
+      <View style={{ flex: 1, width: "100%" }}>
+        <TextInput
+          label="Name"
+          mode="outlined"
+          onChangeText={setName}
+          style={styles.input}
+          value={name}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default function AccountNew() {
+  return (
+    <SafeAreaProvider>
+      <Inner />
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+  input: {
+    margin: 16,
+  },
+});