Use flat list instead of chips for workouts
This commit is contained in:
parent
636bfa35a4
commit
5901722f22
|
@ -6,20 +6,23 @@ import {
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
|
import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
|
||||||
import {NativeModules, TextInput, View} from 'react-native';
|
import {NativeModules, TextInput, View} from 'react-native';
|
||||||
import {Button, Chip, IconButton} from 'react-native-paper';
|
import {FlatList} from 'react-native-gesture-handler';
|
||||||
|
import {Button, IconButton, List} from 'react-native-paper';
|
||||||
import {getBestSet} from './best.service';
|
import {getBestSet} from './best.service';
|
||||||
import {MARGIN, PADDING} from './constants';
|
import {PADDING} from './constants';
|
||||||
import CountMany from './count-many';
|
import CountMany from './count-many';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {SnackbarContext} from './MassiveSnack';
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
import {addSet, countManyToday} from './set.service';
|
import {addSet, countManyToday} from './set.service';
|
||||||
import SetForm from './SetForm';
|
import SetForm from './SetForm';
|
||||||
|
import useDark from './use-dark';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
|
||||||
export default function StartPlan() {
|
export default function StartPlan() {
|
||||||
const {params} = useRoute<RouteProp<PlanPageParams, 'StartPlan'>>();
|
const {params} = useRoute<RouteProp<PlanPageParams, 'StartPlan'>>();
|
||||||
const {set} = params;
|
const {set} = params;
|
||||||
|
const dark = useDark();
|
||||||
const [name, setName] = useState(set.name);
|
const [name, setName] = useState(set.name);
|
||||||
const [reps, setReps] = useState(set.reps.toString());
|
const [reps, setReps] = useState(set.reps.toString());
|
||||||
const [weight, setWeight] = useState(set.weight.toString());
|
const [weight, setWeight] = useState(set.weight.toString());
|
||||||
|
@ -27,18 +30,20 @@ export default function StartPlan() {
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useContext(SnackbarContext);
|
||||||
const [minutes, setMinutes] = useState(set.minutes);
|
const [minutes, setMinutes] = useState(set.minutes);
|
||||||
const [seconds, setSeconds] = useState(set.seconds);
|
const [seconds, setSeconds] = useState(set.seconds);
|
||||||
|
const [selected, setSelected] = useState<number>();
|
||||||
const {settings} = useSettings();
|
const {settings} = useSettings();
|
||||||
const [counts, setCounts] = useState<CountMany[]>();
|
const [counts, setCounts] = useState<CountMany[]>();
|
||||||
const [selection, setSelection] = useState({
|
|
||||||
start: 0,
|
|
||||||
end: set.reps.toString().length,
|
|
||||||
});
|
|
||||||
const weightRef = useRef<TextInput>(null);
|
const weightRef = useRef<TextInput>(null);
|
||||||
const repsRef = useRef<TextInput>(null);
|
const repsRef = useRef<TextInput>(null);
|
||||||
const unitRef = useRef<TextInput>(null);
|
const unitRef = useRef<TextInput>(null);
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
|
const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
|
||||||
|
|
||||||
|
const [selection, setSelection] = useState({
|
||||||
|
start: 0,
|
||||||
|
end: set.reps.toString().length,
|
||||||
|
});
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
navigation.getParent()?.setOptions({
|
navigation.getParent()?.setOptions({
|
||||||
|
@ -64,7 +69,7 @@ export default function StartPlan() {
|
||||||
unit,
|
unit,
|
||||||
});
|
});
|
||||||
countManyToday().then(setCounts);
|
countManyToday().then(setCounts);
|
||||||
toast('Saved workout', 3000);
|
toast('Added set', 3000);
|
||||||
if (!settings.alarm) return;
|
if (!settings.alarm) return;
|
||||||
const milliseconds = Number(minutes) * 60 * 1000 + Number(seconds) * 1000;
|
const milliseconds = Number(minutes) * 60 * 1000 + Number(seconds) * 1000;
|
||||||
const args = [milliseconds, !!settings.vibrate, settings.sound];
|
const args = [milliseconds, !!settings.vibrate, settings.sound];
|
||||||
|
@ -82,6 +87,7 @@ export default function StartPlan() {
|
||||||
|
|
||||||
const select = useCallback(
|
const select = useCallback(
|
||||||
async (index: number) => {
|
async (index: number) => {
|
||||||
|
setSelected(index);
|
||||||
console.log(`${StartPlan.name}.next:`, {name, workouts});
|
console.log(`${StartPlan.name}.next:`, {name, workouts});
|
||||||
const workout = workouts[index];
|
const workout = workouts[index];
|
||||||
console.log(`${StartPlan.name}.next:`, {workout});
|
console.log(`${StartPlan.name}.next:`, {workout});
|
||||||
|
@ -97,6 +103,22 @@ export default function StartPlan() {
|
||||||
[name, workouts],
|
[name, workouts],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const getTotal = useCallback(
|
||||||
|
(countName: string) =>
|
||||||
|
counts?.find(count => count.name === countName)?.total || 0,
|
||||||
|
[counts],
|
||||||
|
);
|
||||||
|
|
||||||
|
const getBackground = useCallback(
|
||||||
|
(index: number) => {
|
||||||
|
if (typeof selected === 'undefined') return;
|
||||||
|
if (selected !== index) return;
|
||||||
|
if (dark) return '#414141';
|
||||||
|
else return '#C2C2C2C2';
|
||||||
|
},
|
||||||
|
[selected, dark],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{padding: PADDING, flex: 1, flexDirection: 'column'}}>
|
<View style={{padding: PADDING, flex: 1, flexDirection: 'column'}}>
|
||||||
<View style={{flex: 1}}>
|
<View style={{flex: 1}}>
|
||||||
|
@ -129,19 +151,17 @@ export default function StartPlan() {
|
||||||
innerRef={unitRef}
|
innerRef={unitRef}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
|
<FlatList
|
||||||
{workouts.map((workout, index) => (
|
data={workouts}
|
||||||
<Chip
|
renderItem={({item, index}) => (
|
||||||
key={workout}
|
<List.Item
|
||||||
selected={workout === name}
|
title={item}
|
||||||
icon="fitness-center"
|
style={{backgroundColor: getBackground(index)}}
|
||||||
|
description={getTotal(item) + `/${set.sets}`}
|
||||||
onPress={() => select(index)}
|
onPress={() => select(index)}
|
||||||
style={{marginBottom: MARGIN, marginRight: MARGIN}}>
|
/>
|
||||||
{workout} x
|
)}
|
||||||
{counts?.find(count => count.name === workout)?.total || 0}
|
/>
|
||||||
</Chip>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
<Button mode="contained" icon="save" onPress={handleSubmit}>
|
<Button mode="contained" icon="save" onPress={handleSubmit}>
|
||||||
Save
|
Save
|
||||||
|
|
Loading…
Reference in New Issue
Block a user