brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

Make padding & margin consistent everywhere.

This commit is contained in:
Brandon Presley 2022-09-16 21:07:02 +12:00
parent 8e5519c686
commit 052d000e12
18 changed files with 114 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
BestList.tsx
View File

@ -4,10 +4,11 @@ import {
useNavigation,
} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {List, Searchbar} from 'react-native-paper';
import {FlatList} from 'react-native';
import {List} from 'react-native-paper';
import {getBestReps, getBestWeights} from './best.service';
import {BestPageParams} from './BestPage';
import Page from './Page';
import Set from './set';
export default function BestList() {
@ -49,8 +50,7 @@ export default function BestList() {
);
return (
<View style={styles.container}>
<Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
<Page search={search} setSearch={setSearch}>
<FlatList
ListEmptyComponent={
<List.Item
@ -61,14 +61,6 @@ export default function BestList() {
renderItem={renderItem}
data={bests}
/>
</View>
</Page>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
flexGrow: 1,
paddingBottom: '10%',
},
});

5
Chart.tsx
View File

@ -3,6 +3,7 @@ import React from 'react';
import {useColorScheme, View} from 'react-native';
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
import {MARGIN, PADDING} from './constants';
import Set from './set';
export default function Chart({
@ -23,7 +24,7 @@ export default function Chart({
return (
<>
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
<View style={{height: 300, padding: PADDING, flexDirection: 'row'}}>
<YAxis
data={yData}
style={{marginBottom: xAxisHeight}}
@ -31,7 +32,7 @@ export default function Chart({
svg={axesSvg}
formatLabel={yFormat}
/>
<View style={{flex: 1, marginLeft: 10}}>
<View style={{flex: 1, marginLeft: MARGIN}}>
<LineChart
style={{flex: 1}}
data={yData}

17
EditPlan.tsx
View File

@ -9,8 +9,9 @@ import React, {useCallback, useEffect, useState} from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {Button, IconButton} from 'react-native-paper';
import {DrawerParamList} from './App';
import {MARGIN, PADDING} from './constants';
import MassiveSwitch from './MassiveSwitch';
import {addPlan, setPlan} from './plan.service';
import {addPlan, updatePlan} from './plan.service';
import {PlanPageParams} from './PlanPage';
import {getNames} from './set.service';
import {DAYS} from './time';
@ -50,7 +51,11 @@ export default function EditPlan() {
const newDays = days.filter(day => day).join(',');
if (!params.plan.id) await addPlan({days: newDays, workouts: newWorkouts});
else
await setPlan({days: newDays, workouts: newWorkouts, id: params.plan.id});
await updatePlan({
days: newDays,
workouts: newWorkouts,
id: params.plan.id,
});
navigation.goBack();
}, [days, workouts, params, navigation]);
@ -77,7 +82,7 @@ export default function EditPlan() {
);
return (
<View style={{padding: 10}}>
<View style={{padding: PADDING}}>
<ScrollView style={{height: '90%'}}>
<Text style={styles.title}>Days</Text>
{DAYS.map(day => (
@ -91,7 +96,7 @@ export default function EditPlan() {
</Text>
</View>
))}
<Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
<Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
{names.length === 0 && (
<View>
<Text>No workouts found.</Text>
@ -123,7 +128,7 @@ export default function EditPlan() {
</Button>
) : (
<Button
style={{marginTop: 10}}
style={{marginTop: MARGIN}}
mode="contained"
icon="save"
onPress={save}>
@ -137,7 +142,7 @@ export default function EditPlan() {
const styles = StyleSheet.create({
title: {
fontSize: 20,
marginBottom: 10,
marginBottom: MARGIN,
},
row: {
flexDirection: 'row',

7
EditSet.tsx
View File

@ -7,10 +7,11 @@ import {
import React, {useCallback, useContext} from 'react';
import {NativeModules, View} from 'react-native';
import {IconButton} from 'react-native-paper';
import {PADDING} from './constants';
import {HomePageParams} from './HomePage';
import {SnackbarContext} from './MassiveSnack';
import Set from './set';
import {addSet, setSet} from './set.service';
import {addSet, updateSet} from './set.service';
import SetForm from './SetForm';
import {getSettings} from './settings.service';
@ -45,7 +46,7 @@ export default function EditSet() {
const update = useCallback(
async (set: Set) => {
console.log(`${EditSet.name}.update`, set);
await setSet(set);
await updateSet(set);
navigation.goBack();
},
[navigation],
@ -76,7 +77,7 @@ export default function EditSet() {
);
return (
<View style={{padding: 10}}>
<View style={{padding: PADDING}}>
<SetForm save={save} set={params.set} workouts={params.workouts} />
</View>
);

15
EditWorkout.tsx
View File

@ -8,10 +8,11 @@ import React, {useCallback, useState} from 'react';
import {Image, ScrollView, View} from 'react-native';
import DocumentPicker from 'react-native-document-picker';
import {Button, IconButton} from 'react-native-paper';
import {PADDING} from './constants';
import MassiveInput from './MassiveInput';
import {setWorkouts} from './plan.service';
import {updateWorkouts} from './plan.service';
import Set from './set';
import {addSet, getSets, setSetImage, setSetName} from './set.service';
import {addSet, getSets, updateSetImage, updateSetName} from './set.service';
import {WorkoutsPageParams} from './WorkoutsPage';
export default function EditWorkout() {
@ -42,10 +43,10 @@ export default function EditWorkout() {
uri,
});
if (name) {
await setSetName(params.value.name, name);
await setWorkouts(params.value.name, name);
await updateSetName(params.value.name, name);
await updateWorkouts(params.value.name, name);
}
if (uri) await setSetImage(params.value.name, uri);
if (uri) await updateSetImage(params.value.name, uri);
navigation.goBack();
}, [navigation, params.value.name, name, uri]);
@ -68,7 +69,7 @@ export default function EditWorkout() {
}, []);
return (
<ScrollView style={{padding: 10, height: '90%'}}>
<ScrollView style={{padding: PADDING}}>
{params.value.name ? (
<>
<MassiveInput
@ -77,7 +78,7 @@ export default function EditWorkout() {
value={name}
onChangeText={setName}
/>
<View style={{flexDirection: 'row', paddingBottom: 10}}>
<View style={{flexDirection: 'row', paddingBottom: PADDING}}>
{uri && <Image source={{uri}} style={{height: 75, width: 75}} />}
<Button onPress={changeImage} icon="image">
Image

3
MassiveInput.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import {useColorScheme} from 'react-native';
import {TextInput} from 'react-native-paper';
import {CombinedDefaultTheme} from './App';
import {MARGIN} from './constants';
export default function MassiveInput(
props: Partial<React.ComponentProps<typeof TextInput>> & {
@ -14,7 +15,7 @@ export default function MassiveInput(
<TextInput
selectionColor={dark ? '#2A2A2A' : CombinedDefaultTheme.colors.border}
mode="outlined"
style={{marginBottom: 10, minWidth: 100}}
style={{marginBottom: MARGIN, minWidth: 100}}
selectTextOnFocus
ref={props.innerRef}
{...props}

3
MassiveSwitch.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import {useColorScheme} from 'react-native';
import {Switch} from 'react-native-paper';
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
import {MARGIN} from './constants';
export default function MassiveSwitch(
props: Partial<React.ComponentProps<typeof Switch>>,
@ -15,7 +16,7 @@ export default function MassiveSwitch(
? CombinedDarkTheme.colors.primary
: CombinedDefaultTheme.colors.primary
}
style={{marginRight: 5}}
style={{marginRight: MARGIN}}
{...props}
/>
);

33
Page.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Searchbar} from 'react-native-paper';
import {PADDING} from './constants';
import MassiveFab from './MassiveFab';
export default function Page({
onAdd,
children,
search,
setSearch,
}: {
children: JSX.Element | JSX.Element[];
onAdd?: () => void;
search: string;
setSearch: (value: string) => void;
}) {
return (
<View style={styles.container}>
<Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
{children}
{onAdd && <MassiveFab onPress={onAdd} />}
</View>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
padding: PADDING,
paddingBottom: '10%',
},
});

33
PlanList.tsx
View File

@ -4,10 +4,10 @@ import {
useNavigation,
} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {List, Searchbar} from 'react-native-paper';
import {FlatList} from 'react-native';
import {List} from 'react-native-paper';
import DrawerMenu from './DrawerMenu';
import MassiveFab from './MassiveFab';
import Page from './Page';
import {Plan} from './plan';
import {getPlans} from './plan.service';
import PlanItem from './PlanItem';
@ -42,9 +42,11 @@ export default function PlanList() {
[refresh],
);
const onAdd = () =>
navigation.navigate('EditPlan', {plan: {days: '', workouts: '', id: 0}});
return (
<View style={styles.container}>
<Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
<FlatList
style={{height: '100%'}}
data={plans}
@ -57,25 +59,6 @@ export default function PlanList() {
/>
}
/>
<MassiveFab
onPress={() =>
navigation.navigate('EditPlan', {
plan: {days: '', workouts: '', id: 0},
})
}
/>
</View>
</Page>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
padding: 10,
paddingBottom: '10%',
},
progress: {
marginTop: 10,
},
});

3
SetForm.tsx
View File

@ -1,6 +1,7 @@
import React, {useEffect, useRef, useState} from 'react';
import {ScrollView} from 'react-native';
import {Button, Text} from 'react-native-paper';
import {MARGIN} from './constants';
import MassiveInput from './MassiveInput';
import Set from './set';
import {getSets} from './set.service';
@ -83,7 +84,7 @@ export default function SetForm({
onChangeText={setUnit}
onSubmitEditing={handleSubmit}
/>
<Text style={{marginBottom: 10}}>
<Text style={{marginBottom: MARGIN}}>
{workouts?.map((workout, index) => (
<React.Fragment key={workout}>
<Text

20
SetList.tsx
View File

@ -4,12 +4,12 @@ import {
useNavigation,
} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {List, Searchbar} from 'react-native-paper';
import {FlatList} from 'react-native';
import {List} from 'react-native-paper';
import {getBestSet} from './best.service';
import DrawerMenu from './DrawerMenu';
import {HomePageParams} from './HomePage';
import MassiveFab from './MassiveFab';
import Page from './Page';
import {getTodaysPlan} from './plan.service';
import Set from './set';
import {defaultSet, getSets, getTodaysSets} from './set.service';
@ -122,8 +122,7 @@ export default function SetList() {
}, [navigation, set, workouts]);
return (
<View style={styles.container}>
<Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
<FlatList
data={sets}
style={{height: '100%'}}
@ -137,15 +136,6 @@ export default function SetList() {
keyExtractor={s => s.id!.toString()}
onEndReached={next}
/>
<MassiveFab onPress={onAdd} />
</View>
</Page>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
padding: 10,
paddingBottom: '10%',
},
});

28
SettingsPage.tsx
View File

@ -1,12 +1,14 @@
import React, {useCallback, useContext, useEffect, useState} from 'react';
import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
import {NativeModules, ScrollView, StyleSheet} from 'react-native';
import DocumentPicker from 'react-native-document-picker';
import {Button, Searchbar, Text} from 'react-native-paper';
import {Button, Text} from 'react-native-paper';
import ConfirmDialog from './ConfirmDialog';
import {MARGIN} from './constants';
import MassiveInput from './MassiveInput';
import {SnackbarContext} from './MassiveSnack';
import MassiveSwitch from './MassiveSwitch';
import {getSettings, setSettings} from './settings.service';
import Page from './Page';
import {getSettings, updateSettings} from './settings.service';
interface Input<T> {
name: string;
@ -49,7 +51,7 @@ export default function SettingsPage() {
}, [refresh]);
useEffect(() => {
setSettings({
updateSettings({
vibrate: +vibrate,
minutes: +minutes,
seconds: +seconds,
@ -125,14 +127,8 @@ export default function SettingsPage() {
];
return (
<View style={styles.container}>
<Searchbar
style={{marginBottom: 10}}
placeholder="Search"
value={search}
onChangeText={setSearch}
/>
<ScrollView>
<Page search={search} setSearch={setSearch}>
<ScrollView style={{marginTop: MARGIN}}>
{inputs
.filter(input =>
input.name.toLowerCase().includes(search.toLowerCase()),
@ -179,16 +175,12 @@ export default function SettingsPage() {
}}>
Disable battery optimizations for Massive to use rest timers.
</ConfirmDialog>
</View>
</Page>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
flex: 1,
},
text: {
marginBottom: 10,
marginBottom: MARGIN,
},
});

3
ViewBest.tsx
View File

@ -13,6 +13,7 @@ import ViewShot from 'react-native-view-shot';
import {getVolumes, getWeightsBy} from './best.service';
import {BestPageParams} from './BestPage';
import Chart from './Chart';
import {PADDING} from './constants';
import {Metrics} from './metrics';
import {Periods} from './periods';
import Set from './set';
@ -67,7 +68,7 @@ export default function ViewBest() {
}, [params.best.name, metric, period]);
return (
<ViewShot style={{padding: 10}} ref={viewShot}>
<ViewShot style={{padding: PADDING}} ref={viewShot}>
<RNPickerSelect
onValueChange={setMetric}
items={[

22
WorkoutList.tsx
View File

@ -4,9 +4,9 @@ import {
useNavigation,
} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {List, Searchbar} from 'react-native-paper';
import MassiveFab from './MassiveFab';
import {FlatList} from 'react-native';
import {List} from 'react-native-paper';
import Page from './Page';
import {getWorkouts} from './set.service';
import SetList from './SetList';
import Workout from './workout';
@ -78,11 +78,10 @@ export default function WorkoutList() {
}, [navigation]);
return (
<View style={styles.container}>
<Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
<FlatList
data={workouts}
style={{height: '95%', paddingBottom: 10}}
style={{height: '100%'}}
ListEmptyComponent={
<List.Item
title="No workouts yet."
@ -93,15 +92,6 @@ export default function WorkoutList() {
keyExtractor={w => w.name}
onEndReached={next}
/>
<MassiveFab onPress={onAdd} />
</View>
</Page>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
padding: 10,
paddingBottom: '10%',
},
});

2
constants.ts Normal file
View File

@ -0,0 +1,2 @@
export const MARGIN = 10;
export const PADDING = 10;

4
plan.service.ts
View File

@ -20,7 +20,7 @@ export const getTodaysPlan = async (): Promise<Plan[]> => {
return result.rows.raw();
};
export const setWorkouts = async (oldName: string, newName: string) => {
export const updateWorkouts = async (oldName: string, newName: string) => {
const update = `
UPDATE plans SET workouts = REPLACE(workouts, ?, ?)
WHERE workouts LIKE ?
@ -28,7 +28,7 @@ export const setWorkouts = async (oldName: string, newName: string) => {
return db.executeSql(update, [oldName, newName, `%${oldName}%`]);
};
export const setPlan = async (value: Plan) => {
export const updatePlan = async (value: Plan) => {
const update = `UPDATE plans SET days = ?, workouts = ? WHERE id = ?`;
return db.executeSql(update, [value.days, value.workouts, value.id]);
};

6
set.service.ts
View File

@ -2,7 +2,7 @@ import {db} from './db';
import Set from './set';
import Workout from './workout';
export const setSet = async (value: Set) => {
export const updateSet = async (value: Set) => {
const update = `
UPDATE sets
SET name = ?, reps = ?, weight = ?, unit = ?
@ -90,12 +90,12 @@ export const defaultSet = {
unit: 'kg',
};
export const setSetName = async (oldName: string, newName: string) => {
export const updateSetName = async (oldName: string, newName: string) => {
const update = `UPDATE sets SET name = ? WHERE name = ?`;
return db.executeSql(update, [newName, oldName]);
};
export const setSetImage = async (name: string, image: string) => {
export const updateSetImage = async (name: string, image: string) => {
const update = `UPDATE sets SET image = ? WHERE name = ?`;
return db.executeSql(update, [image, name]);
};

23
settings.service.ts
View File

@ -7,21 +7,10 @@ export const getSettings = async () => {
return settings;
};
export const setSettings = async (value: Settings) => {
const update = `
UPDATE settings
SET vibrate=?,minutes=?,sets=?,seconds=?,alarm=?,
predict=?,sound=?,notify=?,images=?
`;
return db.executeSql(update, [
value.vibrate,
value.minutes,
value.sets,
value.seconds,
value.alarm,
value.predict,
value.sound,
value.notify,
value.images,
]);
export const updateSettings = async (value: Settings) => {
const keys = Object.keys(value) as (keyof Settings)[];
const sets = keys.map(key => `${key}=?`).join(',');
const update = `UPDATE settings SET ${sets}`;
const values = keys.map(key => value[key]);
return db.executeSql(update, values);
};