How to use the graphql-anywhere.propType function in graphql-anywhere

onSuccess?: any;
  plan_id?: string;
  subscribeToPremium: any; // FIXME: Type
}

interface BillingFormState {
  mode: string;
  errorMessage: string;
  operations: any[];
  plan_id: string;
  coupon_code: string;
}

class BillingForm extends PureComponent {
  static propTypes = {
    me: propType(billingFormFragment).isRequired, // TODO: Figure out how to move this to TS
  };

  static defaultProps = {
    plan_id: null,
    onSuccess: () => null,
  };

  state = {
    mode: 'resting',
    errorMessage: null,
    operations: [],
    plan_id: this.props.me.customer.plan.id,
    coupon_code: '',
  };

  componentDidMount() {

import { LabelledInput, Label, Input, Textarea } from 'react/components/UI/Inputs';

import createGroupQuery from 'react/components/CreateGroup/queries/createGroup';

import createGroupFragment from 'react/components/CreateGroup/fragments/createGroup';

import createGroupMutation from 'react/components/CreateGroup/mutations/createGroup';
import addChannelMemberMutation from 'react/components/CreateGroup/mutations/addChannelMember';
import addGroupUsersMutation from 'react/components/CreateGroup/mutations/addGroupUsers';
import inviteUserMutation from 'react/components/CreateGroup/mutations/inviteUser';
import setHasSeenNewGroupExplanationMutation from 'react/components/CreateGroup/mutations/setHasSeenNewGroupExplanation';

class CreateGroup extends Component {
  static propTypes = {
    data: PropTypes.shape({
      me: propType(createGroupFragment),
    }).isRequired,
    channel_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onClose: PropTypes.func.isRequired,
    createGroup: PropTypes.func.isRequired,
    addChannelMember: PropTypes.func.isRequired,
    addGroupUsers: PropTypes.func.isRequired,
    inviteUser: PropTypes.func.isRequired,
    setHasSeenNewGroupExplanation: PropTypes.func.isRequired,
  }

  static defaultProps = {
    channel_id: null,
  }

  state = {
    mode: 'resting',

}
`

const Container = styled.div`
  margin-left: ${props => props.theme.space[3]};
  max-height: 30vmin;
  ${overflowScrolling}
`

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

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

  toggle = e => {
    e.preventDefault()

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

    return toggleMyGroupsDropdownVisibility({
      variables: {
        flags: [
          {
            name: 'is_my_groups_dropdown_hidden',
            value,
          },

import blockLightboxImageFragment from 'react/components/BlockLightbox/components/BlockLightboxImage/fragments/blockLightboxImage';

import Text from 'react/components/UI/Text';
import Link from 'react/components/UI/Link';

const Image = styled.img`
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
`;

export default class BlockLightboxImage extends PureComponent {
  static propTypes = {
    block: propType(blockLightboxImageFragment).isRequired,
    layout: PropTypes.oneOf(['DEFAULT', 'FULLSCREEN']).isRequired,
  }

  render() {
    const { block, layout } = this.props;

    return (

import { graphql, compose } from 'react-apollo'

import WithLoginStatus from 'v2/hocs/WithLoginStatus'

import followingQuery from 'v2/components/FollowButton/queries/following'
import followableFragment from 'v2/components/FollowButton/fragments/followable'
import followMutation from 'v2/components/FollowButton/mutations/follow'
import unfollowMutation from 'v2/components/FollowButton/mutations/unfollow'

class FollowButton extends Component {
  static propTypes = {
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    type: PropTypes.oneOf(['USER', 'GROUP', 'CHANNEL']).isRequired,
    data: PropTypes.shape({
      loading: PropTypes.bool.isRequired,
      followable: propType(followableFragment),
    }).isRequired,
    follow: PropTypes.func.isRequired,
    unfollow: PropTypes.func.isRequired,
    isLoggedIn: PropTypes.bool.isRequired,
    children: PropTypes.func,
  }

  static defaultProps = {
    children: ({ isFollowed }) =>
      ({ true: 'Unfollow', false: 'Follow' }[isFollowed]),
  }

  toggleFollow = async e => {
    e.preventDefault()

    const {

display: inline-block;
  width: 1px;
  height: 0.75em;
  margin: 0 ${props => props.theme.constantValues.doubleEmptySpaceWidth};
  vertical-align: baseline;
  transform: rotate(30deg);
  background-color: ${props => props.theme.colors.gray.medium};
`

const GroupBadge = styled(Badge)`
  transform: scale(0.8);
`

export default class SelectableChannel extends Component {
  static propTypes = {
    channel: propType(selectableChannelFragment).isRequired,
    onSelection: PropTypes.func,
    highlighted: PropTypes.bool,
  }

  static defaultProps = {
    onSelection: () => {},
  }

  state = {
    isSelected: false,
  }

  toggleSelection = () => {
    const { onSelection, channel } = this.props

    this.setState(({ isSelected }) => {

import userSelectionFragment from 'react/components/Billing/components/MyGroups/components/UserSelection/components/fragments/userSelection';
import userSelectorFragment from 'react/components/Billing/components/MyGroups/components/UserSelection/components/UserSelector/fragments/userSelector';

import { PLAN_AMOUNTS } from 'react/components/Billing/config';

import TitledDialog from 'react/components/UI/TitledDialog';
import Box from 'react/components/UI/Box';
import Text from 'react/components/UI/Text';
import Count from 'react/components/UI/Count';
import UserSelector from 'react/components/Billing/components/MyGroups/components/UserSelection/components/UserSelector';

export default class UserSelection extends PureComponent {
  static propTypes = {
    group: propType(userSelectionFragment).isRequired,
    term: PropTypes.oneOf(['month', 'year']).isRequired,
    upgradeableUsers: PropTypes.arrayOf(propType(userSelectorFragment)).isRequired,
    onAddUser: PropTypes.func.isRequired,
    onRemoveUser: PropTypes.func.isRequired,
    onDone: PropTypes.func.isRequired,
  }

  render() {
    const {
      group,
      term,
      upgradeableUsers,
      onAddUser,
      onRemoveUser,
      onDone,
    } = this.props;

    const allUsers = [group.user, ...group.users];

.map(notification => (
            
          ))}
      

      
        <button href="/notifications">
          View all notifications
        </button>
      
    
  )
}

Notifications.propTypes = {
  notifications: PropTypes.arrayOf(propType(notificationSentenceFragment))
    .isRequired,
}

export default Notifications

import Icons from 'react/components/UI/Icons';
import ManageChannel from 'react/components/ManageChannel';
import Button, { mixin as buttonMixin } from 'react/components/UI/GenericButton';
import ButtonGroup from 'react/components/UI/ButtonGroup';
import FollowButton from 'react/components/FollowButton';
import MuteChannelButton from 'react/components/ChannelMetadata/components/ChannelMetadataActions/components/MuteChannelButton';

import channelMetadataActionsFragment from 'react/components/ChannelMetadata/components/ChannelMetadataActions/fragments/channelMetadataActions';

const ChannelFollowButton = styled(FollowButton)`
  ${buttonMixin}
`;

export default class ChannelMetadataActions extends Component {
  static propTypes = {
    channel: propType(channelMetadataActionsFragment).isRequired,
  }

  openEditChannel = () => {
    const { channel: { id } } = this.props;
    const modal = new Modal(ManageChannel, { id });
    modal.open();
  }

  render() {
    const { channel, channel: { id, can } } = this.props;

    return (
      
        {can.follow &&
          
            {({ isFollowed }) => ({

import myHeaderFragment from 'v2/components/Billing/components/MyHeader/fragments/myHeader'

import Box from 'v2/components/UI/Box'
import Text from 'v2/components/UI/Text'
import MemberAvatar from 'v2/components/MemberAvatar'
import UpcomingInvoice from 'v2/components/Billing/components/UpcomingInvoice'

const Header = styled(Box)`
  display: flex;
  align-items: flex-start;
`

export default class MyHeader extends PureComponent {
  static propTypes = {
    me: propType(myHeaderFragment).isRequired,
  }

  render() {
    const { me, ...rest } = this.props

    return (
      <header>
        

        
          

          
        </header>