{"size": 1656, "ext": "js", "max_stars_repo_path": "src/containers/Selects/DocumentTypesMenuV2.js", "max_stars_repo_name": "Vudung0519/OE-dashboard", "max_stars_repo_stars_event_min_datetime": "2021-06-01T08:12:32.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-01T09:26:43.000Z", "max_issues_repo_path": "src/containers/Selects/DocumentTypesMenuV2.js", "max_issues_repo_name": "Vudung0519/OE-dashboard", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/containers/Selects/DocumentTypesMenuV2.js", "max_forks_repo_name": "Vudung0519/OE-dashboard", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 3, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.6849315068, "max_line_length": 103, "alphanum_fraction": 0.547705314}
import React from 'react'
import { graphql, withApollo } from 'react-apollo'
import * as compose from 'lodash.flowright'
import { Menu, Icon, Dropdown } from 'antd'
import * as queries from 'utils/queries'

const DocumentTypesMenuV2 = ({ dataQuery: { loading, data, error }, onChange, children, ...rest }) => {
  if (loading) {
    const menu = (
      <Menu>
        <Menu.Item>
          <Icon type="loading" /> Loading...
        </Menu.Item>
      </Menu>
    )

    return (
      <Dropdown overlay={menu} placement="bottomRight">
        {children}
      </Dropdown>
    )
  }
  if (error || !data) {
    const menu = (
      <Menu>
        <Menu.Item>Something went wrong</Menu.Item>
      </Menu>
    )

    return (
      <Dropdown overlay={menu} placement="bottomRight">
        {children}
      </Dropdown>
    )
  }

  const menu = (
    <Menu>
      <Menu.Item key={null}>
        <a target="_blank" rel="noopener noreferrer" onClick={() => onChange('All', null)}>
          All
        </a>
      </Menu.Item>
      {data.map(item => (
        <Menu.Item key={item._id}>
          <a target="_blank" rel="noopener noreferrer" onClick={() => onChange(item.name, item._id)}>
            {item.name}
          </a>
        </Menu.Item>
      ))}
    </Menu>
  )

  return (
    <Dropdown overlay={menu} placement="bottomRight">
      {children}
    </Dropdown>
  )
}

export default compose(
  graphql(queries.dataQuery, {
    name: 'dataQuery',
    options: props => ({
      variables: {
        collectionName: props.collectionName,
        types: props.type ? [props.type] : null,
      },
    }),
  }),
  withApollo,
)(DocumentTypesMenuV2)
