fix: Reconnect React client on credential update (#140)

* allow reconnect * switch to memo * add example
team-telnyx · Jan 26, 2021 · ece3325 · ece3325
1 parent 7ef9a49
commit ece3325
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 26 deletions.
diff --git a/packages/react-client/example/src/App.tsx b/packages/react-client/example/src/App.tsx
@@ -6,17 +6,39 @@ import Phone from './Phone';
 import VideoCall from './VideoCall';
 
 const App = () => {
-  const [isAudioOnly, setIsAudioOnly] = useState<boolean>(false);
-  const credential = {
+  const [credential, setCredential] = useState({
     // Create a .env file with REACT_APP_TELNYX_LOGIN_TOKEN
     // set to your On-Demand Credential Token to try this out
     // https://developers.telnyx.com/docs/v2/webrtc/quickstart
     login_token: process.env.REACT_APP_TELNYX_LOGIN_TOKEN || 'mytoken',
+  });
+  const [loginTokenValue, setLoginTokenValue] = useState(
+    credential.login_token
+  );
+  const [isAudioOnly, setIsAudioOnly] = useState<boolean>(false);
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+
+    setCredential({ login_token: loginTokenValue });
   };
 
   return (
     <div style={{ padding: 20 }}>
       <TelnyxRTCProvider credential={credential}>
+        <form onSubmit={handleSubmit}>
+          <label>
+            Login token:
+            <input
+              name='telnyx_login_token'
+              type='password'
+              value={loginTokenValue}
+              onChange={(e) => setLoginTokenValue(e.target.value)}
+            />
+          </label>
+          <button type='submit'>Update token</button>
+        </form>
+
         <ClientStatus />
         <CallLog />
 

diff --git a/packages/react-client/src/useTelnyxRTC.ts b/packages/react-client/src/useTelnyxRTC.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-expressions  */
 // See: https://github.com/eslint/eslint/issues/12822 for eslint-disable no-unused-expressions reason
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { TelnyxRTC, IClientOptions } from '@telnyx/webrtc';
 
 type TokenCredential = {
@@ -37,39 +37,48 @@ function useTelnyxRTC(
   credentialParam: CredentialOptions,
   clientOptions?: Partial<IClientOptions>
 ): TelnyxRTC | undefined {
-  const telnyxClientRef = useRef<TelnyxRTC>();
+  const telnyxClient = useMemo(() => {
+    if (telnyxClient?.connected) {
+      if (process.env.NODE_ENV === 'development' && telnyxClient) {
+        console.warn(
+          'Instance of Telnyx Client already exists and will be disconnected.'
+        );
+      }
 
-  if (process.env.NODE_ENV === 'development' && telnyxClientRef.current) {
-    console.warn(
-      'Instance of Telnyx Client already exists. Did you mean to create multiple instances of Telnyx Client?'
-    );
-  }
+      // Create new client when credentials change,
+      // e.g. when refreshing token
+      // TODO reconnect without re-instantiating client
+      telnyxClient?.disconnect();
+    }
 
-  telnyxClientRef.current = new TelnyxRTC({
-    // eslint-disable-next-line @typescript-eslint/camelcase
-    login_token: '',
-    ...credentialParam,
-    ...clientOptions,
-  });
+    const session = new TelnyxRTC({
+      // eslint-disable-next-line @typescript-eslint/camelcase
+      login_token: '',
+      ...credentialParam,
+      ...clientOptions,
+    });
 
-  telnyxClientRef.current.on('telnyx.error', () => {
-    telnyxClientRef.current?.disconnect();
-  });
+    session.on('telnyx.error', () => {
+      session?.disconnect();
+    });
 
-  telnyxClientRef.current.on('telnyx.socket.error', () => {
-    telnyxClientRef.current?.disconnect();
-  });
+    session.on('telnyx.socket.error', () => {
+      session?.disconnect();
+    });
 
-  useEffect(() => {
     // IDEA Allow caller to defer connect
-    telnyxClientRef.current?.connect();
+    session?.connect();
+
+    return session;
+  }, [credentialParam]);
 
+  useEffect(() => {
     return () => {
-      telnyxClientRef.current?.disconnect();
+      telnyxClient?.disconnect();
     };
-  }, []);
+  }, [telnyxClient]);
 
-  return telnyxClientRef.current;
+  return telnyxClient;
 }
 
 export default useTelnyxRTC;