'init'

app/components/DialogsList/DialogsList.tsx

@@ -0,0 +1,56 @@
+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>
+			))}
+		</>
+	);
+}