Add images to workouts list

This commit is contained in:
Brandon Presley 2022-08-29 13:44:45 +12:00
parent f6dec0c3b2
commit 5578318ead
1 changed files with 33 additions and 20 deletions

View File

@ -1,6 +1,6 @@
import {NavigationProp, useNavigation} from '@react-navigation/native'; import {NavigationProp, useNavigation} from '@react-navigation/native';
import React, {useCallback, useContext, useState} from 'react'; import React, {useCallback, useContext, useEffect, useState} from 'react';
import {GestureResponderEvent, Text} from 'react-native'; import {GestureResponderEvent, Image, Text} from 'react-native';
import {List, Menu} from 'react-native-paper'; import {List, Menu} from 'react-native-paper';
import {DatabaseContext} from './App'; import {DatabaseContext} from './App';
import ConfirmDialog from './ConfirmDialog'; import ConfirmDialog from './ConfirmDialog';
@ -17,9 +17,19 @@ export default function WorkoutItem({
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const [anchor, setAnchor] = useState({x: 0, y: 0}); const [anchor, setAnchor] = useState({x: 0, y: 0});
const [showRemove, setShowRemove] = useState(''); const [showRemove, setShowRemove] = useState('');
const [uri, setUri] = useState('');
const db = useContext(DatabaseContext); const db = useContext(DatabaseContext);
const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>(); const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>();
useEffect(() => {
db.executeSql(`SELECT image FROM sets WHERE name = ? LIMIT 1`, [
item.name,
]).then(([result]) => {
setUri(result.rows.item(0)?.image);
console.log(WorkoutItem.name, item.name, result.rows.item(0)?.image);
});
}, [db, item.name]);
const remove = useCallback(async () => { const remove = useCallback(async () => {
await db.executeSql(`DELETE FROM sets WHERE name = ?`, [item.name]); await db.executeSql(`DELETE FROM sets WHERE name = ?`, [item.name]);
setShowMenu(false); setShowMenu(false);
@ -41,24 +51,27 @@ export default function WorkoutItem({
title={item.name} title={item.name}
onLongPress={longPress} onLongPress={longPress}
right={() => ( right={() => (
<Text <>
style={{ {uri && <Image source={{uri}} style={{height: 75, width: 75}} />}
alignSelf: 'center', <Text
}}> style={{
<Menu alignSelf: 'center',
anchor={anchor} }}>
visible={showMenu} <Menu
onDismiss={() => setShowMenu(false)}> anchor={anchor}
<Menu.Item visible={showMenu}
icon="trash" onDismiss={() => setShowMenu(false)}>
onPress={() => { <Menu.Item
setShowRemove(item.name); icon="trash"
setShowMenu(false); onPress={() => {
}} setShowRemove(item.name);
title="Delete" setShowMenu(false);
/> }}
</Menu> title="Delete"
</Text> />
</Menu>
</Text>
</>
)} )}
/> />
<ConfirmDialog <ConfirmDialog