<commit_before>// @flow

import React from "react";
import ReactDOM from "react-dom";

// TODO: Could do dynamic importing, we'll be lazy for now to start prototyping
import ViewPage from "../pages/view";

function main(rootEl: Node | null, dataEl: Node | null) {
  // TODO: Clean this error handling up -- this is mostly here for rapid feedback
  //       while working on nbextension
  const ErrorPage = (props: { error?: Error }) =>
    <div>
      <h1>ERROR</h1>
      <pre>Unable to parse / process the jupyter config data.</pre>
      {props.error ? props.error.message : null}
    </div>;

  if (!dataEl) {
    ReactDOM.render(<ErrorPage />, rootEl);
    return;
  }

  type JupyterConfigData = {
    token: string,
    page: "tree" | "view" | "edit",
    contentsPath: string,
    baseUrl: string,
    appVersion: string
  };

  let jupyterConfigData: JupyterConfigData;

  try {
    jupyterConfigData = JSON.parse(dataEl.textContent);
  } catch (err) {
    ReactDOM.render(<ErrorPage error={err} />, rootEl);
    return;
  }

  ReactDOM.render(
    <div>
      <pre>Woo</pre>
      <pre>
        {JSON.stringify(jupyterConfigData, null, 2)}
      </pre>
      <ViewPage />
      <p />
    </div>,
    rootEl
  );
}

const rootEl = document.querySelector("#root");
const dataEl = document.querySelector("#jupyter-config-data");

main(rootEl, dataEl);
<commit_msg>render contents api in easy way<commit_after>// @flow

import React from "react";
import ReactDOM from "react-dom";

// TODO: Could do dynamic importing, we'll be lazy for now to start prototyping
import ViewPage from "../pages/view";

function main(rootEl: Node | null, dataEl: Node | null) {
  // TODO: Clean this error handling up -- this is mostly here for rapid feedback
  //       while working on nbextension
  const ErrorPage = (props: { error?: Error }) =>
    <div>
      <h1>ERROR</h1>
      <pre>Unable to parse / process the jupyter config data.</pre>
      {props.error ? props.error.message : null}
    </div>;

  if (!dataEl) {
    ReactDOM.render(<ErrorPage />, rootEl);
    return;
  }

  type JupyterConfigData = {
    token: string,
    page: "tree" | "view" | "edit",
    contentsPath: string,
    baseUrl: string,
    appVersion: string
  };

  let jupyterConfigData: JupyterConfigData;

  try {
    jupyterConfigData = JSON.parse(dataEl.textContent);
  } catch (err) {
    ReactDOM.render(<ErrorPage error={err} />, rootEl);
    return;
  }

  const url = jupyterConfigData.baseUrl + "api/contents";
  jupyterConfigData.contentsPath; //  + `?token=${jupyterConfigData.token}`;

  fetch(url, { credentials: "include" })
    .then(y => {
      console.log(y);
      return y;
    })
    .then(x => x.json())
    .then(x => {
      ReactDOM.render(
        <div>
          <pre>Woo</pre>
          <pre>
            {JSON.stringify(x, null, 2)}
          </pre>
          <ViewPage />
          <p />
        </div>,
        rootEl
      );
    });

  ReactDOM.render(
    <div>
      <pre>Rendering</pre>
      <pre>
        {JSON.stringify(jupyterConfigData, null, 2)}
      </pre>
    </div>,
    rootEl
  );
}

const rootEl = document.querySelector("#root");
const dataEl = document.querySelector("#jupyter-config-data");

main(rootEl, dataEl);

{'fraction_non_alphanumeric': 0.14444444444444443, 'fraction_numerical': 0.0021604938271604936, 'mean_word_length': 2.6212290502793296, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 46, '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': '5608537', 'n_tokens_mistral': 1101, 'n_tokens_neox': 1086, 'n_words': 273}