Add special screen for viewing sets from plan

AppStack.tsx

@@ -12,6 +12,7 @@ import ViewWeightGraph from "./ViewWeightGraph";
 import GymSet from "./gym-set";
 import { Plan } from "./plan";
 import Weight from "./weight";
+import ViewSetList from "./ViewSetList";
 
 export type StackParams = {
   Drawer: {};
@@ -41,6 +42,9 @@ export type StackParams = {
   EditWorkouts: {
     names: string[];
   };
+  ViewSetList: {
+    name: string;
+  };
 };
 
 const Stack = createStackNavigator<StackParams>();
@@ -60,6 +64,7 @@ export default function AppStack() {
       <Stack.Screen name="ViewWeightGraph" component={ViewWeightGraph} />
       <Stack.Screen name="EditWorkout" component={EditWorkout} />
       <Stack.Screen name="EditWorkouts" component={EditWorkouts} />
+      <Stack.Screen name="ViewSetList" component={ViewSetList} />
     </Stack.Navigator>
   );
 }

SetItem.tsx

@@ -14,11 +14,13 @@ export default function SetItem({
   settings,
   ids,
   setIds,
+  disablePress,
 }: {
   item: GymSet;
   settings: Settings;
   ids: number[];
   setIds: (value: number[]) => void;
+  disablePress?: boolean;
 }) {
   const dark = useDark();
   const navigation = useNavigation<NavigationProp<StackParams>>();
@@ -29,11 +31,12 @@ export default function SetItem({
   }, [ids.length, item.id, setIds]);
 
   const press = useCallback(() => {
+    if (disablePress) return;
     if (ids.length === 0) return navigation.navigate("EditSet", { set: item });
     const removing = ids.find((id) => id === item.id);
     if (removing) setIds(ids.filter((id) => id !== item.id));
     else setIds([...ids, item.id]);
-  }, [ids, item, navigation, setIds]);
+  }, [ids, item, navigation, setIds, disablePress]);
 
   const backgroundColor = useMemo(() => {
     if (!ids.includes(item.id)) return;

StartPlanItem.tsx

@@ -71,8 +71,8 @@ export default function StartPlanItem(props: Props) {
 
   const view = useCallback(() => {
     setShowMenu(false);
-    drawerNavigate("Home", { search: item.name });
-  }, [item.name, drawerNavigate]);
+    stackNavigate("ViewSetList", { name: item.name });
+  }, [item.name, stackNavigate]);
 
   const graph = useCallback(() => {
     setShowMenu(false);

ViewSetList.tsx

@@ -0,0 +1,75 @@
+import { RouteProp, useRoute } from "@react-navigation/native";
+import { useCallback, useEffect, useState } from "react";
+import { FlatList } from "react-native";
+import { List } from "react-native-paper";
+import { Like } from "typeorm";
+import { StackParams } from "./AppStack";
+import SetItem from "./SetItem";
+import StackHeader from "./StackHeader";
+import { LIMIT } from "./constants";
+import { setRepo, settingsRepo } from "./db";
+import GymSet from "./gym-set";
+import Settings from "./settings";
+
+export default function ViewSetList() {
+  const [sets, setSets] = useState<GymSet[]>();
+  const [settings, setSettings] = useState<Settings>();
+  const { params } = useRoute<RouteProp<StackParams, "ViewSetList">>();
+
+  useEffect(() => {
+    settingsRepo.findOne({ where: {} }).then(setSettings);
+
+    const reset = async () => {
+      const newSets = await setRepo.find({
+        where: { name: Like(`%${params.name}%`), hidden: 0 as any },
+        take: LIMIT * 2,
+        skip: 0,
+        order: { created: "DESC" },
+      });
+      setSets(newSets);
+    };
+
+    reset();
+  }, [params.name]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: GymSet }) => (
+      <SetItem
+        settings={settings}
+        item={item}
+        key={item.id}
+        ids={[]}
+        setIds={() => null}
+        disablePress
+      />
+    ),
+    [settings]
+  );
+
+  const getContent = () => {
+    if (!settings) return null;
+    if (sets?.length === 0)
+      return (
+        <List.Item
+          title="No sets yet"
+          description="A set is a group of repetitions. E.g. 8 reps of Squats."
+        />
+      );
+    return (
+      <FlatList
+        data={sets ?? []}
+        style={{ flex: 1 }}
+        renderItem={renderItem}
+        keyExtractor={(set) => set.id?.toString()}
+      />
+    );
+  };
+
+  return (
+    <>
+      <StackHeader title={params.name} />
+
+      {getContent()}
+    </>
+  );
+}