MemberAdd.jsx

import React from "react";
import {
  Form,
  Input,
  Tooltip,
  Icon,
  Select,
  DatePicker,
  Checkbox,
  Button,
  Menu,
  Dropdown,
} from "antd";
import { gql } from "apollo-boost";
import { useMutation, useQuery } from "@apollo/react-hooks";

import moment from "moment";

const { Option } = Select;
const ADD_USER = gql`
  mutation ADD_USER($firstname: String!, $surname: String!, $bornDate: GraphQLDate, $email: String, $phoneNumber: Int, $expiredAt: GraphQLDate, $unlimited: Boolean){
    addMember(
      firstname: $firstname
      surname: $surname
      bornDate: $bornDate
      email: $email
      phoneNumber: $phoneNumber
      expiredAt: $expiredAt
      unlimited: $unlimited
      organization: $organization
    ) {
      id
      bornDate
    }
  }
`;

const GET_ORGANIZATION = gql`
  query {
    __type(name: "Organization") {
      name
      enumValues {
        name
      }
    }
  }
`;

function ShowAddForm(props) {
  const { getFieldDecorator } = props.form;

  const [addUser, { data }] = useMutation(ADD_USER);
  
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };

  const prefixSelector = getFieldDecorator("prefix", {
    initialValue: "420",
  })(
    <Select style={{ width: 70 }}>
      <Option value="420">+420</Option>
      <Option value="421">+421</Option>
    </Select>
  );

  function onChange(date, dateString) {
    console.log(date, dateString);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
        console.log(moment(values.expiredAt).format("YYYY-MM-DD"));
        addUser({
          variables: {
            firstname: values.nickname.split(" ")[0],
            surname: values.nickname.split(" ")[1],
            bornDate: moment(values.bornDate).format("YYYY-MM-DD"),
            email: values.email,
            phoneNumber: values.phoneNumber,
            expiredAt: moment(values.expiredAt).format("YYYY-MM-DD"),
            unlimited: values.unlimited,
            organization: values.organization,
          },
        });
        console.log(data);
      }
    });
  };

  const org = useQuery(GET_ORGANIZATION);
  
  if (org.loading) return <p>Loading...</p>;
  if (org.error) return <p>Error :(</p>;
  console.log(org.data);

  const menu = (
    
    <Menu>
      {org.data.__type.enumValues.forEach((organization) => 
        (<Menu.Item key={organization.name}>
          <a href="http://www.alipay.com/">{organization.name}</a>
        </Menu.Item>)
      )}
    </Menu>
  );

  return (
    <Form {...formItemLayout} onSubmit={handleSubmit}>
      <Form.Item label="E-mail">
        {getFieldDecorator("email", {
          rules: [
            {
              type: "email",
              message: "The input is not valid E-mail!",
            },
            {
              required: true,
              message: "Please input your E-mail!",
            },
          ],
        })(<Input />)}
      </Form.Item>

      <Form.Item
        label={
          <span>
            Nickname&nbsp;
            <Tooltip title="What do you want others to call you?">
              <Icon type="question-circle-o" />
            </Tooltip>
          </span>
        }
      >
        {getFieldDecorator("nickname", {
          rules: [
            {
              required: true,
              message: "Please input your nickname!",
              whitespace: true,
            },
          ],
        })(<Input />)}
      </Form.Item>

      <Form.Item label="Phone Number">
        {getFieldDecorator("phone", {
          rules: [
            { required: true, message: "Please input your phone number!" },
          ],
        })(<Input addonBefore={prefixSelector} style={{ width: "100%" }} />)}
      </Form.Item>
      <Form.Item label="Born date">
        {getFieldDecorator("bornDate")(
          <DatePicker id="bornDate" onChange={onChange} />
        )}
      </Form.Item>
      <Form.Item label="Expiration date">
        {getFieldDecorator("expiredAt")(
          <DatePicker id="expiredAt" onChange={onChange} />
        )}
      </Form.Item>
      <Form.Item label="Unlimited membership">
        {getFieldDecorator("unlimited", {
          valuePropName: "checked",
        })(
          <Checkbox id="unlimited" onChange={onChange}>
            Checkbox
          </Checkbox>
        )}
      </Form.Item>
      <Form.Item>
        <Dropdown id="organization" overlay={menu} trigger={["click"]}>
          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
            Organizace
          </a>
        </Dropdown>
        ,
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          Register
        </Button>
      </Form.Item>
    </Form>
  );
}

export const MemberAdd = Form.create()(ShowAddForm);