Fix infinite scrolling in homepage - 1.152 🚀

Also prevent flickering of "No sets found"
message on first load.

The infinite scrolling issue was a side-effect
of me messing with our memoization. Some places
didn't specify their deps properly.
This commit is contained in:
Brandon Presley 2023-08-22 12:25:34 +12:00
parent de25cead60
commit f0d5fc4fa6
3 changed files with 16 additions and 13 deletions

View File

@ -20,7 +20,7 @@ import Settings, { SETTINGS } from "./settings";
export default function SetList() { export default function SetList() {
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [sets, setSets] = useState<GymSet[]>([]); const [sets, setSets] = useState<GymSet[]>();
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
const [end, setEnd] = useState(false); const [end, setEnd] = useState(false);
const [settings, setSettings] = useState<Settings>(); const [settings, setSettings] = useState<Settings>();
@ -109,6 +109,7 @@ export default function SetList() {
); );
const next = async () => { const next = async () => {
console.log({ end, refreshing });
if (end || refreshing) return; if (end || refreshing) return;
const newOffset = offset + LIMIT; const newOffset = offset + LIMIT;
console.log(`${SetList.name}.next:`, { offset, newOffset, term }); console.log(`${SetList.name}.next:`, { offset, newOffset, term });
@ -134,7 +135,7 @@ export default function SetList() {
const onAdd = useCallback(async () => { const onAdd = useCallback(async () => {
const now = await getNow(); const now = await getNow();
let set = sets[0]; let set = sets?.[0];
if (!set) set = { ...defaultSet }; if (!set) set = { ...defaultSet };
set.created = now; set.created = now;
delete set.id; delete set.id;
@ -171,11 +172,12 @@ export default function SetList() {
}; };
const select = useCallback(() => { const select = useCallback(() => {
if (!sets) return;
if (ids.length === sets.length) return setIds([]); if (ids.length === sets.length) return setIds([]);
setIds(sets.map((set) => set.id)); setIds(sets.map((set) => set.id));
}, [sets, ids]); }, [sets, ids]);
const content = useMemo(() => { const getContent = () => {
if (!settings) return null; if (!settings) return null;
if (sets?.length === 0) if (sets?.length === 0)
return ( return (
@ -186,21 +188,22 @@ export default function SetList() {
); );
return ( return (
<FlatList <FlatList
data={sets} data={sets ?? []}
style={{ flex: 1 }} style={{ flex: 1 }}
renderItem={renderItem} renderItem={renderItem}
onEndReached={next} onEndReached={next}
refreshing={false} refreshing={refreshing}
onRefresh={() => onRefresh={() => {
setOffset(0);
refresh({ refresh({
skip: 0, skip: 0,
take: LIMIT, take: LIMIT,
value: term, value: term,
}) });
} }}
/> />
); );
}, [sets, settings, term, ids]); };
return ( return (
<> <>
@ -216,7 +219,7 @@ export default function SetList() {
</DrawerHeader> </DrawerHeader>
<Page onAdd={onAdd} term={term} search={search}> <Page onAdd={onAdd} term={term} search={search}>
{content} {getContent()}
</Page> </Page>
</> </>
); );

View File

@ -85,8 +85,8 @@ android {
applicationId "com.massive" applicationId "com.massive"
minSdkVersion rootProject.ext.minSdkVersion minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 36177 versionCode 36178
versionName "1.151" versionName "1.152"
} }
signingConfigs { signingConfigs {
release { release {

View File

@ -1,6 +1,6 @@
{ {
"name": "massive", "name": "massive",
"version": "1.151", "version": "1.152",
"private": true, "private": true,
"license": "GPL-3.0-only", "license": "GPL-3.0-only",
"scripts": { "scripts": {