Brandon Presley
9bd8fa9353
This way reacts better to changing the screen sizes. I think there was one bug where the fab wouldn't be precisely at the bottom of the page depending on the flat list length.
66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import {
|
|
NavigationProp,
|
|
useFocusEffect,
|
|
useNavigation,
|
|
} from '@react-navigation/native';
|
|
import React, {useCallback, useEffect, useState} from 'react';
|
|
import {FlatList} from 'react-native';
|
|
import {List} from 'react-native-paper';
|
|
import DrawerMenu from './DrawerMenu';
|
|
import Page from './Page';
|
|
import {Plan} from './plan';
|
|
import {PlanPageParams} from './plan-page-params';
|
|
import {getPlans} from './plan.service';
|
|
import PlanItem from './PlanItem';
|
|
|
|
export default function PlanList() {
|
|
const [search, setSearch] = useState('');
|
|
const [plans, setPlans] = useState<Plan[]>();
|
|
const navigation = useNavigation<NavigationProp<PlanPageParams>>();
|
|
|
|
const refresh = useCallback(async () => {
|
|
getPlans(search).then(setPlans);
|
|
}, [search]);
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
refresh();
|
|
navigation.getParent()?.setOptions({
|
|
headerRight: () => <DrawerMenu name="Plans" />,
|
|
});
|
|
}, [refresh, navigation]),
|
|
);
|
|
|
|
useEffect(() => {
|
|
refresh();
|
|
}, [search, refresh]);
|
|
|
|
const renderItem = useCallback(
|
|
({item}: {item: Plan}) => (
|
|
<PlanItem item={item} key={item.id} onRemove={refresh} />
|
|
),
|
|
[refresh],
|
|
);
|
|
|
|
const onAdd = () =>
|
|
navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
|
|
|
|
return (
|
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
|
{plans?.length === 0 ? (
|
|
<List.Item
|
|
title="No plans yet"
|
|
description="A plan is a list of workouts for certain days."
|
|
/>
|
|
) : (
|
|
<FlatList
|
|
style={{flex: 1}}
|
|
data={plans}
|
|
renderItem={renderItem}
|
|
keyExtractor={set => set.id?.toString() || ''}
|
|
/>
|
|
)}
|
|
</Page>
|
|
);
|
|
}
|