<commit_before>import React, { useState, Fragment } from "react";
import axios from "axios";

import TextArea from "../components/TextArea";
import App from "../app";

const CubeList = () => {
  const cubeListLength =
    App.state.list.length === 0
      ? 0
      : App.state.list.split("\n").length;

  return (<div id='cube-list'>
    <div className='column'>
      <div>{`One card per line! (${cubeListLength} cards)`}</div>
      <TextArea className="cube-list"
        placeholder='cube list'
        link='list'
      />
    </div>
    <div className='column'>
      <CubeCobra />
    </div>
  </div>
  );
};

const CubeCobra = () => {
  const [name, setName] = useState("");

  const getCubeCobraList = async (cubeId) => {
    if (!cubeId) {
      return;
    }
    axios.get(`https://cubecobra.com/cube/api/cubelist/${cubeId}`)
      .then(({ data: list }) => {
        App.err = "";
        App.save({ list });
      })
      .catch(() => {
        App.error(`Could not retrieve CubeCobra list with ID ${cubeId}`);
      });
  };

  return (
    <Fragment >
      <label style={{ marginTop: "10px", marginLeft: "4px" }}>
        <a href="https://cubecobra.com/" target="_blank" rel="noopener noreferrer">CubeCobra</a> cube ID:{" "}
        <input
          style={{ width: "100px" }}
          type='text'
          value={name}
          onChange={(e) => setName(e.target.value)} />
      </label>
      <input style={{ marginTop: "5px", marginLeft: "4px" }} type="button" value="Fetch Cube List" onClick={() => getCubeCobraList(name)} /><commit_msg>Fixup cube cobra integration (#1133)<commit_after>import React, { useState, Fragment } from "react";
import axios from "axios";

import TextArea from "../components/TextArea";
import App from "../app";

const CubeList = () => {
  const cubeListLength =
    App.state.list.length === 0
      ? 0
      : App.state.list.split("\n").length;

  return (<div id='cube-list'>
    <div className='column'>
      <div>{`One card per line! (${cubeListLength} cards)`}</div>
      <TextArea className="cube-list"
        placeholder='cube list'
        link='list'
      />
    </div>
    <div className='column'>
      <CubeCobra />
    </div>
  </div>
  );
};

const CubeCobra = () => {
  const [name, setName] = useState("");

  const getCubeCobraList = async (cubeId) => {
    if (!cubeId) {
      return;
    }
    axios.get(`https://cubecobra.com/cube/api/cubelist/${cubeId}`)
      .then(({ data: list }) => {
        App.err = "";
        App.save("list", list);
      })
      .catch(() => {
        App.error(`Could not retrieve CubeCobra list with ID ${cubeId}`);
      });
  };

  return (
    <Fragment >
      <label style={{ marginTop: "10px", marginLeft: "4px" }}>
        <a href="https://cubecobra.com/" target="_blank" rel="noopener noreferrer">CubeCobra</a> cube ID:{" "}
        <input
          style={{ width: "100px" }}
          type='text'
          value={name}
          onChange={(e) => setName(e.target.value)} />
      </label>
      <input style={{ marginTop: "5px", marginLeft: "4px" }} type="button" value="Fetch Cube List" onClick={() => getCubeCobraList(name)} />
{'fraction_non_alphanumeric': 0.1923198984449381, 'fraction_numerical': 0.007616629641383688, 'mean_word_length': 2.5575620767494356, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 51, 'https://': 4, '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': '5914101', 'n_tokens_mistral': 1106, 'n_tokens_neox': 1091, 'n_words': 230}