Add special screen for viewing sets from plan
This commit is contained in:
parent
e8ee4a253e
commit
54596a5fc3
|
@ -12,6 +12,7 @@ import ViewWeightGraph from "./ViewWeightGraph";
|
||||||
import GymSet from "./gym-set";
|
import GymSet from "./gym-set";
|
||||||
import { Plan } from "./plan";
|
import { Plan } from "./plan";
|
||||||
import Weight from "./weight";
|
import Weight from "./weight";
|
||||||
|
import ViewSetList from "./ViewSetList";
|
||||||
|
|
||||||
export type StackParams = {
|
export type StackParams = {
|
||||||
Drawer: {};
|
Drawer: {};
|
||||||
|
@ -41,6 +42,9 @@ export type StackParams = {
|
||||||
EditWorkouts: {
|
EditWorkouts: {
|
||||||
names: string[];
|
names: string[];
|
||||||
};
|
};
|
||||||
|
ViewSetList: {
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const Stack = createStackNavigator<StackParams>();
|
const Stack = createStackNavigator<StackParams>();
|
||||||
|
@ -60,6 +64,7 @@ export default function AppStack() {
|
||||||
<Stack.Screen name="ViewWeightGraph" component={ViewWeightGraph} />
|
<Stack.Screen name="ViewWeightGraph" component={ViewWeightGraph} />
|
||||||
<Stack.Screen name="EditWorkout" component={EditWorkout} />
|
<Stack.Screen name="EditWorkout" component={EditWorkout} />
|
||||||
<Stack.Screen name="EditWorkouts" component={EditWorkouts} />
|
<Stack.Screen name="EditWorkouts" component={EditWorkouts} />
|
||||||
|
<Stack.Screen name="ViewSetList" component={ViewSetList} />
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,11 +14,13 @@ export default function SetItem({
|
||||||
settings,
|
settings,
|
||||||
ids,
|
ids,
|
||||||
setIds,
|
setIds,
|
||||||
|
disablePress,
|
||||||
}: {
|
}: {
|
||||||
item: GymSet;
|
item: GymSet;
|
||||||
settings: Settings;
|
settings: Settings;
|
||||||
ids: number[];
|
ids: number[];
|
||||||
setIds: (value: number[]) => void;
|
setIds: (value: number[]) => void;
|
||||||
|
disablePress?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const dark = useDark();
|
const dark = useDark();
|
||||||
const navigation = useNavigation<NavigationProp<StackParams>>();
|
const navigation = useNavigation<NavigationProp<StackParams>>();
|
||||||
|
@ -29,11 +31,12 @@ export default function SetItem({
|
||||||
}, [ids.length, item.id, setIds]);
|
}, [ids.length, item.id, setIds]);
|
||||||
|
|
||||||
const press = useCallback(() => {
|
const press = useCallback(() => {
|
||||||
|
if (disablePress) return;
|
||||||
if (ids.length === 0) return navigation.navigate("EditSet", { set: item });
|
if (ids.length === 0) return navigation.navigate("EditSet", { set: item });
|
||||||
const removing = ids.find((id) => id === item.id);
|
const removing = ids.find((id) => id === item.id);
|
||||||
if (removing) setIds(ids.filter((id) => id !== item.id));
|
if (removing) setIds(ids.filter((id) => id !== item.id));
|
||||||
else setIds([...ids, item.id]);
|
else setIds([...ids, item.id]);
|
||||||
}, [ids, item, navigation, setIds]);
|
}, [ids, item, navigation, setIds, disablePress]);
|
||||||
|
|
||||||
const backgroundColor = useMemo(() => {
|
const backgroundColor = useMemo(() => {
|
||||||
if (!ids.includes(item.id)) return;
|
if (!ids.includes(item.id)) return;
|
||||||
|
|
|
@ -71,8 +71,8 @@ export default function StartPlanItem(props: Props) {
|
||||||
|
|
||||||
const view = useCallback(() => {
|
const view = useCallback(() => {
|
||||||
setShowMenu(false);
|
setShowMenu(false);
|
||||||
drawerNavigate("Home", { search: item.name });
|
stackNavigate("ViewSetList", { name: item.name });
|
||||||
}, [item.name, drawerNavigate]);
|
}, [item.name, stackNavigate]);
|
||||||
|
|
||||||
const graph = useCallback(() => {
|
const graph = useCallback(() => {
|
||||||
setShowMenu(false);
|
setShowMenu(false);
|
||||||
|
|
|
@ -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()}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue