<commit_before>import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { decksSelectors } from "../../decks";
import styles from "./CardsPage.css";
import Navbar from "../Navbar";
import Container from "../ResponsiveContainer";
import Card from "../Card";

const CardsPage = ({ match, decks }) => {
  const loaded = decksSelectors.isLoaded(decks);

  let deck;
  if (loaded) {
    deck = decks.items.get(match.params.deckId);
  }

  return <Root loaded={loaded} deck={deck} />;
};

CardsPage.propTypes = {
  match: PropTypes.object.isRequired,
  decks: PropTypes.object.isRequired
};

const Root = ({ loaded, deck }) => {
  return (
    <div className={styles.root}>
      <Navbar title={loaded ? deck.name : ""} />
      <Container>
        {loaded ? <LoadedContent deck={deck} /> : <LoadingContent />}
      </Container>
    </div>
  );
};

Root.propTypes = {
  loaded: PropTypes.bool.isRequired,
  deck: PropTypes.object
};

const LoadedContent = ({ deck }) => {
  const renderCard = card => {
    const menuModel = [
      { icon: "fa fa-pencil", text: "Edit" },
      { icon: "fa fa-trash-o", text: "Delete" }
    ];

    return (
      <div key={card.id} className={styles.cardWrapper}>
        <Card model={card} menuModel={menuModel} className={styles.card} />
      </div>
    );
  };

  return (
    <div className={styles.contentPage}>
      <div className={styles.cards}>{deck.cards.toArray().map(renderCard)}</div>
    </div>
  );
};

LoadedContent.propTypes = {
  deck: PropTypes.object.isRequired
};

const LoadingContent = () => {<commit_msg>Update CardsPage to make links to work<commit_after>import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { decksSelectors } from "../../decks";
import styles from "./CardsPage.css";
import Navbar from "../Navbar";
import Container from "../ResponsiveContainer";
import Card from "../Card";

const CardsPage = ({ match, decks }) => {
  const loaded = decksSelectors.isLoaded(decks);

  let deck;
  if (loaded) {
    deck = decks.items.get(match.params.deckId);
  }

  return <Root loaded={loaded} deck={deck} />;
};

CardsPage.propTypes = {
  match: PropTypes.object.isRequired,
  decks: PropTypes.object.isRequired
};

const Root = ({ loaded, deck }) => {
  const pageActions = [
    { icon: "fa fa-plus", text: "Add card", color: "tertiary" }
  ];

  return (
    <div className={styles.root}>
      <Navbar
        title={loaded ? deck.name : ""}
        actions={loaded ? pageActions : null}
      />
      <Container>
        {loaded ? <LoadedContent deck={deck} /> : <LoadingContent />}
      </Container>
    </div>
  );
};

Root.propTypes = {
  loaded: PropTypes.bool.isRequired,
  deck: PropTypes.object
};

const LoadedContent = ({ deck }) => {
  const renderCard = card => {
    const menuModel = [
      {
        icon: "fa fa-pencil",
        text: "Edit",
        tag: Link,
        to: `/decks/${deck.id}/cards/edit`
      },
      {
        icon: "fa fa-trash-o",
        text: "Delete",
        color: "danger",
        tag: Link,
        to: `/decks/${deck.id}/cards/delete`
      }
    ];

    return (
      <div key={card.id} className={styles.cardWrapper}>
        <Card model={card} menuModel={menuModel} className={styles.card} />
      </div>
    );
  };

  return (
    <div className={styles.contentPage}>
      <div className={styles.cards}>{deck.cards.toArray().map(renderCard)}</div>
    </div>
  );
};

LoadedContent.propTypes = {
  deck: PropTypes.object.isRequired
};

const LoadingContent = () => {
{'fraction_non_alphanumeric': 0.17092607859302006, 'fraction_numerical': 0.0, 'mean_word_length': 2.893048128342246, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 43, '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': '2750489', 'n_tokens_mistral': 1173, 'n_tokens_neox': 1165, 'n_words': 261}