CampaignScenarioView\index.tsx

import React from 'react';
import { filter, forEach, head, map } from 'lodash';
import {
  Text,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';
import { connect } from 'react-redux';

import ScenarioResultRow from './ScenarioResultRow';
import { campaignScenarios, Scenario } from '../constants';
import CampaignSummaryComponent from '../CampaignSummaryComponent';
import { NavigationProps } from '../../types';
import { Campaign, ScenarioResult } from '../../../actions/types';
import { getCampaign, AppState } from '../../../reducers';
import typography from '../../../styles/typography';
import { CardResults, connectRealm } from 'react-native-realm';
import Card from '../../../data/Card';
import Realm, { Results } from 'realm';
import BaseCard from '../../../data/BaseCard';
import { SPECIAL_TOKENS } from '../../../constants';

export interface CampaignScenarioProps {
  id: number;
}

interface RealmProps {
  realm: Realm;
  cards: Results<Card>;
}

interface ReduxProps {
  campaign?: Campaign;
  cycleScenarios?: Scenario[];
  scenarioByCode?: { [code: string]: Scenario };
}

type Props = NavigationProps & CampaignScenarioProps & ReduxProps & RealmProps;

class CampaignScenarioView extends React.Component<Props> {
  _renderScenarioResult = (scenarioResult: ScenarioResult, idx: number) => {
    const {
      componentId,
      id,
      scenarioByCode,
    } = this.props;
    return (
      <ScenarioResultRow
        key={idx}
        componentId={componentId}
        campaignId={id}
        index={idx}
        scenarioResult={scenarioResult}
        scenarioByCode={scenarioByCode}
        editable
      />
    );
  };

  renderPendingScenario(scenario: Scenario, idx: number) {
    return (
      <Text style={[typography.gameFont, styles.disabled]} key={idx}>
        { scenario.name }
      </Text>
    );
  }

  render() {
    const {
      campaign,
      cycleScenarios,
      cards,
    } = this.props;
    if (!campaign) {
      return null;
    }
    const finishedScenarios = new Set(map(campaign.scenarioResults, result => result.scenarioCode));
    const finishedScenarioNames = new Set(map(campaign.scenarioResults, result => result.scenario));
    const currentScenario = filter(cycleScenarios, scenario => (!finishedScenarioNames.has(scenario.name) && !finishedScenarios.has(scenario.code)))[0];
    const card = head(cards.filter(card => {
      return card.encounter_code === currentScenario.code;
    }));
    if (card) {
      SPECIAL_TOKENS.forEach(token => {
        // eslint-disable-next-line no-useless-escape
        const regex = new RegExp(`\[skull\]\s([-+][0-9X])`);
        if (card.real_text) {
          console.log(card.real_text.match(regex));
          console.log(regex.exec(card.real_text));
          console.log(regex.test(card.real_text));
        }
      });
    }// \[cultist\]\s(Reveal\sanother\stoken)
    return (
      <ScrollView style={styles.container}>
        <CampaignSummaryComponent campaign={campaign} hideScenario />
        <Text style={typography.smallLabel}>
          SCENARIOS
        </Text>
        { map(campaign.scenarioResults, this._renderScenarioResult) }
        { map(
          filter(cycleScenarios, scenario => (
            !finishedScenarioNames.has(scenario.name) &&
            !finishedScenarios.has(scenario.code))),
          (scenario, idx) => this.renderPendingScenario(scenario, idx))
        }
        <View style={styles.footer} />
      </ScrollView>
    );
  }
}

function mapStateToPropsFix(
  state: AppState,
  props: CampaignScenarioProps
): ReduxProps {
  const campaign = getCampaign(state, props.id);
  if (campaign) {
    const cycleScenarios = campaignScenarios(campaign.cycleCode);
    const scenarioByCode: { [code: string]: Scenario } = {};
    forEach(cycleScenarios, scenario => {
      scenarioByCode[scenario.code] = scenario;
    });
    return {
      campaign,
      cycleScenarios,
      scenarioByCode,
    };
  }
  return {};
}

export default connect(mapStateToPropsFix)(
  connectRealm<NavigationProps & CampaignScenarioProps, RealmProps, Card>(
    CampaignScenarioView,
    {
      schemas: ['Card'],
      mapToProps(
        results: CardResults<Card>,
        realm: Realm,
      ) {
        return {
          realm,
          cards: results.cards.filtered(`(type_code == 'scenario')`),
        };
      },
    }
  )
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 8,
  },
  disabled: {
    color: '#bdbdbd',
  },
  footer: {
    height: 50,
  },
});