feat: wip

README.md

@@ -52,11 +52,8 @@ export const client = postgres(
   `${process.env.PG_CONNECTION_STRING}/${process.env.PG_DB}`
 );
 
-export const {
-  NextRealtimeStreamHandler,
-  revalidateRealtimeTag,
-  getRealtimeSessionId,
-} = configNextRealtimeRedis(redis);
+export const { NextRealtimeStreamHandler, revalidateRealtimeTag } =
+  configNextRealtimeRedis(redis);
 ```
 
 Now create a route that will stream data to the client.
@@ -149,15 +146,18 @@ export const getTodos = unstable_cache(
 
 **src/components/TodoList.tsx**
 
-```ts
+```tsx
 import { getTodos } from '../actions/getTodos'; // 👈
 import TodoCard from './TodoCard';
+import { AddTodoButton } from './AddTodoButton';
 
-const TodoList = async () => { // 👈 async react component
+const TodoList = async () => {
+  // 👈 async react component
   const todos = await getTodos();
 
   return (
     <div className="container p-4">
+      <AddTodoButton />
       <div className="space-y-4">
         {todos.map((todo) => (
           <TodoCard key={todo.id} todo={todo} />
@@ -198,6 +198,49 @@ export const addTodo = async ({ text }: { text: string }) => {
 };
 ```
 
+**src/components/AddTodoButton.tsx**
+
+```tsx
+'use client';
+
+import React, { useTransition, useState } from 'react';
+import { nanoid } from 'nanoid';
+import { addTodo } from '../actions/addTodo';
+
+export const AddTodoButton = () => {
+  const [, startTransition] = useTransition();
+  const [todoText, setTodoText] = useState('');
+
+  const handleAddTodo = () => {
+    startTransition(() =>
+      addTodo({
+        text: todoText || `Random todo ${nanoid(4)}`,
+      })
+    );
+    setTodoText(''); // Clear the input field after adding todo
+  };
+
+  return (
+    <div className="flex items-center">
+      <input
+        type="text"
+        value={todoText}
+        onChange={(e) => setTodoText(e.target.value)}
+        className="mr-2 p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-500 "
+        placeholder="Enter todo"
+      />
+      <button
+        className="bg-blue-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue active:bg-blue-600"
+        type="button"
+        onClick={handleAddTodo}
+      >
+        Add todo
+      </button>
+    </div>
+  );
+};
+```
+
 <!-- TSDOC_START -->
 
 <!-- TSDOC_END -->

examples/next-realtime-example/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn yalc link next-realtime && yarn link next-realtime && next dev",
+    "dev": "yarn link next-realtime && next dev",
     "build": "yarn migrate && next build",
     "start": "next start",
     "lint": "next lint",

examples/next-realtime-example/src/app/page.tsx

@@ -1,4 +1,4 @@
-import TodoList from '../components/TodoList';
+import { TodoList } from '@/components/TodoList';
 
 export const dynamic = 'force-dynamic';
 

examples/next-realtime-example/src/app/realtime/config.ts

@@ -3,8 +3,5 @@ import { configNextRealtimeRedis } from 'next-realtime/server';
 
 export const redis = new Redis(process.env.REDIS_CONNECTION_STRING as string);
 
-export const {
-  NextRealtimeStreamHandler,
-  revalidateRealtimeTag,
-  getRealtimeSessionId,
-} = configNextRealtimeRedis(redis);
+export const { NextRealtimeStreamHandler, revalidateRealtimeTag } =
+  configNextRealtimeRedis(redis);

examples/next-realtime-example/src/components/AddTodoButton.tsx

@@ -8,10 +8,6 @@ export const AddTodoButton = () => {
   const [, startTransition] = useTransition();
   const [todoText, setTodoText] = useState('');
 
-  const handleInputChange = (e) => {
-    setTodoText(e.target.value);
-  };
-
   const handleAddTodo = () => {
     startTransition(() =>
       addTodo({
@@ -26,7 +22,7 @@ export const AddTodoButton = () => {
       <input
         type="text"
         value={todoText}
-        onChange={handleInputChange}
+        onChange={(e) => setTodoText(e.target.value)}
         className="mr-2 p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-500 "
         placeholder="Enter todo"
       />

examples/next-realtime-example/src/components/TodoCard.tsx

@@ -15,7 +15,7 @@ const formatDateTimeForHumans = (time: Date) => {
   });
 };
 
-const TodoCard = (props: TodoCardProps) => {
+export const TodoCard = (props: TodoCardProps) => {
   const [, startTransition] = useTransition();
 
   return (
@@ -48,5 +48,3 @@ const TodoCard = (props: TodoCardProps) => {
     </div>
   );
 };
-
-export default TodoCard;

examples/next-realtime-example/src/components/TodoList.tsx

@@ -2,9 +2,9 @@ import { getTodos } from '../actions/getTodos';
 import { AddTodoButton } from './AddTodoButton';
 import { ClearTodosButton } from './ClearTodosButton';
 import { RealtimeButton } from './RealtimeButton';
-import TodoCard from './TodoCard';
+import { TodoCard } from './TodoCard';
 
-const TodoList = async () => {
+export const TodoList = async () => {
   const todos = await getTodos();
 
   return (
@@ -23,5 +23,3 @@ const TodoList = async () => {
     </div>
   );
 };
-
-export default TodoList;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-realtime",
   "description": "",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Tim Mikeladze <tim.mikeladze@gmail.com>",
   "license": "MIT",
   "keywords": [],

src/react/index.tsx

@@ -17,9 +17,7 @@ export interface NextRealtimeProviderProps {
   children?: ReactNode;
   path?: string;
   revalidateTag: (tag: string) => Promise<void>;
-  sessionId: () => Promise<{
-    value: string;
-  }>;
+  sessionId: () => Promise<any>;
 }
 
 interface NextRealtimeContextProps {