2022-09-20 00:28:15 +00:00
|
|
|
import {Picker} from '@react-native-picker/picker';
|
2022-10-23 06:13:58 +00:00
|
|
|
import {RouteProp, useRoute} from '@react-navigation/native';
|
2022-10-28 05:36:47 +00:00
|
|
|
import {useEffect, useState} from 'react';
|
2022-10-04 01:35:56 +00:00
|
|
|
import {View} from 'react-native';
|
2022-10-16 00:39:59 +00:00
|
|
|
import {getOneRepMax, getVolumes, getWeightsBy} from './best.service';
|
2022-07-11 01:00:17 +00:00
|
|
|
import {BestPageParams} from './BestPage';
|
2022-09-02 00:24:28 +00:00
|
|
|
import Chart from './Chart';
|
2022-09-16 09:07:02 +00:00
|
|
|
import {PADDING} from './constants';
|
2022-09-04 03:28:21 +00:00
|
|
|
import {Metrics} from './metrics';
|
|
|
|
import {Periods} from './periods';
|
2022-07-11 01:00:17 +00:00
|
|
|
import Set from './set';
|
2022-10-23 06:13:58 +00:00
|
|
|
import StackHeader from './StackHeader';
|
2022-07-11 01:00:17 +00:00
|
|
|
import {formatMonth} from './time';
|
2022-10-04 01:35:56 +00:00
|
|
|
import useDark from './use-dark';
|
2022-09-04 03:28:21 +00:00
|
|
|
import Volume from './volume';
|
2022-09-02 00:24:28 +00:00
|
|
|
|
2022-07-11 01:00:17 +00:00
|
|
|
export default function ViewBest() {
|
|
|
|
const {params} = useRoute<RouteProp<BestPageParams, 'ViewBest'>>();
|
2022-10-04 01:35:56 +00:00
|
|
|
const dark = useDark();
|
2022-08-24 00:32:57 +00:00
|
|
|
const [weights, setWeights] = useState<Set[]>([]);
|
|
|
|
const [volumes, setVolumes] = useState<Volume[]>([]);
|
2022-09-02 00:24:28 +00:00
|
|
|
const [metric, setMetric] = useState(Metrics.Weight);
|
|
|
|
const [period, setPeriod] = useState(Periods.Monthly);
|
2022-07-08 12:11:10 +00:00
|
|
|
|
2022-09-02 00:24:28 +00:00
|
|
|
useEffect(() => {
|
2022-09-20 00:35:44 +00:00
|
|
|
console.log(`${ViewBest.name}.useEffect`, {metric});
|
|
|
|
console.log(`${ViewBest.name}.useEffect`, {period});
|
2022-10-16 00:39:59 +00:00
|
|
|
switch (metric) {
|
|
|
|
case Metrics.Weight:
|
|
|
|
getWeightsBy(params.best.name, period).then(setWeights);
|
|
|
|
break;
|
|
|
|
case Metrics.Volume:
|
|
|
|
getVolumes(params.best.name, period).then(setVolumes);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
getOneRepMax({name: params.best.name, period}).then(setWeights);
|
|
|
|
}
|
2022-09-04 03:28:21 +00:00
|
|
|
}, [params.best.name, metric, period]);
|
2022-07-12 03:54:04 +00:00
|
|
|
|
2022-07-08 12:11:10 +00:00
|
|
|
return (
|
2022-10-23 06:13:58 +00:00
|
|
|
<>
|
|
|
|
<StackHeader title={params.best.name} />
|
|
|
|
<View style={{padding: PADDING}}>
|
|
|
|
<Picker
|
|
|
|
style={{color: dark ? 'white' : 'black'}}
|
|
|
|
dropdownIconColor={dark ? 'white' : 'black'}
|
|
|
|
selectedValue={metric}
|
|
|
|
onValueChange={value => setMetric(value)}>
|
|
|
|
<Picker.Item value={Metrics.Volume} label={Metrics.Volume} />
|
|
|
|
<Picker.Item value={Metrics.Weight} label={Metrics.Weight} />
|
|
|
|
<Picker.Item value={Metrics.OneRepMax} label={Metrics.OneRepMax} />
|
|
|
|
</Picker>
|
|
|
|
<Picker
|
|
|
|
style={{color: dark ? 'white' : 'black'}}
|
|
|
|
dropdownIconColor={dark ? 'white' : 'black'}
|
|
|
|
selectedValue={period}
|
|
|
|
onValueChange={value => setPeriod(value)}>
|
|
|
|
<Picker.Item value={Periods.Weekly} label={Periods.Weekly} />
|
|
|
|
<Picker.Item value={Periods.Monthly} label={Periods.Monthly} />
|
|
|
|
<Picker.Item value={Periods.Yearly} label={Periods.Yearly} />
|
|
|
|
</Picker>
|
|
|
|
{metric === Metrics.Volume ? (
|
|
|
|
<Chart
|
|
|
|
yData={volumes.map(v => v.value)}
|
|
|
|
yFormat={(value: number) =>
|
|
|
|
`${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${
|
2022-10-26 05:04:33 +00:00
|
|
|
volumes[0].unit || 'kg'
|
2022-10-23 06:13:58 +00:00
|
|
|
}`
|
|
|
|
}
|
|
|
|
xData={weights}
|
|
|
|
xFormat={(_value, index) => formatMonth(weights[index].created!)}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Chart
|
|
|
|
yData={weights.map(set => set.weight)}
|
|
|
|
yFormat={value => `${value}${weights[0].unit}`}
|
|
|
|
xData={weights}
|
|
|
|
xFormat={(_value, index) => formatMonth(weights[index].created!)}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</View>
|
|
|
|
</>
|
2022-07-08 12:11:10 +00:00
|
|
|
);
|
|
|
|
}
|