react-intl#FormattedDate JavaScript Examples

export function CertificateListModal({ onClose, revokeCertificate }) {
  const classes = useStyles();
  const { validCertificates, localCert, selectedCertificate } = useCertificate();

  return (
    <Dialog open={true} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>Certificates</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell align="center">Selected</TableCell>
                <TableCell align="center">Local cert</TableCell>
                <TableCell align="center">Issued on</TableCell>
                <TableCell align="center">Expires</TableCell>
                <TableCell align="center">Serial</TableCell>
                <TableCell align="center"></TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {validCertificates.map((cert) => (
                <TableRow key={cert.serial}>
                  <TableCell align="center">{cert.serial === selectedCertificate?.serial && <CheckIcon color="primary" />}</TableCell>
                  <TableCell align="center">{cert.parsed === localCert?.certPem && <CheckIcon color="primary" />}</TableCell>

                  <TableCell align="center">
                    <FormattedDate value={cert.pem.issuedOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                  </TableCell>
                  <TableCell align="center">
                    <FormattedDate value={cert.pem.expiresOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                  </TableCell>
                  <TableCell align="center">{cert.serial}</TableCell>
                  <TableCell align="center">
                    <Button onClick={() => revokeCertificate(cert)} color="secondary" size="small">
                      Revoke
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
    const { claim } = this.props;
    const { reimbursable } = this.state;

    const claimButtons = c => {
      const repairButton = c.isTheft ? null : (
        <button key='repairButton' type='button'
          className='ibm-btn-sec ibm-btn-small ibm-btn-blue-50'
          style={{ marginLeft: '15px', marginRight: '15px' }}
          onClick={this.repair}>
          <FormattedMessage id='Repair' />
        </button>
      );
      const reimburseButton = c.isTheft && c.status !== 'P' ? null : (
        <button key='reimburseButton' type='button'
          className='ibm-btn-sec ibm-btn-small ibm-btn-teal-50'
          style={{ marginLeft: '15px', marginRight: '15px' }}
          onClick={this.reimburse}>
          <FormattedMessage id='Reimburse' />
        </button>
      );
      const rejectButton = (
        <button key='rejectButton' type='button'
          className='ibm-btn-sec ibm-btn-small ibm-btn-red-50'
          style={{ marginLeft: '15px', marginRight: '15px' }}
          onClick={this.reject}>
          <FormattedMessage id='Reject' />
        </button>
      );
      return (
        <div>
          {[repairButton, reimburseButton, rejectButton]}
        </div>
      );
    };

    return (
      <div className='ibm-col-2-1 ibm-col-medium-2-1 ibm-col-small-1-1'>
        <div className='ibm-card ibm-border-gray-50'>
          <div className='ibm-card__content'>
            <h4 className='ibm-bold ibm-h4'>{claim.description}</h4>
            <div style={{ wordWrap: 'break-word' }} className='ibm-column-form'>
              <p>
                <label><FormattedMessage id='Description' />: </label>
                <span>{claim.description}</span>
              </p>
              <p>
                <label><FormattedMessage id='Creation Date' />: </label>
                <span><FormattedDate value={claim.date} /></span>
              </p>
              <p>
                <label><FormattedMessage id='Theft Involved' />: </label>
                <span className='ibm-input-group'>
                  <input type='checkbox' className='ibm-styled-checkbox'
                    ref='theftField' checked={claim.isTheft}
                    readOnly disabled />
                  <label className='ibm-field-label' htmlFor='theftField' />
                </span>
              </p>
              <p>
                <label><FormattedMessage id='Reimbursable' />: </label>
                <span>
                  <input type='text'
                    value={reimbursable} onChange={this.setReimbursable} />
                </span>
              </p>
            </div>
            {claimButtons(claim)}
          </div>
        </div>
      </div>
    );
  }

getMessage = (message, classes) => {
  switch (message.typeUrl) {
    case TransactionMessageData.Types.MSG_CLOSE_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <PowerOffIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Close Deployment"
            secondary={`Close deployment with dseq: ${message.value.id.dseq}`}
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_CREATE_CERTIFICATE:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <VerifiedUserIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary="Create Certificate" classes={{ primary: classes.listItemPrimaryText }} />
        </>
      );
    case TransactionMessageData.Types.MSG_CREATE_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <PublishIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Create Deployment"
            secondary={
              <>
                New deployment with dseq <strong>{message.value.id.dseq}</strong> and a deposit of <strong>{uaktToAKT(message.value.deposit.amount)}AKT</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_UPDATE_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <PublishIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Update Deployment"
            secondary={
              <>
                Update deployment with dseq <strong>{message.value.id.dseq}</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_DEPOSIT_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <AddBoxIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Deposit Deployment"
            secondary={
              <>
                Add funds of <strong>{uaktToAKT(message.value.amount.amount)}AKT</strong> to deployment with dseq <strong>{message.value.id.dseq}</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_CREATE_LEASE:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <ReceiptIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Create Lease"
            secondary={
              <>
                New Lease with provider <strong>{message.value.bid_id.provider}</strong>, dseq: <strong>{message.value.bid_id.dseq}</strong>, gseq:{" "}
                <strong>{message.value.bid_id.gseq}</strong>, oseq: <strong>{message.value.bid_id.oseq}</strong>.
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_REVOKE_CERTIFICATE:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <CancelIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary="Revoke Certificate" secondary={`Serial: ${message.value.id.serial}`} classes={{ primary: classes.listItemPrimaryText }} />
        </>
      );
    case TransactionMessageData.Types.MSG_SEND_TOKENS:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <SendIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Send"
            secondary={
              <>
                <strong>{message.value.toAddress}</strong> will receive <strong>{uaktToAKT(message.value.amount[0].amount, 6)}AKT</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_GRANT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <AccountBalanceIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Authorize Spend"
            secondary={
              <>
                <strong>{message.value.grantee}</strong> will be able to spend up to{" "}
                <strong>{uaktToAKT(message.value.grant.authorization.value.spend_limit.amount, 6)}AKT</strong> on your behalf. Expires:{" "}
                <FormattedDate value={new Date(message.value.grant.expiration.seconds * 1_000)} />
                &nbsp;
                <FormattedTime value={new Date(message.value.grant.expiration.seconds * 1_000)} />.
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );

    default:
      return null;
  }
}

render() {
    const { contracts, intl, user } = this.props;
    const { contractUuid } = this.props.match.params;

    const { claims } = Array.isArray(contracts) ?
      contracts.find(c => c.uuid == contractUuid) || {} : {};

    if (!user) {
      return (
        <Redirect to='/self-service' />
      );
    }

    function formatStatus(claim) {
      if (!claim) {
        return null;
      }
      let message, messageId, reimbursable;
      switch (claim.status) {
        case 'N':
          messageId = claim.isTheft ? 'Expecting confirmation from police'
            : 'Being Processed';
          break;
        case 'R':
          messageId = claim.repaired ? 'Repaired' : 'To be repaired';
          break;
        case 'F':
          messageId = 'Reimbursement';
          reimbursable = <span>
            , <FormattedNumber style='currency'
              currency={intl.formatMessage({ id: 'currency code' })}
              value={claim.reimbursable} minimumFractionDigits={2} />
          </span>;
          break;
        case 'P':
          messageId = 'Theft confirmed by police';
          break;
        case 'J':
          messageId = 'Rejected';
          break;
        default:
          messageId = 'Unknown';
      }
      if (messageId) {
        message = <FormattedMessage id={messageId} />;
      }
      let fileReference;
      if (claim.isTheft && claim.fileReference) {
        fileReference = (
          <span>
            , <FormattedMessage id='File Reference' />: {claim.fileReference}
          </span>
        );
      }
      return (
        <span>{message}{fileReference}{reimbursable}</span>
      );
    }
    const cards = Array.isArray(claims) ? claims.map((claim, index) => (
      <div key={index} className='ibm-col-5-2 ibm-col-medium-6-2'>
        <div className='ibm-card ibm-border-gray-50'>
          <div className='ibm-card__content'>
            <h4 className='ibm-bold ibm-h4'>{claim.description}</h4>
            <div style={{ wordWrap: 'break-word' }}>
              <FormattedMessage id='Creation Date' />:
              <FormattedDate value={claim.date} /> <br />
              <FormattedMessage id='Theft' />:
              <input type='checkbox' ref='theftField'
                className='ibm-styled-checkbox' checked={claim.isTheft} />
              <label className='ibm-field-label' htmlFor='theftField' /><br />
              <FormattedMessage id='Description' />: {claim.description}<br />
              <FormattedMessage id='Status' />: {formatStatus(claim)}
            </div>
            <br />
          </div>
        </div>
      </div>
    )) : (
        <div className='ibm-col-5-5 ibm-col-medium-6-6'>
          <FormattedMessage id={`You haven't filed any claims yet.`} />
        </div>
      );
    return (
      <div style={{ minHeight: '30vh' }}>
        <div className='ibm-columns'>
          <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
            <h3 className='ibm-h3'>
              <FormattedMessage id='Claims to Selected Contract' />
            </h3>
          </div>
        </div>
        <div className='ibm-columns ibm-cards' data-widget='masonry'
          data-items='.ibm-col-5-1'>
          {cards}
        </div>
      </div>
    );
  }

render() {
    const { loading } = this.state;
    const { contracts, intl, user } = this.props;

    if (!user) {
      return (
        <Redirect to='/self-service' />
      );
    }

    function showExpirationInfo(contract) {
      if (contract.void) {
        return (
          <FormattedMessage style={{ color: 'red' }} id='Contract void' />
        );
      }
      return (
        <div>
          <FormattedMessage id='Valid From' />:
          <FormattedDate value={contract.startDate} /> <br />
          <FormattedMessage id='Valid To' />:
          <FormattedDate value={contract.endDate} /> <br />
        </div>
      );
    }
    function claimButtons(contract) {
      let fileClaim = !contract.void ?
        (
          <p className='ibm-ind-link'>
            <Link className='ibm-forward-link'
              to={`/self-service/claim/${contract.uuid}`}>
              <FormattedMessage id='File a New Claim' />
            </Link>
          </p>
        ) : <FormattedMessage style={{ color: 'red' }} id='Contract void' />;

      return (
        <div>
          {fileClaim}
          <p className='ibm-ind-link'>
            <Link className='ibm-forward-link'
              to={`/self-service/contract/${contract.uuid}/claims`}>
              <FormattedMessage id='View Claims' />
              ({(contract.claims || []).length})
              </Link>
          </p>
        </div>
      );
    }

    const cards = Array.isArray(contracts) ? contracts.map(
      (contract, index) => (
        <div key={index} className='ibm-col-5-1 ibm-col-medium-6-2'>
          <div className='ibm-card ibm-border-gray-50'>
            <div className='ibm-card__content'>
              <h4 className='ibm-bold ibm-h4'>{contract.description}</h4>
              <div style={{ wordWrap: 'break-word' }}>
                <FormattedMessage id='Brand' />: {contract.item.brand}<br />
                <FormattedMessage id='Model' />: {contract.item.model}<br />
                <FormattedMessage id='Serial No.' />: {contract.item.serialNo}
                <br />
                {showExpirationInfo(contract)}
              </div>
              <br />
              {claimButtons(contract)}
            </div>
          </div>
        </div>
      )) : null;

    return (
      <Loading hidden={!loading}
        text={intl.formatMessage({ id: 'Loading Contracts...' })}>
        <div className='ibm-columns' style={{ minHeight: '6em' }}>
          <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
            <h3 className='ibm-h3'><FormattedMessage id='Your Contracts' /></h3>
          </div>
          <div className='ibm-columns ibm-cards' data-widget='masonry'
            data-items='.ibm-col-5-1'>
            {cards}
          </div>
        </div>
      </Loading>
    );
  }