56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { Dialog } from "../Dialog/Dialog";
|
|
import Lottie from "lottie-react";
|
|
import animationData from './lottie.json';
|
|
import { Box, Flex, Skeleton, Text } from "@mantine/core";
|
|
import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList";
|
|
import { GroupDialog } from "../GroupDialog/GroupDialog";
|
|
import React from "react";
|
|
|
|
interface DialogsListProps {
|
|
mode: 'all' | 'requests';
|
|
onSelectDialog: (publicKey: string) => void;
|
|
}
|
|
|
|
export function DialogsList(props : DialogsListProps) {
|
|
const {dialogs, loadingDialogs} = useDialogsList();
|
|
|
|
return (
|
|
<>
|
|
{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).length <= 0 && (
|
|
<Flex align={'center'} mt={100} direction={'column'} justify={'center'}>
|
|
<Lottie style={{
|
|
width: 90,
|
|
height: 90
|
|
}} loop={true} animationData={animationData}></Lottie>
|
|
<Text mt={'sm'} c={'dimmed'} fz={13}>
|
|
Write to someone
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
{loadingDialogs > 0 && (
|
|
<>
|
|
{Array.from({ length: loadingDialogs }).map((_, index) => (
|
|
<Box w={'100%'} h={74} key={index}>
|
|
<Skeleton height={74} radius={0} mb={index == loadingDialogs - 1 ? 0 : 1} />
|
|
</Box>
|
|
))}
|
|
</>
|
|
)}
|
|
{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => (
|
|
<React.Fragment key={dialog.dialog_id}>
|
|
{dialog.dialog_id.startsWith('#group:') ? (
|
|
<GroupDialog
|
|
onClickDialog={props.onSelectDialog}
|
|
{...dialog}
|
|
/>
|
|
) : (
|
|
<Dialog
|
|
onClickDialog={props.onSelectDialog}
|
|
{...dialog}
|
|
/>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</>
|
|
);
|
|
} |