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)}
|
onDismiss={() => setShow(false)}
|
||||||
anchor={
|
anchor={
|
||||||
<Button icon="today" onPress={() => setShow(true)}>
|
<Button icon="today" onPress={() => setShow(true)}>
|
||||||
{selected}
|
{selected || 'Pick a day'}
|
||||||
</Button>
|
</Button>
|
||||||
}>
|
}>
|
||||||
{days.map(day => (
|
{days.map(day => (
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
icon={selected === day ? 'checkmark' : ''}
|
key={day}
|
||||||
|
icon={selected === day ? 'checkmark-circle' : 'ellipse'}
|
||||||
onPress={() => select(day)}
|
onPress={() => select(day)}
|
||||||
title={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 React, {useEffect, useState} from 'react';
|
||||||
import {StyleSheet, Text, View} from 'react-native';
|
import {StyleSheet, Text, View} from 'react-native';
|
||||||
import {Button, Modal, Portal, TextInput} from 'react-native-paper';
|
import {Button, Modal, Portal, TextInput} from 'react-native-paper';
|
||||||
import DayMenu from './DayMenu';
|
import DayMenu from './DayMenu';
|
||||||
|
import WorkoutMenu from './WorkoutMenu';
|
||||||
import {getDb} from './db';
|
import {getDb} from './db';
|
||||||
import {Plan} from './plan';
|
import {Plan} from './plan';
|
||||||
import Set from './set';
|
|
||||||
|
|
||||||
export default function EditPlan({
|
export default function EditPlan({
|
||||||
id,
|
id,
|
||||||
|
@ -22,10 +21,17 @@ export default function EditPlan({
|
||||||
}) {
|
}) {
|
||||||
const [days, setDays] = useState('');
|
const [days, setDays] = useState('');
|
||||||
const [workouts, setWorkouts] = useState('');
|
const [workouts, setWorkouts] = useState('');
|
||||||
|
const [names, setNames] = useState<string[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!id) return;
|
|
||||||
getDb().then(async db => {
|
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 = ?`, [
|
const [result] = await db.executeSql(`SELECT * FROM plans WHERE id = ?`, [
|
||||||
id,
|
id,
|
||||||
]);
|
]);
|
||||||
|
@ -59,6 +65,18 @@ export default function EditPlan({
|
||||||
setDays(newDays.join(','));
|
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 removeDay = (index: number) => {
|
||||||
const newDays = days.split(',');
|
const newDays = days.split(',');
|
||||||
delete newDays[index];
|
delete newDays[index];
|
||||||
|
@ -83,13 +101,18 @@ export default function EditPlan({
|
||||||
key={index}
|
key={index}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</View>
|
{workouts.split(',').map((workout, index) => (
|
||||||
<TextInput
|
<WorkoutMenu
|
||||||
style={styles.text}
|
index={index}
|
||||||
label="Workouts *"
|
selected={workout}
|
||||||
value={workouts}
|
onAdd={() => setWorkouts(workouts + ',')}
|
||||||
onChangeText={setWorkouts}
|
onSelect={option => selectWorkout(option, index)}
|
||||||
|
onDelete={() => removeWorkout(index)}
|
||||||
|
names={names}
|
||||||
|
key={index}
|
||||||
/>
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
<View style={styles.bottom}>
|
<View style={styles.bottom}>
|
||||||
<Button mode="contained" icon="save" onPress={save}>
|
<Button mode="contained" icon="save" onPress={save}>
|
||||||
Save
|
Save
|
||||||
|
@ -118,6 +141,7 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
bottom: {
|
bottom: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
marginTop: 10,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
|
|
|
@ -14,8 +14,8 @@ export default function Plans() {
|
||||||
const [showEdit, setShowEdit] = useState(false);
|
const [showEdit, setShowEdit] = useState(false);
|
||||||
|
|
||||||
const refresh = async () => {
|
const refresh = async () => {
|
||||||
const [result] = await getPlans({search});
|
const [plansResult] = await getPlans({search});
|
||||||
setPlans(result.rows.raw());
|
setPlans(plansResult.rows.raw());
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
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