stitch-ui/src/profile/components/ProfileKeys.js

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { TopNav } from "../../nav";
import APIKeys from "../../auth/components/APIKeys";
import { profileKeyActions } from "../actions";

class ProfileKeys extends React.Component {
  componentDidMount() {
    this.props.loadAPIKeys();
  }
  render() {
    const clients = [
      {
        name: "Linux-64",
        url:
          "https://s3.amazonaws.com/stitch-clis/baas_2a0f5a9ae26da2769c16794c73af8467de50950b/linux-64/cli"
      },
      {
        name: "macOS",
        url:
          "https://s3.amazonaws.com/stitch-clis/baas_2a0f5a9ae26da2769c16794c73af8467de50950b/osx/cli"
      },
      {
        name: "Windows",
        url:
          "https://s3.amazonaws.com/stitch-clis/baas_2a0f5a9ae26da2769c16794c73af8467de50950b/Windows/cli.exe"
      }
    ];
    return (
      <div>
        <TopNav />
        <div className="home">
          <div className="profile">
            <div className="profile-client">
              <div className="profile-client-blurb">
                You can download the Stitch client utility here.
              </div>
              <ul className="profile-client-links">
                {clients.map(c =>
                  <li key={c.url}>
                    <a href={c.url}>
                      {c.name}
                    </a>
                  </li>
                )}
              </ul>
            </div>
            <div className="profile-keys-panel">
              <APIKeys {...this.props} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const { apiKeys, showNewKeyForm, newKeyName, apiKeyError } = state.profile;
  return { apiKeys, newKeyName, showNewKeyForm, apiKeyError };
};

const mapDispatchToProps = dispatch => ({
  loadAPIKeys: () => dispatch(profileKeyActions.loadAPIKeys()),
  deleteAPIKey: key => dispatch(profileKeyActions.deleteAPIKey(key)),
  disableAPIKey: key => dispatch(profileKeyActions.disableAPIKey(key)),
  enableAPIKey: key => dispatch(profileKeyActions.enableAPIKey(key)),
  getAPIKey: key => dispatch(profileKeyActions.getAPIKey(key)),
  hideAPIKey: key => dispatch(profileKeyActions.hideAPIKey({ key })),
  setAPIKeyHidden: (key, hidden) =>
    dispatch(profileKeyActions.setAPIKeyHidden({ key, hidden })),
  openNewKeyForm: () => dispatch(profileKeyActions.openNewKeyForm()),
  setNewKeyName: name => dispatch(profileKeyActions.setNewKeyName({ name })),
  closeNewKeyForm: () => dispatch(profileKeyActions.closeNewKeyForm()),
  createAPIKey: data => dispatch(profileKeyActions.createAPIKey(data))
});

ProfileKeys.propTypes = {
  loadAPIKeys: PropTypes.func.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(ProfileKeys);