ViewAll.screen.tsx

import moment from 'moment';
import React, { useEffect, useState, useMemo } from 'react';
import {
	View,
	TouchableOpacity,
	ActivityIndicator,
} from 'react-native';
import { Text } from 'react-native-paper';
import {
	GLOBAL_STYLE as GS,
	icons,
} from '../../../../assets';
import {
	BIcon,
	BSeparator,
	SizedBox,
	BDropdown,
	BButton,
} from '../../../../components';
import {
	Message,
	IGetMessagesBody,
} from '../../../../types';
import { AccountLayout } from '../components';
import { useNavigation } from '@react-navigation/native';
import { DRAWER_ROUTES_NAMES } from '../../../../router/DrawerNavigator';
import { useRefetchOnFocus } from '../../../../hooks/useRefetchOnFocus';
import { useAppContext } from '../../../../context/auth/app.context';
import LoadingScreen from '../../../Loading.screen';
import { useMessages } from '../../../../hooks/useMessages';

const MessageComponent = ({
	index,
	item,
	onPress,
	messagesLength
}: {
	index: number;
	item: Message;
	onPress: any;
	messagesLength: number;
}) => {
	const formattedDate = useMemo(() => {
		const date = moment(item.sentTime * 1000);
		return {
			day: date.format('DD'),
			month: date.format('MMM'),
		};
	}, [index]);
	return (
		<TouchableOpacity onPress={() => onPress((v) => !v)}>
			<View
				style={{
					backgroundColor: '#2A2450',
					paddingHorizontal: 15,
				}}>
				<View
					style={{
						flexDirection: 'row',
						alignItems: 'center',
						borderBottomColor: '#4A437B',
						borderBottomWidth: index === messagesLength - 1 ? 0 : 2,
						paddingVertical: 15,
					}}>
					<View>
						<BIcon
							icon={icons.envelope}
							style={{
								width: 28,
								height: 20,
								resizeMode: 'contain',
								marginBottom: 5,
							}}
						/>
						<Text
							style={{
								textAlign: 'center',
								lineHeight: 16,
								fontSize: 13,
								color: 'white',
							}}>
							{formattedDate.day}
						</Text>
						<Text
							style={{
								textAlign: 'center',
								lineHeight: 16,
								fontSize: 13,
								textTransform: 'uppercase',
								color: 'white',
							}}>
							{formattedDate.month}
						</Text>
					</View>
					<View style={[GS.flex1, GS.px5]}>
						<Text
							style={[
								GS.txtUpper,
								GS.txtPrimary,
								GS.FF_PoppinsSemiBold,
								GS.txtPrimary,
								{ fontSize: 15, marginBottom: 5 },
							]}>
							{item.title}
						</Text>
						<Text style={[GS.txtUpper, GS.txtWhite]}>
							{item.subtitle}
						</Text>
					</View>
					<View>
						<BIcon
							icon={icons.right_arrow}
							style={{
								height: 16,
								width: 16,
								resizeMode: 'contain',
							}}
						/>
					</View>
				</View>
			</View>
		</TouchableOpacity>
	);
};

const MessagesViewAllScreen = () => {
	const navigation = useNavigation();
	const { isAppDataLoading } = useAppContext();
	const [currentPage, setCurrentPage] = useState(1);
	const [itemsPerPage, setItemsPerPage] = useState(10);
	const [sortBy, setSortBy] = useState('desc');
	const [status, setStatus] = useState(1);

	const [messagesFilter, setMessagesFilter] = useState<IGetMessagesBody>({
		page: currentPage,
		limit: itemsPerPage,
		status: status,
		includeContent: 0,
		sort: sortBy,
		column: 'sentTime',
		fromDate: 0,
	});

	const {
		data: userMessages,
		fetch: refetchMessages,
		isLoading: userMessagesisLoading,
	} = useMessages(messagesFilter, {
		config: { },
	});

	useEffect(() => {
		refetchMessages();
	}, [messagesFilter, currentPage, itemsPerPage, sortBy, refetchMessages]);

	useRefetchOnFocus(refetchMessages);

	if (isAppDataLoading) {
		return <LoadingScreen />;
	}

	const handleMessagesFilterChange = (filter: IGetMessagesBody) => {
		setMessagesFilter(filter);
	};

	const loadMore = () => {
		const newLimit = itemsPerPage + 10;
		const newPage = Math.ceil(newLimit / itemsPerPage);
		const totalPages = userMessages?.response?.pagination?.totalPages || 0;

		if (newPage <= totalPages) {
			setCurrentPage(newPage);
			handleMessagesFilterChange({
				...messagesFilter,
				limit: newLimit,
				page: newPage,
			});
		}
	};

	return (
		<AccountLayout hasHeader={false} disableHorizontalPadding={true}>
			<View>
				<React.Fragment>
					<View
						style={{
							display: 'flex',
							flexDirection: 'row',
							justifyContent: 'center',
							zIndex: 10,
							position: 'relative',
							flex: 1,
							paddingVertical: 0,
						}}>
						<Text
							style={{
								...GS.FF_PoppinsSemiBold,
								textTransform: 'uppercase',
								color: 'white',
								fontSize: 29,
								lineHeight: 32,
							}}>
							MESSAGES
						</Text>
					</View>
					<View style={{ paddingHorizontal: 10 }}>
						{/*  */}
						<BSeparator spaceless />
					</View>

					<View style={{
						display: 'flex',
						flexDirection: 'column',
						zIndex: 10,
						position: 'relative',
						flex: 1,
						paddingHorizontal: 10,
					}}>
						<BDropdown
							label="Sort by"
							value={sortBy}
							onPress={(entry) => {
								setSortBy(entry.value);
								handleMessagesFilterChange({
									...messagesFilter,
									sort: entry.value,
								});
							}}
							values={[{ label: 'DATE DESCENDING', value: 'desc' }, { label: 'DATE ASCENDING', value: 'asc' },]}
							style={{ marginBottom: 20 }}
						/>

						<BDropdown
							value={status}
							onPress={(entry) => {
								setStatus(entry.value);
								handleMessagesFilterChange({
									...messagesFilter,
									status: entry.value,
								});
							}}
							values={[{ label: 'UNREAD MESSAGES', value: 0 }, { label: 'READ MESSAGES', value: 1 }, { label: 'DELETED MESSAGES', value: 2 },]}
						/>
					</View>

					{userMessagesisLoading && (
						<View
							style={{
								...GS.centered,
								flex: 1,
								paddingVertical: 15,
								paddingHorizontal: 10,
							}}>
							<ActivityIndicator size={45} color={'white'} />
						</View>
					)}

					<SizedBox height={20} />


					{/*  */}
					{!userMessagesisLoading &&
						userMessages?.response?.items &&
						userMessages?.response?.items.length > 0 &&
						userMessages?.response?.items.map((item, index) => (
							<MessageComponent
								key={index}
								item={item}
								index={index}
								messagesLength={userMessages?.response?.items?.length || 0}
								onPress={() => {
									navigation.navigate(
										DRAWER_ROUTES_NAMES.ACCOUNT__MESSAGES_INNER as never,
										{
											message: item,
										} as never,
									);
								}}
							/>
						))}

					{!userMessagesisLoading &&
						userMessages?.response?.items &&
						userMessages?.response?.items.length === 0 && (
							<View style={{ marginTop: 40, marginBottom: 5 }}>
								<Text style={[GS.txtWhite, GS.txtCenter, GS.txtH3]}>
									No messages available.
								</Text>
							</View>
						)}

					<SizedBox height={30} />

					<View
						style={{
							display: 'flex',
							flexDirection: 'row',
							justifyContent: 'space-between',
							alignItems: 'flex-end',
							paddingHorizontal: 20,
						}}>
						<BButton
							title="LOAD MORE"
							onPress={
								loadMore
							}
							mode="primary"
							size="large"
							style={{ width: '70%' }}
							disabled={
								userMessages?.response?.items?.length ===
								userMessages?.response?.pagination?.totalItems
							}
						/>
						<BDropdown
							label="Page"
							value={currentPage}
							onPress={(entry) => {
								setCurrentPage(entry.value);
								handleMessagesFilterChange({
									...messagesFilter,
									page: entry.value,
								});
							}}
							values={Array.from(
								{ length: userMessages?.response?.pagination?.totalPages },
								(_, i) => i + 1,
							).map((item) => ({
								label: item?.toString(),
								value: item,
							}))}
							style={{ width: 80 }}
						/>
					</View>
				</React.Fragment>
			</View>
		</AccountLayout>
	);
};

export default MessagesViewAllScreen;