diff --git a/CHANGELOG.md b/CHANGELOG.md index 05a08eb..98320cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## v0.1.4 + +- Added `useUnreads` hook + ## v0.1.3 - Add `signature?: string` prop to `Session` diff --git a/example/App.tsx b/example/App.tsx index cdc480e..377577a 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,8 +1,8 @@ import "./App.css"; -import { Session, Chatbox } from "../lib/main"; +import { Session, Chatbox, useUnreads } from "../lib/main"; import Talk from "talkjs"; -import { ChangeEvent, useCallback, useMemo, useRef, useState } from "react"; +import { ChangeEvent, useCallback, useMemo, useRef, useState, ReactElement } from "react"; const convIds = ["talk-react-94872948u429843", "talk-react-194872948u429843"]; const users = [ @@ -151,6 +151,7 @@ function App() { {...(blur ? { onBlur } : {})} style={{ width: 500, height: 600 }} /> +
@@ -195,4 +196,26 @@ function App() { ); } +function UnreadsDisplay() { + const unreads = useUnreads(); + let content: ReactElement | null = null; + + if (unreads === undefined) { + content =

unreads is undefined (no session)

; + } else if (unreads.length === 0) { + content =

No unread messages

+ } else { + content = + } + + return
+ Unreads rendered with useUnreads + {content} +
+} + export default App; diff --git a/lib/SessionContext.ts b/lib/SessionContext.ts index a6e89ee..18206e4 100644 --- a/lib/SessionContext.ts +++ b/lib/SessionContext.ts @@ -1,4 +1,4 @@ -import { createContext, useContext } from "react"; +import { createContext, useContext, useEffect, useState } from "react"; import type Talk from "talkjs"; export const SessionContext = createContext( @@ -31,3 +31,34 @@ export function useSession() { const session = useContext(SessionContext); return session?.isAlive ? session : undefined; } + +/** + * Returns conversations with unread messages. + * + * @remarks + * Can only be used in child components of . + * + * @returns A list of {@link https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session/#UnreadConversation | UnreadConversation} objects, + * or undefined if this hook is used outside of the component, or the session is not alive for any other reason. + * During development in particular, sessions can be destroyed and recreated a + * lot, eg due to React.StrictMode or due to hot-module reloading. + */ +export function useUnreads() { + const session = useSession(); + const [unreads, setUnreads] = useState(); + + useEffect(() => { + if (!session || !session.isAlive) { + setUnreads(undefined); + return; + } + + const sub = session.unreads.onChange( unreads => { + setUnreads(unreads); + }); + + return () => sub.unsubscribe(); + }, [session]); + + return unreads; +} diff --git a/lib/main.tsx b/lib/main.tsx index 950a246..6320f4e 100644 --- a/lib/main.tsx +++ b/lib/main.tsx @@ -3,4 +3,4 @@ export { Session } from "./Session"; export { Chatbox } from "./ui/Chatbox"; export { Inbox } from "./ui/Inbox"; export { Popup } from "./ui/Popup"; -export { useSession } from "./SessionContext"; +export { useSession, useUnreads } from "./SessionContext"; diff --git a/package.json b/package.json index 493bf0a..cd46145 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "url": "https://github.com/talkjs/talkjs-react/issues" }, "homepage": "https://talkjs.com", - "version": "0.1.3", + "version": "0.1.4", "type": "module", "files": [ "dist"