stitch-ui/src/platform/platform.js

import React, { Component } from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import Highlight from "react-highlight/lib/optimized";
import ClipboardButton from "react-clipboard.js";
import { connect } from "react-redux";

import { AlertContainer, addAlert } from "../alert";

import { Tabs, Tab } from "../core";
import {
  WEB_LINK,
  NPM_PACKAGE,
  LANG_WEB,
  LANG_NODE,
  codeSnippet,
  findMongoDBService
} from "../app/snippet";

class Clients extends Component {
  constructor(props) {
    super(props);
    this.state = { language: LANG_WEB };
  }

  setLanguage(language) {
    this.setState({ language });
  }

  render() {
    const { app } = this.props;

    const mongoSvc = findMongoDBService(app.services);

    const webSnippet = codeSnippet(
      app.clientAppId,
      mongoSvc || "mongodb1",
      "<DATABASE>",
      "<COLLECTION>",
      LANG_WEB
    );
    const nodeSnippet = codeSnippet(
      app.clientAppId,
      mongoSvc || "mongodb1",
      "<DATABASE>",
      "<COLLECTION>",
      LANG_NODE
    );

    return (
      <div>
        <div className="section-header section-header-has-tabs">
          <div className="section-header-title">
            <div className="section-header-title-text">Clients</div>
          </div>
          <Tabs>
            <Tab
              active={this.state.language === LANG_WEB}
              onClick={() => this.setLanguage(LANG_WEB)}
            >
              <a className="section-header-tab-link">JS (Browser)</a>
            </Tab>
            <Tab
              active={this.state.language === LANG_NODE}
              onClick={() => this.setLanguage(LANG_NODE)}
            >
              <a className="section-header-tab-link">JS (Node)</a>
            </Tab>
          </Tabs>
        </div>
        <div className="tabs-content" />
        <div>
          <div className="clients-section">
            <h2 className="clients-title">App ID</h2>
            <ClipboardButton
              data-clipboard-text={app.clientAppId}
              button-className="button button-is-small button-is-default"
              onSuccess={() => this.props.addAlert("copied-appid", "Copied!")}
            >
              Copy App ID
            </ClipboardButton>
            <AlertContainer alertKey="copied-appid" />
            <pre className="small">
              <code className="hljs">
                {app.clientAppId}
              </code>
            </pre>
          </div>
          {this.state.language === LANG_WEB &&
            <div>
              <div className="clients-section">
                <h2 className="clients-title">Importing on a Webpage</h2>
                <h4 className="clients-title">
                  Insert this line in your{" "}
                  <code>
                    <bold>HEAD</bold>
                  </code>{" "}
                  near the top in a webpage.
                </h4>
                <ClipboardButton
                  data-clipboard-text={`<script src="${WEB_LINK}"></script>`}
                  button-className="button button-is-small button-is-default"
                  onSuccess={() =>
                    this.props.addAlert("copied-web-import", "Copied!")}
                >
                  Copy Line
                </ClipboardButton>
                <AlertContainer alertKey="copied-web-import" />
                <pre>
                  <code className="hljs">
                    {`<script src="${WEB_LINK}"></script>`}
                  </code>
                </pre>
              </div>
              <div className="clients-section">
                <h2 className="clients-title">Using the Javascript Client</h2>
                <ClipboardButton
                  data-clipboard-text={`var stitch = require(${'"'}stitch${'"'});
client = new stitch.StitchClient(${'"'}${app.clientAppId}${'"'});`}
                  button-className="button button-is-small button-is-default"
                  onSuccess={() =>
                    this.props.addAlert("copied-js-client", "Copied!")}
                >
                  Copy Line
                </ClipboardButton>
                <AlertContainer alertKey="copied-js-client" />
                <Highlight
                  className="javascript snippet-body"
                  languages={["javascript"]}
                >
                  {`var stitch = require(${'"'}stitch${'"'});
client = new stitch.StitchClient(${'"'}${app.clientAppId}${'"'});`}
                </Highlight>
              </div>
              <div className="clients-section">
                <h2 className="clients-title">Example Snippet</h2>
                <h4 className="clients-title">
                  Try including this snippet in an HTML file on your site. Be
                  sure to replace the placeholder variables.
                </h4>
                <div>
                  <ClipboardButton
                    data-clipboard-text={webSnippet}
                    button-className="button button-is-small button-is-default"
                    onSuccess={() =>
                      this.props.addAlert("copied-web", "Copied!")}
                  >
                    Copy Snippet
                  </ClipboardButton>
                  <AlertContainer alertKey="copied-web" />
                  <Highlight
                    className="javascript snippet-body"
                    languages={["javascript"]}
                  >
                    {webSnippet}
                  </Highlight>
                </div>
              </div>
            </div>}
          {this.state.language === LANG_NODE &&
            <div>
              <div className="clients-section">
                <h2 className="clients-title">Node.js</h2>
                <h4 className="clients-title">
                  Install the Stitch Node.js client with NPM
                </h4>
                <ClipboardButton
                  data-clipboard-text={`npm install --save ${NPM_PACKAGE}`}
                  button-className="button button-is-small button-is-default"
                  onSuccess={() =>
                    this.props.addAlert("copied-npm-install", "Copied!")}
                >
                  Copy Command
                </ClipboardButton>
                <AlertContainer alertKey="copied-npm-install" />
                <pre className="small">
                  <code className="hljs">
                    {`npm install --save ${NPM_PACKAGE}`}
                  </code>
                </pre>
              </div>
              <div className="clients-section">
                <h2 className="clients-title">Example Snippet</h2>
                <h4 className="clients-title">
                  Try the following code in your Node.js shell. Be sure to
                  replace the placeholder variables.
                </h4>
                <ClipboardButton
                  data-clipboard-text={nodeSnippet}
                  button-className="button button-is-small button-is-default"
                  onSuccess={() =>
                    this.props.addAlert("copied-node", "Copied!")}
                >
                  Copy Snippet
                </ClipboardButton>
                <AlertContainer alertKey="copied-node" />
                <Highlight
                  className="javascript snippet-body"
                  languages={["javascript"]}
                >
                  {nodeSnippet}
                </Highlight>
              </div>
            </div>}
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const { app } = state.app.root;
  return { app };
};

const mapDispatchToProps = dispatch => ({
  addAlert: (key, message) => dispatch(addAlert(key, message))
});

Clients.propTypes = {
  addAlert: PropTypes.func.isRequired,
  app: PropTypes.shape({
    clientAppId: PropTypes.string.isRequired
  }).isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(Clients);
export const Docs = () => <div>Coming soon</div>;