Refactor useItemScreen hook

bouzuya · Oct 12, 2023 · c677437 · c677437
1 parent 3ddc0ea
commit c677437
Showing 1 changed file with 45 additions and 40 deletions.
diff --git a/android/src/components/ItemScreen/hooks/useItemScreen.tsx b/android/src/components/ItemScreen/hooks/useItemScreen.tsx
@@ -48,11 +48,36 @@ export function useItemScreen(itemId: ItemId): {
   const { store } = useStore();
   const navigation = useNavigation();
 
-  useEffect(() => {
-    void (async () => {
-      setScreenState(await handleScreenState(store, screenState));
-    })();
-  }, [store, screenState]);
+  const handleIconButtonOnPress = useCallback(() => {
+    switch (screenState.type) {
+      case "initial":
+        return;
+      case "loaded": {
+        setScreenState({
+          ...screenState,
+          name: screenState.item.name,
+          type: "editing",
+        });
+        return;
+      }
+      case "editing": {
+        handle(store, {
+          payload: {
+            item: {
+              ...screenState.item,
+              name: screenState.name,
+            },
+          },
+          type: "setItem",
+        });
+        setScreenState({
+          itemId: screenState.item.id,
+          type: "initial",
+        });
+        return;
+      }
+    }
+  }, [screenState, store]);
 
   const handleListItemOnPress = useCallback(
     (checkList: CheckList) => () => {
@@ -76,45 +101,19 @@ export function useItemScreen(itemId: ItemId): {
       headerRight: () => (
         <IconButton
           icon={screenState.type === "editing" ? "check" : "pencil"}
-          onPress={() => {
-            switch (screenState.type) {
-              case "initial":
-                return;
-              case "loaded": {
-                setScreenState({
-                  ...screenState,
-                  name: screenState.item.name,
-                  type: "editing",
-                });
-                return;
-              }
-              case "editing": {
-                handle(store, {
-                  payload: {
-                    item: {
-                      ...screenState.item,
-                      name: screenState.name,
-                    },
-                  },
-                  type: "setItem",
-                });
-                setScreenState({
-                  itemId: screenState.item.id,
-                  type: "initial",
-                });
-                return;
-              }
-            }
-          }}
+          onPress={handleIconButtonOnPress}
           style={{ marginRight: -4 }}
         />
       ),
-      headerTitle:
-        screenState.type === "initial"
-          ? "Item"
-          : `Item ${screenState.item.name}`,
+      headerTitle: getHeaderTitle(screenState),
     });
-  }, [navigation, screenState, store]);
+  }, [handleIconButtonOnPress, navigation, screenState]);
+
+  useEffect(() => {
+    void (async () => {
+      setScreenState(await handleScreenState(store, screenState));
+    })();
+  }, [store, screenState]);
 
   return {
     data:
@@ -131,6 +130,12 @@ export function useItemScreen(itemId: ItemId): {
   };
 }
 
+function getHeaderTitle(screenState: ScreenState): string {
+  return screenState.type === "initial"
+    ? "Item"
+    : `Item ${screenState.item.name}`;
+}
+
 async function handleScreenState(
   store: Store,
   screenState: ScreenState