97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import { RouteProp, useRoute } from "@react-navigation/native";
|
|
import { format } from "date-fns";
|
|
import { useEffect, useState } from "react";
|
|
import { FlatList } from "react-native";
|
|
import { List, Text, useTheme } from "react-native-paper";
|
|
import { Like } from "typeorm";
|
|
import { StackParams } from "./AppStack";
|
|
import StackHeader from "./StackHeader";
|
|
import { LIMIT } from "./constants";
|
|
import { setRepo, settingsRepo } from "./db";
|
|
import GymSet from "./gym-set";
|
|
import Settings from "./settings";
|
|
|
|
interface ColorSet extends GymSet {
|
|
color?: string;
|
|
}
|
|
|
|
export default function ViewSetList() {
|
|
const [sets, setSets] = useState<ColorSet[]>();
|
|
const [settings, setSettings] = useState<Settings>();
|
|
const { colors } = useTheme();
|
|
const { params } = useRoute<RouteProp<StackParams, "ViewSetList">>();
|
|
|
|
useEffect(() => {
|
|
settingsRepo.findOne({ where: {} }).then(setSettings);
|
|
|
|
const reset = async () => {
|
|
const newSets: ColorSet[] = await setRepo.find({
|
|
where: { name: Like(`%${params.name}%`), hidden: 0 as any },
|
|
take: LIMIT,
|
|
skip: 0,
|
|
order: { created: "DESC" },
|
|
});
|
|
|
|
let prevDate = null;
|
|
const elevate = colors.elevation.level2;
|
|
const transparent = colors.elevation.level0;
|
|
let color = elevate;
|
|
|
|
for (let i = 0; i < newSets.length; i++) {
|
|
let currDate = new Date(newSets[i].created).toDateString();
|
|
if (currDate !== prevDate)
|
|
color = color === elevate ? transparent : elevate;
|
|
newSets[i].color = color;
|
|
prevDate = currDate;
|
|
}
|
|
|
|
setSets(newSets);
|
|
};
|
|
|
|
reset();
|
|
}, [params.name, colors]);
|
|
|
|
const renderItem = ({ item }: { item: ColorSet; index: number }) => (
|
|
<List.Item
|
|
title={format(new Date(item.created), settings.date || "Pp")}
|
|
style={{ backgroundColor: item.color }}
|
|
right={() => (
|
|
<Text
|
|
style={{
|
|
alignSelf: "center",
|
|
}}
|
|
>
|
|
{`${item.reps} x ${item.weight}${item.unit || "kg"}`}
|
|
</Text>
|
|
)}
|
|
/>
|
|
);
|
|
|
|
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()}
|
|
</>
|
|
);
|
|
}
|