Brandon Presley
5b066bccaf
The daily page is used to flip through your exercises by day. This is in contrast to the History page, which is an infinitely scrolling list of all sets. Closes #216, #207
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { FlatList, Pressable, View } from "react-native";
|
|
import { Button, IconButton, List, Text } from "react-native-paper";
|
|
import AppFab from "./AppFab";
|
|
import DrawerHeader from "./DrawerHeader";
|
|
import { LIMIT, PADDING } from "./constants";
|
|
import GymSet, { defaultSet } from "./gym-set";
|
|
import { getNow, setRepo, settingsRepo } from "./db";
|
|
import { NavigationProp, useFocusEffect, useNavigation } from "@react-navigation/native";
|
|
import { Like } from "typeorm";
|
|
import Settings from "./settings";
|
|
import { format } from "date-fns";
|
|
import { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
|
|
import SetItem from "./SetItem";
|
|
import { StackParams } from "./AppStack";
|
|
|
|
export default function Daily() {
|
|
const [sets, setSets] = useState<GymSet[]>();
|
|
const [day, setDay] = useState<Date>()
|
|
const [settings, setSettings] = useState<Settings>();
|
|
const navigation = useNavigation<NavigationProp<StackParams>>();
|
|
|
|
const onFocus = async () => {
|
|
const now = await getNow();
|
|
let created = now.split('T')[0];
|
|
setDay(new Date(created));
|
|
}
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
if (!day) return
|
|
const created = day.toISOString().split('T')[0]
|
|
const newSets = await setRepo.find({
|
|
where: { hidden: 0 as any, created: Like(`${created}%`) },
|
|
take: LIMIT,
|
|
skip: 0,
|
|
order: { created: "DESC" },
|
|
});
|
|
setSets(newSets);
|
|
console.log(`${Daily.name}.useEffect:`, { day });
|
|
settingsRepo.findOne({ where: {} }).then(setSettings)
|
|
})()
|
|
}, [day])
|
|
|
|
useFocusEffect(useCallback(() => {
|
|
onFocus();
|
|
}, []))
|
|
|
|
const onAdd = async () => {
|
|
const now = await getNow();
|
|
let set: Partial<GymSet> = { ...sets[0] };
|
|
if (!set) set = { ...defaultSet };
|
|
set.created = now;
|
|
delete set.id;
|
|
navigation.navigate("EditSet", { set });
|
|
|
|
}
|
|
|
|
const onRight = () => {
|
|
const newDay = new Date(day)
|
|
newDay.setDate(newDay.getDate() + 1)
|
|
setDay(newDay)
|
|
}
|
|
|
|
const onLeft = () => {
|
|
const newDay = new Date(day)
|
|
newDay.setDate(newDay.getDate() - 1)
|
|
setDay(newDay)
|
|
}
|
|
|
|
const onDate = () => {
|
|
DateTimePickerAndroid.open({
|
|
value: new Date(day),
|
|
onChange: (event, date) => {
|
|
if (event.type === 'dismissed') return;
|
|
setDay(date)
|
|
},
|
|
mode: 'date',
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<DrawerHeader name="Daily" />
|
|
|
|
|
|
<View style={{ padding: PADDING, flexGrow: 1 }}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
|
|
<IconButton style={{ marginRight: 'auto' }} icon="chevron-double-left" onPress={onLeft} />
|
|
<Button onPress={onDate}>{format(day ? new Date(day) : new Date(), "PPPP")}</Button>
|
|
<IconButton style={{ marginLeft: 'auto' }} icon="chevron-double-right" onPress={onRight} />
|
|
</View>
|
|
|
|
{settings && (
|
|
<FlatList ListEmptyComponent={<List.Item title="No sets yet" />} style={{ flex: 1 }} data={sets} renderItem={({ item }) => <SetItem ids={[]} setIds={() => { }} item={item} settings={settings} />} />
|
|
)}
|
|
|
|
<AppFab onPress={onAdd} />
|
|
</View>
|
|
|
|
|
|
</>
|
|
)
|
|
} |