Merge branch 'master' into feat/htmlpanel

Author: Asha20

CHANGELOG.md

@@ -1,6 +1,11 @@
+## v0.1.5
+
+- Output ES2015
+
 ## v0.1.4
 
-- Add `<HtmlPanel>` component
+- Added `useUnreads` hook
+
 
 ## v0.1.3
 

README.md

@@ -1,13 +1,14 @@
 import "./App.css";
 
-import { Session, Chatbox, HtmlPanel } from "../lib/main";
+import { Session, Chatbox, HtmlPanel, useUnreads } from "../lib/main";
 import Talk from "talkjs";
-import React, {
+import {
   ChangeEvent,
   useCallback,
   useMemo,
   useRef,
   useState,
+  ReactElement,
 } from "react";
 
 const convIds = ["talk-react-94872948u429843", "talk-react-194872948u429843"];
@@ -178,6 +179,7 @@ function App() {
             </HtmlPanel>
           )}
         </Chatbox>
+        <UnreadsDisplay />
       </Session>
 
       <button
@@ -231,4 +233,37 @@ 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;

example/App.tsx

@@ -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/SessionContext.ts

@@ -3,5 +3,5 @@ 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";
 export { HtmlPanel } from "./HtmlPanel";

lib/main.tsx

@@ -28,7 +28,7 @@
     "url": "https://github.com/talkjs/talkjs-react/issues"
   },
   "homepage": "https://talkjs.com",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "dist"

package.json

@@ -22,6 +22,7 @@ async function renameJsx() {
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
+    target: "es2015",
     lib: {
       entry: "lib/main.tsx",
       name: "TalkJSReact",