react-intl#FormattedDate JavaScript Examples

The following examples show how to use react-intl#FormattedDate. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: CertificateListModal.js From akashlytics-deploy with GNU General Public License v3.0

5 votes

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>
  );
}

Example #2

Source File: ClaimComponent.js From IBM-db2-blockchain-insurance-application with Apache License 2.0

5 votes

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>
    );
  }

Example #3

Source File: TransactionMessage.js From akashlytics-deploy with GNU General Public License v3.0

4 votes

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;
  }
}

Example #4

Source File: ContractClaimsPage.js From IBM-db2-blockchain-insurance-application with Apache License 2.0

4 votes

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>
    );
  }

Example #5

Source File: ContractsPage.js From IBM-db2-blockchain-insurance-application with Apache License 2.0

4 votes

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>
    );
  }