<commit_before>import PropTypes from "prop-types";
import React, { useCallback, useEffect } from "react";
import styled from "styled-components";

import { ToastContainer, toast } from "react-toastify";
import {
  useSelector,
  useDispatch,
} from "@agir/front/globalContext/GlobalContext";
import { getToasts } from "@agir/front/globalContext/reducers";
import { clearToast } from "@agir/front/globalContext/actions";

import style from "@agir/front/genericComponents/_variables.scss";
import "react-toastify/dist/ReactToastify.min.css";

export const TOAST_TYPES = {
  DEFAULT: toast.TYPE.DEFAULT,
  DEBUG: toast.TYPE.DEFAULT,
  INFO: toast.TYPE.INFO,
  SUCCESS: toast.TYPE.SUCCESS,
  WARNING: toast.TYPE.WARNING,
  ERROR: toast.TYPE.ERROR,
  DANGER: toast.TYPE.ERROR,
};

const StyledContainer = styled(ToastContainer)`
  width: calc(0.3 * 100vw);
  max-width: 800px;

  .Toastify__toast {
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    background-color: white;
    font-family: ${style.fontFamilyBase};
    line-height: 1.12;
    color: ${style.black1000};
    border-left: 6px solid ${style.black1000};
  }

  .Toastify__toast--error {
    border-left: 6px solid ${style.redNSP};
  }

  .Toastify__toast--success {
    border-left: 6px solid ${style.green500};
  }

  .Toastify__toast-body {
    padding-right: 14px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    opacity: 1;
  }

  .Toastify__close-button {
    border: 1px solid ${style.black1000};
    border-radius: 100px;
    height: 24px;
    width: 24px;
    position: absolute;
    top: 16px;
    right: 16px;
    & > * {
      position: absolute;
      top: 3px;
      left: 5px;
    }
  }
`;

const CloseButton = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M16.4702 7.52977C16.7299 7.78946 16.7299 8.21052 16.4702 8.47022L8.47019 16.4702C8.21049 16.7299 7.78943 16.7299 7.52973 16.4702C7.27004 16.2105 7.27004 15.7895 7.52973 15.5298L15.5297 7.52977C15.7894 7.27007 16.2105 7.27007 16.4702 7.52977Z"
      fill="#000A2C"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M7.52973 7.52977C7.78943 7.27007 8.21049 7.27007 8.47019 7.52977L16.4702 15.5298C16.7299 15.7895 16.7299 16.2105 16.4702 16.4702C16.2105 16.7299 15.7894 16.7299 15.5297 16.4702L7.52973 8.47022C7.27004 8.21052 7.27004 7.78946 7.52973 7.52977Z"
      fill="#000A2C"
    />
    <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="#000A2C" />
  </svg>
);

export const Toast = (props) => {
  const { toasts = [], onClear } = props;

  useEffect(() => {
    toasts.forEach((t) => {
      toast(
        t.html ? (
          <div dangerouslySetInnerHTML={{ __html: t.message }} />
        ) : (
          t.message
        ),
        {
          toastId: t.toastId,
          position: toast.POSITION.BOTTOM_LEFT,
          type: TOAST_TYPES[t.type.toUpperCase()],
          onClose: () => onClear(t),
          autoClose: false,
        }
      );
    });
  }, [toasts, onClear]);

  return <StyledContainer closeButton={CloseButton} />;
};

const ConnectedToast = (props) => {
  const toasts = useSelector(getToasts);
  const dispatch = useDispatch();
  const handleClear = useCallback(
    ({ toastId }) => {
      dispatch(clearToast(toastId));
    },
    [dispatch]
  );
  return <Toast {...props} toasts={toasts} onClear={handleClear} />;
};

Toast.propTypes = {
  toasts: PropTypes.arrayOf(<commit_msg>fix: use proper onClick on button<commit_after>import PropTypes from "prop-types";
import React, { useCallback, useEffect } from "react";
import styled from "styled-components";

import { ToastContainer, toast } from "react-toastify";
import {
  useSelector,
  useDispatch,
} from "@agir/front/globalContext/GlobalContext";
import { getToasts } from "@agir/front/globalContext/reducers";
import { clearToast } from "@agir/front/globalContext/actions";

import style from "@agir/front/genericComponents/_variables.scss";
import "react-toastify/dist/ReactToastify.min.css";

export const TOAST_TYPES = {
  DEFAULT: toast.TYPE.DEFAULT,
  DEBUG: toast.TYPE.DEFAULT,
  INFO: toast.TYPE.INFO,
  SUCCESS: toast.TYPE.SUCCESS,
  WARNING: toast.TYPE.WARNING,
  ERROR: toast.TYPE.ERROR,
  DANGER: toast.TYPE.ERROR,
};

const StyledContainer = styled(ToastContainer)`
  width: calc(0.3 * 100vw);
  max-width: 800px;

  .Toastify__toast {
    cursor: auto;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    background-color: white;
    font-family: ${style.fontFamilyBase};
    line-height: 1.12;
    color: ${style.black1000};
    border-left: 6px solid ${style.black1000};
  }

  .Toastify__toast--error {
    border-left: 6px solid ${style.redNSP};
  }

  .Toastify__toast--success {
    border-left: 6px solid ${style.green500};
  }

  .Toastify__toast-body {
    padding-right: 14px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    opacity: 1;
  }
`;

const CloseButton = ({ closeToast }) => (
  <button
    style={{
      width: "24px",
      height: "24px",
      border: 0,
      padding: 0,
      cursor: "pointer",
    }}
    onClick={closeToast}
  >
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16.4702 7.52977C16.7299 7.78946 16.7299 8.21052 16.4702 8.47022L8.47019 16.4702C8.21049 16.7299 7.78943 16.7299 7.52973 16.4702C7.27004 16.2105 7.27004 15.7895 7.52973 15.5298L15.5297 7.52977C15.7894 7.27007 16.2105 7.27007 16.4702 7.52977Z"
        fill="#000A2C"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.52973 7.52977C7.78943 7.27007 8.21049 7.27007 8.47019 7.52977L16.4702 15.5298C16.7299 15.7895 16.7299 16.2105 16.4702 16.4702C16.2105 16.7299 15.7894 16.7299 15.5297 16.4702L7.52973 8.47022C7.27004 8.21052 7.27004 7.78946 7.52973 7.52977Z"
        fill="#000A2C"
      />
      <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="#000A2C" />
    </svg>
  </button>
);

export const Toast = (props) => {
  const { toasts = [], onClear } = props;

  useEffect(() => {
    toasts.forEach((t) => {
      toast(
        t.html ? (
          <div dangerouslySetInnerHTML={{ __html: t.message }} />
        ) : (
          t.message
        ),
        {
          toastId: t.toastId,
          position: toast.POSITION.BOTTOM_LEFT,
          type: TOAST_TYPES[t.type.toUpperCase()],
          onClose: () => onClear(t),
          autoClose: false,
          closeOnClick: false,
        }
      );
    });
  }, [toasts, onClear]);

  return <StyledContainer closeButton={CloseButton} />;
};

const ConnectedToast = (props) => {
  const toasts = useSelector(getToasts);
  const dispatch = useDispatch();
  const handleClear = useCallback(
    ({ toastId }) => {
      dispatch(clearToast(toastId));
    },
    [dispatch]
  );
  return <Toast {...props} toasts={toasts} onClear={handleClear} />;
};

Toast.propTypes = {
  toasts: PropTypes.arrayOf(
{'fraction_non_alphanumeric': 0.14899553571428573, 'fraction_numerical': 0.123046875, 'mean_word_length': 2.789112050739958, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 36, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, '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': '5001864', 'n_tokens_mistral': 3246, 'n_tokens_neox': 2684, 'n_words': 510}