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

import style from "@agir/front/genericComponents/_variables.scss";

import { useSelector } from "@agir/front/globalContext/GlobalContext";
import {
  getHasFeedbackButton,
  getUser,
  getRoutes,
} from "@agir/front/globalContext/reducers";

import Tooltip from "@agir/front/genericComponents/Tooltip";

import background from "./feedback-form-button.svg";

const slideInTransition = {
  from: { opacity: 0, marginBottom: "-3rem" },
  enter: { opacity: 1, marginBottom: "0" },
  leave: { opacity: 0, marginBottom: "-3rem" },
};

const Button = styled.a`
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: transparent;
  background-image: url(${background});
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
`;

const Wrapper = styled(animated.div)`
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 53px;
  height: 53px;
  z-index: ${style.zindexFeedbackButton};

  @media (max-width: ${style.collapse}px) {
    bottom: 75px;
  }
`;

export const FeedbackButton = (props) => {
  const { isActive, shouldPushTooltip, href } = props;
  const style = props.style || {};

  const [hasTooltip, setHasTooltip] = useState(false);

  const hideTooltip = useCallback(() => {
    setHasTooltip(false);
  }, []);

  const showTooltip = useCallback(() => {
    setHasTooltip(true);
  }, []);

  const pushTooltip = useCallback(() => {
    shouldPushTooltip && showTooltip();
  }, [shouldPushTooltip, showTooltip]);

  const wrapperTransition = useTransition(isActive, null, {
    ...slideInTransition,
    onRest: pushTooltip,
  });

  return wrapperTransition.map(({ item, key, props }) =>
    item ? (
      <Wrapper key={key} style={{ ...style, ...props }}>
        <Tooltip
          position="top-left"
          shouldShow={hasTooltip}
          onClose={shouldPushTooltip ? hideTooltip : undefined}
        >
          <strong>Aidez-nous !</strong>
          <span>Donnez votre avis sur le nouveau site →</span>
        </Tooltip>
        <Button
          href={href}
          aria-label="Je donne mon avis"
          onMouseOver={shouldPushTooltip ? undefined : showTooltip}
          onMouseLeave={shouldPushTooltip ? undefined : hideTooltip}
        />
      </Wrapper>
    ) : null
  );
};
FeedbackButton.propTypes = {
  isActive: PropTypes.bool,
  shouldPushTooltip: PropTypes.bool,
  href: PropTypes.string,
};
const ConnectedFeedbackButton = (props) => {
  const hasFeedbackButton = useSelector(getHasFeedbackButton);
  const user = useSelector(getUser);
  const routes = useSelector(getRoutes);

  const href = routes && routes.feedbackForm;

  const [isActive, setIsActive] = useState(false);
  const [shouldPushTooltip, setShouldPushTooltip] = useState(false);

  useEffect(() => {
    if (!window.localStorage) {
      return;
    }
    let visitCount = window.localStorage.getItem("AP_vcount");
    visitCount = !isNaN(parseInt(visitCount)) ? parseInt(visitCount) : 0;
    visitCount += 1;
    visitCount % 20 === 3 && setShouldPushTooltip(true);
    setIsActive(true);
    window.localStorage.setItem("AP_vcount", visitCount);
  }, []);

  return (
    <FeedbackButton
      {...props}
      href={href}
      // isActive={!!user && hasFeedbackButton && isActive}
      shouldPushTooltip={shouldPushTooltip}
      isActive
    />
  );
};
export default ConnectedFeedbackButton;<commit_msg>feat: display feedback button only when loggedin<commit_after>import PropTypes from "prop-types";
import React, { useCallback, useEffect, useState } from "react";
import { useTransition, animated } from "react-spring";
import styled from "styled-components";

import style from "@agir/front/genericComponents/_variables.scss";

import { useSelector } from "@agir/front/globalContext/GlobalContext";
import {
  getHasFeedbackButton,
  getUser,
  getRoutes,
} from "@agir/front/globalContext/reducers";

import Tooltip from "@agir/front/genericComponents/Tooltip";

import background from "./feedback-form-button.svg";

const slideInTransition = {
  from: { opacity: 0, marginBottom: "-3rem" },
  enter: { opacity: 1, marginBottom: "0" },
  leave: { opacity: 0, marginBottom: "-3rem" },
};

const Button = styled.a`
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: transparent;
  background-image: url(${background});
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
`;

const Wrapper = styled(animated.div)`
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 53px;
  height: 53px;
  z-index: ${style.zindexFeedbackButton};

  @media (max-width: ${style.collapse}px) {
    bottom: 75px;
  }
`;

export const FeedbackButton = (props) => {
  const { isActive, shouldPushTooltip, href } = props;
  const style = props.style || {};

  const [hasTooltip, setHasTooltip] = useState(false);

  const hideTooltip = useCallback(() => {
    setHasTooltip(false);
  }, []);

  const showTooltip = useCallback(() => {
    setHasTooltip(true);
  }, []);

  const pushTooltip = useCallback(() => {
    shouldPushTooltip && showTooltip();
  }, [shouldPushTooltip, showTooltip]);

  const wrapperTransition = useTransition(isActive, null, {
    ...slideInTransition,
    onRest: pushTooltip,
  });

  return wrapperTransition.map(({ item, key, props }) =>
    item ? (
      <Wrapper key={key} style={{ ...style, ...props }}>
        <Tooltip
          position="top-left"
          shouldShow={hasTooltip}
          onClose={shouldPushTooltip ? hideTooltip : undefined}
        >
          <strong>Aidez-nous !</strong>
          <span>Donnez votre avis sur le nouveau site →</span>
        </Tooltip>
        <Button
          href={href}
          aria-label="Je donne mon avis"
          onMouseOver={shouldPushTooltip ? undefined : showTooltip}
          onMouseLeave={shouldPushTooltip ? undefined : hideTooltip}
        />
      </Wrapper>
    ) : null
  );
};
FeedbackButton.propTypes = {
  isActive: PropTypes.bool,
  shouldPushTooltip: PropTypes.bool,
  href: PropTypes.string,
};
const ConnectedFeedbackButton = (props) => {
  const user = useSelector(getUser);
  const routes = useSelector(getRoutes);

  const href = routes && routes.feedbackForm;

  const [shouldPushTooltip, setShouldPushTooltip] = useState(false);

  useEffect(() => {
    if (!window.localStorage) {
      return;
    }
    let visitCount = window.localStorage.getItem("AP_vcount");
    visitCount = !isNaN(parseInt(visitCount)) ? parseInt(visitCount) : 0;
    visitCount += 1;
    visitCount % 20 === 3 && setShouldPushTooltip(true);
    window.localStorage.setItem("AP_vcount", visitCount);
  }, []);

  return (
    <FeedbackButton
      {...props}
      href={href}
      shouldPushTooltip={shouldPushTooltip}
      isActive={!!user}
    />
  );
};
export default ConnectedFeedbackButton;
{'fraction_non_alphanumeric': 0.13885350318471337, 'fraction_numerical': 0.007926397735314932, 'mean_word_length': 3.5853341985723555, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 37, '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': '6338101', 'n_tokens_mistral': 2191, 'n_tokens_neox': 2190, 'n_words': 482}