45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Skeleton } from "@/components/ui";
|
|
import { useAppUiStore } from "@/providers/app-ui-store-provider";
|
|
import { useChats } from "@/providers/chats-provider";
|
|
|
|
import { ChatItemsList, NewMessages } from "..";
|
|
|
|
export default function NewMessagesWrapper() {
|
|
const t = useTranslations("Chat");
|
|
const { unreadChats } = useChats();
|
|
|
|
const { isVisibleAll } = useAppUiStore(state => state.chats.newMessages);
|
|
const hasHydrated = useAppUiStore(state => state._hasHydrated);
|
|
const setChatsNewMessages = useAppUiStore(state => state.setChatsNewMessages);
|
|
|
|
if (!hasHydrated) return <NewMessagesWrapperSkeleton />;
|
|
|
|
return (
|
|
<>
|
|
{!!unreadChats.length && (
|
|
<ChatItemsList
|
|
title={t("new_messages")}
|
|
viewAllProps={{
|
|
count: unreadChats.length,
|
|
isAll: isVisibleAll,
|
|
onClick: () => {
|
|
setChatsNewMessages({ isVisibleAll: !isVisibleAll });
|
|
},
|
|
}}
|
|
isVisibleViewAll={unreadChats.length > 1}
|
|
>
|
|
<NewMessages chats={unreadChats} isVisibleAll={isVisibleAll} />
|
|
</ChatItemsList>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export const NewMessagesWrapperSkeleton = () => {
|
|
return <Skeleton style={{ height: 300, width: "100%" }} />;
|
|
};
|