Add useListScreen hook

android/src/components/ListScreen.tsx

@@ -1,29 +1,27 @@
-import { StackActions } from "@react-navigation/native";
 import type { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React from "react";
-import { StyleSheet, View } from "react-native";
-import { Button } from "react-native-paper";
+import { FlatList, StyleSheet, View } from "react-native";
+import { List } from "react-native-paper";
+import { useListScreen } from "@/components/ListScreen/hooks/useListScreen";
 import type { NativeStackParamList } from "@/types/navigation";
 
 type Props = NativeStackScreenProps<NativeStackParamList, "List">;
 
-export function ListScreen({ navigation }: Props): JSX.Element {
+export function ListScreen({
+  route: {
+    params: { checkListId },
+  },
+}: Props): JSX.Element {
+  const { handleListItemOnPress, items } = useListScreen(checkListId);
   return (
     <View style={styles.container}>
-      <Button
-        onPress={() => {
-          navigation.dispatch(StackActions.push("Item"));
-        }}
-      >
-        Item 1
-      </Button>
-      <Button
-        onPress={() => {
-          navigation.dispatch(StackActions.push("Item"));
-        }}
-      >
-        Item 2
-      </Button>
+      <FlatList
+        data={items}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <List.Item onPress={handleListItemOnPress(item)} title={item.name} />
+        )}
+      />
     </View>
   );
 }

android/src/components/ListScreen/hooks/useListScreen.ts

@@ -0,0 +1,29 @@
+import { StackActions, useNavigation } from "@react-navigation/native";
+import { useCallback } from "react";
+import { useStore } from "@/components/StoreContext";
+import type { CheckListId } from "@/types/check_list";
+import type { Item } from "@/types/item";
+import { findCheckedItemIdsByCheckListId, findItem } from "@/types/store";
+
+export function useListScreen(checkListId: CheckListId): {
+  handleListItemOnPress: (item: Item) => () => void;
+  items: Item[];
+} {
+  const navigation = useNavigation();
+  const { store } = useStore();
+  const itemIds = findCheckedItemIdsByCheckListId(store, checkListId);
+  const items = itemIds
+    .map((itemId): Item | null => findItem(store, itemId))
+    .filter((item): item is Item => item !== null);
+
+  const handleListItemOnPress = useCallback(
+    (item: Item) => () => {
+      navigation.dispatch(StackActions.push("Item", { itemId: item.id }));
+    },
+    [navigation]
+  );
+  return {
+    handleListItemOnPress,
+    items,
+  };
+}

android/src/types/navigation.ts

@@ -1,3 +1,4 @@
+import type { CheckListId } from "@/types/check_list";
 import type { ItemId } from "@/types/item";
 
 export type BottomTabParamList = {
@@ -7,6 +8,6 @@ export type BottomTabParamList = {
 
 export type NativeStackParamList = {
   Item: { itemId: ItemId };
-  List: undefined;
+  List: { checkListId: CheckListId };
   Tab: undefined;
 };