Example dropdown state

Example dropdown state

import React from 'react';
import _ from 'lodash';
import styled from 'styled-components';
import Dropdown, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import Avatar from '@atlaskit/avatar';

const NameWrapper = styled.span`
  display: flex;
  align-items: center;
`;

const AvatarWrapper = styled.div`
  margin-right: 8px;
`;

const projects = [
  {id: 1, name: 'Project 1', avatar: 'https://randomuser.me/api/portraits/men/7.jpg'},
  {id: 2, name: 'Project 2', avatar: 'https://randomuser.me/api/portraits/men/72.jpg'},
  {id: 3, name: 'Project 3', avatar: 'https://randomuser.me/api/portraits/women/31.jpg'},
];

class ImportProjects extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedProject: null
    };
  }


  setProject = (project) => {
    this.setState({
      selectedProject: project,
    })

  }

  render() {
    const {
      selectedProject
    } = this.state;

    return (
        <div>
          <Dropdown triggerType="button" trigger="Import Jira Projects">
            <DropdownItemGroup title="Jira Projects">
              {_.each([], project => (
                <DropdownItem
                  key={project.id}
                  elemBefore={<Avatar size="small" name={project.name} src={project.avatar} />}
                  onClick={() => this.setProject(project)}
                >
                  {project.name}
                </DropdownItem>
              ))}
            </DropdownItemGroup>
          </Dropdown>
          <DynamicTable
            rows={[
              {
                key: selectedProject.id,
                cells: [
                  {
                    key: selectedProject.id,
                    content: (
                      <NameWrapper>
                        <AvatarWrapper>
                          <Avatar
                            name={selectedProject.name}
                            size="medium"
                            src={selectedProject.avatar}
                          />
                        </AvatarWrapper>
                        <span>{selectedProject.name}</span>
                      </NameWrapper>
                    ),
                  },
                ]
              }
            ]}
            head={head}
            isRankable
            isFixedSize
            onRankEnd={this.changeProjectOrder}
            sortKey="sort"
          />
        </div>
    );
  }
}

export default compose(
  graphql(addProjectMutation, { name: 'addProject' }),
  graphql(updateProjectMutation, { name: 'updateProject' }),
  graphql(removeProjectMutation, { name: 'removeProject' }),
)(ImportProjects);