2022-07-10 12:04:13 +00:00
|
|
|
import {
|
|
|
|
NavigationProp,
|
2023-08-21 21:49:09 +00:00
|
|
|
RouteProp,
|
2023-08-28 23:38:51 +00:00
|
|
|
useFocusEffect,
|
2022-07-10 12:04:13 +00:00
|
|
|
useNavigation,
|
2023-08-21 21:49:09 +00:00
|
|
|
useRoute,
|
2023-08-12 03:22:50 +00:00
|
|
|
} from "@react-navigation/native";
|
2023-08-24 05:29:52 +00:00
|
|
|
import { useCallback, useEffect, useState } from "react";
|
2023-08-28 06:08:30 +00:00
|
|
|
import { DeviceEventEmitter, FlatList } from "react-native";
|
2023-08-12 03:22:50 +00:00
|
|
|
import { List } from "react-native-paper";
|
|
|
|
import { Like } from "typeorm";
|
2023-08-28 06:08:30 +00:00
|
|
|
import { LIMIT } from "./constants";
|
2023-08-12 03:22:50 +00:00
|
|
|
import { getNow, setRepo, settingsRepo } from "./db";
|
|
|
|
import DrawerHeader from "./DrawerHeader";
|
|
|
|
import GymSet, { defaultSet } from "./gym-set";
|
|
|
|
import { HomePageParams } from "./home-page-params";
|
|
|
|
import ListMenu from "./ListMenu";
|
|
|
|
import Page from "./Page";
|
|
|
|
import SetItem from "./SetItem";
|
2023-08-21 23:39:51 +00:00
|
|
|
import Settings, { SETTINGS } from "./settings";
|
2022-07-10 12:04:13 +00:00
|
|
|
|
2022-07-10 23:26:45 +00:00
|
|
|
export default function SetList() {
|
2023-08-21 21:49:09 +00:00
|
|
|
const [refreshing, setRefreshing] = useState(false);
|
2023-08-22 00:25:34 +00:00
|
|
|
const [sets, setSets] = useState<GymSet[]>();
|
2023-08-12 03:22:50 +00:00
|
|
|
const [offset, setOffset] = useState(0);
|
|
|
|
const [end, setEnd] = useState(false);
|
|
|
|
const [settings, setSettings] = useState<Settings>();
|
|
|
|
const [ids, setIds] = useState<number[]>([]);
|
|
|
|
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
2023-08-21 21:49:09 +00:00
|
|
|
const { params } = useRoute<RouteProp<HomePageParams, "Sets">>();
|
|
|
|
const [term, setTerm] = useState(params?.search || "");
|
2022-07-10 12:04:13 +00:00
|
|
|
|
2023-08-28 23:25:05 +00:00
|
|
|
const refresh = async (gymSet: GymSet) => {
|
2023-08-28 23:17:14 +00:00
|
|
|
if (!sets) return;
|
2023-08-28 23:25:05 +00:00
|
|
|
const newSets = sets.map((oldSet) =>
|
|
|
|
oldSet.id === gymSet.id ? gymSet : oldSet
|
|
|
|
);
|
2023-08-28 06:08:30 +00:00
|
|
|
setSets(newSets);
|
|
|
|
};
|
|
|
|
|
2023-08-28 23:38:51 +00:00
|
|
|
const reset = useCallback(
|
|
|
|
async ({ value, skip }: { value: string; skip: number }) => {
|
|
|
|
setRefreshing(true);
|
|
|
|
const newSets = await setRepo
|
|
|
|
.find({
|
|
|
|
where: { name: Like(`%${value.trim()}%`), hidden: 0 as any },
|
|
|
|
take: LIMIT,
|
|
|
|
skip,
|
|
|
|
order: { created: "DESC" },
|
|
|
|
})
|
|
|
|
.finally(() => setRefreshing(false));
|
|
|
|
console.log(`${SetList.name}.refresh:`, { value, offset });
|
|
|
|
setSets(newSets);
|
|
|
|
setEnd(false);
|
|
|
|
},
|
|
|
|
[offset]
|
|
|
|
);
|
2023-08-21 21:49:09 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
settingsRepo.findOne({ where: {} }).then(setSettings);
|
2023-08-28 06:08:30 +00:00
|
|
|
const description = DeviceEventEmitter.addListener(SETTINGS, () => {
|
|
|
|
settingsRepo.findOne({ where: {} }).then(setSettings);
|
|
|
|
});
|
|
|
|
return description.remove;
|
2023-08-12 03:22:50 +00:00
|
|
|
}, []);
|
2022-09-24 07:09:22 +00:00
|
|
|
|
2023-08-28 23:38:51 +00:00
|
|
|
useFocusEffect(
|
|
|
|
useCallback(() => {
|
|
|
|
console.log("Focused.");
|
|
|
|
if (offset > 0) return;
|
|
|
|
reset({
|
|
|
|
value: "",
|
|
|
|
skip: 0,
|
|
|
|
});
|
|
|
|
}, [offset, reset])
|
|
|
|
);
|
|
|
|
|
2023-08-21 21:49:09 +00:00
|
|
|
const search = (value: string) => {
|
|
|
|
setTerm(value);
|
2023-08-28 06:08:30 +00:00
|
|
|
setOffset(0);
|
|
|
|
reset({
|
|
|
|
skip: 0,
|
2023-08-21 21:49:09 +00:00
|
|
|
value,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!params) return;
|
|
|
|
console.log({ params });
|
|
|
|
if (params.search) search(params.search);
|
2023-08-28 06:08:30 +00:00
|
|
|
else if (params.refresh) refresh(params.refresh);
|
2023-08-21 21:49:09 +00:00
|
|
|
else if (params.reset)
|
2023-08-28 06:08:30 +00:00
|
|
|
reset({
|
|
|
|
skip: 0,
|
2023-08-21 21:49:09 +00:00
|
|
|
value: term,
|
|
|
|
});
|
|
|
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
|
|
}, [params]);
|
2022-08-06 02:49:30 +00:00
|
|
|
|
2022-07-10 12:04:13 +00:00
|
|
|
const renderItem = useCallback(
|
2023-06-27 03:16:59 +00:00
|
|
|
({ item }: { item: GymSet }) => (
|
2022-11-01 03:54:14 +00:00
|
|
|
<SetItem
|
|
|
|
settings={settings}
|
|
|
|
item={item}
|
|
|
|
key={item.id}
|
2022-12-13 09:54:37 +00:00
|
|
|
ids={ids}
|
|
|
|
setIds={setIds}
|
2022-11-01 03:54:14 +00:00
|
|
|
/>
|
2022-07-10 12:04:13 +00:00
|
|
|
),
|
2023-08-14 01:14:34 +00:00
|
|
|
[settings, ids]
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
2022-07-10 12:04:13 +00:00
|
|
|
|
2023-08-21 21:49:09 +00:00
|
|
|
const next = async () => {
|
2023-08-22 00:25:34 +00:00
|
|
|
console.log({ end, refreshing });
|
2023-08-21 21:49:09 +00:00
|
|
|
if (end || refreshing) return;
|
2023-08-13 22:42:15 +00:00
|
|
|
const newOffset = offset + LIMIT;
|
2023-08-12 03:22:50 +00:00
|
|
|
console.log(`${SetList.name}.next:`, { offset, newOffset, term });
|
2023-08-21 21:49:09 +00:00
|
|
|
setRefreshing(true);
|
|
|
|
const newSets = await setRepo
|
|
|
|
.find({
|
|
|
|
where: { name: Like(`%${term}%`), hidden: 0 as any },
|
|
|
|
take: LIMIT,
|
|
|
|
skip: newOffset,
|
|
|
|
order: { created: "DESC" },
|
|
|
|
})
|
|
|
|
.finally(() => setRefreshing(false));
|
2023-08-12 03:22:50 +00:00
|
|
|
if (newSets.length === 0) return setEnd(true);
|
|
|
|
if (!sets) return;
|
2023-08-21 21:49:09 +00:00
|
|
|
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);
|
2023-08-13 22:42:15 +00:00
|
|
|
if (newSets.length < LIMIT) return setEnd(true);
|
2023-08-12 03:22:50 +00:00
|
|
|
setOffset(newOffset);
|
2023-08-21 21:49:09 +00:00
|
|
|
};
|
2022-07-10 12:04:13 +00:00
|
|
|
|
|
|
|
const onAdd = useCallback(async () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
const now = await getNow();
|
2023-08-22 00:25:34 +00:00
|
|
|
let set = sets?.[0];
|
2023-08-12 03:22:50 +00:00
|
|
|
if (!set) set = { ...defaultSet };
|
|
|
|
set.created = now;
|
|
|
|
delete set.id;
|
|
|
|
navigation.navigate("EditSet", { set });
|
|
|
|
}, [navigation, sets]);
|
2022-07-10 12:04:13 +00:00
|
|
|
|
2022-12-18 00:23:10 +00:00
|
|
|
const edit = useCallback(() => {
|
2023-08-12 03:22:50 +00:00
|
|
|
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() },
|
2023-08-12 03:22:50 +00:00
|
|
|
});
|
|
|
|
delete set.id;
|
|
|
|
delete set.created;
|
|
|
|
navigation.navigate("EditSet", { set });
|
|
|
|
setIds([]);
|
|
|
|
}, [ids, navigation]);
|
2022-12-18 00:23:10 +00:00
|
|
|
|
|
|
|
const clear = useCallback(() => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setIds([]);
|
|
|
|
}, []);
|
2022-12-18 00:23:10 +00:00
|
|
|
|
2023-08-21 21:49:09 +00:00
|
|
|
const remove = async () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setIds([]);
|
|
|
|
await setRepo.delete(ids.length > 0 ? ids : {});
|
2023-08-28 06:08:30 +00:00
|
|
|
return reset({
|
|
|
|
skip: 0,
|
2023-08-21 21:49:09 +00:00
|
|
|
value: term,
|
|
|
|
});
|
|
|
|
};
|
2022-12-18 00:23:10 +00:00
|
|
|
|
2022-12-22 04:08:01 +00:00
|
|
|
const select = useCallback(() => {
|
2023-08-22 00:25:34 +00:00
|
|
|
if (!sets) return;
|
2023-08-22 00:07:30 +00:00
|
|
|
if (ids.length === sets.length) return setIds([]);
|
2023-08-12 03:22:50 +00:00
|
|
|
setIds(sets.map((set) => set.id));
|
2023-08-22 00:07:30 +00:00
|
|
|
}, [sets, ids]);
|
2022-12-22 04:08:01 +00:00
|
|
|
|
2023-08-22 00:25:34 +00:00
|
|
|
const getContent = () => {
|
2023-08-21 21:49:09 +00:00
|
|
|
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
|
2023-08-22 00:25:34 +00:00
|
|
|
data={sets ?? []}
|
2023-08-21 21:49:09 +00:00
|
|
|
style={{ flex: 1 }}
|
|
|
|
renderItem={renderItem}
|
|
|
|
onEndReached={next}
|
2023-08-22 00:25:34 +00:00
|
|
|
refreshing={refreshing}
|
2023-08-28 23:17:14 +00:00
|
|
|
keyExtractor={(set) => set.id.toString()}
|
2023-08-22 00:25:34 +00:00
|
|
|
onRefresh={() => {
|
2023-08-28 06:08:30 +00:00
|
|
|
setOffset(0);
|
|
|
|
reset({
|
|
|
|
skip: 0,
|
2023-08-21 21:49:09 +00:00
|
|
|
value: term,
|
2023-08-22 00:25:34 +00:00
|
|
|
});
|
|
|
|
}}
|
2023-08-21 21:49:09 +00:00
|
|
|
/>
|
|
|
|
);
|
2023-08-22 00:25:34 +00:00
|
|
|
};
|
2023-08-21 21:49:09 +00:00
|
|
|
|
2022-07-10 12:04:13 +00:00
|
|
|
return (
|
2022-10-22 23:35:58 +00:00
|
|
|
<>
|
2023-08-12 03:22:50 +00:00
|
|
|
<DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : "Home"}>
|
2022-12-21 00:02:53 +00:00
|
|
|
<ListMenu
|
|
|
|
onClear={clear}
|
|
|
|
onCopy={copy}
|
|
|
|
onDelete={remove}
|
|
|
|
onEdit={edit}
|
|
|
|
ids={ids}
|
2022-12-22 04:08:01 +00:00
|
|
|
onSelect={select}
|
2022-12-21 00:02:53 +00:00
|
|
|
/>
|
2022-12-18 00:23:10 +00:00
|
|
|
</DrawerHeader>
|
|
|
|
|
2022-10-28 05:59:54 +00:00
|
|
|
<Page onAdd={onAdd} term={term} search={search}>
|
2023-08-22 00:25:34 +00:00
|
|
|
{getContent()}
|
2022-10-22 23:35:58 +00:00
|
|
|
</Page>
|
|
|
|
</>
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
2022-07-10 12:04:13 +00:00
|
|
|
}
|