diff --git a/.changeset/hip-chefs-tan.md b/.changeset/hip-chefs-tan.md new file mode 100644 index 00000000..afd4bf20 --- /dev/null +++ b/.changeset/hip-chefs-tan.md @@ -0,0 +1,6 @@ +--- +"@knocklabs/client": patch +"@knocklabs/react-core": patch +--- + +fix(kno-7843): consistent `trigger_data` params functionality diff --git a/examples/client-example/package.json b/examples/client-example/package.json index 228a7700..25823365 100644 --- a/examples/client-example/package.json +++ b/examples/client-example/package.json @@ -5,13 +5,12 @@ "dependencies": { "@knocklabs/client": "workspace:^", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^14.2.0", - "@testing-library/user-event": "^14.6.1", + "@testing-library/react": "^16.2.0", + "@testing-library/user-event": "^14.5.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", - "web-vitals": "^4.2.4", - "zustand": "^3.7.2" + "web-vitals": "^4.2.4" }, "scripts": { "dev": "PORT=3001 BROWSER=none react-scripts start", @@ -37,5 +36,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@testing-library/dom": "^10.4.0" } } diff --git a/examples/client-example/src/App.js b/examples/client-example/src/App.js index 70b0965c..dfb75c5e 100644 --- a/examples/client-example/src/App.js +++ b/examples/client-example/src/App.js @@ -1,6 +1,5 @@ import Knock from "@knocklabs/client"; import { useEffect, useMemo } from "react"; -import create from "zustand"; import "./App.css"; @@ -17,7 +16,7 @@ const useNotificationFeed = (knockClient, feedId) => { auto_manage_socket_connection: true, auto_manage_socket_connection_delay: 500, }); - const notificationStore = create(notificationFeed.store); + const notificationStore = notificationFeed.store; notificationFeed.fetch(); return [notificationFeed, notificationStore]; @@ -72,6 +71,8 @@ function App() {
ID: {item.id}
+ Has been read: {item.read_at ? "true" : "false"} +
Actor ID: {item.actors?.[0]?.id}
Actor email: {item.actors?.[0]?.email} diff --git a/examples/client-example/src/index.js b/examples/client-example/src/index.js index 4e329102..7abae0e5 100644 --- a/examples/client-example/src/index.js +++ b/examples/client-example/src/index.js @@ -1,15 +1,16 @@ import React from "react"; -import ReactDOM from "react-dom"; +import { createRoot } from "react-dom/client"; import App from "./App"; import "./index.css"; import reportWebVitals from "./reportWebVitals"; -ReactDOM.render( +const container = document.getElementById("root"); +const root = createRoot(container); +root.render( , - document.getElementById("root"), ); // If you want to start measuring performance in your app, pass a function diff --git a/examples/nextjs-example/.env.sample b/examples/nextjs-example/.env.sample index da78bb2d..ba3aebb2 100644 --- a/examples/nextjs-example/.env.sample +++ b/examples/nextjs-example/.env.sample @@ -3,6 +3,7 @@ KNOCK_SECRET_API_KEY= # Required for Knock's notification React feed component to render correctly NEXT_PUBLIC_KNOCK_PUBLIC_API_KEY= -NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID= +NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID= +NEXT_PUBLIC_WORKFLOW_KEY= NEXT_PUBLIC_KNOCK_HOST= \ No newline at end of file diff --git a/examples/nextjs-example/components/NotificationToasts.tsx b/examples/nextjs-example/components/NotificationToasts.tsx index d5450294..b7dde4f0 100644 --- a/examples/nextjs-example/components/NotificationToasts.tsx +++ b/examples/nextjs-example/components/NotificationToasts.tsx @@ -1,35 +1,29 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { useToast } from "@chakra-ui/react"; +import { type FeedItem } from "@knocklabs/client"; import { useKnockFeed } from "@knocklabs/react"; import { useCallback, useEffect } from "react"; - -import Toast from "./Toast"; +import { toast } from "sonner"; const NotificationToasts = () => { const { feedClient } = useKnockFeed(); - const toast = useToast(); const onNotificationsReceived = useCallback( - ({ items }: any) => { + ({ items }: { items: FeedItem[] }) => { // Whenever we receive a new notification from our real-time stream, show a toast // (note here that we can receive > 1 items in a batch) - items.forEach((notification: any) => { - if (notification.data.showToast === false) return; - - toast({ - render: (props) => ( - // @ts-expect-error - difference in status type - { - feedClient.markAsSeen(notification); - props.onClose(); - }} - /> - ), - position: "bottom-right", + items.forEach((notification) => { + if (notification.data?.showToast === false) return; + + // You can access the Knock notification data + const description = notification.data?.message; + + // Handle the notification however you want + toast.success("New Notification Received", { + description: description, + closeButton: true, + dismissible: true, + onDismiss: () => { + feedClient.markAsSeen(notification); + }, }); }); }, diff --git a/examples/nextjs-example/components/SendNotificationForm.tsx b/examples/nextjs-example/components/SendNotificationForm.tsx index 4c4a7a2d..bbe32f45 100644 --- a/examples/nextjs-example/components/SendNotificationForm.tsx +++ b/examples/nextjs-example/components/SendNotificationForm.tsx @@ -1,12 +1,9 @@ -import { - Button, - Checkbox, - FormControl, - FormLabel, - Select, - Textarea, -} from "@chakra-ui/react"; -import { FormEvent, useState } from "react"; +import { Button } from "@telegraph/button"; +import { Box, Stack } from "@telegraph/layout"; +import { Select } from "@telegraph/select"; +import { TextArea } from "@telegraph/textarea"; +import { Text } from "@telegraph/typography"; +import { type FormEvent, useState } from "react"; import { notify } from "../lib/api"; @@ -32,60 +29,82 @@ const SendNotificationForm = ({ userId, tenant }: Props) => { setIsLoading(true); await notify({ message, showToast, userId, tenant, templateType }); setIsLoading(false); - + setMessage(""); (e.target as HTMLFormElement).reset(); }; return (
- - - Message - -