<commit_before>import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";
import useSWR from "swr";

import Card from "@agir/front/genericComponents/Card";
import GroupCard from "@agir/groups/groupComponents/GroupCard";
import Onboarding from "@agir/front/genericComponents/Onboarding";
import CenteredLayout from "@agir/front/app/Layout/CenteredLayout";
import Skeleton from "@agir/front/genericComponents/Skeleton";
import { PageFadeIn } from "@agir/front/genericComponents/PageFadeIn";

import style from "@agir/front/genericComponents/_variables.scss";
import { useSelector } from "@agir/front/globalContext/GlobalContext";
import { getRoutes } from "@agir/front/globalContext/reducers";

const StyledBlock = styled.article`
  padding: 0;
  margin-bottom: 2rem;

  @media (max-width: ${style.collapse}px) {
    padding: 0 25px;
    margin-bottom: 1rem;
  }

  p {
    margin: 0 0 1rem;
  }
`;

const Map = styled.iframe`
  margin: 0;
  padding: 0;
  width: 100%;
  height: 338px;
  border: none;
  overflow: hidden;
`;

const GroupList = styled.article`
  margin-top: 2rem;
  margin-bottom: 2rem;

  @media (max-width: ${style.collapse}px) {
    padding: 0 1rem;
  }

  & > ${Card} {
    margin-bottom: 1rem;
  }
`;

const FullGroupPage = ({ groupPk }) => {
  const routes = useSelector(getRoutes);

  const { data: fullGroup } = useSWR(
    groupPk ? `/api/groupes/${groupPk}/` : null
  );
  const { data: groupSuggestions } = useSWR(
    groupPk ? `/api/groupes/${groupPk}/suggestions/` : null
  );

  return (
    <PageFadeIn ready={fullGroup !== "undefined"} wait={<Skeleton />}>
      {fullGroup && (
        <CenteredLayout
          title={`${fullGroup.name} compte déjà trop de membres !`}
          icon="x-circle"
        >
          <StyledBlock>
            <p>Désolé, vous ne pouvez pas rejoindre ce groupe.</p>
            <p>
              Pour favoriser l'implication de chacun·e et la répartition de
              l'action sur le tout le territoire, nous privilégions les petits
              groupes.
            </p>
            <p>Rejoignez un autre groupe proche de chez vous&nbsp;:</p>
          </StyledBlock>
          {routes.groupsMap ? <Map src={routes.groupsMap} /> : null}
          {Array.isArray(groupSuggestions) && groupSuggestions.length > 0 && (
            <GroupList>
              {groupSuggestions.map((group) => (
                <GroupCard
                  key={group.id}
                  {...group}
                  displayDescription={false}
                  displayType={false}
                  displayGroupLogo={false}
                  displayMembership={false}
                />
              ))}
            </GroupList>
          )}
          <Onboarding type="fullGroup__creation" routes={routes} />
        </CenteredLayout>
      )}
    </PageFadeIn>
  );
};

FullGroupPage.propTypes = {
  groupPk: PropTypes.string,
};

export default FullGroupPage;
<commit_msg>fix: full group page onboarding mobile layout<commit_after>import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";
import useSWR from "swr";

import Card from "@agir/front/genericComponents/Card";
import GroupCard from "@agir/groups/groupComponents/GroupCard";
import Onboarding from "@agir/front/genericComponents/Onboarding";
import CenteredLayout from "@agir/front/app/Layout/CenteredLayout";
import Skeleton from "@agir/front/genericComponents/Skeleton";
import { PageFadeIn } from "@agir/front/genericComponents/PageFadeIn";

import style from "@agir/front/genericComponents/_variables.scss";
import { useSelector } from "@agir/front/globalContext/GlobalContext";
import { getRoutes } from "@agir/front/globalContext/reducers";

const StyledBlock = styled.article`
  padding: 0;
  margin-bottom: 2rem;

  @media (max-width: ${style.collapse}px) {
    padding: 0 25px;
    margin-bottom: 1rem;
  }

  p {
    margin: 0 0 1rem;
  }
`;

const Map = styled.iframe`
  margin: 0;
  padding: 0;
  width: 100%;
  height: 338px;
  border: none;
  overflow: hidden;
`;

const GroupList = styled.article`
  margin-top: 2rem;
  margin-bottom: 2rem;

  @media (max-width: ${style.collapse}px) {
    padding: 0 1rem;
  }

  & > ${Card} {
    margin-bottom: 1rem;
  }
`;

const FullGroupPage = ({ groupPk }) => {
  const routes = useSelector(getRoutes);

  const { data: fullGroup } = useSWR(
    groupPk ? `/api/groupes/${groupPk}/` : null
  );
  const { data: groupSuggestions } = useSWR(
    groupPk ? `/api/groupes/${groupPk}/suggestions/` : null
  );

  return (
    <PageFadeIn ready={fullGroup !== "undefined"} wait={<Skeleton />}>
      {fullGroup && (
        <CenteredLayout
          title={`${fullGroup.name} compte déjà trop de membres !`}
          icon="x-circle"
        >
          <StyledBlock>
            <p>Désolé, vous ne pouvez pas rejoindre ce groupe.</p>
            <p>
              Pour favoriser l'implication de chacun·e et la répartition de
              l'action sur le tout le territoire, nous privilégions les petits
              groupes.
            </p>
            <p>Rejoignez un autre groupe proche de chez vous&nbsp;:</p>
          </StyledBlock>
          {routes.groupsMap ? <Map src={routes.groupsMap} /> : null}
          {Array.isArray(groupSuggestions) && groupSuggestions.length > 0 && (
            <GroupList>
              {groupSuggestions.map((group) => (
                <GroupCard
                  key={group.id}
                  {...group}
                  displayDescription={false}
                  displayType={false}
                  displayGroupLogo={false}
                  displayMembership={false}
                />
              ))}
            </GroupList>
          )}
          <StyledBlock>
            <Onboarding type="fullGroup__creation" routes={routes} />
          </StyledBlock>
        </CenteredLayout>
      )}
    </PageFadeIn>
  );
};

FullGroupPage.propTypes = {
  groupPk: PropTypes.string,
};

export default FullGroupPage;

{'fraction_non_alphanumeric': 0.127553562531141, 'fraction_numerical': 0.007639926922438133, 'mean_word_length': 2.4809248554913297, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 49, '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': '3866660', 'n_tokens_mistral': 1953, 'n_tokens_neox': 1861, 'n_words': 418}