Merge pull request #1 from ablydevin/ably-react-v3-update

Ably react v3 update

app/authentication/authentication-client.tsx

@@ -0,0 +1,73 @@
+
+'use client'
+
+import { MouseEventHandler, MouseEvent, useState } from 'react'
+
+import * as Ably from 'ably'
+import Logger, { LogEntry } from '../../components/logger'
+import SampleHeader from '../../components/SampleHeader'
+import { AblyProvider, useAbly, useConnectionStateListener } from 'ably/react'
+
+export default function Authentication() {
+
+  const client = new Ably.Realtime.Promise ({ authUrl: '/token', authMethod: 'POST' });
+
+  return (
+    <AblyProvider client={ client }>
+      <div className="flex flex-row justify-center">
+        <div className="flex flex-col justify-start items-start gap-10">
+          <SampleHeader sampleName="Authentication" sampleIcon="Authentication.svg" sampleDocsLink="https://ably.com/docs/getting-started/react#authenticate" />
+          <div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light" >
+            Authenticate and establish a persistant bi-directional connection to the Ably platform.
+          </div>
+          <ConnectionStatus />
+        </div>
+      </div>
+    </AblyProvider>   
+  )
+}
+
+const ConnectionStatus = () => {
+
+  const ably = useAbly();
+
+  const [logs, setLogs] = useState<Array<LogEntry>>([])
+  const [connectionState, setConnectionState] = useState('unknown')
+
+  useConnectionStateListener((stateChange) => {
+    setConnectionState(stateChange.current)
+    setLogs(prev => [...prev, new LogEntry(`Connection state change: ${stateChange.previous} -> ${stateChange.current}`)])
+  })
+
+  const connectionToggle: MouseEventHandler =  (_event: MouseEvent<HTMLButtonElement>) => {
+    if(connectionState === 'connected') {
+      ably.connection.close()
+    }
+    else if(connectionState === 'closed') {
+      ably.connection.connect()
+    }
+  }
+
+  return (
+    <>
+      <div className="flex flex-col justify-start items-start gap-4 w-[752px] h-[124px]">
+        <div className="flex flex-row justify-start items-start gap-4 pt-6 pr-6 pb-6 pl-6 rounded-lg border-slate-100 border-t border-b border-l border-r border-solid border h-[68px] bg-white min-w-[752px]">
+          <div className="font-jetbrains-mono text-sm min-w-[227px] whitespace-nowrap text-rose-400 text-opacity-100 leading-normal font-medium">
+            connection status
+            <span className="text-zinc-200 text-opacity-100">&nbsp;</span>
+            =&nbsp;
+            <span className="text-violet-400 text-opacity-100">
+              {connectionState}
+            </span>
+          </div>
+        </div>
+        <div className="flex justify-center items-center rounded-md w-[120px] h-10 bg-black">
+          <div className="font-manrope text-base min-w-[80px] whitespace-nowrap text-white text-opacity-100 text-center leading-4 font-medium">
+            <button onClick={connectionToggle}>{connectionState === 'connected'? 'Disconnect': 'Connect'}</button>
+          </div>
+        </div>
+      </div>
+      <Logger logEntries={logs} displayHeader={true} />
+    </>
+  )
+}

app/authentication/page.tsx

@@ -0,0 +1,28 @@
+/**
+ * Warning: Opening too many live preview tabs will slow down performance.
+ * We recommend closing them after you're done.
+ */
+import React from "react";
+import "../global.css";
+import dynamic from 'next/dynamic';
+import Sidebar from "../../components/Sidebar.tsx";
+
+const AuthenticationClient = dynamic(() => import('./authentication-client.tsx'), {
+  ssr: false,
+})
+
+const Authentication = () => {
+
+  const pageId = "Authentication";
+
+  return (
+      <>
+        <Sidebar pageId={pageId} />
+        <div className="flex flex-col grow pt-12 pr-12 pb-12 pl-12 rounded-2xl border-slate-100 border-t border-b border-l border-r border-solid border h-[864px] bg-slate-50">
+          <AuthenticationClient />
+        </div>
+      </>
+  )
+};
+
+export default Authentication;

app/global.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Manrope:wght@400;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/history/history-client.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import * as Ably from 'ably';
+
+import { AblyProvider, useChannel } from "ably/react"
+import { useState, useEffect } from 'react'
+import Logger, { LogEntry } from '../../components/logger';
+import SampleHeader from '../../components/SampleHeader';
+
+export default function Presence() {
+
+  const client = new Ably.Realtime.Promise ({ authUrl:'/token', authMethod: 'POST' });
+
+  return (
+     <AblyProvider client={ client }>
+      <div className="flex flex-row justify-center">
+        <div className="flex flex-col justify-start items-start gap-10 h-[172px]">
+          <div className="flex flex-col justify-start items-start gap-4">
+            <SampleHeader sampleName="History" sampleIcon="History.svg" sampleDocsLink="https://ably.com/docs/storage-history/history?lang=javascript" />
+            <div className="font-manrope text-base max-w-screen-sm text-slate-800 text-opacity-100 leading-6 font-light">
+              Retrieve a history of messages that have been published to a channel.
+              Messages are only stored for 2 minutes by default. In order for them
+              to be stored for longer you should enable the&nbsp;
+              <span className="text-xs font-jetbrains-mono font-medium bg-slate-200 p-1">
+                Persist all messages
+              </span>&nbsp;
+              <a href="https://ably.com/docs/channels?lang=javascript#rules" target="blank"><span className="text-sky-600 text-opacity-100">channel rule</span></a>
+              <span className="text-black text-opacity-100">&nbsp;</span>for
+              the&nbsp;
+              <span className="text-xs font-jetbrains-mono font-medium bg-slate-200 p-1">
+                status-updates
+              </span>
+              &nbsp;channel in your Ably app &nbsp;
+            </div>
+          </div>
+          <div className="flex flex-row justify-start items-start gap-4 pt-4 pr-4 pb-4 pl-4 rounded-lg border-slate-200 border-t border-b border-l border-r border-solid border w-[480px] h-[72px] bg-white">
+            <div className="flex flex-col justify-center items-center h-5">
+              <img width="24px" height="22px" src="/assets/Alert.svg" alt="Alert" />
+            </div>
+            <div className="font-manrope text-sm text-gray-500 text-opacity-100 leading-5 font-light">
+              <span className="font-medium">Important:&nbsp;</span>You need to
+              publish at least 1 message from the&nbsp;
+              <a href="/pub-sub" target="_blank"><span className="text-sky-600 text-opacity-100">
+                Pub/Sub Channels example
+              </span></a>
+              &nbsp;to see history log.
+            </div>
+
+          </div>
+          <HistoryMessages />
+        </div>
+      </div>
+    </AblyProvider>   
+  )
+}
+
+function HistoryMessages() {
+
+  const [realtimeLogs, setRealtimeLogs] = useState<Array<LogEntry>>([])
+  const [historicalLogs, setHistoricalLogs] = useState<Array<LogEntry>>([])
+
+  const { channel } = useChannel("status-updates", (message: Ably.Types.Message) => {
+    console.log(message);
+    setRealtimeLogs(prev => [...prev, new LogEntry(`✉️ event name: ${message.name} text: ${message.data.text}`)])
+  });
+
+  useEffect(() => {
+    const getHistory = async () => {
+      let history: Ably.Types.PaginatedResult<Ably.Types.Message> = await channel.history()
+      do {
+        history.items.forEach(message => {
+          setHistoricalLogs(prev => [
+            ...prev,
+            new LogEntry(`"${message.data.text}" sent at ${new Date(message.timestamp).toISOString()}`)
+          ])
+        })
+        history = await history.next()
+      }
+      while(history)
+    }
+    getHistory()  
+  }, [])
+
+  return (
+    <>
+    <div className="flex flex-col justify-start items-start gap-4">
+    <div className="font-manrope text-sm whitespace-nowrap text-black text-opacity-100 leading-4 uppercase tracking-widest font-medium">
+      <span className="uppercase">history</span>
+    </div>
+      {
+        historicalLogs.length > 0? (
+          <Logger logEntries={historicalLogs} displayHeader={false} />
+        ) : (
+          <div className="flex flex-row w-[752px] justify-start items-start gap-4 pt-6 pr-6 pb-6 pl-6 rounded-lg border-slate-100 border-t border-b border-l border-r border-solid border bg-white">
+            <div className="font-jetbrains-mono text-sm min-w-[219px] whitespace-nowrap text-slate-500 text-opacity-100 leading-normal font-medium">
+              <p>No historical messages found</p>
+            </div>
+          </div>
+      )}      
+
+  </div>
+  <div className="flex flex-col justify-start items-start gap-4">
+    <div className="font-manrope text-sm whitespace-nowrap text-black text-opacity-100 leading-4 uppercase tracking-widest font-medium">
+      <span className="uppercase">realtime</span>
+    </div>
+      {
+      realtimeLogs.length > 0? (
+        <Logger logEntries={realtimeLogs} displayHeader={false} />
+      ) : (
+      <div className="flex flex-row w-[752px] justify-start items-start gap-4 pt-6 pr-6 pb-6 pl-6 rounded-lg border-slate-100 border-t border-b border-l border-r border-solid border bg-white min-w-[752px]">
+        <div className="font-jetbrains-mono text-sm min-w-[219px] whitespace-nowrap text-slate-500 text-opacity-100 leading-normal font-medium">
+          <p>No realtime messages received yet</p>
+        </div>
+      </div>
+    )}
+  </div>
+  </>
+    // <div className="p-5">
+    //   <section>
+    //     <h3>History</h3>
+    //       {
+    //         historicalLogs.length > 0?
+    //         <Logger logEntries={historicalLogs} />
+    //         :
+    //         <p>No historical messages found</p>
+    //       }
+    //   </section>
+    //   <section>
+    //     <h3>Realtime</h3>
+    //     {
+    //       realtimeLogs.length > 0?
+    //       <Logger logEntries={realtimeLogs} />
+    //       :
+    //       <p>No realtime messages received yet</p>
+    //     }
+    //   </section>
+    // </div>
+  )
+}

app/history/page.tsx

@@ -0,0 +1,30 @@
+/**
+ * Warning: Opening too many live preview tabs will slow down performance.
+ * We recommend closing them after you're done.
+ */
+import React from "react";
+import "../global.css";
+import dynamic from 'next/dynamic';
+import MenuFooter from "../../components/FooterItem.tsx";
+import MenuItem from "../../components/MenuItem.tsx";
+import Sidebar from "../../components/Sidebar.tsx";
+
+const HistoryClient = dynamic(() => import('./history-client.tsx'), {
+  ssr: false,
+})
+
+const History = () => {
+
+  const pageId = "History"
+
+  return (
+      <>
+        <Sidebar pageId={pageId} />
+        <div className="flex flex-col grow gap-6 pt-12 pr-12 pb-12 pl-12 rounded-2xl border-slate-100 border-t border-b border-l border-r border-solid border h-[864px] bg-slate-50">
+          <HistoryClient />
+        </div>
+      </>
+  )
+}
+
+export default History;

app/layout.tsx

@@ -0,0 +1,25 @@
+import './global.css'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="flex flex-row bg-white">
+          <div className="flex flex-row gap-4 p-12 grow">
+            {children}
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}