Consolidate demo components for better maintainability

Author: dannyroosevelt

docs-v2/components/AccountConnectionDemo.jsx

@@ -1,37 +1,77 @@
 "use client";
 
 import { useGlobalConnect } from "./GlobalConnectProvider";
-import DemoAppSelector from "./DemoAppSelector";
-import DemoClientCode from "./DemoClientCode";
-import DemoConnectButton from "./DemoConnectButton";
-import DemoConnectionStatus from "./DemoConnectionStatus";
+import CodeBlock from "./CodeBlock";
 
 export default function AccountConnectionDemo() {
+  const { 
+    appSlug, 
+    setAppSlug, 
+    tokenData, 
+    getClientCodeSnippet, 
+    connectAccount,
+    connectedAccount,
+    error
+  } = useGlobalConnect();
+
   return (
-    <div className="border rounded-md overflow-hidden">
+    <div className="border rounded-md overflow-hidden mt-4">
       <div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
-        Step 2: Connect an Account (Client-side)
+        Connect an account from your frontend
       </div>
       <div className="p-4">
         <div className="mb-4">
           <label className="flex items-center mb-4">
             <span className="font-medium text-sm">App to connect:</span>
-            <span className="ml-2"><DemoAppSelector /></span>
+            <select
+              value={appSlug}
+              onChange={(e) => setAppSlug(e.target.value)}
+              className="ml-2 p-1 border rounded text-sm"
+              disabled={!tokenData}
+            >
+              <option value="slack">Slack</option>
+              <option value="github">GitHub</option>
+              <option value="google_sheets">Google Sheets</option>
+            </select>
           </label>
 
           <div className="mb-4">
-            <div className="text-sm mb-2 font-medium">Client-side code executed in the browser:</div>
             <div className="border border-blue-100 rounded-lg overflow-hidden">
-              <DemoClientCode />
+              <CodeBlock code={getClientCodeSnippet()} language="javascript" />
             </div>
           </div>
         </div>
 
         <div className="mt-4 mb-2">
-          <DemoConnectButton />
+          <button
+            onClick={connectAccount}
+            disabled={!tokenData}
+            className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm"
+          >
+            Connect Account
+          </button>
         </div>
 
-        <DemoConnectionStatus />
+        {error && (
+          <div className="mt-4 p-3 bg-red-50 border border-red-200 text-red-800 rounded-md">
+            <div className="font-medium text-sm">Error</div>
+            <div className="mt-1 text-sm">{error}</div>
+          </div>
+        )}
+        
+        {connectedAccount && (
+          <div className="mt-4 p-3 bg-green-50 border border-green-200 text-green-800 rounded-md">
+            <div className="font-medium text-sm">Account successfully connected!</div>
+            <div className="mt-1 text-sm">
+              {connectedAccount.name && (
+                <div>Account name: <span className="font-medium">{connectedAccount.name}</span></div>
+              )}
+              {connectedAccount.id && (
+                <div>Account ID: <span className="font-mono text-xs">{connectedAccount.id}</span></div>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

docs-v2/components/TokenGenerationDemo.jsx

@@ -1,37 +1,57 @@
 "use client";
 
 import { useGlobalConnect } from "./GlobalConnectProvider";
-import DemoExternalUserID from "./DemoExternalUserID";
-import DemoServerCode from "./DemoServerCode";
-import DemoGenerateTokenButton from "./DemoGenerateTokenButton";
-import DemoTokenResponse from "./DemoTokenResponse";
+import CodeBlock from "./CodeBlock";
 
 export default function TokenGenerationDemo() {
+  const { 
+    externalUserId, 
+    getServerCodeSnippet, 
+    generateToken, 
+    tokenLoading,
+    tokenData 
+  } = useGlobalConnect();
+
   return (
-    <div className="border rounded-md overflow-hidden">
+    <div className="border rounded-md overflow-hidden mt-4">
       <div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
-        Step 1: Generate a Connect Token (Server-side)
+        Generate a Connect Token from your server
       </div>
       <div className="p-4">
         <div className="mb-3">
           <div className="flex items-center mb-4">
             <span className="font-medium text-sm">External User ID:</span>
-            <span className="ml-2"><DemoExternalUserID /></span>
+            <code className="ml-2 px-2 py-1 bg-gray-100 rounded text-sm">{externalUserId}</code>
           </div>
-          
           <div className="mb-4">
-            <div className="text-sm mb-2 font-medium">Server-side code running in the API route:</div>
             <div className="border border-blue-100 rounded-lg overflow-hidden">
-              <DemoServerCode />
+              <CodeBlock code={getServerCodeSnippet()} language="javascript" />
             </div>
           </div>
         </div>
 
         <div className="mt-4 mb-2">
-          <DemoGenerateTokenButton />
+          <button
+            onClick={generateToken}
+            disabled={tokenLoading}
+            className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm"
+          >
+            {tokenLoading ? "Generating..." : "Generate Token"}
+          </button>
         </div>
 
-        <DemoTokenResponse />
+        {tokenData && (
+          <div className="mt-4">
+            <div className="text-sm mb-2 font-medium">Server Response:</div>
+            <div className="border border-green-200 rounded-lg overflow-hidden">
+              <CodeBlock 
+                code={JSON.stringify(tokenData, null, 2)} 
+                language="json" 
+                className="max-h-48 overflow-auto" 
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );