Merge pull request #6 from talkjs/feat/useUnreads

feat: add useUnreads

Author: frederikcreemers

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v0.1.4
+
+- Added `useUnreads` hook
+
 ## v0.1.3
 
 - Add `signature?: string` prop to `Session`

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 }}
         />
+        <UnreadsDisplay />
       </Session>
       <button onClick={otherMe}>switch user (new session)</button>
       <br />
@@ -195,4 +196,26 @@ function App() {
   );
 }
 
+function UnreadsDisplay() {
+  const unreads = useUnreads();
+  let content: ReactElement | null = null;
+
+  if (unreads === undefined) {
+    content = <p>unreads is undefined (no session)</p>;
+  } else if (unreads.length === 0) {
+    content = <p>No unread messages</p>
+  } else {
+    content = <ul>
+      {unreads.map(u => {
+        return <li key={u.conversation.id}>{u.conversation.id} - {u.lastMessage.sender?.name || "system"}: {u.lastMessage.body}</li>
+      })}
+    </ul>
+  }
+
+  return <details>
+    <summary><strong>Unreads rendered with useUnreads</strong></summary>
+    {content}
+  </details>
+}
+
 export default App;

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<Talk.Session | undefined>(
@@ -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 <Session>.
+ * 
+ * @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 <Session> 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<Talk.UnreadConversation[] | undefined>();
+
+  useEffect(() => {
+    if (!session || !session.isAlive) {
+      setUnreads(undefined);
+      return;
+    }
+
+    const sub = session.unreads.onChange( unreads => {
+      setUnreads(unreads);
+    });
+
+    return () => sub.unsubscribe();
+  }, [session]);
+
+  return unreads;
+}

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";

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"