Add Screen component

bouzuya · Mar 25, 2023 · d387020 · d387020
1 parent bbb013f
commit d387020
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 238 deletions.
diff --git a/app/accounts/[id]/categories/[categoryId]/edit.tsx b/app/accounts/[id]/categories/[categoryId]/edit.tsx
@@ -1,25 +1,20 @@
-import { Stack, useRouter, useSearchParams } from "expo-router";
-import { StatusBar } from "expo-status-bar";
+import { useRouter, useSearchParams } from "expo-router";
 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 { Screen } from "../../../../../components/Screen";
 import {
   Account,
   restoreAccount,
   updateCategory,
 } from "../../../../../lib/account";
 import { createEvent, getEvents } from "../../../../../lib/api";
 
-function Inner(): JSX.Element {
+export default function CategoryEdit(): 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();
@@ -39,21 +34,12 @@ function Inner(): JSX.Element {
   };
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-        },
-      ]}
+    <Screen
+      options={{
+        title: "Edit Category",
+        headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+      }}
     >
-      <StatusBar style="auto" />
-      <Stack.Screen
-        options={{
-          title: "Edit Category",
-          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
-        }}
-      />
       <View style={{ flex: 1, width: "100%" }}>
         <TextInput
           label="Name"
@@ -63,24 +49,11 @@ function Inner(): JSX.Element {
           value={name}
         />
       </View>
-    </View>
-  );
-}
-
-export default function AccountNew() {
-  return (
-    <SafeAreaProvider>
-      <Inner />
-    </SafeAreaProvider>
+    </Screen>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-  },
   input: {
     margin: 16,
   },

diff --git a/app/accounts/[id]/categories/index.tsx b/app/accounts/[id]/categories/index.tsx
@@ -4,6 +4,7 @@ import { StyleSheet, View } from "react-native";
 import { FAB } from "react-native-paper";
 import { CategoryList } from "../../../../components/CategoryList";
 import { DeleteCategoryDialog } from "../../../../components/DeleteCategoryDialog";
+import { Screen } from "../../../../components/Screen";
 import {
   Account,
   deleteCategory,
@@ -27,7 +28,7 @@ export default function Categories(): JSX.Element {
       .then((account) => setAccount(account));
   }, [pathname]);
   return (
-    <View style={styles.container}>
+    <Screen>
       <CategoryList
         data={account?.categories ?? []}
         onLongPressCategory={(category) => {
@@ -85,16 +86,11 @@ export default function Categories(): JSX.Element {
         }}
         visible={deleteDialogVisible}
       />
-    </View>
+    </Screen>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-  },
   fab: {
     bottom: 0,
     margin: 16,

diff --git a/app/accounts/[id]/categories/new.tsx b/app/accounts/[id]/categories/new.tsx
@@ -1,23 +1,18 @@
-import { Stack, useRouter, useSearchParams } from "expo-router";
-import { StatusBar } from "expo-status-bar";
+import { useRouter, useSearchParams } from "expo-router";
 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 { Screen } from "../../../../components/Screen";
 import {
   Account,
   createCategory,
   restoreAccount,
 } from "../../../../lib/account";
 import { createEvent, getEvents } from "../../../../lib/api";
 
-function Inner(): JSX.Element {
+export default function CategoryNew(): 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();
@@ -37,21 +32,12 @@ function Inner(): JSX.Element {
   };
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-        },
-      ]}
+    <Screen
+      options={{
+        title: "Add Category",
+        headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+      }}
     >
-      <StatusBar style="auto" />
-      <Stack.Screen
-        options={{
-          title: "Add Category",
-          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
-        }}
-      />
       <View style={{ flex: 1, width: "100%" }}>
         <TextInput
           label="Name"
@@ -61,24 +47,11 @@ function Inner(): JSX.Element {
           value={name}
         />
       </View>
-    </View>
-  );
-}
-
-export default function AccountNew() {
-  return (
-    <SafeAreaProvider>
-      <Inner />
-    </SafeAreaProvider>
+    </Screen>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-  },
   input: {
     margin: 16,
   },

diff --git a/app/accounts/[id]/transactions/[transactionId]/edit.tsx b/app/accounts/[id]/transactions/[transactionId]/edit.tsx
@@ -1,12 +1,8 @@
-import { Stack, useRouter, useSearchParams } from "expo-router";
-import { StatusBar } from "expo-status-bar";
+import { useRouter, useSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { IconButton } from "react-native-paper";
-import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
+import { Screen } from "../../../../../components/Screen";
 import { TransactionForm } from "../../../../../components/TransactionForm";
 import {
   Account,
@@ -15,14 +11,13 @@ import {
 } from "../../../../../lib/account";
 import { createEvent, getEvents } from "../../../../../lib/api";
 
-function Inner(): JSX.Element {
+export default function TransactionEdit(): JSX.Element {
   const params = useSearchParams();
   const accountId = `${params.id}`;
   const amountDefault = `${params.amount}`;
   const commentDefault = decodeURIComponent(`${params.comment}`);
   const dateDefault = `${params.date}`;
   const transactionId = `${params.transactionId}`;
-  const insets = useSafeAreaInsets();
   const [account, setAccount] = useState<Account | null>(null);
   const [amount, setAmount] = useState<string>(amountDefault);
   const [comment, setComment] = useState<string>(commentDefault);
@@ -48,21 +43,12 @@ function Inner(): JSX.Element {
   };
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-        },
-      ]}
+    <Screen
+      options={{
+        title: "Edit Transaction",
+        headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+      }}
     >
-      <StatusBar style="auto" />
-      <Stack.Screen
-        options={{
-          title: "Edit Transaction",
-          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
-        }}
-      />
       <View style={{ flex: 1, width: "100%" }}>
         <TransactionForm
           amount={amount}
@@ -73,22 +59,6 @@ function Inner(): JSX.Element {
           onChangeDate={setDate}
         />
       </View>
-    </View>
-  );
-}
-
-export default function AccountNew() {
-  return (
-    <SafeAreaProvider>
-      <Inner />
-    </SafeAreaProvider>
+    </Screen>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-  },
-});
diff --git a/app/accounts/[id]/transactions/index.tsx b/app/accounts/[id]/transactions/index.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { FlatList, StyleSheet, Text, View } from "react-native";
 import { FAB, List } from "react-native-paper";
 import { DeleteTransactionDialog } from "../../../../components/DeleteTransactionDialog";
+import { Screen } from "../../../../components/Screen";
 import {
   deleteTransaction,
   restoreAccount,
@@ -29,7 +30,7 @@ export default function Transactions(): JSX.Element {
       .then((account) => setAccount(account));
   }, [pathname]);
   return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+    <Screen>
       <FlatList
         data={account?.transactions ?? []}
         renderItem={({ item: transaction }) => {
@@ -141,7 +142,7 @@ export default function Transactions(): JSX.Element {
         }}
         visible={deleteModalVisible}
       />
-    </View>
+    </Screen>
   );
 }
 

diff --git a/app/accounts/[id]/transactions/new.tsx b/app/accounts/[id]/transactions/new.tsx
@@ -1,12 +1,8 @@
-import { Stack, useRouter, useSearchParams } from "expo-router";
-import { StatusBar } from "expo-status-bar";
+import { useRouter, useSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { IconButton } from "react-native-paper";
-import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
+import { Screen } from "../../../../components/Screen";
 import { TransactionForm } from "../../../../components/TransactionForm";
 import {
   Account,
@@ -15,10 +11,9 @@ import {
 } from "../../../../lib/account";
 import { createEvent, getEvents } from "../../../../lib/api";
 
-function Inner(): JSX.Element {
+export default function TransactionNew(): JSX.Element {
   const params = useSearchParams();
   const accountId = `${params.id}`;
-  const insets = useSafeAreaInsets();
   const [account, setAccount] = useState<Account | null>(null);
   const [amount, setAmount] = useState<string>("");
   const [comment, setComment] = useState<string>("");
@@ -44,23 +39,13 @@ function Inner(): JSX.Element {
       router.back();
     });
   };
-
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-        },
-      ]}
+    <Screen
+      options={{
+        title: "Add Transaction",
+        headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+      }}
     >
-      <StatusBar style="auto" />
-      <Stack.Screen
-        options={{
-          title: "Add Transaction",
-          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
-        }}
-      />
       <View style={{ flex: 1, width: "100%" }}>
         <TransactionForm
           amount={amount}
@@ -71,25 +56,6 @@ function Inner(): JSX.Element {
           onChangeDate={setDate}
         />
       </View>
-    </View>
+    </Screen>
   );
 }
-
-export default function AccountNew() {
-  return (
-    <SafeAreaProvider>
-      <Inner />
-    </SafeAreaProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-  },
-  input: {
-    margin: 16,
-  },
-});