Fix single views for new custom headers
This commit is contained in:
parent
36e6637ba2
commit
80b1a1ef56
|
@ -8,7 +8,7 @@ import {FlatList, Image} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import {getBestReps, getBestWeights} from './best.service';
|
import {getBestReps, getBestWeights} from './best.service';
|
||||||
import {BestPageParams} from './BestPage';
|
import {BestPageParams} from './BestPage';
|
||||||
import Header from './Header';
|
import DrawerHeader from './DrawerHeader';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
@ -33,10 +33,7 @@ export default function BestList() {
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
refresh();
|
refresh();
|
||||||
navigation.getParent()?.setOptions({
|
}, [refresh]),
|
||||||
headerRight: () => null,
|
|
||||||
});
|
|
||||||
}, [refresh, navigation]),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -60,7 +57,7 @@ export default function BestList() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header name="Best" />
|
<DrawerHeader name="Best" />
|
||||||
<Page search={search} setSearch={setSearch}>
|
<Page search={search} setSearch={setSearch}>
|
||||||
{bests?.length === 0 ? (
|
{bests?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
|
21
BestPage.tsx
21
BestPage.tsx
|
@ -1,10 +1,6 @@
|
||||||
import {DrawerNavigationProp} from '@react-navigation/drawer';
|
|
||||||
import {useNavigation} from '@react-navigation/native';
|
|
||||||
import {createStackNavigator} from '@react-navigation/stack';
|
import {createStackNavigator} from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {IconButton} from 'react-native-paper';
|
|
||||||
import BestList from './BestList';
|
import BestList from './BestList';
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import ViewBest from './ViewBest';
|
import ViewBest from './ViewBest';
|
||||||
|
|
||||||
|
@ -17,26 +13,11 @@ export type BestPageParams = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function BestPage() {
|
export default function BestPage() {
|
||||||
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack.Navigator
|
<Stack.Navigator
|
||||||
screenOptions={{headerShown: false, animationEnabled: false}}>
|
screenOptions={{headerShown: false, animationEnabled: false}}>
|
||||||
<Stack.Screen name="BestList" component={BestList} />
|
<Stack.Screen name="BestList" component={BestList} />
|
||||||
<Stack.Screen
|
<Stack.Screen name="ViewBest" component={ViewBest} />
|
||||||
name="ViewBest"
|
|
||||||
component={ViewBest}
|
|
||||||
listeners={{
|
|
||||||
beforeRemove: () => {
|
|
||||||
navigation.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
|
||||||
),
|
|
||||||
title: 'Best',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,16 @@
|
||||||
|
import {DrawerNavigationProp} from '@react-navigation/drawer';
|
||||||
import {useNavigation} from '@react-navigation/native';
|
import {useNavigation} from '@react-navigation/native';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Appbar, IconButton} from 'react-native-paper';
|
import {Appbar, IconButton} from 'react-native-paper';
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
import {DrawerParamList} from './drawer-param-list';
|
||||||
import DrawerMenu from './DrawerMenu';
|
import DrawerMenu from './DrawerMenu';
|
||||||
|
|
||||||
export default function Header({name}: {name: keyof DrawerParamList}) {
|
export default function DrawerHeader({name}: {name: keyof DrawerParamList}) {
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Appbar.Header>
|
<Appbar.Header>
|
||||||
<IconButton icon="menu" onPress={(navigation as any).openDrawer} />
|
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
||||||
<Appbar.Content title={name} />
|
<Appbar.Content title={name} />
|
||||||
<DrawerMenu name={name} />
|
<DrawerMenu name={name} />
|
||||||
</Appbar.Header>
|
</Appbar.Header>
|
20
EditPlan.tsx
20
EditPlan.tsx
|
@ -1,18 +1,18 @@
|
||||||
import {
|
import {
|
||||||
NavigationProp,
|
NavigationProp,
|
||||||
RouteProp,
|
RouteProp,
|
||||||
useFocusEffect,
|
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {ScrollView, StyleSheet, View} from 'react-native';
|
import {ScrollView, StyleSheet, View} from 'react-native';
|
||||||
import {Button, IconButton, Text} from 'react-native-paper';
|
import {Button, Text} from 'react-native-paper';
|
||||||
import {MARGIN, PADDING} from './constants';
|
import {MARGIN, PADDING} from './constants';
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
import {DrawerParamList} from './drawer-param-list';
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
import {addPlan, updatePlan} from './plan.service';
|
import {addPlan, updatePlan} from './plan.service';
|
||||||
import {getNames} from './set.service';
|
import {getNames} from './set.service';
|
||||||
|
import StackHeader from './StackHeader';
|
||||||
import Switch from './Switch';
|
import Switch from './Switch';
|
||||||
import {DAYS} from './time';
|
import {DAYS} from './time';
|
||||||
|
|
||||||
|
@ -28,19 +28,6 @@ export default function EditPlan() {
|
||||||
const [names, setNames] = useState<string[]>([]);
|
const [names, setNames] = useState<string[]>([]);
|
||||||
const navigation = useNavigation<NavigationProp<DrawerParamList>>();
|
const navigation = useNavigation<NavigationProp<DrawerParamList>>();
|
||||||
|
|
||||||
useFocusEffect(
|
|
||||||
useCallback(() => {
|
|
||||||
console.log(`${EditPlan.name}.focus:`, {plan});
|
|
||||||
navigation.getParent()?.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
|
||||||
),
|
|
||||||
headerRight: () => null,
|
|
||||||
title: plan.id ? 'Edit plan' : 'Create plan',
|
|
||||||
});
|
|
||||||
}, [navigation, plan]),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getNames().then(n => {
|
getNames().then(n => {
|
||||||
console.log(EditPlan.name, {n});
|
console.log(EditPlan.name, {n});
|
||||||
|
@ -87,6 +74,8 @@ export default function EditPlan() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<StackHeader title="Edit plan" />
|
||||||
<View style={{padding: PADDING, flex: 1}}>
|
<View style={{padding: PADDING, flex: 1}}>
|
||||||
<ScrollView style={{flex: 1}}>
|
<ScrollView style={{flex: 1}}>
|
||||||
<Text style={styles.title}>Days</Text>
|
<Text style={styles.title}>Days</Text>
|
||||||
|
@ -140,6 +129,7 @@ export default function EditPlan() {
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
27
EditSet.tsx
27
EditSet.tsx
|
@ -1,18 +1,13 @@
|
||||||
import {
|
import {RouteProp, useNavigation, useRoute} from '@react-navigation/native';
|
||||||
RouteProp,
|
|
||||||
useFocusEffect,
|
|
||||||
useNavigation,
|
|
||||||
useRoute,
|
|
||||||
} from '@react-navigation/native';
|
|
||||||
import React, {useCallback} from 'react';
|
import React, {useCallback} from 'react';
|
||||||
import {NativeModules, View} from 'react-native';
|
import {NativeModules, View} from 'react-native';
|
||||||
import {IconButton} from 'react-native-paper';
|
|
||||||
import {PADDING} from './constants';
|
import {PADDING} from './constants';
|
||||||
import {HomePageParams} from './home-page-params';
|
import {HomePageParams} from './home-page-params';
|
||||||
import {useSnackbar} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {addSet, getSet, updateSet} from './set.service';
|
import {addSet, getSet, updateSet} from './set.service';
|
||||||
import SetForm from './SetForm';
|
import SetForm from './SetForm';
|
||||||
|
import StackHeader from './StackHeader';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
|
||||||
export default function EditSet() {
|
export default function EditSet() {
|
||||||
|
@ -22,21 +17,6 @@ export default function EditSet() {
|
||||||
const {toast} = useSnackbar();
|
const {toast} = useSnackbar();
|
||||||
const {settings} = useSettings();
|
const {settings} = useSettings();
|
||||||
|
|
||||||
useFocusEffect(
|
|
||||||
useCallback(() => {
|
|
||||||
console.log(`${EditSet.name}.focus:`, set);
|
|
||||||
let title = 'Create set';
|
|
||||||
if (typeof set.id === 'number') title = 'Edit set';
|
|
||||||
navigation.getParent()?.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
|
||||||
),
|
|
||||||
headerRight: null,
|
|
||||||
title,
|
|
||||||
});
|
|
||||||
}, [navigation, set]),
|
|
||||||
);
|
|
||||||
|
|
||||||
const startTimer = useCallback(
|
const startTimer = useCallback(
|
||||||
async (name: string) => {
|
async (name: string) => {
|
||||||
if (!settings.alarm) return;
|
if (!settings.alarm) return;
|
||||||
|
@ -85,8 +65,11 @@ export default function EditSet() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<StackHeader title="Edit set" />
|
||||||
<View style={{padding: PADDING, flex: 1}}>
|
<View style={{padding: PADDING, flex: 1}}>
|
||||||
<SetForm save={save} set={set} />
|
<SetForm save={save} set={set} />
|
||||||
</View>
|
</View>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,15 @@
|
||||||
import {
|
import {RouteProp, useNavigation, useRoute} from '@react-navigation/native';
|
||||||
RouteProp,
|
|
||||||
useFocusEffect,
|
|
||||||
useNavigation,
|
|
||||||
useRoute,
|
|
||||||
} from '@react-navigation/native';
|
|
||||||
import React, {useCallback, useRef, useState} from 'react';
|
import React, {useCallback, useRef, useState} from 'react';
|
||||||
import {ScrollView, TextInput, View} from 'react-native';
|
import {ScrollView, TextInput, View} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
|
import {Button, Card, TouchableRipple} from 'react-native-paper';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN, PADDING} from './constants';
|
import {MARGIN, PADDING} from './constants';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {useSnackbar} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import {updatePlanWorkouts} from './plan.service';
|
import {updatePlanWorkouts} from './plan.service';
|
||||||
import {addSet, updateManySet, updateSetImage} from './set.service';
|
import {addSet, updateManySet, updateSetImage} from './set.service';
|
||||||
|
import StackHeader from './StackHeader';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
import {WorkoutsPageParams} from './WorkoutsPage';
|
import {WorkoutsPageParams} from './WorkoutsPage';
|
||||||
|
|
||||||
|
@ -39,19 +35,6 @@ export default function EditWorkout() {
|
||||||
const secondsRef = useRef<TextInput>(null);
|
const secondsRef = useRef<TextInput>(null);
|
||||||
const {settings} = useSettings();
|
const {settings} = useSettings();
|
||||||
|
|
||||||
useFocusEffect(
|
|
||||||
useCallback(() => {
|
|
||||||
navigation.getParent()?.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
|
||||||
),
|
|
||||||
headerRight: null,
|
|
||||||
title: params.value.name || 'New workout',
|
|
||||||
});
|
|
||||||
if (!name) return;
|
|
||||||
}, [navigation, name, params.value.name]),
|
|
||||||
);
|
|
||||||
|
|
||||||
const update = async () => {
|
const update = async () => {
|
||||||
await updateManySet({
|
await updateManySet({
|
||||||
oldName: params.value.name,
|
oldName: params.value.name,
|
||||||
|
@ -118,6 +101,8 @@ export default function EditWorkout() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<StackHeader title="Edit workout" />
|
||||||
<View style={{padding: PADDING, flex: 1}}>
|
<View style={{padding: PADDING, flex: 1}}>
|
||||||
<ScrollView style={{flex: 1}}>
|
<ScrollView style={{flex: 1}}>
|
||||||
<MassiveInput
|
<MassiveInput
|
||||||
|
@ -196,5 +181,6 @@ export default function EditWorkout() {
|
||||||
Are you sure you want to remove the image?
|
Are you sure you want to remove the image?
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
</View>
|
</View>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
21
HomePage.tsx
21
HomePage.tsx
|
@ -1,9 +1,5 @@
|
||||||
import {DrawerNavigationProp} from '@react-navigation/drawer';
|
|
||||||
import {useNavigation} from '@react-navigation/native';
|
|
||||||
import {createStackNavigator} from '@react-navigation/stack';
|
import {createStackNavigator} from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {IconButton} from 'react-native-paper';
|
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
|
||||||
import EditSet from './EditSet';
|
import EditSet from './EditSet';
|
||||||
import {HomePageParams} from './home-page-params';
|
import {HomePageParams} from './home-page-params';
|
||||||
import SetList from './SetList';
|
import SetList from './SetList';
|
||||||
|
@ -11,26 +7,11 @@ import SetList from './SetList';
|
||||||
const Stack = createStackNavigator<HomePageParams>();
|
const Stack = createStackNavigator<HomePageParams>();
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack.Navigator
|
<Stack.Navigator
|
||||||
screenOptions={{headerShown: false, animationEnabled: false}}>
|
screenOptions={{headerShown: false, animationEnabled: false}}>
|
||||||
<Stack.Screen name="Sets" component={SetList} />
|
<Stack.Screen name="Sets" component={SetList} />
|
||||||
<Stack.Screen
|
<Stack.Screen name="EditSet" component={EditSet} />
|
||||||
name="EditSet"
|
|
||||||
component={EditSet}
|
|
||||||
listeners={{
|
|
||||||
beforeRemove: () => {
|
|
||||||
navigation.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
|
||||||
),
|
|
||||||
title: 'Home',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
10
PlanList.tsx
10
PlanList.tsx
|
@ -6,8 +6,7 @@ import {
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {FlatList} from 'react-native';
|
import {FlatList} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import DrawerMenu from './DrawerMenu';
|
import DrawerHeader from './DrawerHeader';
|
||||||
import Header from './Header';
|
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import {Plan} from './plan';
|
import {Plan} from './plan';
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
|
@ -26,10 +25,7 @@ export default function PlanList() {
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
refresh();
|
refresh();
|
||||||
navigation.getParent()?.setOptions({
|
}, [refresh]),
|
||||||
headerRight: () => <DrawerMenu name="Plans" />,
|
|
||||||
});
|
|
||||||
}, [refresh, navigation]),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -48,7 +44,7 @@ export default function PlanList() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header name="Plans" />
|
<DrawerHeader name="Plans" />
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
{plans?.length === 0 ? (
|
{plans?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
|
36
PlanPage.tsx
36
PlanPage.tsx
|
@ -1,9 +1,5 @@
|
||||||
import {DrawerNavigationProp} from '@react-navigation/drawer';
|
|
||||||
import {useNavigation} from '@react-navigation/native';
|
|
||||||
import {createStackNavigator} from '@react-navigation/stack';
|
import {createStackNavigator} from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {IconButton} from 'react-native-paper';
|
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
|
||||||
import EditPlan from './EditPlan';
|
import EditPlan from './EditPlan';
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
import PlanList from './PlanList';
|
import PlanList from './PlanList';
|
||||||
|
@ -12,40 +8,12 @@ import StartPlan from './StartPlan';
|
||||||
const Stack = createStackNavigator<PlanPageParams>();
|
const Stack = createStackNavigator<PlanPageParams>();
|
||||||
|
|
||||||
export default function PlanPage() {
|
export default function PlanPage() {
|
||||||
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack.Navigator
|
<Stack.Navigator
|
||||||
screenOptions={{headerShown: false, animationEnabled: false}}>
|
screenOptions={{headerShown: false, animationEnabled: false}}>
|
||||||
<Stack.Screen name="PlanList" component={PlanList} />
|
<Stack.Screen name="PlanList" component={PlanList} />
|
||||||
<Stack.Screen
|
<Stack.Screen name="EditPlan" component={EditPlan} />
|
||||||
name="EditPlan"
|
<Stack.Screen name="StartPlan" component={StartPlan} />
|
||||||
component={EditPlan}
|
|
||||||
listeners={{
|
|
||||||
beforeRemove: () => {
|
|
||||||
navigation.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
|
||||||
),
|
|
||||||
title: 'Plans',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen
|
|
||||||
name="StartPlan"
|
|
||||||
component={StartPlan}
|
|
||||||
listeners={{
|
|
||||||
beforeRemove: () => {
|
|
||||||
navigation.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
|
||||||
),
|
|
||||||
title: 'Plans',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import {
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {FlatList} from 'react-native';
|
import {FlatList} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import Header from './Header';
|
import DrawerHeader from './DrawerHeader';
|
||||||
import {HomePageParams} from './home-page-params';
|
import {HomePageParams} from './home-page-params';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
@ -84,7 +84,7 @@ export default function SetList() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header name="Home" />
|
<DrawerHeader name="Home" />
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
{sets?.length === 0 ? (
|
{sets?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
|
|
@ -8,7 +8,7 @@ import {useColor} from './color';
|
||||||
import {darkColors, lightColors} from './colors';
|
import {darkColors, lightColors} from './colors';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
import Header from './Header';
|
import DrawerHeader from './DrawerHeader';
|
||||||
import Input from './input';
|
import Input from './input';
|
||||||
import {useSnackbar} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
|
@ -168,7 +168,7 @@ export default function SettingsPage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header name="Settings" />
|
<DrawerHeader name="Settings" />
|
||||||
<Page search={search} setSearch={setSearch}>
|
<Page search={search} setSearch={setSearch}>
|
||||||
<ScrollView style={{marginTop: MARGIN}}>
|
<ScrollView style={{marginTop: MARGIN}}>
|
||||||
{switches
|
{switches
|
||||||
|
|
30
StackHeader.tsx
Normal file
30
StackHeader.tsx
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
import {useNavigation} from '@react-navigation/native';
|
||||||
|
import React from 'react';
|
||||||
|
import Share from 'react-native-share';
|
||||||
|
import {FileSystem} from 'react-native-file-access';
|
||||||
|
import {Appbar, IconButton} from 'react-native-paper';
|
||||||
|
import {captureScreen} from 'react-native-view-shot';
|
||||||
|
|
||||||
|
export default function StackHeader({title}: {title: string}) {
|
||||||
|
const navigation = useNavigation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Appbar.Header>
|
||||||
|
<IconButton icon="arrow-back" onPress={navigation.goBack} />
|
||||||
|
<Appbar.Content title={title} />
|
||||||
|
<IconButton
|
||||||
|
onPress={() =>
|
||||||
|
captureScreen().then(async uri => {
|
||||||
|
const base64 = await FileSystem.readFile(uri, 'base64');
|
||||||
|
const url = `data:image/jpeg;base64,${base64}`;
|
||||||
|
Share.open({
|
||||||
|
type: 'image/jpeg',
|
||||||
|
url,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
icon="share"
|
||||||
|
/>
|
||||||
|
</Appbar.Header>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,13 +1,8 @@
|
||||||
import {
|
import {RouteProp, useFocusEffect, useRoute} from '@react-navigation/native';
|
||||||
RouteProp,
|
|
||||||
useFocusEffect,
|
|
||||||
useNavigation,
|
|
||||||
useRoute,
|
|
||||||
} from '@react-navigation/native';
|
|
||||||
import React, {useCallback, useMemo, useRef, useState} from 'react';
|
import React, {useCallback, useMemo, useRef, useState} from 'react';
|
||||||
import {NativeModules, TextInput, View} from 'react-native';
|
import {NativeModules, TextInput, View} from 'react-native';
|
||||||
import {FlatList} from 'react-native-gesture-handler';
|
import {FlatList} from 'react-native-gesture-handler';
|
||||||
import {Button, IconButton, List, RadioButton} from 'react-native-paper';
|
import {Button, List, RadioButton} from 'react-native-paper';
|
||||||
import {getBestSet} from './best.service';
|
import {getBestSet} from './best.service';
|
||||||
import {useColor} from './color';
|
import {useColor} from './color';
|
||||||
import {PADDING} from './constants';
|
import {PADDING} from './constants';
|
||||||
|
@ -18,6 +13,7 @@ import {PlanPageParams} from './plan-page-params';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {addSet, countManyToday, getDistinctSets} from './set.service';
|
import {addSet, countManyToday, getDistinctSets} from './set.service';
|
||||||
import SetForm from './SetForm';
|
import SetForm from './SetForm';
|
||||||
|
import StackHeader from './StackHeader';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
|
||||||
export default function StartPlan() {
|
export default function StartPlan() {
|
||||||
|
@ -38,7 +34,6 @@ export default function StartPlan() {
|
||||||
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 navigation = useNavigation();
|
|
||||||
const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
|
const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
|
||||||
const {color} = useColor();
|
const {color} = useColor();
|
||||||
|
|
||||||
|
@ -49,13 +44,6 @@ export default function StartPlan() {
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
navigation.getParent()?.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
|
||||||
),
|
|
||||||
headerRight: null,
|
|
||||||
title: params.plan.days.replace(/,/g, ', '),
|
|
||||||
});
|
|
||||||
countManyToday().then(newCounts => {
|
countManyToday().then(newCounts => {
|
||||||
setCounts(newCounts);
|
setCounts(newCounts);
|
||||||
console.log(`${StartPlan.name}.focus:`, {newCounts});
|
console.log(`${StartPlan.name}.focus:`, {newCounts});
|
||||||
|
@ -66,7 +54,7 @@ export default function StartPlan() {
|
||||||
console.log(`${StartPlan.name}.focus:`, {newDistinct});
|
console.log(`${StartPlan.name}.focus:`, {newDistinct});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}, [navigation, params]),
|
}, [params]),
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
|
@ -129,13 +117,16 @@ export default function StartPlan() {
|
||||||
if (!distinctSets) return;
|
if (!distinctSets) return;
|
||||||
const distinct = distinctSets.find(d => d.name === countName);
|
const distinct = distinctSets.find(d => d.name === countName);
|
||||||
console.log(`${StartPlan.name}:`, {distinct});
|
console.log(`${StartPlan.name}:`, {distinct});
|
||||||
if (settings.showSets) return `${count?.total || 0} / ${distinct?.sets}`;
|
if (settings.showSets)
|
||||||
|
return `${count?.total || 0} / ${distinct?.sets || 3}`;
|
||||||
return count?.total || '0';
|
return count?.total || '0';
|
||||||
},
|
},
|
||||||
[counts, distinctSets, settings.showSets],
|
[counts, distinctSets, settings.showSets],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<StackHeader title={params.plan.days.replace(/,/g, ', ')} />
|
||||||
<View style={{padding: PADDING, flex: 1, flexDirection: 'column'}}>
|
<View style={{padding: PADDING, flex: 1, flexDirection: 'column'}}>
|
||||||
<View style={{flex: 1}}>
|
<View style={{flex: 1}}>
|
||||||
<MassiveInput
|
<MassiveInput
|
||||||
|
@ -194,5 +185,6 @@ export default function StartPlan() {
|
||||||
Save
|
Save
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
45
ViewBest.tsx
45
ViewBest.tsx
|
@ -1,16 +1,7 @@
|
||||||
import {Picker} from '@react-native-picker/picker';
|
import {Picker} from '@react-native-picker/picker';
|
||||||
import {
|
import {RouteProp, useRoute} from '@react-navigation/native';
|
||||||
RouteProp,
|
import React, {useEffect, useState} from 'react';
|
||||||
useFocusEffect,
|
|
||||||
useNavigation,
|
|
||||||
useRoute,
|
|
||||||
} from '@react-navigation/native';
|
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
|
||||||
import {View} from 'react-native';
|
import {View} from 'react-native';
|
||||||
import {FileSystem} from 'react-native-file-access';
|
|
||||||
import {IconButton} from 'react-native-paper';
|
|
||||||
import Share from 'react-native-share';
|
|
||||||
import {captureScreen} from 'react-native-view-shot';
|
|
||||||
import {getOneRepMax, getVolumes, getWeightsBy} from './best.service';
|
import {getOneRepMax, getVolumes, getWeightsBy} from './best.service';
|
||||||
import {BestPageParams} from './BestPage';
|
import {BestPageParams} from './BestPage';
|
||||||
import Chart from './Chart';
|
import Chart from './Chart';
|
||||||
|
@ -18,6 +9,7 @@ import {PADDING} from './constants';
|
||||||
import {Metrics} from './metrics';
|
import {Metrics} from './metrics';
|
||||||
import {Periods} from './periods';
|
import {Periods} from './periods';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
import StackHeader from './StackHeader';
|
||||||
import {formatMonth} from './time';
|
import {formatMonth} from './time';
|
||||||
import useDark from './use-dark';
|
import useDark from './use-dark';
|
||||||
import Volume from './volume';
|
import Volume from './volume';
|
||||||
|
@ -29,34 +21,6 @@ export default function ViewBest() {
|
||||||
const [volumes, setVolumes] = useState<Volume[]>([]);
|
const [volumes, setVolumes] = useState<Volume[]>([]);
|
||||||
const [metric, setMetric] = useState(Metrics.Weight);
|
const [metric, setMetric] = useState(Metrics.Weight);
|
||||||
const [period, setPeriod] = useState(Periods.Monthly);
|
const [period, setPeriod] = useState(Periods.Monthly);
|
||||||
const navigation = useNavigation();
|
|
||||||
|
|
||||||
useFocusEffect(
|
|
||||||
useCallback(() => {
|
|
||||||
console.log(`${ViewBest.name}.useFocusEffect`);
|
|
||||||
navigation.getParent()?.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
|
||||||
),
|
|
||||||
headerRight: () => (
|
|
||||||
<IconButton
|
|
||||||
onPress={() =>
|
|
||||||
captureScreen().then(async uri => {
|
|
||||||
const base64 = await FileSystem.readFile(uri, 'base64');
|
|
||||||
const url = `data:image/jpeg;base64,${base64}`;
|
|
||||||
Share.open({
|
|
||||||
type: 'image/jpeg',
|
|
||||||
url,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
icon="share"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
title: params.best.name,
|
|
||||||
});
|
|
||||||
}, [navigation, params.best]),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(`${ViewBest.name}.useEffect`, {metric});
|
console.log(`${ViewBest.name}.useEffect`, {metric});
|
||||||
|
@ -74,6 +38,8 @@ export default function ViewBest() {
|
||||||
}, [params.best.name, metric, period]);
|
}, [params.best.name, metric, period]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<StackHeader title={params.best.name} />
|
||||||
<View style={{padding: PADDING}}>
|
<View style={{padding: PADDING}}>
|
||||||
<Picker
|
<Picker
|
||||||
style={{color: dark ? 'white' : 'black'}}
|
style={{color: dark ? 'white' : 'black'}}
|
||||||
|
@ -113,5 +79,6 @@ export default function ViewBest() {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import {
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {FlatList} from 'react-native';
|
import {FlatList} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import Header from './Header';
|
import DrawerHeader from './DrawerHeader';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {getDistinctSets} from './set.service';
|
import {getDistinctSets} from './set.service';
|
||||||
|
@ -81,7 +81,7 @@ export default function WorkoutList() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header name="Workouts" />
|
<DrawerHeader name="Workouts" />
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
{workouts?.length === 0 ? (
|
{workouts?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
import {DrawerNavigationProp} from '@react-navigation/drawer';
|
|
||||||
import {useNavigation} from '@react-navigation/native';
|
|
||||||
import {createStackNavigator} from '@react-navigation/stack';
|
import {createStackNavigator} from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {IconButton} from 'react-native-paper';
|
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
|
||||||
import EditWorkout from './EditWorkout';
|
import EditWorkout from './EditWorkout';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import WorkoutList from './WorkoutList';
|
import WorkoutList from './WorkoutList';
|
||||||
|
@ -18,26 +14,11 @@ export type WorkoutsPageParams = {
|
||||||
const Stack = createStackNavigator<WorkoutsPageParams>();
|
const Stack = createStackNavigator<WorkoutsPageParams>();
|
||||||
|
|
||||||
export default function WorkoutsPage() {
|
export default function WorkoutsPage() {
|
||||||
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack.Navigator
|
<Stack.Navigator
|
||||||
screenOptions={{headerShown: false, animationEnabled: false}}>
|
screenOptions={{headerShown: false, animationEnabled: false}}>
|
||||||
<Stack.Screen name="WorkoutList" component={WorkoutList} />
|
<Stack.Screen name="WorkoutList" component={WorkoutList} />
|
||||||
<Stack.Screen
|
<Stack.Screen name="EditWorkout" component={EditWorkout} />
|
||||||
name="EditWorkout"
|
|
||||||
component={EditWorkout}
|
|
||||||
listeners={{
|
|
||||||
beforeRemove: () => {
|
|
||||||
navigation.setOptions({
|
|
||||||
headerLeft: () => (
|
|
||||||
<IconButton icon="menu" onPress={navigation.openDrawer} />
|
|
||||||
),
|
|
||||||
title: 'Workouts',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user