Add image to set edit page
This commit is contained in:
parent
edf823ca8b
commit
df45938bc3
61
SetForm.tsx
61
SetForm.tsx
|
@ -1,6 +1,9 @@
|
||||||
import React, {useContext, useRef, useState} from 'react';
|
import React, {useCallback, useContext, useRef, useState} from 'react';
|
||||||
import {ScrollView, TextInput, View} from 'react-native';
|
import {ScrollView, TextInput, View} from 'react-native';
|
||||||
import {Button, Text} from 'react-native-paper';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
|
import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
|
||||||
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
|
import {MARGIN} from './constants';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {SnackbarContext} from './MassiveSnack';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
@ -19,32 +22,35 @@ export default function SetForm({
|
||||||
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());
|
||||||
|
const [uri, setUri] = useState(set.image);
|
||||||
const [unit, setUnit] = useState(set.unit);
|
const [unit, setUnit] = useState(set.unit);
|
||||||
|
const [showRemove, setShowRemove] = useState(false);
|
||||||
const [selection, setSelection] = useState({
|
const [selection, setSelection] = useState({
|
||||||
start: 0,
|
start: 0,
|
||||||
end: set.reps.toString().length,
|
end: set.reps.toString().length,
|
||||||
});
|
});
|
||||||
|
const [removeImage, setRemoveImage] = useState(false);
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useContext(SnackbarContext);
|
||||||
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 handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
console.log(`${SetForm.name}.handleSubmit:`, {set});
|
console.log(`${SetForm.name}.handleSubmit:`, {set, uri, name});
|
||||||
if (!name) return;
|
if (!name) return;
|
||||||
let saveImage = set.image;
|
let image = uri;
|
||||||
if (!set.image)
|
if (!uri && !set.image && !removeImage)
|
||||||
saveImage = await getSets({search: name, limit: 1, offset: 0}).then(
|
image = await getSets({search: name, limit: 1, offset: 0}).then(
|
||||||
([s]) => s?.image,
|
([s]) => s?.image,
|
||||||
);
|
);
|
||||||
console.log(`${SetForm.name}.handleSubmit:`, {saveImage, name});
|
console.log(`${SetForm.name}.handleSubmit:`, {image});
|
||||||
save({
|
save({
|
||||||
name,
|
name,
|
||||||
reps: Number(reps),
|
reps: Number(reps),
|
||||||
weight: Number(weight),
|
weight: Number(weight),
|
||||||
id: set.id,
|
id: set.id,
|
||||||
unit,
|
unit,
|
||||||
image: saveImage,
|
image,
|
||||||
minutes: Number(set.minutes ?? 3),
|
minutes: Number(set.minutes ?? 3),
|
||||||
seconds: Number(set.seconds ?? 30),
|
seconds: Number(set.seconds ?? 30),
|
||||||
sets: set.sets ?? 3,
|
sets: set.sets ?? 3,
|
||||||
|
@ -63,6 +69,20 @@ export default function SetForm({
|
||||||
toast('Commas and single quotes would break CSV exports', 6000);
|
toast('Commas and single quotes would break CSV exports', 6000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const changeImage = useCallback(async () => {
|
||||||
|
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
||||||
|
type: 'image/*',
|
||||||
|
copyTo: 'documentDirectory',
|
||||||
|
});
|
||||||
|
if (fileCopyUri) setUri(fileCopyUri);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleRemove = useCallback(async () => {
|
||||||
|
setUri('');
|
||||||
|
setRemoveImage(true);
|
||||||
|
setShowRemove(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ScrollView style={{height: '90%'}}>
|
<ScrollView style={{height: '90%'}}>
|
||||||
|
@ -103,7 +123,7 @@ export default function SetForm({
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{workouts.length > 0 && !!settings.workouts && (
|
{workouts.length > 0 && !!settings.workouts && (
|
||||||
<View style={{flexDirection: 'row'}}>
|
<View style={{flexDirection: 'row', marginBottom: MARGIN}}>
|
||||||
{workouts.map((workout, index) => (
|
{workouts.map((workout, index) => (
|
||||||
<Text key={workout}>
|
<Text key={workout}>
|
||||||
<Text
|
<Text
|
||||||
|
@ -119,6 +139,22 @@ export default function SetForm({
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
{!!settings.images && uri && (
|
||||||
|
<TouchableRipple
|
||||||
|
style={{marginBottom: MARGIN}}
|
||||||
|
onPress={changeImage}
|
||||||
|
onLongPress={() => setShowRemove(true)}>
|
||||||
|
<Card.Cover source={{uri}} />
|
||||||
|
</TouchableRipple>
|
||||||
|
)}
|
||||||
|
{!!settings.images && !uri && (
|
||||||
|
<Button
|
||||||
|
style={{marginBottom: MARGIN}}
|
||||||
|
onPress={changeImage}
|
||||||
|
icon="add-photo-alternate">
|
||||||
|
Image
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<Button
|
<Button
|
||||||
disabled={!name}
|
disabled={!name}
|
||||||
|
@ -127,6 +163,13 @@ export default function SetForm({
|
||||||
onPress={handleSubmit}>
|
onPress={handleSubmit}>
|
||||||
Save
|
Save
|
||||||
</Button>
|
</Button>
|
||||||
|
<ConfirmDialog
|
||||||
|
title="Remove image"
|
||||||
|
onOk={handleRemove}
|
||||||
|
show={showRemove}
|
||||||
|
setShow={setShowRemove}>
|
||||||
|
Are you sure you want to remove the image?
|
||||||
|
</ConfirmDialog>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import Set from './set';
|
||||||
export const updateSet = async (value: Set) => {
|
export const updateSet = async (value: Set) => {
|
||||||
const update = `
|
const update = `
|
||||||
UPDATE sets
|
UPDATE sets
|
||||||
SET name = ?, reps = ?, weight = ?, unit = ?
|
SET name = ?, reps = ?, weight = ?, unit = ?, image = ?
|
||||||
WHERE id = ?
|
WHERE id = ?
|
||||||
`;
|
`;
|
||||||
return db.executeSql(update, [
|
return db.executeSql(update, [
|
||||||
|
@ -12,6 +12,7 @@ export const updateSet = async (value: Set) => {
|
||||||
value.reps,
|
value.reps,
|
||||||
value.weight,
|
value.weight,
|
||||||
value.unit,
|
value.unit,
|
||||||
|
value.image,
|
||||||
value.id,
|
value.id,
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user