Massive/SetList.tsx

186 lines
4.9 KiB
TypeScript
Raw Permalink Normal View History

import {
NavigationProp,
useFocusEffect,
useNavigation,
} from "@react-navigation/native";
import { useCallback, useState } from "react";
import { FlatList } from "react-native";
import { List } from "react-native-paper";
import { Like } from "typeorm";
2023-10-28 03:12:37 +00:00
import { StackParams } from "./AppStack";
import DrawerHeader from "./DrawerHeader";
import ListMenu from "./ListMenu";
import Page from "./Page";
import SetItem from "./SetItem";
import { LIMIT } from "./constants";
import { getNow, setRepo, settingsRepo } from "./db";
import GymSet, { defaultSet } from "./gym-set";
import Settings from "./settings";
export default function SetList() {
const [refreshing, setRefreshing] = useState(false);
const [sets, setSets] = useState<GymSet[]>();
const [offset, setOffset] = useState(0);
const [end, setEnd] = useState(false);
const [settings, setSettings] = useState<Settings>();
const [ids, setIds] = useState<number[]>([]);
const navigation = useNavigation<NavigationProp<StackParams>>();
2023-10-28 03:12:37 +00:00
const [term, setTerm] = useState("");
const reset = useCallback(
2023-10-18 06:06:13 +00:00
async (value: string) => {
const newSets = await setRepo.find({
where: { name: Like(`%${value.trim()}%`), hidden: 0 as any },
take: LIMIT,
2023-10-18 06:06:13 +00:00
skip: 0,
order: { created: "DESC" },
});
setSets(newSets);
2023-11-13 05:13:23 +00:00
console.log(`${SetList.name}.reset:`, { value, offset });
setEnd(false);
},
[offset]
);
useFocusEffect(
useCallback(() => {
console.log(`${SetList.name}.focus:`, { term });
settingsRepo.findOne({ where: {} }).then(setSettings);
reset(term);
// eslint-disable-next-line
}, [term])
);
2023-10-18 06:06:13 +00:00
const search = (value: string) => {
2023-10-17 21:41:12 +00:00
console.log(`${SetList.name}.search:`, value);
setTerm(value);
2023-08-28 06:08:30 +00:00
setOffset(0);
2023-10-18 06:06:13 +00:00
reset(value);
};
const renderItem = useCallback(
2023-06-27 03:16:59 +00:00
({ item }: { item: GymSet }) => (
<SetItem
settings={settings}
item={item}
key={item.id}
ids={ids}
setIds={setIds}
/>
),
[settings, ids]
);
const next = async () => {
console.log(`${SetList.name}.next:`, { end, refreshing });
if (end || refreshing) return;
const newOffset = offset + LIMIT;
console.log(`${SetList.name}.next:`, { offset, newOffset, term });
const newSets = await setRepo.find({
where: { name: Like(`%${term}%`), hidden: 0 as any },
take: LIMIT,
skip: newOffset,
order: { created: "DESC" },
});
if (newSets.length === 0) return setEnd(true);
if (!sets) return;
const map = new Map<number, GymSet>();
for (const set of sets) map.set(set.id, set);
for (const set of newSets) map.set(set.id, set);
const unique = Array.from(map.values());
setSets(unique);
if (newSets.length < LIMIT) return setEnd(true);
setOffset(newOffset);
};
const onAdd = useCallback(async () => {
const now = await getNow();
2023-11-13 05:13:23 +00:00
let set: Partial<GymSet> = { ...sets[0] };
if (!set) set = { ...defaultSet };
set.created = now;
delete set.id;
navigation.navigate("EditSet", { set });
}, [navigation, sets]);
2022-12-18 00:23:10 +00:00
const edit = useCallback(() => {
navigation.navigate("EditSets", { ids });
setIds([]);
}, [ids, navigation]);
2022-12-18 00:23:10 +00:00
const copy = useCallback(async () => {
const set = await setRepo.findOne({
2023-06-27 03:16:59 +00:00
where: { id: ids.pop() },
});
delete set.id;
delete set.created;
navigation.navigate("EditSet", { set });
setIds([]);
}, [ids, navigation]);
2022-12-18 00:23:10 +00:00
const clear = useCallback(() => {
setIds([]);
}, []);
2022-12-18 00:23:10 +00:00
const remove = async () => {
setIds([]);
await setRepo.delete(ids.length > 0 ? ids : {});
2023-10-18 06:06:13 +00:00
return reset(term);
};
2022-12-18 00:23:10 +00:00
const select = useCallback(() => {
if (!sets) return;
2023-08-22 00:07:30 +00:00
if (ids.length === sets.length) return setIds([]);
setIds(sets.map((set) => set.id));
2023-08-22 00:07:30 +00:00
}, [sets, ids]);
const getContent = () => {
if (!settings || sets === undefined) return null;
2023-11-14 22:19:22 +00:00
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}
onEndReached={next}
onEndReachedThreshold={0.5}
refreshing={refreshing}
2023-11-13 05:13:23 +00:00
keyExtractor={(set) => set.id.toString()}
onRefresh={() => {
2023-08-28 06:08:30 +00:00
setOffset(0);
setRefreshing(true);
2023-10-18 06:06:13 +00:00
reset(term).finally(() => setRefreshing(false));
}}
/>
);
};
return (
<>
<DrawerHeader
name={ids.length > 0 ? `${ids.length} selected` : "History"}
ids={ids}
unSelect={() => setIds([])}
>
2022-12-21 00:02:53 +00:00
<ListMenu
onClear={clear}
onCopy={copy}
onDelete={remove}
onEdit={edit}
ids={ids}
onSelect={select}
2022-12-21 00:02:53 +00:00
/>
2022-12-18 00:23:10 +00:00
</DrawerHeader>
<Page onAdd={onAdd} term={term} search={search}>
{getContent()}
</Page>
</>
);
}