From 80b1a1ef565d0f3288ab30494e89774a955ac243 Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Sun, 23 Oct 2022 19:13:58 +1300 Subject: [PATCH] Fix single views for new custom headers --- BestList.tsx | 9 +- BestPage.tsx | 21 +---- Header.tsx => DrawerHeader.tsx | 7 +- EditPlan.tsx | 120 +++++++++++------------ EditSet.tsx | 33 ++----- EditWorkout.tsx | 168 +++++++++++++++------------------ HomePage.tsx | 21 +---- PlanList.tsx | 10 +- PlanPage.tsx | 36 +------ SetList.tsx | 4 +- SettingsPage.tsx | 4 +- StackHeader.tsx | 30 ++++++ StartPlan.tsx | 134 +++++++++++++------------- ViewBest.tsx | 123 +++++++++--------------- WorkoutList.tsx | 4 +- WorkoutsPage.tsx | 21 +---- 16 files changed, 299 insertions(+), 446 deletions(-) rename Header.tsx => DrawerHeader.tsx (56%) create mode 100644 StackHeader.tsx diff --git a/BestList.tsx b/BestList.tsx index 4e515ee..6e982f3 100644 --- a/BestList.tsx +++ b/BestList.tsx @@ -8,7 +8,7 @@ import {FlatList, Image} from 'react-native'; import {List} from 'react-native-paper'; import {getBestReps, getBestWeights} from './best.service'; import {BestPageParams} from './BestPage'; -import Header from './Header'; +import DrawerHeader from './DrawerHeader'; import Page from './Page'; import Set from './set'; import {useSettings} from './use-settings'; @@ -33,10 +33,7 @@ export default function BestList() { useFocusEffect( useCallback(() => { refresh(); - navigation.getParent()?.setOptions({ - headerRight: () => null, - }); - }, [refresh, navigation]), + }, [refresh]), ); useEffect(() => { @@ -60,7 +57,7 @@ export default function BestList() { return ( <> -
+ {bests?.length === 0 ? ( >(); - return ( - { - navigation.setOptions({ - headerLeft: () => ( - - ), - title: 'Best', - }); - }, - }} - /> + ); } diff --git a/Header.tsx b/DrawerHeader.tsx similarity index 56% rename from Header.tsx rename to DrawerHeader.tsx index 66ca0b1..34c90d3 100644 --- a/Header.tsx +++ b/DrawerHeader.tsx @@ -1,15 +1,16 @@ +import {DrawerNavigationProp} from '@react-navigation/drawer'; import {useNavigation} from '@react-navigation/native'; import React from 'react'; import {Appbar, IconButton} from 'react-native-paper'; import {DrawerParamList} from './drawer-param-list'; import DrawerMenu from './DrawerMenu'; -export default function Header({name}: {name: keyof DrawerParamList}) { - const navigation = useNavigation(); +export default function DrawerHeader({name}: {name: keyof DrawerParamList}) { + const navigation = useNavigation>(); return ( - + diff --git a/EditPlan.tsx b/EditPlan.tsx index c7c364b..0e65214 100644 --- a/EditPlan.tsx +++ b/EditPlan.tsx @@ -1,18 +1,18 @@ import { NavigationProp, RouteProp, - useFocusEffect, useNavigation, useRoute, } from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; 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 {DrawerParamList} from './drawer-param-list'; import {PlanPageParams} from './plan-page-params'; import {addPlan, updatePlan} from './plan.service'; import {getNames} from './set.service'; +import StackHeader from './StackHeader'; import Switch from './Switch'; import {DAYS} from './time'; @@ -28,19 +28,6 @@ export default function EditPlan() { const [names, setNames] = useState([]); const navigation = useNavigation>(); - useFocusEffect( - useCallback(() => { - console.log(`${EditPlan.name}.focus:`, {plan}); - navigation.getParent()?.setOptions({ - headerLeft: () => ( - navigation.goBack()} /> - ), - headerRight: () => null, - title: plan.id ? 'Edit plan' : 'Create plan', - }); - }, [navigation, plan]), - ); - useEffect(() => { getNames().then(n => { console.log(EditPlan.name, {n}); @@ -87,59 +74,62 @@ export default function EditPlan() { ); return ( - - - Days - {DAYS.map(day => ( - toggleDay(value, day)} - onPress={() => toggleDay(!days.includes(day), day)} - value={days.includes(day)}> - {day} - - ))} - Workouts - {names.length === 0 ? ( - - No workouts found. - - ) : ( - names.map(name => ( + <> + + + + Days + {DAYS.map(day => ( toggleWorkout(value, name)} - value={workouts.includes(name)} - onPress={() => toggleWorkout(!workouts.includes(name), name)}> - {name} + key={day} + onValueChange={value => toggleDay(value, day)} + onPress={() => toggleDay(!days.includes(day), day)} + value={days.includes(day)}> + {day} - )) + ))} + Workouts + {names.length === 0 ? ( + + No workouts found. + + ) : ( + names.map(name => ( + toggleWorkout(value, name)} + value={workouts.includes(name)} + onPress={() => toggleWorkout(!workouts.includes(name), name)}> + {name} + + )) + )} + + {names.length === 0 ? ( + + ) : ( + )} - - {names.length === 0 ? ( - - ) : ( - - )} - + + ); } diff --git a/EditSet.tsx b/EditSet.tsx index ce31341..7c1046f 100644 --- a/EditSet.tsx +++ b/EditSet.tsx @@ -1,18 +1,13 @@ -import { - RouteProp, - useFocusEffect, - useNavigation, - useRoute, -} from '@react-navigation/native'; +import {RouteProp, useNavigation, useRoute} from '@react-navigation/native'; import React, {useCallback} from 'react'; import {NativeModules, View} from 'react-native'; -import {IconButton} from 'react-native-paper'; import {PADDING} from './constants'; import {HomePageParams} from './home-page-params'; import {useSnackbar} from './MassiveSnack'; import Set from './set'; import {addSet, getSet, updateSet} from './set.service'; import SetForm from './SetForm'; +import StackHeader from './StackHeader'; import {useSettings} from './use-settings'; export default function EditSet() { @@ -22,21 +17,6 @@ export default function EditSet() { const {toast} = useSnackbar(); 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: () => ( - navigation.goBack()} /> - ), - headerRight: null, - title, - }); - }, [navigation, set]), - ); - const startTimer = useCallback( async (name: string) => { if (!settings.alarm) return; @@ -85,8 +65,11 @@ export default function EditSet() { ); return ( - - - + <> + + + + + ); } diff --git a/EditWorkout.tsx b/EditWorkout.tsx index c1bd5f1..e6a90c6 100644 --- a/EditWorkout.tsx +++ b/EditWorkout.tsx @@ -1,19 +1,15 @@ -import { - RouteProp, - useFocusEffect, - useNavigation, - useRoute, -} from '@react-navigation/native'; +import {RouteProp, useNavigation, useRoute} from '@react-navigation/native'; import React, {useCallback, useRef, useState} from 'react'; import {ScrollView, TextInput, View} from 'react-native'; 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 {MARGIN, PADDING} from './constants'; import MassiveInput from './MassiveInput'; import {useSnackbar} from './MassiveSnack'; import {updatePlanWorkouts} from './plan.service'; import {addSet, updateManySet, updateSetImage} from './set.service'; +import StackHeader from './StackHeader'; import {useSettings} from './use-settings'; import {WorkoutsPageParams} from './WorkoutsPage'; @@ -39,19 +35,6 @@ export default function EditWorkout() { const secondsRef = useRef(null); const {settings} = useSettings(); - useFocusEffect( - useCallback(() => { - navigation.getParent()?.setOptions({ - headerLeft: () => ( - navigation.goBack()} /> - ), - headerRight: null, - title: params.value.name || 'New workout', - }); - if (!name) return; - }, [navigation, name, params.value.name]), - ); - const update = async () => { await updateManySet({ oldName: params.value.name, @@ -118,83 +101,86 @@ export default function EditWorkout() { }; return ( - - - - {!!settings.steps && ( + <> + + + setsRef.current?.focus()} + autoFocus + label="Name" + value={name} + onChangeText={handleName} + onSubmitEditing={submitName} /> - )} - {!!settings.showSets && ( - minutesRef.current?.focus()} - /> - )} - {!!settings.alarm && ( - <> + {!!settings.steps && ( secondsRef.current?.focus()} - value={minutes} - onChangeText={setMinutes} - label="Rest minutes" - keyboardType="numeric" + innerRef={stepsRef} + selectTextOnFocus={false} + value={steps} + onChangeText={handleSteps} + label="Steps" + multiline + onSubmitEditing={() => setsRef.current?.focus()} /> + )} + {!!settings.showSets && ( minutesRef.current?.focus()} /> - - )} - {!!settings.images && uri && ( - setShowRemove(true)}> - - - )} - {!!settings.images && !uri && ( - - )} - - - - Are you sure you want to remove the image? - - + )} + {!!settings.alarm && ( + <> + secondsRef.current?.focus()} + value={minutes} + onChangeText={setMinutes} + label="Rest minutes" + keyboardType="numeric" + /> + + + )} + {!!settings.images && uri && ( + setShowRemove(true)}> + + + )} + {!!settings.images && !uri && ( + + )} + + + + Are you sure you want to remove the image? + + + ); } diff --git a/HomePage.tsx b/HomePage.tsx index fc0350e..61cc472 100644 --- a/HomePage.tsx +++ b/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 React from 'react'; -import {IconButton} from 'react-native-paper'; -import {DrawerParamList} from './drawer-param-list'; import EditSet from './EditSet'; import {HomePageParams} from './home-page-params'; import SetList from './SetList'; @@ -11,26 +7,11 @@ import SetList from './SetList'; const Stack = createStackNavigator(); export default function HomePage() { - const navigation = useNavigation>(); - return ( - { - navigation.setOptions({ - headerLeft: () => ( - - ), - title: 'Home', - }); - }, - }} - /> + ); } diff --git a/PlanList.tsx b/PlanList.tsx index 1f06b76..af2dd85 100644 --- a/PlanList.tsx +++ b/PlanList.tsx @@ -6,8 +6,7 @@ import { import React, {useCallback, useEffect, useState} from 'react'; import {FlatList} from 'react-native'; import {List} from 'react-native-paper'; -import DrawerMenu from './DrawerMenu'; -import Header from './Header'; +import DrawerHeader from './DrawerHeader'; import Page from './Page'; import {Plan} from './plan'; import {PlanPageParams} from './plan-page-params'; @@ -26,10 +25,7 @@ export default function PlanList() { useFocusEffect( useCallback(() => { refresh(); - navigation.getParent()?.setOptions({ - headerRight: () => , - }); - }, [refresh, navigation]), + }, [refresh]), ); useEffect(() => { @@ -48,7 +44,7 @@ export default function PlanList() { return ( <> -
+ {plans?.length === 0 ? ( (); export default function PlanPage() { - const navigation = useNavigation>(); - return ( - { - navigation.setOptions({ - headerLeft: () => ( - - ), - title: 'Plans', - }); - }, - }} - /> - { - navigation.setOptions({ - headerLeft: () => ( - - ), - title: 'Plans', - }); - }, - }} - /> + + ); } diff --git a/SetList.tsx b/SetList.tsx index 43bbed1..dfde9a0 100644 --- a/SetList.tsx +++ b/SetList.tsx @@ -6,7 +6,7 @@ import { import React, {useCallback, useEffect, useState} from 'react'; import {FlatList} from 'react-native'; import {List} from 'react-native-paper'; -import Header from './Header'; +import DrawerHeader from './DrawerHeader'; import {HomePageParams} from './home-page-params'; import Page from './Page'; import Set from './set'; @@ -84,7 +84,7 @@ export default function SetList() { return ( <> -
+ {sets?.length === 0 ? ( -
+ {switches diff --git a/StackHeader.tsx b/StackHeader.tsx new file mode 100644 index 0000000..aa45a5d --- /dev/null +++ b/StackHeader.tsx @@ -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 ( + + + + + 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" + /> + + ); +} diff --git a/StartPlan.tsx b/StartPlan.tsx index bd416fd..06d9ca3 100644 --- a/StartPlan.tsx +++ b/StartPlan.tsx @@ -1,13 +1,8 @@ -import { - RouteProp, - useFocusEffect, - useNavigation, - useRoute, -} from '@react-navigation/native'; +import {RouteProp, useFocusEffect, useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo, useRef, useState} from 'react'; import {NativeModules, TextInput, View} from 'react-native'; 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 {useColor} from './color'; import {PADDING} from './constants'; @@ -18,6 +13,7 @@ import {PlanPageParams} from './plan-page-params'; import Set from './set'; import {addSet, countManyToday, getDistinctSets} from './set.service'; import SetForm from './SetForm'; +import StackHeader from './StackHeader'; import {useSettings} from './use-settings'; export default function StartPlan() { @@ -38,7 +34,6 @@ export default function StartPlan() { const weightRef = useRef(null); const repsRef = useRef(null); const unitRef = useRef(null); - const navigation = useNavigation(); const workouts = useMemo(() => params.plan.workouts.split(','), [params]); const {color} = useColor(); @@ -49,13 +44,6 @@ export default function StartPlan() { useFocusEffect( useCallback(() => { - navigation.getParent()?.setOptions({ - headerLeft: () => ( - navigation.goBack()} /> - ), - headerRight: null, - title: params.plan.days.replace(/,/g, ', '), - }); countManyToday().then(newCounts => { setCounts(newCounts); console.log(`${StartPlan.name}.focus:`, {newCounts}); @@ -66,7 +54,7 @@ export default function StartPlan() { console.log(`${StartPlan.name}.focus:`, {newDistinct}); }, ); - }, [navigation, params]), + }, [params]), ); const handleSubmit = async () => { @@ -129,70 +117,74 @@ export default function StartPlan() { if (!distinctSets) return; const distinct = distinctSets.find(d => d.name === countName); 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'; }, [counts, distinctSets, settings.showSets], ); return ( - - - weightRef.current?.focus()} - selection={selection} - onSelectionChange={e => setSelection(e.nativeEvent.selection)} - innerRef={repsRef} - /> - - {!!settings.showUnit && ( + <> + + + weightRef.current?.focus()} + selection={selection} + onSelectionChange={e => setSelection(e.nativeEvent.selection)} + innerRef={repsRef} /> - )} - {counts && distinctSets && ( - ( - select(index)} - left={() => ( - - select(index)} - value={index.toString()} - status={selected === index ? 'checked' : 'unchecked'} - color={color} - /> - - )} - /> - )} + - )} + {!!settings.showUnit && ( + + )} + {counts && distinctSets && ( + ( + select(index)} + left={() => ( + + select(index)} + value={index.toString()} + status={selected === index ? 'checked' : 'unchecked'} + color={color} + /> + + )} + /> + )} + /> + )} + + - - + ); } diff --git a/ViewBest.tsx b/ViewBest.tsx index b76b59b..4a614cf 100644 --- a/ViewBest.tsx +++ b/ViewBest.tsx @@ -1,16 +1,7 @@ import {Picker} from '@react-native-picker/picker'; -import { - RouteProp, - useFocusEffect, - useNavigation, - useRoute, -} from '@react-navigation/native'; -import React, {useCallback, useEffect, useState} from 'react'; +import {RouteProp, useRoute} from '@react-navigation/native'; +import React, {useEffect, useState} from 'react'; 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 {BestPageParams} from './BestPage'; import Chart from './Chart'; @@ -18,6 +9,7 @@ import {PADDING} from './constants'; import {Metrics} from './metrics'; import {Periods} from './periods'; import Set from './set'; +import StackHeader from './StackHeader'; import {formatMonth} from './time'; import useDark from './use-dark'; import Volume from './volume'; @@ -29,34 +21,6 @@ export default function ViewBest() { const [volumes, setVolumes] = useState([]); const [metric, setMetric] = useState(Metrics.Weight); const [period, setPeriod] = useState(Periods.Monthly); - const navigation = useNavigation(); - - useFocusEffect( - useCallback(() => { - console.log(`${ViewBest.name}.useFocusEffect`); - navigation.getParent()?.setOptions({ - headerLeft: () => ( - navigation.goBack()} /> - ), - headerRight: () => ( - - 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(() => { console.log(`${ViewBest.name}.useEffect`, {metric}); @@ -74,44 +38,47 @@ export default function ViewBest() { }, [params.best.name, metric, period]); return ( - - setMetric(value)}> - - - - - setPeriod(value)}> - - - - - {metric === Metrics.Volume ? ( - v.value)} - yFormat={(value: number) => - `${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${ - volumes[0].unit - }` - } - xData={weights} - xFormat={(_value, index) => formatMonth(weights[index].created!)} - /> - ) : ( - set.weight)} - yFormat={value => `${value}${weights[0].unit}`} - xData={weights} - xFormat={(_value, index) => formatMonth(weights[index].created!)} - /> - )} - + <> + + + setMetric(value)}> + + + + + setPeriod(value)}> + + + + + {metric === Metrics.Volume ? ( + v.value)} + yFormat={(value: number) => + `${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${ + volumes[0].unit + }` + } + xData={weights} + xFormat={(_value, index) => formatMonth(weights[index].created!)} + /> + ) : ( + set.weight)} + yFormat={value => `${value}${weights[0].unit}`} + xData={weights} + xFormat={(_value, index) => formatMonth(weights[index].created!)} + /> + )} + + ); } diff --git a/WorkoutList.tsx b/WorkoutList.tsx index 38fbe5c..493439c 100644 --- a/WorkoutList.tsx +++ b/WorkoutList.tsx @@ -6,7 +6,7 @@ import { import React, {useCallback, useEffect, useState} from 'react'; import {FlatList} from 'react-native'; import {List} from 'react-native-paper'; -import Header from './Header'; +import DrawerHeader from './DrawerHeader'; import Page from './Page'; import Set from './set'; import {getDistinctSets} from './set.service'; @@ -81,7 +81,7 @@ export default function WorkoutList() { return ( <> -
+ {workouts?.length === 0 ? ( (); export default function WorkoutsPage() { - const navigation = useNavigation>(); - return ( - { - navigation.setOptions({ - headerLeft: () => ( - - ), - title: 'Workouts', - }); - }, - }} - /> + ); }