diff --git a/shared/_tokenSnippet.jsx b/shared/_tokenSnippet.jsx index 621e5a1..cedd799 100644 --- a/shared/_tokenSnippet.jsx +++ b/shared/_tokenSnippet.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import './tokenSnippet.css'; const BASE_URL = 'https://stream-calls-dogfood.vercel.app/api/call/sample?'; @@ -22,6 +23,7 @@ export class TokenSnippet extends React.Component { constructor(props) { super(props); this.state = { + loadingFinished: false, sampleApp: props.sampleApp, userId: 'Loading ...', userName: 'Creating user name ...', @@ -30,7 +32,7 @@ export class TokenSnippet extends React.Component { apiKey: 'Waiting for an API key ...', token: 'Token is generated ...', deepLink: 'Link is created ...', - displayStyle: props.displayStyle ?? 'full' + displayStyle: props.displayStyle ?? 'full', }; } @@ -38,115 +40,78 @@ export class TokenSnippet extends React.Component { callAPI(this.state.sampleApp).then((result) => { this.setState({ ...this.state, + loadingFinished: true, ...result, }); }); } render() { + const showTable = + this.state.displayStyle === 'full' || + this.state.displayStyle === 'credentials'; - const snippetStyle = { - padding: '2rem', - border: '2px solid #e3e3e3', - borderRadius: '1rem', - margin: '2rem 0', - }; - - const tableStyles = { - width: '100%', - overflowX: 'scroll', - }; - - const textStyle = { - display: 'inline-block', - marginBottom: '1rem', - }; - - const spanStyle = { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - }; - - const linkStyle = { - display: 'inline-block', - background: '#005fff', - color: 'white', - padding: '0.25rem 1rem', - borderRadius: '0.5rem', - }; - const labelColumnStyle = { - white_space: 'nowrap', - width: '120px' - } - const valueColumnStyle = { - width: '99%', - } - - const joinCallSpan = ( - - For testing you can join the call on our web-app:{' '} - - Join Call - - - - ); - - const credentialsTable = ( -
Property | -Value | -
---|---|
API Key | -{this.state.apiKey} | -
Token | -{this.state.token} | -
User ID | -{this.state.userId} | -
Call ID | -{this.state.callId} | -
Call Type | -{this.state.callType} | -
Here are credentials to try out the app with:
+Property | +Value | +
---|---|
API Key | +{this.state.apiKey} | +
Token | ++ {this.state.token} + {this.state.loadingFinished && ( + + )} + | +
User ID | +{this.state.userId} | +
Call ID | +{this.state.callId} | +