Make plans use stack navigation
This commit is contained in:
parent
6b8780c62e
commit
e72cdc8db7
4
App.tsx
4
App.tsx
|
@ -26,7 +26,7 @@ export type DrawerParamList = {
|
|||
Home: {};
|
||||
Settings: {};
|
||||
Best: {};
|
||||
Plan: {};
|
||||
Plans: {};
|
||||
};
|
||||
|
||||
export const DatabaseContext = React.createContext<SQLiteDatabase>({} as any);
|
||||
|
@ -83,7 +83,7 @@ const App = () => {
|
|||
/>
|
||||
),
|
||||
}}
|
||||
name="Plan"
|
||||
name="Plans"
|
||||
component={PlanPage}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
|
|
152
EditPlan.tsx
152
EditPlan.tsx
|
@ -1,23 +1,36 @@
|
|||
import {
|
||||
RouteProp,
|
||||
useFocusEffect,
|
||||
useNavigation,
|
||||
useRoute,
|
||||
} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {ScrollView, StyleSheet, Text, View} from 'react-native';
|
||||
import {Button, Dialog, Portal, Switch} from 'react-native-paper';
|
||||
import {Button, IconButton, Switch} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {Plan} from './plan';
|
||||
import {PlanPageParams} from './PlanPage';
|
||||
import {DAYS} from './time';
|
||||
|
||||
export default function EditPlan({
|
||||
plan,
|
||||
onSave,
|
||||
setPlan,
|
||||
}: {
|
||||
onSave: () => void;
|
||||
plan?: Plan;
|
||||
setPlan: (plan?: Plan) => void;
|
||||
}) {
|
||||
const [days, setDays] = useState<string[]>([]);
|
||||
const [workouts, setWorkouts] = useState<string[]>([]);
|
||||
export default function EditPlan() {
|
||||
const {params} = useRoute<RouteProp<PlanPageParams, 'EditPlan'>>();
|
||||
const [days, setDays] = useState<string[]>(params.plan.days.split(','));
|
||||
const [workouts, setWorkouts] = useState<string[]>(
|
||||
params.plan.workouts.split(','),
|
||||
);
|
||||
const [names, setNames] = useState<string[]>([]);
|
||||
const db = useContext(DatabaseContext);
|
||||
const navigation = useNavigation();
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
navigation.getParent()?.setOptions({
|
||||
headerLeft: () => (
|
||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
||||
),
|
||||
title: 'Plan',
|
||||
});
|
||||
}, []),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const refresh = async () => {
|
||||
|
@ -26,19 +39,16 @@ export default function EditPlan({
|
|||
);
|
||||
if (!namesResult.rows.length) return setNames([]);
|
||||
setNames(namesResult.rows.raw().map(({name}) => name));
|
||||
if (!plan) return;
|
||||
if (plan.days) setDays(plan.days.split(','));
|
||||
if (plan.workouts) setWorkouts(plan.workouts.split(','));
|
||||
};
|
||||
refresh();
|
||||
}, [plan, db]);
|
||||
}, [db]);
|
||||
|
||||
const save = useCallback(async () => {
|
||||
console.log(`${EditPlan.name}.save`, {days, workouts, plan});
|
||||
console.log(`${EditPlan.name}.save`, {days, workouts, params});
|
||||
if (!days || !workouts) return;
|
||||
const newWorkouts = workouts.filter(workout => workout).join(',');
|
||||
const newDays = days.filter(day => day).join(',');
|
||||
if (!plan?.id)
|
||||
if (!params.plan.id)
|
||||
await db.executeSql(`INSERT INTO plans(days, workouts) VALUES (?, ?)`, [
|
||||
newDays,
|
||||
newWorkouts,
|
||||
|
@ -46,11 +56,10 @@ export default function EditPlan({
|
|||
else
|
||||
await db.executeSql(
|
||||
`UPDATE plans SET days = ?, workouts = ? WHERE id = ?`,
|
||||
[newDays, newWorkouts, plan.id],
|
||||
[newDays, newWorkouts, params.plan.id],
|
||||
);
|
||||
setPlan(undefined);
|
||||
onSave();
|
||||
}, [days, workouts, db, onSave, plan, setPlan]);
|
||||
navigation.goBack();
|
||||
}, [days, workouts, db, params.plan]);
|
||||
|
||||
const toggleWorkout = useCallback(
|
||||
(on: boolean, name: string) => {
|
||||
|
@ -75,60 +84,49 @@ export default function EditPlan({
|
|||
);
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<Dialog visible={!!plan} onDismiss={() => setPlan(undefined)}>
|
||||
<Dialog.Title>
|
||||
{plan?.days ? `Edit "${days.slice(0, 2).join(', ')}"` : 'Add a plan'}
|
||||
</Dialog.Title>
|
||||
<Dialog.ScrollArea>
|
||||
<ScrollView
|
||||
style={{height: '80%'}}
|
||||
contentContainerStyle={{paddingHorizontal: 24}}>
|
||||
<Text style={styles.title}>Days</Text>
|
||||
{DAYS.map(day => (
|
||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
value={days.includes(day)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleDay(value, day)}
|
||||
/>
|
||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
||||
{day}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
<Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
|
||||
{names.length === 0 && (
|
||||
<Text style={{maxWidth: '80%'}}>
|
||||
No sets found. Try going to the home page and adding some
|
||||
workouts first.
|
||||
</Text>
|
||||
)}
|
||||
{names.map(name => (
|
||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
value={workouts.includes(name)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleWorkout(value, name)}
|
||||
/>
|
||||
<Text
|
||||
onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||
{name}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</Dialog.ScrollArea>
|
||||
<Dialog.Actions>
|
||||
<Button icon="close" onPress={() => setPlan(undefined)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
Save
|
||||
</Button>
|
||||
</Dialog.Actions>
|
||||
</Dialog>
|
||||
</Portal>
|
||||
<View style={{padding: 10}}>
|
||||
<ScrollView style={{height: '90%'}}>
|
||||
<Text style={styles.title}>Days</Text>
|
||||
{DAYS.map(day => (
|
||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
value={days.includes(day)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleDay(value, day)}
|
||||
/>
|
||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
||||
{day}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
<Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
|
||||
{names.length === 0 && (
|
||||
<Text style={{maxWidth: '80%'}}>
|
||||
No sets found. Try going to the home page and adding some workouts
|
||||
first.
|
||||
</Text>
|
||||
)}
|
||||
{names.map(name => (
|
||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
value={workouts.includes(name)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleWorkout(value, name)}
|
||||
/>
|
||||
<Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||
{name}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
<Button
|
||||
style={{marginTop: 10}}
|
||||
mode="contained"
|
||||
icon="save"
|
||||
onPress={save}>
|
||||
Save
|
||||
</Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
118
EditSet.tsx
118
EditSet.tsx
|
@ -1,17 +1,22 @@
|
|||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import {RouteProp, useNavigation, useRoute} from '@react-navigation/native';
|
||||
import {
|
||||
RouteProp,
|
||||
useFocusEffect,
|
||||
useNavigation,
|
||||
useRoute,
|
||||
} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {NativeModules, ScrollView, StyleSheet} from 'react-native';
|
||||
import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
|
||||
import DateTimePickerModal from 'react-native-modal-datetime-picker';
|
||||
import {Button, TextInput} from 'react-native-paper';
|
||||
import {Button, IconButton, TextInput} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {StackParams} from './HomePage';
|
||||
import {HomePageParams} from './HomePage';
|
||||
import {Plan} from './plan';
|
||||
import Set from './set';
|
||||
import {DAYS, format} from './time';
|
||||
|
||||
export default function EditSet() {
|
||||
const {params} = useRoute<RouteProp<StackParams, 'EditSet'>>();
|
||||
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
|
||||
const [name, setName] = useState(params.set.name);
|
||||
const [reps, setReps] = useState(params.set.reps.toString());
|
||||
const [weight, setWeight] = useState(params.set.weight.toString());
|
||||
|
@ -21,6 +26,17 @@ export default function EditSet() {
|
|||
const db = useContext(DatabaseContext);
|
||||
const navigation = useNavigation();
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
navigation.getParent()?.setOptions({
|
||||
headerLeft: () => (
|
||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
||||
),
|
||||
title: 'Set',
|
||||
});
|
||||
}, []),
|
||||
);
|
||||
|
||||
const getTodaysPlan = useCallback(async (): Promise<Plan[]> => {
|
||||
const today = DAYS[new Date().getDay()];
|
||||
const [result] = await db.executeSql(
|
||||
|
@ -113,55 +129,57 @@ export default function EditSet() {
|
|||
}, [update, add, params.set.id]);
|
||||
|
||||
return (
|
||||
<ScrollView style={{padding: 10}}>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
autoFocus
|
||||
label="Name *"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
label="Reps *"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
label="Weight *"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
label="Unit (kg)"
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
<View style={{padding: 10}}>
|
||||
<ScrollView style={{height: '90%'}}>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
autoFocus
|
||||
label="Name *"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
label="Reps *"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
label="Weight *"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.marginBottom}
|
||||
label="Unit (kg)"
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
|
||||
<Button
|
||||
style={styles.marginBottom}
|
||||
icon="calendar-outline"
|
||||
onPress={() => setShowDate(true)}>
|
||||
{format(created)}
|
||||
</Button>
|
||||
<DateTimePickerModal
|
||||
isVisible={showDate}
|
||||
mode="datetime"
|
||||
onConfirm={onConfirm}
|
||||
onCancel={() => setShowDate(false)}
|
||||
date={created}
|
||||
/>
|
||||
<Button
|
||||
style={styles.marginBottom}
|
||||
icon="calendar-outline"
|
||||
onPress={() => setShowDate(true)}>
|
||||
{format(created)}
|
||||
</Button>
|
||||
<DateTimePickerModal
|
||||
isVisible={showDate}
|
||||
mode="datetime"
|
||||
onConfirm={onConfirm}
|
||||
onCancel={() => setShowDate(false)}
|
||||
date={created}
|
||||
/>
|
||||
</ScrollView>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
Save
|
||||
</Button>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
12
HomePage.tsx
12
HomePage.tsx
|
@ -8,8 +8,8 @@ import EditSet from './EditSet';
|
|||
import Set from './set';
|
||||
import SetList from './SetList';
|
||||
|
||||
const Stack = createStackNavigator<StackParams>();
|
||||
export type StackParams = {
|
||||
const Stack = createStackNavigator<HomePageParams>();
|
||||
export type HomePageParams = {
|
||||
Sets: {};
|
||||
EditSet: {
|
||||
set: Set;
|
||||
|
@ -27,14 +27,6 @@ export default function HomePage() {
|
|||
name="EditSet"
|
||||
component={EditSet}
|
||||
listeners={{
|
||||
focus: () => {
|
||||
navigation.setOptions({
|
||||
headerLeft: () => (
|
||||
<IconButton icon="arrow-back" onPress={navigation.goBack} />
|
||||
),
|
||||
title: 'Set',
|
||||
});
|
||||
},
|
||||
beforeRemove: () => {
|
||||
navigation.setOptions({
|
||||
headerLeft: () => (
|
||||
|
|
|
@ -1,21 +1,22 @@
|
|||
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useState} from 'react';
|
||||
import {GestureResponderEvent} from 'react-native';
|
||||
import {List, Menu} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {Plan} from './plan';
|
||||
import {PlanPageParams} from './PlanPage';
|
||||
|
||||
export default function PlanItem({
|
||||
item,
|
||||
setPlan,
|
||||
onRemove,
|
||||
}: {
|
||||
item: Plan;
|
||||
setPlan: (plan: Plan) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const [show, setShow] = useState(false);
|
||||
const [anchor, setAnchor] = useState({x: 0, y: 0});
|
||||
const db = useContext(DatabaseContext);
|
||||
const navigation = useNavigation<NavigationProp<PlanPageParams>>();
|
||||
|
||||
const remove = useCallback(async () => {
|
||||
await db.executeSql(`DELETE FROM plans WHERE id = ?`, [item.id]);
|
||||
|
@ -34,7 +35,7 @@ export default function PlanItem({
|
|||
return (
|
||||
<>
|
||||
<List.Item
|
||||
onPress={() => setPlan(item)}
|
||||
onPress={() => navigation.navigate('EditPlan', {plan: item})}
|
||||
title={item.days.replace(/,/g, ', ')}
|
||||
description={item.workouts.replace(/,/g, ', ')}
|
||||
onLongPress={longPress}
|
||||
|
|
92
PlanList.tsx
Normal file
92
PlanList.tsx
Normal file
|
@ -0,0 +1,92 @@
|
|||
import {
|
||||
NavigationProp,
|
||||
useFocusEffect,
|
||||
useNavigation,
|
||||
} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {FlatList, StyleSheet, View} from 'react-native';
|
||||
import {List, Searchbar} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import MassiveFab from './MassiveFab';
|
||||
import {Plan} from './plan';
|
||||
import PlanItem from './PlanItem';
|
||||
import {PlanPageParams} from './PlanPage';
|
||||
|
||||
export default function PlanList() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [plans, setPlans] = useState<Plan[]>([]);
|
||||
const [refreshing, setRefresing] = useState(false);
|
||||
const db = useContext(DatabaseContext);
|
||||
const navigation = useNavigation<NavigationProp<PlanPageParams>>();
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const selectPlans = `
|
||||
SELECT * from plans
|
||||
WHERE days LIKE ? OR workouts LIKE ?
|
||||
`;
|
||||
const getPlans = ({s}: {s: string}) =>
|
||||
db.executeSql(selectPlans, [`%${s}%`, `%${s}%`]);
|
||||
const [plansResult] = await getPlans({s: search});
|
||||
setPlans(plansResult.rows.raw());
|
||||
}, [search, db]);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
refresh();
|
||||
}, [refresh]),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!search) return;
|
||||
refresh();
|
||||
}, [search, refresh]);
|
||||
|
||||
const renderItem = useCallback(
|
||||
({item}: {item: Plan}) => (
|
||||
<PlanItem item={item} key={item.id} onRemove={refresh} />
|
||||
),
|
||||
[refresh],
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
|
||||
<FlatList
|
||||
style={{height: '100%'}}
|
||||
data={plans}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={set => set.id.toString()}
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => {
|
||||
setRefresing(true);
|
||||
refresh().finally(() => setRefresing(false));
|
||||
}}
|
||||
ListEmptyComponent={
|
||||
<List.Item
|
||||
title="No plans yet"
|
||||
description="A plan is a list of workouts for certain days."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<MassiveFab
|
||||
onPress={() =>
|
||||
navigation.navigate('EditPlan', {
|
||||
plan: {days: '', workouts: '', id: 0},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
paddingBottom: '10%',
|
||||
},
|
||||
progress: {
|
||||
marginTop: 10,
|
||||
},
|
||||
});
|
107
PlanPage.tsx
107
PlanPage.tsx
|
@ -1,85 +1,42 @@
|
|||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {FlatList, StyleSheet, View} from 'react-native';
|
||||
import {List, Searchbar} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {DrawerNavigationProp} from '@react-navigation/drawer';
|
||||
import {useNavigation} from '@react-navigation/native';
|
||||
import {createStackNavigator} from '@react-navigation/stack';
|
||||
import React from 'react';
|
||||
import {IconButton} from 'react-native-paper';
|
||||
import {DrawerParamList} from './App';
|
||||
import EditPlan from './EditPlan';
|
||||
import MassiveFab from './MassiveFab';
|
||||
import {Plan} from './plan';
|
||||
import PlanItem from './PlanItem';
|
||||
import PlanList from './PlanList';
|
||||
|
||||
const Stack = createStackNavigator<PlanPageParams>();
|
||||
export type PlanPageParams = {
|
||||
PlanList: {};
|
||||
EditPlan: {
|
||||
plan: Plan;
|
||||
};
|
||||
};
|
||||
|
||||
export default function PlanPage() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [plans, setPlans] = useState<Plan[]>([]);
|
||||
const [refreshing, setRefresing] = useState(false);
|
||||
const [plan, setPlan] = useState<Plan>();
|
||||
const db = useContext(DatabaseContext);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const selectPlans = `
|
||||
SELECT * from plans
|
||||
WHERE days LIKE ? OR workouts LIKE ?
|
||||
`;
|
||||
const getPlans = ({s}: {s: string}) =>
|
||||
db.executeSql(selectPlans, [`%${s}%`, `%${s}%`]);
|
||||
const [plansResult] = await getPlans({s: search});
|
||||
setPlans(plansResult.rows.raw());
|
||||
}, [search, db]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, [search, refresh]);
|
||||
|
||||
const renderItem = useCallback(
|
||||
({item}: {item: Plan}) => (
|
||||
<PlanItem
|
||||
item={item}
|
||||
key={item.id}
|
||||
setPlan={setPlan}
|
||||
onRemove={refresh}
|
||||
/>
|
||||
),
|
||||
[setPlan, refresh],
|
||||
);
|
||||
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
|
||||
<FlatList
|
||||
style={{height: '100%'}}
|
||||
data={plans}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={set => set.id.toString()}
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => {
|
||||
setRefresing(true);
|
||||
refresh().finally(() => setRefresing(false));
|
||||
}}
|
||||
ListEmptyComponent={
|
||||
<List.Item
|
||||
title="No plans yet"
|
||||
description="A plan is a list of workouts for certain days."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<EditPlan setPlan={setPlan} onSave={refresh} plan={plan} />
|
||||
|
||||
<MassiveFab
|
||||
onPress={() => {
|
||||
setPlan({} as Plan);
|
||||
<Stack.Navigator
|
||||
screenOptions={{headerShown: false, animationEnabled: false}}>
|
||||
<Stack.Screen name="PlanList" component={PlanList} />
|
||||
<Stack.Screen
|
||||
name="EditPlan"
|
||||
component={EditPlan}
|
||||
listeners={{
|
||||
beforeRemove: () => {
|
||||
navigation.setOptions({
|
||||
headerLeft: () => (
|
||||
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
||||
),
|
||||
title: 'Plans',
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
paddingBottom: '10%',
|
||||
},
|
||||
progress: {
|
||||
marginTop: 10,
|
||||
},
|
||||
});
|
||||
|
|
|
@ -3,7 +3,7 @@ import React, {useCallback, useContext, useState} from 'react';
|
|||
import {GestureResponderEvent} from 'react-native';
|
||||
import {List, Menu} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {StackParams} from './HomePage';
|
||||
import {HomePageParams} from './HomePage';
|
||||
import Set from './set';
|
||||
|
||||
export default function SetItem({
|
||||
|
@ -16,7 +16,7 @@ export default function SetItem({
|
|||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [anchor, setAnchor] = useState({x: 0, y: 0});
|
||||
const db = useContext(DatabaseContext);
|
||||
const navigation = useNavigation<NavigationProp<StackParams>>();
|
||||
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
||||
|
||||
const remove = useCallback(async () => {
|
||||
await db.executeSql(`DELETE FROM sets WHERE id = ?`, [item.id]);
|
||||
|
|
|
@ -7,7 +7,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
|
|||
import {FlatList, StyleSheet, View} from 'react-native';
|
||||
import {List, Searchbar} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {StackParams} from './HomePage';
|
||||
import {HomePageParams} from './HomePage';
|
||||
import MassiveFab from './MassiveFab';
|
||||
import Set from './set';
|
||||
import SetItem from './SetItem';
|
||||
|
@ -21,7 +21,7 @@ export default function SetList() {
|
|||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [end, setEnd] = useState(false);
|
||||
const db = useContext(DatabaseContext);
|
||||
const navigation = useNavigation<NavigationProp<StackParams>>();
|
||||
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
||||
|
||||
const selectSets = `
|
||||
SELECT * from sets
|
||||
|
|
Loading…
Reference in New Issue
Block a user