FAST: ApolloMutation

import { ApolloMutation, Binding, customElement, html } from '@apollo-elements/fast';
import { AddUserMutation } from './AddUser.mutation.graphql.js';
import { compose, propOr } from './fp-helpers.js';

import '@power-elements/card';
import '@material/mwc-button';
import '@material/mwc-textfield';

const getAddedUser: Binding<AddUser> = x => x.data?.insertUsers?.returning?.[0];

const format = x => { try { return new Date(x).toDateString(); } catch { return ''; } };

@customElement({ name: 'add-user', template: html<AddUser>`
  <p-card>
    <h2 slot="heading">Add User</h2>

    ${x => (!x.called || !x.data) ? '' : html<AddUser>`
    <dl>
      <dt>Name</dt>  <dd>${compose(propOr('name', ''), getAddedUser)}</dd>
      <dt>Added</dt> <dd>${compose(format, propOr('timestamp', null), getAddedUser)}</dd>
    </dl>
    `}

    <mwc-textfield slot="actions"
        label="User Name"
        outlined
        ?disabled="${propOr('loading')}"
        @input="${(x, { event }) => x.onInput(event.target.value)}"></mwc-textfield>
    <mwc-button slot="actions"
        label="Add User"
        ?disabled="${propOr('loading')}"
        @click="${x => x.mutate()}"></mwc-button>
  </p-card>
` })
class AddUser extends ApolloMutation<typeof AddUserMutation> {
  mutation = AddUserMutation;

  onInput(name): boolean {
    this.variables = { name }
    return true;
  }
}