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

Change way we detect set updates 

Every time we create/update/delete fire a DeviceEventEmitter
event for gym sets. Then we subscribe to the changes in relevant
components.

Also fixed flickering of "No data yet" on graphs page.
This commit is contained in:
Brandon Presley 2023-08-24 17:29:52 +12:00
parent f0d5fc4fa6
commit 185ebd1824
11 changed files with 118 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
EditSet.tsx
View File

@ -8,12 +8,17 @@ import {
} from "@react-navigation/native";
import { format } from "date-fns";
import { useCallback, useRef, useState } from "react";
import { NativeModules, TextInput, View } from "react-native";
import {
DeviceEventEmitter,
NativeModules,
TextInput,
View,
} from "react-native";
import DocumentPicker from "react-native-document-picker";
import { Button, Card, IconButton, TouchableRipple } from "react-native-paper";
import AppInput from "./AppInput";
import ConfirmDialog from "./ConfirmDialog";
import { MARGIN, PADDING } from "./constants";
import { GYM_SET_CREATED, GYM_SET_UPDATED, MARGIN, PADDING } from "./constants";
import { getNow, setRepo, settingsRepo } from "./db";
import GymSet from "./gym-set";
import { HomePageParams } from "./home-page-params";
@ -65,6 +70,7 @@ export default function EditSet() {
);
const added = async (value: GymSet) => {
DeviceEventEmitter.emit(GYM_SET_CREATED);
startTimer(value.name);
console.log(`${EditSet.name}.add`, { set: value });
if (!settings.notify) return;
@ -104,6 +110,7 @@ export default function EditSet() {
const saved = await setRepo.save(newSet);
if (typeof set.id !== "number") return added(saved);
DeviceEventEmitter.emit(GYM_SET_UPDATED);
if (createdDirty) navigate("Sets", { reset: saved.id });
else navigate("Sets", { refresh: saved.id });
};

5
EditSets.tsx
View File

@ -5,13 +5,13 @@ import {
useRoute,
} from "@react-navigation/native";
import { useCallback, useState } from "react";
import { View } from "react-native";
import { DeviceEventEmitter, View } from "react-native";
import DocumentPicker from "react-native-document-picker";
import { Button, Card, IconButton, TouchableRipple } from "react-native-paper";
import { In } from "typeorm";
import AppInput from "./AppInput";
import ConfirmDialog from "./ConfirmDialog";
import { MARGIN, PADDING } from "./constants";
import { GYM_SET_UPDATED, MARGIN, PADDING } from "./constants";
import { setRepo, settingsRepo } from "./db";
import GymSet from "./gym-set";
import { HomePageParams } from "./home-page-params";
@ -60,6 +60,7 @@ export default function EditSets() {
if (unit) update.unit = unit;
if (newImage) update.image = newImage;
if (Object.keys(update).length > 0) await setRepo.update(ids, update);
DeviceEventEmitter.emit(GYM_SET_UPDATED);
navigation.goBack();
};

5
EditWorkout.tsx
View File

@ -5,12 +5,12 @@ import {
useRoute,
} from "@react-navigation/native";
import { useCallback, useRef, useState } from "react";
import { ScrollView, TextInput, View } from "react-native";
import { DeviceEventEmitter, ScrollView, TextInput, View } from "react-native";
import DocumentPicker from "react-native-document-picker";
import { Button, Card, TouchableRipple } from "react-native-paper";
import AppInput from "./AppInput";
import ConfirmDialog from "./ConfirmDialog";
import { MARGIN, PADDING } from "./constants";
import { GYM_SET_UPDATED, MARGIN, PADDING } from "./constants";
import { getNow, planRepo, setRepo, settingsRepo } from "./db";
import { fixNumeric } from "./fix-numeric";
import { defaultSet } from "./gym-set";
@ -58,6 +58,7 @@ export default function EditWorkout() {
image: removeImage ? "" : uri,
}
);
DeviceEventEmitter.emit(GYM_SET_UPDATED);
await planRepo.query(
`UPDATE plans
SET workouts = REPLACE(workouts, $1, $2)

5
EditWorkouts.tsx
View File

@ -6,13 +6,13 @@ import {
useRoute,
} from "@react-navigation/native";
import { useCallback, useRef, useState } from "react";
import { ScrollView, TextInput, View } from "react-native";
import { DeviceEventEmitter, ScrollView, TextInput, View } from "react-native";
import DocumentPicker from "react-native-document-picker";
import { Button, Card, TouchableRipple } from "react-native-paper";
import { In } from "typeorm";
import AppInput from "./AppInput";
import ConfirmDialog from "./ConfirmDialog";
import { MARGIN, PADDING } from "./constants";
import { GYM_SETS_EDITED, MARGIN, PADDING } from "./constants";
import { planRepo, setRepo, settingsRepo } from "./db";
import { fixNumeric } from "./fix-numeric";
import Settings from "./settings";
@ -74,6 +74,7 @@ export default function EditWorkouts() {
image: removeImage ? "" : uri,
}
);
DeviceEventEmitter.emit(GYM_SETS_EDITED);
for (const oldName of params.names) {
await planRepo
.createQueryBuilder()

63
GraphsList.tsx
View File

@ -1,47 +1,64 @@
import { NavigationProp, useNavigation } from "@react-navigation/native";
import { useCallback, useEffect, useState } from "react";
import {
NavigationProp,
useFocusEffect,
useNavigation,
} from "@react-navigation/native";
import { useCallback, useState } from "react";
import { FlatList, Image } from "react-native";
DeviceEventEmitter,
EmitterSubscription,
FlatList,
Image,
} from "react-native";
import { List } from "react-native-paper";
import { getBestSets } from "./best.service";
import { LIMIT } from "./constants";
import {
GYM_SET_CREATED,
GYM_SET_DELETED,
GYM_SET_UPDATED,
LIMIT,
} from "./constants";
import { settingsRepo } from "./db";
import DrawerHeader from "./DrawerHeader";
import { GraphsPageParams } from "./GraphsPage";
import GymSet from "./gym-set";
import Page from "./Page";
import Settings from "./settings";
import Settings, { SETTINGS } from "./settings";
export default function GraphsList() {
const [bests, setBests] = useState<GymSet[]>([]);
const [bests, setBests] = useState<GymSet[]>();
const [refreshing, setRefreshing] = useState(false);
const [offset, setOffset] = useState(0);
const [end, setEnd] = useState(false);
const [term, setTerm] = useState("");
const navigation = useNavigation<NavigationProp<GraphsPageParams>>();
const [settings, setSettings] = useState<Settings>();
useFocusEffect(
useCallback(() => {
settingsRepo.findOne({ where: {} }).then(setSettings);
}, [])
);
const refresh = useCallback(async (value: string) => {
const result = await getBestSets({ term: value, offset: 0 });
setRefreshing(true);
const result = await getBestSets({ term: value, offset: 0 }).finally(() =>
setRefreshing(false)
);
setBests(result);
setOffset(0);
}, []);
useFocusEffect(
useCallback(() => {
refresh(term);
}, [refresh, term])
);
useEffect(() => {
refresh("");
settingsRepo.findOne({ where: {} }).then(setSettings);
const subs: EmitterSubscription[] = [];
subs.push(
DeviceEventEmitter.addListener(GYM_SET_CREATED, () => refresh("")),
DeviceEventEmitter.addListener(GYM_SET_UPDATED, () => refresh("")),
DeviceEventEmitter.addListener(GYM_SET_DELETED, () => refresh("")),
DeviceEventEmitter.addListener(SETTINGS, () =>
settingsRepo.findOne({ where: {} }).then(setSettings)
)
);
return () => subs.forEach((sub) => sub.remove());
/* eslint-disable react-hooks/exhaustive-deps */
}, []);
const next = useCallback(async () => {
console.log("next:", { end, offset });
if (end) return;
const newOffset = offset + LIMIT;
console.log(`${GraphsList.name}.next:`, { offset, newOffset, term });
@ -68,7 +85,7 @@ export default function GraphsList() {
description={`${item.reps} x ${item.weight}${item.unit || "kg"}`}
onPress={() => navigation.navigate("ViewGraph", { best: item })}
left={() =>
(settings.images && item.image && (
(settings?.images && item.image && (
<Image
source={{ uri: item.image }}
style={{ height: 75, width: 75 }}
@ -94,6 +111,8 @@ export default function GraphsList() {
renderItem={renderItem}
data={bests}
onEndReached={next}
refreshing={refreshing}
onRefresh={() => refresh("")}
/>
)}
</Page>

63
SetList.tsx
View File

@ -4,11 +4,20 @@ import {
useNavigation,
useRoute,
} from "@react-navigation/native";
import { useCallback, useEffect, useMemo, useState } from "react";
import { DeviceEventEmitter, FlatList } from "react-native";
import { useCallback, useEffect, useState } from "react";
import {
DeviceEventEmitter,
EmitterSubscription,
FlatList,
} from "react-native";
import { List } from "react-native-paper";
import { Like } from "typeorm";
import { LIMIT } from "./constants";
import {
GYM_SET_CREATED,
GYM_SET_DELETED,
GYM_SET_UPDATED,
LIMIT,
} from "./constants";
import { getNow, setRepo, settingsRepo } from "./db";
import DrawerHeader from "./DrawerHeader";
import GymSet, { defaultSet } from "./gym-set";
@ -29,21 +38,14 @@ export default function SetList() {
const { params } = useRoute<RouteProp<HomePageParams, "Sets">>();
const [term, setTerm] = useState(params?.search || "");
const refresh = async ({
value,
take,
skip,
}: {
value: string;
take: number;
skip: number;
}) => {
const refresh = async ({ value, take }: { value: string; take: number }) => {
setRefreshing(true);
setOffset(0);
const newSets = await setRepo
.find({
where: { name: Like(`%${value.trim()}%`), hidden: 0 as any },
take,
skip,
skip: 0,
order: { created: "DESC" },
})
.finally(() => setRefreshing(false));
@ -57,20 +59,35 @@ export default function SetList() {
refresh({
take: LIMIT,
value: "",
skip: 0,
});
const description = DeviceEventEmitter.addListener(SETTINGS, () => {
settingsRepo.findOne({ where: {} }).then(setSettings);
});
return description.remove;
const subs: EmitterSubscription[] = [];
subs.push(
DeviceEventEmitter.addListener(SETTINGS, () => {
settingsRepo.findOne({ where: {} }).then(setSettings);
}),
DeviceEventEmitter.addListener(GYM_SET_UPDATED, () =>
refresh({ take: offset, value: term })
),
DeviceEventEmitter.addListener(GYM_SET_DELETED, () => {
refresh({ take: LIMIT, value: term });
}),
DeviceEventEmitter.addListener(GYM_SET_CREATED, () => {
refresh({ take: LIMIT, value: term });
}),
DeviceEventEmitter.addListener(SETTINGS, () =>
settingsRepo.findOne({ where: {} }).then(setSettings)
)
);
return () => subs.forEach((sub) => sub.remove());
/* eslint-disable react-hooks/exhaustive-deps */
}, []);
const search = (value: string) => {
setTerm(value);
setOffset(0);
refresh({
skip: 0,
take: LIMIT,
value,
});
@ -82,13 +99,11 @@ export default function SetList() {
if (params.search) search(params.search);
else if (params.refresh)
refresh({
skip: 0,
take: offset,
value: term,
});
else if (params.reset)
refresh({
skip: 0,
take: LIMIT,
value: term,
});
@ -164,8 +179,8 @@ export default function SetList() {
const remove = async () => {
setIds([]);
await setRepo.delete(ids.length > 0 ? ids : {});
DeviceEventEmitter.emit(GYM_SET_DELETED);
return refresh({
skip: 0,
take: LIMIT,
value: term,
});
@ -194,9 +209,7 @@ export default function SetList() {
onEndReached={next}
refreshing={refreshing}
onRefresh={() => {
setOffset(0);
refresh({
skip: 0,
take: LIMIT,
value: term,
});

11
StartPlan.tsx
View File

@ -6,11 +6,17 @@ import {
useRoute,
} from "@react-navigation/native";
import { useCallback, useMemo, useRef, useState } from "react";
import { FlatList, NativeModules, TextInput, View } from "react-native";
import {
DeviceEventEmitter,
FlatList,
NativeModules,
TextInput,
View,
} from "react-native";
import { Button, IconButton, ProgressBar } from "react-native-paper";
import AppInput from "./AppInput";
import { getBestSet } from "./best.service";
import { MARGIN, PADDING } from "./constants";
import { GYM_SETS_EDITED, GYM_SET_CREATED, MARGIN, PADDING } from "./constants";
import CountMany from "./count-many";
import { AppDataSource } from "./data-source";
import { getNow, setRepo, settingsRepo } from "./db";
@ -103,6 +109,7 @@ export default function StartPlan() {
hidden: false,
};
await setRepo.save(newSet);
DeviceEventEmitter.emit(GYM_SET_CREATED);
await refresh();
if (
settings.notify &&

9
StartPlanItem.tsx
View File

@ -1,8 +1,14 @@
import { NavigationProp, useNavigation } from "@react-navigation/native";
import React, { useCallback, useState } from "react";
import { GestureResponderEvent, ListRenderItemInfo, View } from "react-native";
import {
DeviceEventEmitter,
GestureResponderEvent,
ListRenderItemInfo,
View,
} from "react-native";
import { List, Menu, RadioButton, useTheme } from "react-native-paper";
import { Like } from "typeorm";
import { GYM_SET_DELETED } from "./constants";
import CountMany from "./count-many";
import { getNow, setRepo } from "./db";
import { HomePageParams } from "./home-page-params";
@ -38,6 +44,7 @@ export default function StartPlanItem(props: Props) {
setShowMenu(false);
if (!first) return toast("Nothing to undo.");
await setRepo.delete(first.id);
DeviceEventEmitter.emit(GYM_SET_DELETED);
onUndo();
}, [setShowMenu, onUndo, item.name]);

3
constants.ts
View File

@ -4,3 +4,6 @@ export const ITEM_PADDING = 8;
export const DARK_RIPPLE = "#444444";
export const LIGHT_RIPPLE = "#c2c2c2";
export const LIMIT = 15;
export const GYM_SET_UPDATED = "gym-set-updated";
export const GYM_SET_CREATED = "gym-set-updated";
export const GYM_SET_DELETED = "gym-set-updated";

1
data-source.ts
View File

@ -1,5 +1,6 @@
import { DataSource } from "typeorm";
import GymSet from "./gym-set";
import { GymSetSubscriber } from "./gym-set-subscriber";
import { Sets1667185586014 as sets1667185586014 } from "./migrations/1667185586014-sets";
import { plans1667186124792 } from "./migrations/1667186124792-plans";
import { settings1667186130041 } from "./migrations/1667186130041-settings";

10
home-page-params.ts
View File

@ -3,16 +3,6 @@ import GymSet from "./gym-set";
export type HomePageParams = {
Sets: {
search?: string;
/**
* Reload the current list with limit = offset
*/
refresh?: number;
/**
* Reload the list with limit = 0
*/
reset?: number;
};
EditSet: {
set: GymSet;