<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { propType } from 'graphql-anywhere';
import styled from 'styled-components';
import { graphql } from 'react-apollo';

import myGroupsFragment from 'react/components/UserDropdown/components/MyGroups/fragments/myGroups';

import toggleMyGroupsDropdownVisibilityMutation from 'react/components/UserDropdown/components/MyGroups/mutations/toggleMyGroupsDropdownVisibility';

import Text from 'react/components/UI/Text';
import GenericButton from 'react/components/UI/GenericButton';
import Link from 'react/components/UserDropdown/components/Link';
import MyGroup from 'react/components/UserDropdown/components/MyGroups/components/MyGroup';
import Modal from 'react/components/UI/Modal';
import CreateGroup from 'react/components/CreateGroup';

const Header = styled(Link)`
  position: relative;
  user-select: none;

  // Left-facing Caret
  &:before,
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 0.5em solid transparent;
    border-right: 0.5em solid ${x => x.theme.colors.gray.base};
    border-bottom: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    pointer-events: none;
  }

  &:after {
    border-right-color: white;
    margin-right: -1px;
  }

  ${props => props.is_my_groups_dropdown_visible && `
    // Down-facing Caret
    &:before,
    &:after {
      border-top: 0.5em solid ${props.theme.colors.gray.base};
      border-right: 0.5em solid transparent;
      border-bottom: 0;
      border-left: 0.5em solid transparent;
    }

    &:after {
      border-top-color: white;
      margin-top: -1px;
      margin-right: 0;
    }
  `}
`;

class MyGroups extends Component {
  static propTypes = {
    me: propType(myGroupsFragment).isRequired,
    toggleMyGroupsDropdownVisibility: PropTypes.func.isRequired,
  }

  toggle = (e) => {
    e.preventDefault();

    const { toggleMyGroupsDropdownVisibility, me } = this.props;
    const value = !me.is_my_groups_dropdown_visible;

    return toggleMyGroupsDropdownVisibility({
      variables: {
        flags: [{
          name: 'is_my_groups_dropdown_visible', value,
        }],
      },
      optimisticResponse: {
        __typename: 'Mutation',
        set_me_flags: {
          __typename: 'SetMeFlagsPayload',
          me: {
            ...me,
            is_my_groups_dropdown_visible: value,
          },
        },
      },
    });
  }

  openCreateGroup = (e) => {
    e.preventDefault();

    const modal = new Modal(CreateGroup);
    modal.open();
  }

  render() {
    const { me: { groups, is_my_groups_dropdown_visible } } = this.props;

    return (
      <div>
        <Header onClick={this.toggle} is_my_groups_dropdown_visible={is_my_groups_dropdown_visible}>
          Groups
        </Header>

        {is_my_groups_dropdown_visible &&
          <div>
            {groups.length === 0 &&
              <Text f={1} my="1rem" px="1rem">
                Groups are a new way to collaborate on Are.na
              </Text><commit_msg>Add Beta badge and learn more link<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { propType } from 'graphql-anywhere';
import styled from 'styled-components';
import { graphql } from 'react-apollo';

import myGroupsFragment from 'react/components/UserDropdown/components/MyGroups/fragments/myGroups';

import toggleMyGroupsDropdownVisibilityMutation from 'react/components/UserDropdown/components/MyGroups/mutations/toggleMyGroupsDropdownVisibility';

import Text from 'react/components/UI/Text';
import GenericButton from 'react/components/UI/GenericButton';
import Link from 'react/components/UserDropdown/components/Link';
import MyGroup from 'react/components/UserDropdown/components/MyGroups/components/MyGroup';
import Modal from 'react/components/UI/Modal';
import CreateGroup from 'react/components/CreateGroup';

const Header = styled(Link)`
  position: relative;
  user-select: none;

  // Left-facing Caret
  &:before,
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 0.5em solid transparent;
    border-right: 0.5em solid ${x => x.theme.colors.gray.base};
    border-bottom: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    pointer-events: none;
  }

  &:after {
    border-right-color: white;
    margin-right: -1px;
  }

  ${props => props.is_my_groups_dropdown_visible && `
    // Down-facing Caret
    &:before,
    &:after {
      border-top: 0.5em solid ${props.theme.colors.gray.base};
      border-right: 0.5em solid transparent;
      border-bottom: 0;
      border-left: 0.5em solid transparent;
    }

    &:after {
      border-top-color: white;
      margin-top: -1px;
      margin-right: 0;
    }
  `}
`;

const BetaBadge = styled(Text).attrs({
  f: 0,
})`
  color: ${x => x.theme.colors.gray.regular} !important;
  display: inline-block;
  font-weight: normal;
  margin-left: 0.5em;
  &:before {
    content: '•';
    margin-right: 0.5em;
  }
`;

const LearnMoreLink = styled.a`
  font-weight: bold;
`;

class MyGroups extends Component {
  static propTypes = {
    me: propType(myGroupsFragment).isRequired,
    toggleMyGroupsDropdownVisibility: PropTypes.func.isRequired,
  }

  toggle = (e) => {
    e.preventDefault();

    const { toggleMyGroupsDropdownVisibility, me } = this.props;
    const value = !me.is_my_groups_dropdown_visible;

    return toggleMyGroupsDropdownVisibility({
      variables: {
        flags: [{
          name: 'is_my_groups_dropdown_visible', value,
        }],
      },
      optimisticResponse: {
        __typename: 'Mutation',
        set_me_flags: {
          __typename: 'SetMeFlagsPayload',
          me: {
            ...me,
            is_my_groups_dropdown_visible: value,
          },
        },
      },
    });
  }

  openCreateGroup = (e) => {
    e.preventDefault();

    const modal = new Modal(CreateGroup);
    modal.open();
  }

  render() {
    const { me: { groups, is_my_groups_dropdown_visible } } = this.props;

    return (
      <div>
        <Header onClick={this.toggle} is_my_groups_dropdown_visible={is_my_groups_dropdown_visible}>
          Groups
          <BetaBadge>BETA</BetaBadge>
        </Header>

        {is_my_groups_dropdown_visible &&
          <div>
            {groups.length === 0 &&
              <Text f={1} my="1rem" px="1rem" lineHeight={2}>
                Groups are a new way to collaborate on Are.na.
                <br />
                <LearnMoreLink href="/getting-started-with-groups">Learn more</LearnMoreLink>
              </Text>
{'fraction_non_alphanumeric': 0.12307692307692308, 'fraction_numerical': 0.009377289377289377, 'mean_word_length': 2.8348314606741574, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 29, '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': '7657652', 'n_tokens_mistral': 2182, 'n_tokens_neox': 2105, 'n_words': 448}