-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #68 from GetStream/staging
staging -> production
- Loading branch information
Showing
15 changed files
with
437 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,3 +4,4 @@ yarn-error.log | |
| .DS_Store | ||
| /.log/ | ||
| .docusaurus | ||
| *_version* | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import React from 'react'; | ||
| import './tokenSnippet.css'; | ||
|
|
||
| const BASE_URL = 'https://stream-calls-dogfood.vercel.app/api/call/sample?'; | ||
|
|
||
| const STORAGE_KEY = 'tokenSnippetDataFor'; | ||
|
|
||
| async function callAPI(sampleApp) { | ||
| const constructedUrl = constructUrl(sampleApp); | ||
| const response = await fetch(constructedUrl); | ||
| const resultObject = await response.json(); | ||
| return resultObject; | ||
| } | ||
|
|
||
| function constructUrl(sampleApp) { | ||
| return ( | ||
| BASE_URL + | ||
| new URLSearchParams({ | ||
| app_type: sampleApp, | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| export class TokenSnippet extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| loadingFinished: false, | ||
| sampleApp: props.sampleApp, | ||
| userId: 'Loading ...', | ||
| userName: 'Creating user name ...', | ||
| callId: 'Creating random call ID ...', | ||
| callType: 'Loading call type ...', | ||
| apiKey: 'Waiting for an API key ...', | ||
| token: 'Token is generated ...', | ||
| deepLink: 'Link is created ...', | ||
| displayStyle: props.displayStyle ?? 'full', | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const storedData = sessionStorage.getItem(STORAGE_KEY + this.state.sampleApp); | ||
| if (storedData) { | ||
| this.setState({ | ||
| ...this.state, | ||
| loadingFinished: true, | ||
| ...JSON.parse(storedData), | ||
| }); | ||
| } else { | ||
| callAPI(this.state.sampleApp).then((result) => { | ||
| const savedData = sessionStorage.getItem(STORAGE_KEY + this.state.sampleApp); | ||
| // We're checking again if another component might have written | ||
| // the data in the meantime. This is not ideal, but it works for now. | ||
| // (This happens for multiple elements on the same page) | ||
| if (savedData) { | ||
| this.setState({ | ||
| ...this.state, | ||
| loadingFinished: true, | ||
| ...JSON.parse(savedData), | ||
| }); | ||
| } else { | ||
| sessionStorage.setItem(STORAGE_KEY + this.state.sampleApp, JSON.stringify(result)); | ||
| this.setState({ | ||
| ...this.state, | ||
| loadingFinished: true, | ||
| ...result, | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const showTable = | ||
| this.state.displayStyle === 'full' || | ||
| this.state.displayStyle === 'credentials'; | ||
|
|
||
| const showJoinLink = | ||
| this.state.displayStyle === 'full' || this.state.displayStyle === 'join'; | ||
|
|
||
| return ( | ||
| <div className="snippetStyle"> | ||
| {showTable && ( | ||
| <div> | ||
| <p>Here are credentials to try out the app with:</p> | ||
| <table className="snippetTable"> | ||
| <thead> | ||
| <tr> | ||
| <th>Property</th> | ||
| <th>Value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>API Key</td> | ||
| <td>{this.state.apiKey}</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Token</td> | ||
| <td className="tokenStyle"> | ||
| <span> {this.state.token}</span> | ||
| {this.state.loadingFinished && ( | ||
| <button | ||
| onClick={() => | ||
| navigator.clipboard.writeText(this.state.token) | ||
| } | ||
| > | ||
| Copy | ||
| </button> | ||
| )} | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>User ID</td> | ||
| <td>{this.state.userId}</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Call ID</td> | ||
| <td>{this.state.callId}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| )} | ||
|
|
||
| {showJoinLink && ( | ||
| <span className="joinCallRow"> | ||
| For testing you can join the call on our web-app:{' '} | ||
| <a | ||
| target="_blank" | ||
| rel="noreferrer noopener" | ||
| href={this.state.deepLink} | ||
| className="joinCallLink" | ||
| > | ||
| Join Call | ||
| </a> | ||
| </span> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.