diff --git a/packages/app/modules/feed/components/FeedList.tsx b/packages/app/modules/feed/components/FeedList.tsx new file mode 100644 index 000000000..54602c0b4 --- /dev/null +++ b/packages/app/modules/feed/components/FeedList.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { + FlatList, + View, + ActivityIndicator, + RefreshControl, +} from 'react-native'; +import { RText } from '@packrat/ui'; +import useResponsive from 'app/hooks/useResponsive'; +import useTheme from 'app/hooks/useTheme'; + +interface FeedListProps { + data: any; + CardComponent: React.ComponentType<{ item: any }>; + refreshing: boolean; + onRefresh: () => void; + isLoading?: boolean; + errorMessage?: string; + separatorHeight?: number; + footerComponent?: JSX.Element; + keyExtractor?: (any, number) => string; +} + +export const FeedList = ({ + data, + CardComponent, + refreshing, + onRefresh, + isLoading = false, + errorMessage = 'No Data Available', + footerComponent, + keyExtractor, +}: FeedListProps) => { + const { xs, xxs, sm, md, lg } = useResponsive(); + const { currentTheme } = useTheme(); + + const getNumColumns = () => { + if (xxs || xs) return 1; + if (sm) return 1; + if (md) return 2; + if (lg) return 3; + return 4; + }; + + const numColumns = getNumColumns(); + + return ( + + {isLoading ? ( + + ) : ( + index.toString())} + renderItem={({ item }) => ( + + + + )} + ListFooterComponent={ + footerComponent || + } + ListEmptyComponent={() => {errorMessage}} + refreshControl={ + + } + showsVerticalScrollIndicator={false} + /> + )} + + ); +}; diff --git a/packages/app/modules/feed/components/index.ts b/packages/app/modules/feed/components/index.ts index 3c0d35173..f04b27d99 100644 --- a/packages/app/modules/feed/components/index.ts +++ b/packages/app/modules/feed/components/index.ts @@ -3,3 +3,4 @@ export { FeedSearchFilter } from './FeedSearchFilter'; export { SearchProvider, SearchContext } from './SearchProvider'; export { FavoriteButton } from './FavoriteButton'; export { CreatedAtLabel } from './CreatedAtLabel'; +export { FeedListLayout } from './FeedList';