<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import DocumentTitle from 'react-document-title';
import FontAwesome from 'react-fontawesome';
import { Button, ControlLabel, DropdownButton, Modal, FormControl, FormGroup, MenuItem } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import styled, {
  css
} from 'styled-components';
import { AppApi } from 'lattice';


import CreateApp from './CreateApp';
import CreateAppType from './CreateAppType';
import Page from '../../components/page/Page';
import { fetchOrganizationsRequest } from '../organizations/actions/OrganizationsActionFactory';
import * as actionFactory from './AppActionFactory';
import styles from './app.module.css';

const AppSectionContainer = styled.div`
  display: flex;
  flex-direction: row;
  margin: 10px 0;
`;

const ButtonContainer = styled.div`
  display: inline;
`;

const AppContainer = styled.div`
  display: inline;
  margin-left: 10px;
`;

const AppTitle = styled.div`
  font-size: 16px;
  font-weight: bold;
`;

const InstallHelperText = styled.div`
  font-size: 14px;
  margin-bottom: 7px;
`;

const InstallButtonWrapper = styled.div`
  margin-top: 15px;
  text-align: center;
`;

const OrganizationSelectionWrapper = styled.div`
  margin-bottom: 30px;
`;

const ModalBodyContainer = styled.div`
  text-align: center;
`;

const NoOrganizationsText = styled.div`
  font-size: 18px;
  margin-bottom: 20px;
`;

const ErrorMessageWrapper = styled.div`
  text-align: center;
`;

const ErrorMessage = styled.div`
  font-size: 14px;
  color: red;
`;

class Apps extends React.Component {
  static propTypes = {
    auth: PropTypes.object.isRequired,
    apps: PropTypes.instanceOf(Immutable.List).isRequired,
    appTypes: PropTypes.instanceOf(Immutable.Map).isRequired,
    errorMessage: PropTypes.string.isRequired,
    organizations: PropTypes.instanceOf(Immutable.Map).isRequired,
    getAppsRequest: PropTypes.func.isRequired,
    // getAppTypesForAppTypeIds: PropTypes.func.isRequired,
    deleteAppRequest: PropTypes.func.isRequired,
    getOwnedOrganizations: PropTypes.func.isRequired,
    install: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {
      installing: null,
      prefix: '',
      org: '',
      isAppModalOpen: false,
      isAppTypeModalOpen: false
    };
  }

  componentDidMount() {
    this.props.getAppsRequest();
    this.props.getOwnedOrganizations();
    // this.props.getAppTypesForAppTypeIds();
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.organizations.size && nextProps.organizations.size) {
      this.setState({ org: nextProps.organizations.keySeq().get(0) });
    }
  }

  onAddApp = () => {
    this.setState({
      isAppModalOpen: true
    });
  };

  onDeleteApp = (app) => {
    console.log(app.get('id'));
    console.log(typeof app.get('id'));
    this.props.deleteAppRequest(app.get('id'));
  };

  onAddAppType = () => {
    this.setState({
      isAppTypeModalOpen: true
    });
  };

  closeModal = () => {
    this.setState({
      isAppModalOpen: false,
      isAppTypeModalOpen: false
    });
  };

  // getDefaultContact = () => {
  //   const profile = this.props.auth.getProfile();
  //   let defaultContact = '';
  //   if (profile.given_name) defaultContact = defaultContact.concat(`${profile.given_name} `);
  //   if (profile.family_name) defaultContact = defaultContact.concat(`${profile.family_name} `);
  //   if (profile.email) defaultContact = defaultContact.concat(`<${profile.email}>`);
  //   return defaultContact;
  // }

  renderAppType = (app) => {
    // console.log(app);
    console.log('You have made it to the renderAppType method.');
    console.log(this.props.appTypes);
    // still getting an empty map
    return (
      <div>App Type Name: {this.props.appTypes}</div>
    );
  }

  renderApps = () => {
    return this.props.apps.map((app) => {

      return (
        <div key={app.get('name')}>
          <AppSectionContainer>
            <ButtonContainer>
              <Button<commit_msg>Added logic for displaying the appType for each app. Error caused by apps component rendering before appTypes data is fetched.<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import DocumentTitle from 'react-document-title';
import FontAwesome from 'react-fontawesome';
import { Button, ControlLabel, DropdownButton, Modal, FormControl, FormGroup, MenuItem } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import styled, {
  css
} from 'styled-components';
import { AppApi } from 'lattice';


import CreateApp from './CreateApp';
import CreateAppType from './CreateAppType';
import Page from '../../components/page/Page';
import { fetchOrganizationsRequest } from '../organizations/actions/OrganizationsActionFactory';
import * as actionFactory from './AppActionFactory';
import styles from './app.module.css';

const AppSectionContainer = styled.div`
  display: flex;
  flex-direction: row;
  margin: 10px 0;
`;

const ButtonContainer = styled.div`
  display: inline;
`;

const AppContainer = styled.div`
  display: inline;
  margin-left: 10px;
`;

const AppTitle = styled.div`
  font-size: 16px;
  font-weight: bold;
`;

const InstallHelperText = styled.div`
  font-size: 14px;
  margin-bottom: 7px;
`;

const InstallButtonWrapper = styled.div`
  margin-top: 15px;
  text-align: center;
`;

const OrganizationSelectionWrapper = styled.div`
  margin-bottom: 30px;
`;

const ModalBodyContainer = styled.div`
  text-align: center;
`;

const NoOrganizationsText = styled.div`
  font-size: 18px;
  margin-bottom: 20px;
`;

const ErrorMessageWrapper = styled.div`
  text-align: center;
`;

const ErrorMessage = styled.div`
  font-size: 14px;
  color: red;
`;

class Apps extends React.Component {
  static propTypes = {
    auth: PropTypes.object.isRequired,
    apps: PropTypes.instanceOf(Immutable.List).isRequired,
    appTypes: PropTypes.instanceOf(Immutable.Map).isRequired,
    errorMessage: PropTypes.string.isRequired,
    organizations: PropTypes.instanceOf(Immutable.Map).isRequired,
    getAppsRequest: PropTypes.func.isRequired,
    getAppTypesForAppTypeIds: PropTypes.func.isRequired,
    deleteAppRequest: PropTypes.func.isRequired,
    getOwnedOrganizations: PropTypes.func.isRequired,
    install: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {
      installing: null,
      prefix: '',
      org: '',
      isAppModalOpen: false,
      isAppTypeModalOpen: false
    };
  }

  componentDidMount() {
    this.props.getAppsRequest();
    this.props.getOwnedOrganizations();
    this.props.getAppTypesForAppTypeIds();
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.organizations.size && nextProps.organizations.size) {
      this.setState({ org: nextProps.organizations.keySeq().get(0) });
    }
  }

  onAddApp = () => {
    this.setState({
      isAppModalOpen: true
    });
  };

  onDeleteApp = (app) => {
    console.log(app.get('id'));
    console.log(typeof app.get('id'));
    this.props.deleteAppRequest(app.get('id'));
  };

  onAddAppType = () => {
    this.setState({
      isAppTypeModalOpen: true
    });
  };

  closeModal = () => {
    this.setState({
      isAppModalOpen: false,
      isAppTypeModalOpen: false
    });
  };

  // getDefaultContact = () => {
  //   const profile = this.props.auth.getProfile();
  //   let defaultContact = '';
  //   if (profile.given_name) defaultContact = defaultContact.concat(`${profile.given_name} `);
  //   if (profile.family_name) defaultContact = defaultContact.concat(`${profile.family_name} `);
  //   if (profile.email) defaultContact = defaultContact.concat(`<${profile.email}>`);
  //   return defaultContact;
  // }
  collectAppTypesFromApp = (app) => {
    const appTypeIdsFromApp = app.get('appTypeIds');
    const appTypesFromApp = [];

    for (let i = 0; i < appTypeIdsFromApp.length; i += 1) {
      appTypesFromApp.push(appTypeIdsFromApp[i]);
    }

    return appTypesFromApp;
  }

  renderAppType = (app) => {
    // get the appTypeIds for the app
    // for each appTypeId lookup the appTypes
    const appTypeList = this.collectAppTypesFromApp(app);
    const appNames = [];

    for (let i = 0; i < appTypeList.length; i += 1) {
      appNames.push(this.props.appTypes.get(appTypeList[i]));
    }

    return (
      <div>App Types: {appNames}</div>
    );
  }

  renderApps = () => {
    return this.props.apps.map((app) => {

      return (
        <div key={app.get('name')}>
          <AppSectionContainer>
            <ButtonContainer>
              <Button
{'fraction_non_alphanumeric': 0.13625470729202327, 'fraction_numerical': 0.005249343832020997, 'mean_word_length': 3.515198351365276, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 32, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3596608', 'n_tokens_mistral': 2801, 'n_tokens_neox': 2758, 'n_words': 572}