From e73db594cd026f0ba7e8a6e7cd3c4db19a718a4a Mon Sep 17 00:00:00 2001
From: Greg Holmes <iam@gregholmes.co.uk>
Date: Wed, 18 Dec 2024 13:21:20 +0000
Subject: [PATCH] fixup! Add generate JWT authentication example

---
 .../react/src/app/authenticated/page.tsx      | 89 +++++++++++++++++++
 .../react/src/app/page.tsx                    | 46 ++--------
 2 files changed, 95 insertions(+), 40 deletions(-)
 create mode 100644 examples/auth-generate-token/react/src/app/authenticated/page.tsx

diff --git a/examples/auth-generate-token/react/src/app/authenticated/page.tsx b/examples/auth-generate-token/react/src/app/authenticated/page.tsx
new file mode 100644
index 0000000000..d0804f765a
--- /dev/null
+++ b/examples/auth-generate-token/react/src/app/authenticated/page.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as Ably from 'ably';
+import { AblyProvider, useConnectionStateListener } from 'ably/react';
+import { useState, useEffect } from 'react';
+
+interface StatusMessage {
+  id: number;
+  success: boolean;
+  message: string;
+}
+interface StatusMessagesProps {
+  messages: StatusMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<StatusMessage[]>>;
+}
+
+const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
+  useConnectionStateListener((stateChange) => {
+    if (stateChange.current === 'connected') {
+      setMessages(prevMessages =>
+        prevMessages.map(msg =>
+          msg.id === 3 ? { ...msg, success: true } : msg
+        )
+      );
+    }
+  });
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
+          <p className="mb-8">The Ably client has been successfully initialized.</p>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ?
+                  <span className="text-green-500">✓</span> :
+                  <span className="text-red-500">✗</span>
+                }
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function Authenticated() {
+  const [messages, setMessages] = useState<StatusMessage[]>([
+    { id: 1, success: false, message: "Client requests token from server" },
+    { id: 2, success: false, message: "Client initializes connection to Ably with generated Token" },
+    { id: 3, success: false, message: "Client is connected"}
+  ]);
+  const [client, setClient] = useState<Ably.Realtime | null>(null);
+
+  useEffect(() => {
+    try {
+      setMessages(prevMessages =>
+        prevMessages.map(msg =>
+          msg.id === 1 ? { ...msg, success: true } : msg
+        )
+      );
+
+      const newClient = new Ably.Realtime({ authUrl: 'http://localhost:3001/request-token' });
+      setClient(newClient);
+      setMessages(prevMessages =>
+        prevMessages.map(msg =>
+          msg.id === 2 ? { ...msg, success: true } : msg
+        )
+      );
+    } catch (error) {
+      console.error('Failed to initialise client:', error);
+    }
+  }, []);
+
+  if (!client) return null;
+
+  return (
+    <AblyProvider client={client}>
+      <StatusMessages messages={messages} setMessages={setMessages} />
+    </AblyProvider>
+  );
+}
diff --git a/examples/auth-generate-token/react/src/app/page.tsx b/examples/auth-generate-token/react/src/app/page.tsx
index 9cbc422f5d..39ecd1965f 100644
--- a/examples/auth-generate-token/react/src/app/page.tsx
+++ b/examples/auth-generate-token/react/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import * as Ably from 'ably';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 interface StatusMessage {
   id: number;
@@ -16,39 +17,9 @@ export default function Home() {
     { id: 2, success: false, message: "Client initializes connection to Ably with generated Token" },
     { id: 3, success: false, message: "Client is connected"}
   ]);
-  const [isLoading, setIsLoading] = useState(false);
-
+  const router = useRouter();
   const handleConnect = async () => {
-    setIsLoading(true);
-
-    setMessages(prevMessages =>
-      prevMessages.map(msg =>
-        msg.id === 1 ? { ...msg, success: true } : msg
-      )
-    );
-
-    try {
-      const ablyClient = new Ably.Realtime({ authUrl: 'http://localhost:3001/request-token' });
-      setClient(ablyClient);
-
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 2 ? { ...msg, success: true } : msg
-        )
-      );
-
-      ablyClient.connection.on('connected', (stateChange) => {
-        setMessages(prevMessages =>
-          prevMessages.map(msg =>
-            msg.id === 3 ? { ...msg, success: true } : msg
-          )
-        );
-      });
-    } catch (error) {
-      console.error('Failed to initialise client:', error);
-    } finally {
-      setIsLoading(false);
-    }
+    router.push('/authenticated');
   };
 
   return (
@@ -56,17 +27,12 @@ export default function Home() {
       <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div className="flex-grow text-center">
           <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
-          {client ? (
-            <p className="mb-8">The Ably client has been successfully initialized.</p>
-          ) : (
-            <p className="mb-8">Press the Connect button to initialize the client:</p>
-          )}
+          <p>Press the Connect button to initialize the client:</p>
           <button
             onClick={handleConnect}
-            className={`px-4 py-2 text-white rounded ${isLoading || client !== null ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-600' }`}
-            disabled={client !== null || isLoading}
+            className='px-4 py-2 text-white rounded bg-blue-500 hover:bg-blue-600'
           >
-            {isLoading ? 'Connecting...' : 'Connect'}
+            Connect
           </button>
         </div>