Fix new plan not showing workouts
This commit is contained in:
parent
57f56cb91f
commit
d938ec775a
|
@ -43,12 +43,13 @@ export default function DayMenu({
|
|||
onDismiss={() => setShow(false)}
|
||||
anchor={
|
||||
<Button icon="today" onPress={() => setShow(true)}>
|
||||
{selected}
|
||||
{selected || 'Pick a day'}
|
||||
</Button>
|
||||
}>
|
||||
{days.map(day => (
|
||||
<Menu.Item
|
||||
icon={selected === day ? 'checkmark' : ''}
|
||||
key={day}
|
||||
icon={selected === day ? 'checkmark-circle' : 'ellipse'}
|
||||
onPress={() => select(day)}
|
||||
title={day}
|
||||
/>
|
||||
|
|
42
EditPlan.tsx
42
EditPlan.tsx
|
@ -1,11 +1,10 @@
|
|||
import {setDay} from 'date-fns';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {StyleSheet, Text, View} from 'react-native';
|
||||
import {Button, Modal, Portal, TextInput} from 'react-native-paper';
|
||||
import DayMenu from './DayMenu';
|
||||
import WorkoutMenu from './WorkoutMenu';
|
||||
import {getDb} from './db';
|
||||
import {Plan} from './plan';
|
||||
import Set from './set';
|
||||
|
||||
export default function EditPlan({
|
||||
id,
|
||||
|
@ -22,10 +21,17 @@ export default function EditPlan({
|
|||
}) {
|
||||
const [days, setDays] = useState('');
|
||||
const [workouts, setWorkouts] = useState('');
|
||||
const [names, setNames] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
getDb().then(async db => {
|
||||
const [namesResult] = await db.executeSql(
|
||||
'SELECT DISTINCT name FROM sets',
|
||||
);
|
||||
if (!namesResult.rows.length) return;
|
||||
setNames(namesResult.rows.raw().map(({name}) => name));
|
||||
if (!id) return;
|
||||
console.log('Getting plans...');
|
||||
const [result] = await db.executeSql(`SELECT * FROM plans WHERE id = ?`, [
|
||||
id,
|
||||
]);
|
||||
|
@ -59,6 +65,18 @@ export default function EditPlan({
|
|||
setDays(newDays.join(','));
|
||||
};
|
||||
|
||||
const selectWorkout = (workout: string, index: number) => {
|
||||
const newWorkouts = workouts.split(',');
|
||||
newWorkouts[index] = workout;
|
||||
setWorkouts(newWorkouts.join(','));
|
||||
};
|
||||
|
||||
const removeWorkout = (index: number) => {
|
||||
const newWorkouts = workouts.split(',');
|
||||
delete newWorkouts[index];
|
||||
setWorkouts(newWorkouts.filter(day => day).join(','));
|
||||
};
|
||||
|
||||
const removeDay = (index: number) => {
|
||||
const newDays = days.split(',');
|
||||
delete newDays[index];
|
||||
|
@ -83,13 +101,18 @@ export default function EditPlan({
|
|||
key={index}
|
||||
/>
|
||||
))}
|
||||
{workouts.split(',').map((workout, index) => (
|
||||
<WorkoutMenu
|
||||
index={index}
|
||||
selected={workout}
|
||||
onAdd={() => setWorkouts(workouts + ',')}
|
||||
onSelect={option => selectWorkout(option, index)}
|
||||
onDelete={() => removeWorkout(index)}
|
||||
names={names}
|
||||
key={index}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Workouts *"
|
||||
value={workouts}
|
||||
onChangeText={setWorkouts}
|
||||
/>
|
||||
<View style={styles.bottom}>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
Save
|
||||
|
@ -118,6 +141,7 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
bottom: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 10,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
|
|
|
@ -14,8 +14,8 @@ export default function Plans() {
|
|||
const [showEdit, setShowEdit] = useState(false);
|
||||
|
||||
const refresh = async () => {
|
||||
const [result] = await getPlans({search});
|
||||
setPlans(result.rows.raw());
|
||||
const [plansResult] = await getPlans({search});
|
||||
setPlans(plansResult.rows.raw());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
55
WorkoutMenu.tsx
Normal file
55
WorkoutMenu.tsx
Normal file
|
@ -0,0 +1,55 @@
|
|||
import {useState} from 'react';
|
||||
import React from 'react';
|
||||
import {Button, Divider, Menu} from 'react-native-paper';
|
||||
|
||||
export default function DayMenu({
|
||||
onSelect,
|
||||
onDelete,
|
||||
onAdd,
|
||||
selected,
|
||||
index,
|
||||
names,
|
||||
}: {
|
||||
onSelect: (option: string) => void;
|
||||
onDelete: () => void;
|
||||
onAdd: () => void;
|
||||
selected: string;
|
||||
index: number;
|
||||
names: string[];
|
||||
}) {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
const add = () => {
|
||||
onAdd();
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
const select = (day: string) => {
|
||||
onSelect(day);
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
anchor={
|
||||
<Button icon="barbell" onPress={() => setShow(true)}>
|
||||
{selected || 'Pick a workout'}
|
||||
</Button>
|
||||
}>
|
||||
{names.map(name => (
|
||||
<Menu.Item
|
||||
key={name}
|
||||
icon={selected === name ? 'checkmark-circle' : 'ellipse'}
|
||||
onPress={() => select(name)}
|
||||
title={name}
|
||||
/>
|
||||
))}
|
||||
<Menu.Item icon="add" title="Add" onPress={add} />
|
||||
{index > 0 && (
|
||||
<Menu.Item icon="trash" title="Delete" onPress={onDelete} />
|
||||
)}
|
||||
</Menu>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user