Collab on Notifications (#388)

* update env vars

* update notif provider

* add secret key for server sdk

* create feed component

* make provider client

---------

Co-authored-by: Jeff Everhart <jeffeverhart383@gmail.com>

apps/app/.env.example

@@ -13,8 +13,7 @@ FLAGS_SECRET=""
 ARCJET_KEY=""
 SVIX_TOKEN=""
 LIVEBLOCKS_SECRET=""
-KNOCK_API_KEY=""
-KNOCK_FEED_CHANNEL_ID=""
+KNOCK_SECRET_API_KEY=""
 
 # Client
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
@@ -29,3 +28,5 @@ NEXT_PUBLIC_APP_URL="http://localhost:3000"
 NEXT_PUBLIC_WEB_URL="http://localhost:3001"
 NEXT_PUBLIC_DOCS_URL="http://localhost:3004"
 NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL="http://localhost:3000"
+NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID=""
+NEXT_PUBLIC_KNOCK_API_KEY=""

packages/design-system/components/knock-notification-feed.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState, useRef } from "react";
+import {
+  NotificationIconButton,
+  NotificationFeedPopover,
+} from "@knocklabs/react";
+
+// Required CSS import, unless you're overriding the styling
+import "@knocklabs/react/dist/index.css";
+
+export const KnockNotificationFeed = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const notifButtonRef = useRef(null);
+
+  return (
+
+        <>
+          <NotificationIconButton
+            ref={notifButtonRef}
+            onClick={(e) => setIsVisible(!isVisible)}
+          />
+          <NotificationFeedPopover
+            buttonRef={notifButtonRef}
+            isVisible={isVisible}
+            onClose={() => setIsVisible(false)}
+          />
+        </>
+  );
+};

packages/design-system/lib/knock.ts

@@ -1,9 +1,9 @@
 import { Knock } from '@knocklabs/node';
 
-const knockApiKey = process.env.KNOCK_API_KEY;
+const knockApiKey = process.env.KNOCK_SECRET_API_KEY;
 
 if (!knockApiKey) {
-  throw new Error('KNOCK_API_KEY is not set');
+  throw new Error('KNOCK_SECRET_API_KEY is not set');
 }
 
 export const knock = new Knock(knockApiKey);

packages/design-system/providers/notifications.tsx

@@ -1,15 +1,17 @@
+'use client';
+
 import { KnockFeedProvider, KnockProvider } from '@knocklabs/react';
 import type { ReactNode } from 'react';
 
-const knockApiKey = process.env.KNOCK_API_KEY;
-const knockFeedChannelId = process.env.KNOCK_FEED_CHANNEL_ID;
+const knockApiKey = process.env.NEXT_PUBLIC_KNOCK_API_KEY;
+const knockFeedChannelId = process.env.NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID;
 
 if (!knockApiKey) {
-  throw new Error('KNOCK_API_KEY is not set');
+  throw new Error('NEXT_PUBLIC_KNOCK_API_KEY is not set');
 }
 
 if (!knockFeedChannelId) {
-  throw new Error('KNOCK_FEED_CHANNEL_ID is not set');
+  throw new Error('NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID is not set');
 }
 
 export const NotificationsProvider = ({