NotificationHistory.tsx

import { HeaderOptions, Icon, Image, Screen, Text } from '@components';
import { useNavigation } from '@navigation';
import { moderateScale } from '@utils';
import React, { FC, useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useLoadNotifications, useStyles } from '@hooks';
import { NotificationsList } from './components';
import { images } from '@assets';
import { NotificationType } from '@models';

export const NotificationsHistory: FC = () => {
  const navigation = useNavigation();
  const { styles, theme } = useStyles(stylesFactory);
  const [currentPage, setCurrentPage] = useState(1);
  const { notificationsList, isNotificationsLoading } = useLoadNotifications({
    page: currentPage,
    type: 'motion_detect' as NotificationType,
  });

  const headerOptions = useMemo<HeaderOptions>(
    () => ({
      title: 'Notifications',
      leftButton: {
        action: () => navigation.goBack(),
        icon: 'leftArrowIcon',
      },
    }),
    [],
  );

  return (
    <Screen
      headerOptions={headerOptions}
      style={styles.screen}
      loadingOverlay={isNotificationsLoading && notificationsList.length === 0}
    >
      {notificationsList.length === 0 ? (
        <View style={styles.content}>
          <Image source={images.decoration.rings} style={styles.deviceRing}>
            <Icon name={'notificationBellAlert'} width={40} height={40} />
          </Image>
          <View style={styles.title}>
            <Text color={theme.colors.textSecondary} size={'large'}>
              No notifications yet
            </Text>
            <Text align={'center'} color={theme.colors.textSecondary} style={{ marginTop: moderateScale(16) }}>
              Stay tuned!{'\n'}
              Notifications will show up here
            </Text>
          </View>
        </View>
      ) : (
        <NotificationsList
          data={notificationsList}
          currentPage={currentPage}
          nextPage={setCurrentPage}
          isNotificationsLoading={isNotificationsLoading}
        />
      )}
    </Screen>
  );
};

const stylesFactory = () => {
  return StyleSheet.create({
    deviceRing: {
      width: moderateScale(136),
      height: moderateScale(136),
      justifyContent: 'center',
      alignItems: 'center',
      alignSelf: 'center',
      marginTop: moderateScale(130),
      marginBottom: moderateScale(30),
    },
    screen: {
      paddingHorizontal: 0,
    },
    content: {
      flex: 1,
    },
    title: {
      alignItems: 'center',
    },
  });
};