<commit_before>/** @jsx jsx */
import React from "react";
import AriaModal from "react-aria-modal";
import { connect } from "react-redux";
import { useHistory } from "react-router-dom";
import { Box, Button, Flex, Heading, jsx, ThemeUIStyleObject } from "theme-ui";

import { IProject, IUser } from "../../shared/entities";
import { showConvertMapModal } from "../actions/districtDrawing";
import { resetProjectState } from "../actions/root";
import { convertAndCopyProject } from "../api";
import { showActionFailedToast } from "../functions";
import { State } from "../reducers";
import store from "../store";
import { AuthModalContent } from "./AuthComponents";
import { Resource } from "../resource";

const style: ThemeUIStyleObject = {
  footer: {
    display: "flex",
    flexDirection: "column",
    marginTop: 5
  },
  header: {
    mb: 5
  },
  heading: {
    fontFamily: "heading",
    fontWeight: "light",
    fontSize: 4
  },
  modal: {
    bg: "muted",
    p: 5,
    width: "small",
    maxWidth: "90vw",
    overflow: "visible"
  }
};

const ConvertMapModal = ({
  project,
  user,
  showModal
}: {
  readonly project: IProject;
  readonly user: Resource<IUser>;
  readonly showModal: boolean;
}) => {
  const history = useHistory();

  const hideModal = () => store.dispatch(showConvertMapModal(false));
  const attributedName = `${project.name} by ${project.user.name}`;
  const isLoggedIn = "resource" in user;

  function goToProject(project: IProject) {
    history.push(`/projects/${project.id}`);
  }

  return showModal ? (
    <AriaModal
      titleId="convert-map-modal-header"
      onExit={hideModal}
      initialFocus="#primary-action"
      getApplicationNode={() => document.getElementById("root") as Element}
      underlayStyle={{ paddingTop: "4.5rem" }}
    >
      <Box sx={style.modal}>
        {!isLoggedIn ? (
          <AuthModalContent project={project} />
        ) : (
          <React.Fragment>
            <Box sx={style.header}>
              <Heading as="h1" sx={style.heading} id="convert-map-modal-header">
                Copy this map to use 2020 Census data?
              </Heading>
            </Box>
            <Flex
              as="form"
              sx={{ flexDirection: "column" }}
              onSubmit={(e: React.FormEvent) => {
                e.preventDefault();
                convertAndCopyProject(project.id)
                  .then((newProject: IProject) => {
                    // Need to reset the project state here, so when the redirect kicks in we don't have any
                    // old state hanging around (undo history, etc.)
                    store.dispatch(resetProjectState());
                    goToProject(newProject);
                  })
                  .catch(showActionFailedToast);
              }}
            >
              <Box>
                This will create a copy of <strong>{attributedName}</strong> in your account,
                converted to use 2020 Census data. You will be able to make changes to the copied
                version.
              </Box>
              <Flex sx={style.footer}>
                <Button id="primary-action" sx={{ marginBottom: 3 }} type="submit">
                  Yes, copy to my account
                </Button>
                <Button
                  id="cancel-convert-map-modal"
                  onClick={hideModal}
                  sx={{ variant: "buttons.linkStyle", margin: "0 auto" }}
                >
                  Cancel
                </Button>
              </Flex>
            </Flex>
          </React.Fragment>
        )}
      </Box>
    </AriaModal>
  ) : null;
};

function mapStateToProps(state: State) {
  return {
    showModal: state.project.showConvertMapModal,
    user: state.user
  };
}

export default connect(mapStateToProps)(ConvertMapModal);<commit_msg>Add spinner to convert/copy modal<commit_after>/** @jsx jsx */
import React, { useState } from "react";
import AriaModal from "react-aria-modal";
import { connect } from "react-redux";
import { useHistory } from "react-router-dom";
import { Box, Button, Flex, Heading, jsx, ThemeUIStyleObject, Spinner } from "theme-ui";

import { IProject, IUser } from "../../shared/entities";
import { showConvertMapModal } from "../actions/districtDrawing";
import { resetProjectState } from "../actions/root";
import { convertAndCopyProject } from "../api";
import { showActionFailedToast } from "../functions";
import { State } from "../reducers";
import store from "../store";
import { AuthModalContent } from "./AuthComponents";
import { Resource } from "../resource";

const style: ThemeUIStyleObject = {
  footer: {
    display: "flex",
    flexDirection: "column",
    marginTop: 5
  },
  header: {
    mb: 5
  },
  heading: {
    fontFamily: "heading",
    fontWeight: "light",
    fontSize: 4
  },
  modal: {
    bg: "muted",
    p: 5,
    width: "small",
    maxWidth: "90vw",
    overflow: "visible"
  }
};

const ConvertMapModal = ({
  project,
  user,
  showModal
}: {
  readonly project: IProject;
  readonly user: Resource<IUser>;
  readonly showModal: boolean;
}) => {
  const [saving, setSaving] = useState(false);
  const history = useHistory();

  const hideModal = () => store.dispatch(showConvertMapModal(false));
  const attributedName = `${project.name} by ${project.user.name}`;
  const isLoggedIn = "resource" in user;

  function goToProject(project: IProject) {
    history.push(`/projects/${project.id}`);
  }

  return showModal ? (
    <AriaModal
      titleId="convert-map-modal-header"
      onExit={hideModal}
      initialFocus="#primary-action"
      getApplicationNode={() => document.getElementById("root") as Element}
      underlayStyle={{ paddingTop: "4.5rem" }}
    >
      <Box sx={style.modal}>
        {!isLoggedIn ? (
          <AuthModalContent project={project} />
        ) : (
          <React.Fragment>
            <Box sx={style.header}>
              <Heading as="h1" sx={style.heading} id="convert-map-modal-header">
                Copy this map to use 2020 Census data?
              </Heading>
            </Box>
            <Flex
              as="form"
              sx={{ flexDirection: "column" }}
              onSubmit={(e: React.FormEvent) => {
                e.preventDefault();
                setSaving(true);
                convertAndCopyProject(project.id)
                  .then((newProject: IProject) => {
                    // Need to reset the project state here, so when the redirect kicks in we don't have any
                    // old state hanging around (undo history, etc.)
                    store.dispatch(resetProjectState());
                    goToProject(newProject);
                  })
                  .finally(() => setSaving(false))
                  .catch(showActionFailedToast);
              }}
            >
              <Box>
                This will create a copy of <strong>{attributedName}</strong> in your account,
                converted to use 2020 Census data. You will be able to make changes to the copied
                version.
              </Box>
              <Flex sx={style.footer}>
                {saving ? (
                  <React.Fragment>
                    <Spinner variant="spinner.large" sx={{ alignSelf: "center", mb: 4 }} />
                    <Button
                      id="primary-action"
                      sx={{ marginBottom: 3 }}
                      type="submit"
                      disabled={true}
                    >
                      Converting
                    </Button>
                  </React.Fragment>
                ) : (
                  <Button id="primary-action" sx={{ marginBottom: 3 }} type="submit">
                    Yes, copy to my account
                  </Button>
                )}
                <Button
                  id="cancel-convert-map-modal"
                  onClick={hideModal}
                  sx={{ variant: "buttons.linkStyle", margin: "0 auto" }}
                >
                  Cancel
                </Button>
              </Flex>
            </Flex>
          </React.Fragment>
        )}
      </Box>
    </AriaModal>
  ) : null;
};

function mapStateToProps(state: State) {
  return {
    showModal: state.project.showConvertMapModal,
    user: state.user
  };
}

export default connect(mapStateToProps)(ConvertMapModal);
{'fraction_non_alphanumeric': 0.12986857825567502, 'fraction_numerical': 0.0047789725209080045, 'mean_word_length': 1.8667808219178081, 'pattern_counts': {'":': 0, '<': 56, '<?xml version=': 0, '>': 67, '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': '1356738', 'n_tokens_mistral': 2367, 'n_tokens_neox': 2275, 'n_words': 579}