<commit_before>import PropTypes from "prop-types";
import React, { Fragment, useMemo } from "react";

import GroupMemberList from "@agir/groups/groupPage/GroupSettings/GroupMemberList";

import ShareLink from "@agir/front/genericComponents/ShareLink";
import Spacer from "@agir/front/genericComponents/Spacer";

import { StyledTitle } from "@agir/front/genericComponents/ObjectManagement/styledComponents";

import { MEMBERSHIP_TYPES } from "@agir/groups/utils/group";

const GroupContactsMainPanel = (props) => {
  const { members, onClickMember } = props;

  const followers = useMemo(() => {
    if (!Array.isArray(members)) {
      return [];
    }
    return members.filter(
      (member) => member.membershipType <= MEMBERSHIP_TYPES.FOLLOWER
    );
  }, [members]);

  const emails = useMemo(
    () =>
      followers
        .filter(
          ({ hasGroupNotifications, email }) => hasGroupNotifications && email
        )
        .map(({ email }) => email)
        .join(", "),
    [followers]
  );

  return (
    <>
      <StyledTitle>
        {followers.length}&nbsp; Contact{followers.length > 1 ? "s" : ""}
      </StyledTitle>
      <p
        css={`
          color: ${({ theme }) => theme.black700};
          margin: 0;
        `}
      >
        Toutes les personnes intéressées par votre groupe.
      </p>
      <Spacer size="1rem" />
      <ShareLink
        label="Copier les e-mails"
        color="primary"
        url={emails}
        $wrap
      />
      <Spacer size="1.5rem" />
      <GroupMemberList members={followers} onClickMember={onClickMember} />
      <Spacer size="2rem" />
      <footer
        css={`
          color: ${({ theme }) => theme.black700};
          font-size: 0.875rem;<commit_msg>fix: add an empty version to the contact group settings panel<commit_after>import PropTypes from "prop-types";
import React, { Fragment, useMemo } from "react";

import GroupMemberList from "@agir/groups/groupPage/GroupSettings/GroupMemberList";

import Button from "@agir/front/genericComponents/Button";
import ShareLink from "@agir/front/genericComponents/ShareLink";
import Spacer from "@agir/front/genericComponents/Spacer";

import { StyledTitle } from "@agir/front/genericComponents/ObjectManagement/styledComponents";

import { MEMBERSHIP_TYPES } from "@agir/groups/utils/group";

const GroupContactsMainPanel = (props) => {
  const { members, onClickMember } = props;

  const followers = useMemo(() => {
    if (!Array.isArray(members)) {
      return [];
    }
    return members.filter(
      (member) => member.membershipType <= MEMBERSHIP_TYPES.FOLLOWER
    );
  }, [members]);

  const emails = useMemo(
    () =>
      followers
        .filter(
          ({ hasGroupNotifications, email }) => hasGroupNotifications && email
        )
        .map(({ email }) => email)
        .join(", "),
    [followers]
  );

  return (
    <>
      <StyledTitle
        css={`
          display: flex;
          align-items: center;
        `}
      >
        {`${followers.length || ""} Contact${
          followers.length === 1 ? "" : "s"
        }`.trim()}
      </StyledTitle>
      <p
        css={`
          color: ${({ theme }) => theme.black700};
          margin: 0;
        `}
      >
        Toutes les personnes intéressées par votre groupe.
      </p>
      {emails ? (
        <>
          <Spacer size="1rem" />
          <ShareLink
            label="Copier les e-mails"
            color="primary"
            url={emails}
            $wrap
          />
        </>
      ) : null}
      {followers.length > 0 ? (
        <>
          <Spacer size="1.5rem" />
          <GroupMemberList members={followers} onClickMember={onClickMember} />
        </>
      ) : (
        <>
          <Spacer size="1.5rem" />
          <p>
            Vous n’avez pas encore de contact !
            <Spacer size="0.5rem" />
            Obtenez des contacts pour la campagne et pour votre groupe d’action.
          </p>
          <Spacer size=".5rem" />
          <Button link icon="user-plus" route="createContact" color="secondary">
            Ajouter un contact
          </Button>
        </>
      )}
      <Spacer size="2rem" />
      <footer
        css={`
          color: ${({ theme }) => theme.black700};
          font-size: 0.875rem;
{'fraction_non_alphanumeric': 0.14152483096292842, 'fraction_numerical': 0.008859874096525997, 'mean_word_length': 2.126822157434402, 'pattern_counts': {'":': 0, '<': 40, '<?xml version=': 0, '>': 54, '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': '2772382', 'n_tokens_mistral': 1321, 'n_tokens_neox': 1290, 'n_words': 274}