withApollo.tsx

import * as React from 'react';
import { compose, withApollo, WithApolloClient } from 'react-apollo';
import { Input, Icon, Avatar } from 'antd';

import { IGroup } from '../interfaces';
import { GROUPS } from '../queries';

const SearchInput = Input.Search;

export interface IGroupSearchState {
  groups: IGroup[];
  isLoading: boolean;
}

type GroupSearchViewProps = WithApolloClient<void>;

export class GroupSearchView extends React.Component<GroupSearchViewProps, IGroupSearchState> {
  public state: IGroupSearchState = {
    groups: new Array<IGroup>(),
    isLoading: false,
  };

  public async componentDidMount() {
    await this.fetchGroups();
  }

  public fetchGroups = async (search?: string) => {
    const {
      client: { query },
    } = this.props;

    try {
      this.setState({ isLoading: true });
      const response = await query<{ groups: IGroup[] }>({
        query: GROUPS,
        variables: { query: search, skip: 0, limit: 5 },
        fetchPolicy: 'no-cache',
      });

      this.setState({ groups: response.data && response.data.groups });
    } catch (e) {
      // Ignore silently
    } finally {
      this.setState({ isLoading: false });
    }
  };

  public renderGroups = () => {
    const { groups } = this.state;

    return (
      <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', marginTop: '10px' }}>
        {groups.map(group => (
          <div key={group.id} style={{ margin: '10px 10px 0px 0px' }}>
            <Avatar shape="square" src="" style={{ height: '70px', width: '90px' }} />
            <p style={{ textAlign: 'center', marginTop: '3px' }}>{group.name}</p>
          </div>
        ))}
      </div>
    );
  };

  public render() {
    const { isLoading } = this.state;

    return (
      <div>
        <SearchInput placeholder="Search Groups" enterButton onSearch={this.fetchGroups} />

        {isLoading ? <Icon type="loading" style={{ fontSize: 25, margin: '20% 45%' }} /> : this.renderGroups()}
      </div>
    );
  }
}

export const GroupSearch: React.ComponentClass = compose(withApollo)(GroupSearchView);