openreplay/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js

import React from 'react';

import { Tabs } from 'UI';

import InstallDocs from './InstallDocs';
import InstallMobileDocs from './InstallIosDocs';
import ProjectCodeSnippet from './ProjectCodeSnippet';

const PROJECT = 'Using Script';
const DOCUMENTATION = 'Using NPM';
const TABS = [
  { key: DOCUMENTATION, text: DOCUMENTATION },
  { key: PROJECT, text: PROJECT },
];

class TrackingCodeModal extends React.PureComponent {
  state = { copied: false, changed: false, activeTab: DOCUMENTATION };

  setActiveTab = (tab) => {
    this.setState({ activeTab: tab });
  };

  renderActiveTab = () => {
    const { site } = this.props;
    switch (this.state.activeTab) {
      case PROJECT:
        return <ProjectCodeSnippet site={site} />;
      case DOCUMENTATION:
        return <InstallDocs site={site} />;
    }
    return null;
  };

  render() {
    const { title = '', subTitle, site } = this.props;
    const { activeTab } = this.state;
    const ingestPoint = `https://${window.location.hostname}/ingest`;

    return (
      <div
        className="bg-white h-screen overflow-y-auto"
        style={{ width: '700px' }}
      >
        <h3 className="p-5 text-2xl">
          {title}{' '}
          {subTitle && (
            <span className="text-sm color-gray-dark">{subTitle}</span>
          )}
        </h3>

        {site.platform === 'ios' ? (
          <div className="p-5">
            <InstallMobileDocs site={site} ingestPoint={ingestPoint} />
          </div>
        ) : (
          <div>
            <Tabs
              className="px-5"
              tabs={TABS}
              active={activeTab}
              onClick={this.setActiveTab}
            />
            <div className="p-5">{this.renderActiveTab()}</div>
          </div>
        )}
      </div>
    );
  }
}

export default TrackingCodeModal;