Skip to content

fix(kno-7843): fixes trigger_data params functionality and types #428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
96b105e
removes react-popper dependency
MikeCarbone Feb 14, 2025
b4207cc
allow react 19
MikeCarbone Feb 14, 2025
45f2662
upgrades zustand
MikeCarbone Feb 14, 2025
11f1c46
merge
MikeCarbone Feb 20, 2025
7775936
fixes render loop bug
MikeCarbone Feb 19, 2025
544b1f6
adjusts version number, removes placeholder
MikeCarbone Feb 20, 2025
aa4497a
undo example changes for this branch
MikeCarbone Feb 20, 2025
3826ae6
Better URL in comment
MikeCarbone Feb 20, 2025
85f7fbf
fixes zustand implementation
MikeCarbone Feb 20, 2025
1c9d6ae
matches types on main
MikeCarbone Feb 21, 2025
cedf987
Use new store
MikeCarbone Feb 21, 2025
293b357
merges in examples
MikeCarbone Feb 21, 2025
663c355
Cleanup CRA example
MikeCarbone Feb 21, 2025
e90b3de
fixes docs to remove zustand requirement
MikeCarbone Feb 21, 2025
3753d5a
Tests pass locally
MikeCarbone Feb 21, 2025
c80ddd0
fixes dev dependency issues
MikeCarbone Feb 21, 2025
2aaaf3e
runs lint
MikeCarbone Feb 21, 2025
0b315dd
runs format
MikeCarbone Feb 21, 2025
6b55788
remove unused dependency
MikeCarbone Feb 21, 2025
9965ddc
adds setup env variable
MikeCarbone Feb 21, 2025
60ce056
clean up PR
MikeCarbone Feb 21, 2025
c7877a8
Improves selector typing and validates that it works
MikeCarbone Feb 21, 2025
8d6a8a4
runs formatter
MikeCarbone Feb 21, 2025
472a368
comment removes unnecessary info
MikeCarbone Feb 21, 2025
e457c5f
Better import and comments
MikeCarbone Feb 24, 2025
f941b5a
rips out rerender hack
MikeCarbone Feb 24, 2025
c09e083
better styling setup
MikeCarbone Feb 24, 2025
de2cf62
updates to match main and easier merge
MikeCarbone Feb 24, 2025
3cb896e
merge
MikeCarbone Feb 24, 2025
8dd6d9b
run lint and format
MikeCarbone Feb 24, 2025
a5b141f
Updates a few readmes
MikeCarbone Feb 24, 2025
673b606
fix(KNO-7843): fixes using JS objects in trigger_data field
MikeCarbone Feb 24, 2025
5edbadc
removes unused import
MikeCarbone Feb 24, 2025
57c89c9
Cleaner if statement structure
MikeCarbone Feb 24, 2025
19357bc
cleans up demo values
MikeCarbone Feb 24, 2025
911306b
Comments on interface
MikeCarbone Feb 24, 2025
08ccd8a
increases package version number
MikeCarbone Feb 24, 2025
66a7f5b
Create hip-chefs-tan.md
MikeCarbone Feb 24, 2025
cbd914c
adds strict comparison on deepEqual
MikeCarbone Feb 24, 2025
a7e1eaf
tightens up the trigger_data type
MikeCarbone Feb 24, 2025
504c5fb
better comment for trigger data
MikeCarbone Feb 24, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/hip-chefs-tan.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@knocklabs/client": patch
"@knocklabs/react-core": patch
---

fix(kno-7843): consistent `trigger_data` params functionality
10 changes: 6 additions & 4 deletions examples/client-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -37,5 +36,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/dom": "^10.4.0"
}
}
5 changes: 3 additions & 2 deletions examples/client-example/src/App.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Knock from "@knocklabs/client";
import { useEffect, useMemo } from "react";
import create from "zustand";

import "./App.css";

Expand All @@ -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];
Expand Down Expand Up @@ -72,6 +71,8 @@ function App() {
<div key={item.id} className="feed-item">
ID: {item.id}
<br />
Has been read: {item.read_at ? "true" : "false"}
<br />
Actor ID: {item.actors?.[0]?.id}
<br />
Actor email: {item.actors?.[0]?.email}
Expand Down
7 changes: 4 additions & 3 deletions examples/client-example/src/index.js
Original file line number Diff line number Diff line change
@@ -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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root"),
);

// If you want to start measuring performance in your app, pass a function
Expand Down
3 changes: 2 additions & 1 deletion examples/nextjs-example/.env.sample
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ KNOCK_SECRET_API_KEY=<Knock secret API key>

# Required for Knock's notification React feed component to render correctly
NEXT_PUBLIC_KNOCK_PUBLIC_API_KEY=<Knock public API key>
NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID=<Knock in-app feed channel ID>
NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID=<Knock in-app feed channel ID for loading the feed>
NEXT_PUBLIC_WORKFLOW_KEY=<Knock workflow key that has the in-app channel, for sending notifications to this feed>

NEXT_PUBLIC_KNOCK_HOST=<Optional>
40 changes: 17 additions & 23 deletions examples/nextjs-example/components/NotificationToasts.tsx
Original file line number Diff line number Diff line change
@@ -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
<Toast
{...props}
title={"New notification received"}
description={notification.blocks[0].rendered}
onClose={() => {
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);
},
});
});
},
Expand Down
133 changes: 76 additions & 57 deletions examples/nextjs-example/components/SendNotificationForm.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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 (
<form onSubmit={onSubmit}>
<FormControl mb={3}>
<FormLabel htmlFor="message" fontSize={14}>
Message
</FormLabel>
<Textarea
id="message"
name="message"
placeholder="Message to be shown in the notification"
size="sm"
onChange={(e) => setMessage(e.target.value)}
/>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize={14}>Template type</FormLabel>
<Select
mr={3}
size="sm"
value={templateType}
onChange={(e) => setTemplateType(e.target.value as TemplateType)}
<Stack direction="column" gap="4" marginTop="3">
<Box>
<Stack direction="column" gap="1">
<Text as="label" htmlFor="message" size="2">
Message
</Text>
<TextArea
as="textarea"
display="block"
id="message"
height="20"
name="message"
placeholder="Message to be shown in the notification"
size="2"
onChange={(e) => setMessage(e.target.value)}
/>
</Stack>
</Box>
<Box marginBottom="3">
<Stack direction="column" gap="1">
<Text as="label" size="2">
Template type
</Text>
<Box marginRight="2">
<Select.Root
size="2"
value={templateType}
onValueChange={(value) =>
setTemplateType(value as TemplateType)
}
>
<Select.Option value={TemplateType.Standard}>
Standard
</Select.Option>
<Select.Option value={TemplateType.SingleAction}>
Single-action
</Select.Option>
<Select.Option value={TemplateType.MultiAction}>
Multi-action
</Select.Option>
</Select.Root>
</Box>
</Stack>
</Box>
<Box marginBottom="3">
<Text as="label" size="2">
<Stack direction="row" alignItems="center">
<input
type="checkbox"
name="showToast"
checked={showToast}
onChange={(e) => setShowToast(e.target.checked)}
/>
<Text as="span" size="2" marginLeft="1">
Show a toast?
</Text>
</Stack>
</Text>
</Box>
<Button
type="submit"
variant="solid"
color="accent"
size="2"
disabled={message === ""}
state={isLoading ? "loading" : undefined}
>
<option value={TemplateType.Standard}>Standard</option>
<option value={TemplateType.SingleAction}>Single-action</option>
<option value={TemplateType.MultiAction}>Multi-action</option>
</Select>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize={14} display="flex" alignItems="center">
<Checkbox
name="showToast"
size="sm"
isChecked={showToast}
onChange={(e) => setShowToast(e.target.checked)}
mr={2}
/>{" "}
Show a toast?{" "}
</FormLabel>
</FormControl>

<Button
type="submit"
variant="solid"
colorScheme="gray"
size="sm"
isDisabled={message === ""}
isLoading={isLoading}
>
Send notification
</Button>
Send Notification
</Button>
</Stack>
</form>
);
};
Expand Down
96 changes: 0 additions & 96 deletions examples/nextjs-example/components/Toast.tsx

This file was deleted.

Loading