react-intl#FormattedMessage JavaScript Examples

AppFooter = ({ }) => {
  const intl = useIntl()
  return (
    <>
      <Footer>
        <FooterText>
          <b><FormattedMessage id="footer1" /></b>&nbsp;
          <FormattedMessage id="footer2" values={{
            govLink: <a href={intl.formatMessage({id: "footerGovAddress"})}><FormattedMessage id="footer3" /></a>
          }} />
          <br />
          <FormattedMessage id="footer4" values={{
            star: <StarIcon />,
            githubLogo: <GithubIcon />,
            githubLink: <a href="https://github.com/808-Squad/koronawirus.lol"><FormattedMessage id="footer5" /></a>
          }} />
          <br />
          <FormattedMessage id="footer6" values={{
            freepik: <a href="https://www.freepik.com" title="Freepik">Freepik</a>,
            flaticon: <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
          }}/>
          <br />
          <FormattedMessage id="footer7" /> 14.12.2021
        </FooterText>
      </Footer>
    </>
  )
}

Footer = () => {
  return (
    <div data-testid="footer" id="footer">
      <div className="footerElement">
        <b data-testid="footer-dev"><FormattedMessage id="DevTeam"/> </b> Viade_en1b{" "}
      </div>
      <div className="footerElement">
        <a
          data-testid="footer-github"
          href="https://github.com/Arquisoft/viade_en1b"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon id="githubIcon" icon={faGithub} />
        </a>
      </div>
      <div className="footerElement">
        <a
          data-testid="footer-react"
          href="https://lamasumas.github.io/Solid/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon id="githubIcon" icon={faBook} />
        </a>
      </div>
      <div className="footerElement">
        <a
          data-testid="footer-react"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon id="githubIcon" icon={faReact} />
        </a>
      </div>
    </div>
  );
}

Block = ({ data }) => {
  return (
    <div className='block'>
      <div className='block-data'>
        <p>
          <b><FormattedMessage id='Block No.' />:</b> {data.id}
        </p>
        <p>
          <b><FormattedMessage id='Hash' />:</b>&nbsp;
        <code>{data.fingerprint.substr(0, 10)}</code>
        </p>
        <p>
          <b><FormattedMessage id='Transactions' />:</b>&nbsp;
          {data.transactions.length}
        </p>
        <div className='transactions'>
          {data.transactions.map((t, i) => <Transaction key={i} data={t} />)}
        </div>
      </div>
    </div>
  );
}

describe('<ConnectedLanguageProvider />', () => {
  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('should render the default language messages', () => {
    const { queryByText } = render(
      <Provider store={store}>
        <ConnectedLanguageProvider messages={translationMessages}>
          <FormattedMessage {...messages.someMessage} />
        </ConnectedLanguageProvider>
      </Provider>,
    );
    expect(queryByText(messages.someMessage.defaultMessage)).not.toBeNull();
  });
});

BrandToolBar = () => {
  return <Toolbar>
    <Typography variant="h5">
      <Link href="/" color="inherit">
        <FormattedMessage id="app.text" defaultMessage="Mensageo" />
      </Link>
    </Typography>
  </Toolbar>
}

entry = {
    name: 'LEGO Technic CONTROL+',
    extensionId: 'controlplus',
    collaborator: 'bricklife',
    iconURL: controlplusIconURL,
    insetIconURL: controlplusInsetIconURL,
    description: (
        <FormattedMessage
            defaultMessage="Build with motors and sensors."
            id="gui.extension.controlplus.description"
        />
    ),
    featured: true,
    disabled: false,
    bluetoothRequired: true,
    internetConnectionRequired: true,
    launchPeripheralConnectionFlow: true,
    useAutoScan: true,
    connectionIconURL: controlplusConnectionIconURL,
    connectionSmallIconURL: controlplusConnectionSmallIconURL,
    connectionTipIconURL: controlplusConnectionTipIconURL,
    connectingMessage: (
        <FormattedMessage
            defaultMessage="Connecting"
            id="gui.extension.boost.connectingMessage"
        />
    ),
    helpLink: 'https://scratch.mit.edu/boost'
}

FileUploadProgress = ({
    total = 0,
    inProgress,
    show,
    done,
}) => {
    const progress = total > 0 ? (done / total) * 100 : 0;

    return (
        <Dialog
            open={show}
        >
            <DialogTitle>
                <FormattedMessage id="FILEUPLOADPROGRESS.GETTING_MEDIA_FILES_READY"/>
            </DialogTitle>
            <DialogContent>
                <LinearProgress variant="determinate" value={progress} valueBuffer={(done + inProgress)} />
                <Typography variant="body2" color="textSecondary">{`${done}`} / {`${total}`}</Typography>
            </DialogContent>
        </Dialog>
    );
}

content = (
    <div>
        <Alert style={{marginTop: 5, marginBottom: 10}} message={<FormattedMessage id="delay-message-information1"/>} type="info" showIcon/>
        <p><FormattedMessage id="delay-message-information2"/></p>
        <p><FormattedMessage id="delay-message-information3"/></p>
        <pre>
            {JSON.stringify({
                "level": 0,
                "topic": "target",
                "key": "key",
                "value": "value"
            }, null, 4)}
        </pre>
    </div>
)

render() {
    return (
      <SafetyView>
        <div style={{ display: "flex", flex: 1, flexDirection: "column" }}>
          <div>
            <Typography variant="h5">
              <FormattedMessage id="assistant.motors.calibration" />
            </Typography>
          </div>
          <div style={{ flex: 1, display: "flex" }}>
            <CalibrateMotorsSteps
              fcConfig={this.props.fcConfig}
              onFinish={() => this.props.onFinish()}
              lastChoice={this.props.lastChoice}
            />
          </div>
          <Button variant="contained" onClick={() => this.props.onFinish()}>
            <FormattedMessage id="assistant.motors.skip-calibration" />
          </Button>
        </div>
      </SafetyView>
    );
  }

ListSelect = ({ onChange }) => {
  const intl = useIntl();

  const options = [
    {
      value: '',
      label: '',
      disabled: true,
    },
    {
      value: 'instance',
      label: intl.formatMessage({ id: 'ui-data-export.instance' }),
    },
    {
      value: 'holding',
      label: intl.formatMessage({ id: 'ui-data-export.holdings' }),
    },
    {
      value: 'authority',
      label: intl.formatMessage({ id: 'ui-data-export.authorities' }),
    },
  ];

  return (
    <Row>
      <Col xs={6}>
        <Select
          data-testid="choose-job-select"
          required
          dataOptions={options}
          label={<FormattedMessage id="ui-data-export.jobProfiles.selectProfile.modal.selectTitle" />}
          defaultValue={options[0].value}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
}

/**
 * Component to show the dashboard, showing the list of routes
 * and a map to show the selected route
 * @param {*} props 
 */
function Dashboard(props) {
  const { routes } = props;
  const { selectedRoute } = props;
  const { showRoute } = props;

  //header of the currently selected  route
  const currentSelectedMap =
    selectedRoute == null ? (
      <div data-testid="dashboard-header" className={style.titleHolder}>
        <h1>
          <FormattedMessage id="RoutesList" />
        </h1>
      </div>
    ) : (
      <div data-testid="dashboard-header" className={style.titleHolder}>
        <h1>{selectedRoute.name}</h1>{" "}
        <p>
          {" "}
          <FormattedMessage id="By" /> {selectedRoute.author}
        </p>
      </div>
    );

  //positions of the route
  const positions = selectedRoute == null ? {} : selectedRoute.positions;
  // center for the map
  const center =
    selectedRoute == null
      ? [43.360976539, -5.831938919]
      : selectedRoute.positions[selectedRoute.positions.length - 1];

  return (
    <div data-testid="dashboard-container" className={style.dashboard}>
      <LoggedIn>
        <RouteList
          currentMap={selectedRoute}
          routes={routes}
          onClick={showRoute}
          style={style.routeList}
        />
        <div className={style.mapContainer}>
          {currentSelectedMap}
          <MyMap style={style.myMap} center={center} positions={positions} />
        </div>
      </LoggedIn>
      <LoggedOut>
        <Redirect to="/"></Redirect>
      </LoggedOut>
    </div>
  );
}

render() {
    const { blocks, hidden, hintHidden } = this.state;
    const { intl } = this.props;

    const explorerMessage = hidden ? 'Show Explorer' : 'Close Explorer';
    const explorerIcon = hidden ? '/img/icons/maximize_24.svg' :
      '/img/icons/minimize_24.svg';
    const blocksDisplay = !hidden ?
      (<Loading hidden={Array.isArray(blocks)}
        text={intl.formatMessage({ id: 'Loading Blocks...' })}>
        <div>
          {Array.isArray(blocks) ?
            blocks.map(block => <Block key={block.id} data={block} />) :
            null}
        </div>
      </Loading>) :
      null;
    return (
      <div className='block-explorer'>
        <div className={`toggle-visibility-button${hidden ? ' hidden' : ''}`}>
          <div className={`hint ${hintHidden ? 'hidden' : ''}`}>
            {intl.formatMessage({ id: explorerMessage })}
          </div>
          <div onMouseLeave={this.hideHint} onMouseEnter={this.showHint}
            onClick={this.toggleVisibility}>
            <img src={explorerIcon} />
          </div>
        </div>
        <div className={`contents${hidden ? ' hidden' : ''}`}
          style={{ textAlign: 'center' }}>
          <div style={{
            display: 'inline-block', textAlign: 'initial', height: '100%'
          }}>
            <div style={{
              display: 'flex', flexDirection: 'column',
              height: '100%'
            }}>
              <div>
                <h2 className='ibm-h2'
                  style={{ paddingTop: '10px', paddingLeft: '10px' }}>
                  <FormattedMessage id='Block Explorer' />
                </h2>
              </div>
              <div style={{ flex: 'auto' }}>
                <div style={{ height: '100%', width: '100%' }}>
                  {blocksDisplay}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

export default function NotFound() {
  return (
    <article>
      <FormattedMessage {...messages.header} />
    </article>
  );
}

Footer = () => {
  const classes = useStyles()
  const [openFeedback, setOpenFeedback] = useState(false)
  const [openJoinUs, setOpenJoinUs] = useState(false)

  const handleClickOpenFeedBack = (e) => {
    e.preventDefault()
    setOpenFeedback(true)
  }

  const handleClickCloseFeedBack = () => {
    setOpenFeedback(false)
  }

  const handleClickOpenJoinUs = (e) => {
    e.preventDefault()
    setOpenJoinUs(true)
  }

  const handleClickCloseJoinUs = () => {
    setOpenJoinUs(false)
  }

  function FooterListElement (props) {
    return (
      <ListItemText className={classes.footerListItemStyle} onClick={props.onClick}>
        <Typography variant="h6" align="left">
          <Link color="textPrimary" href={props.href}>
            <FormattedMessage id={props.idMessage} defaultMessage="Missing String" />
          </Link>
        </Typography>
      </ListItemText>
    )
  }

  return (
    <footer className={classes.footer}>
      <Divider className={classes.dividerStyle} />
      <List className={classes.footerListStyle}>
        <FooterListElement idMessage="footer.feedback" href="#" onClick={handleClickOpenFeedBack} />
        <FooterListElement idMessage="footer.aboutus" href="/#/aboutus" />
        <FooterListElement idMessage="footer.joinus" href="#" onClick={handleClickOpenJoinUs} />
      </List>
      <Feedback open={openFeedback} handleClose={handleClickCloseFeedBack} />
      <JoinUs open={openJoinUs} handleClose={handleClickCloseJoinUs} />

    </footer>
  )
}

function App() {
  const defaultLocale =
    localStorage.getItem('locale') ||
    (navigator.languages && navigator.languages[0]) ||
    navigator.language ||
    navigator.userLanguage ||
    'en-US'

  const [locale, setLocale] = useState(defaultLocale)
  const messages = useMemo(() => {
    try {
      return require(`./locales/${locale}.json`)
    } catch (error) {
      // Fallback to English and clean a potentially corrupted storage
      localStorage.removeItem('locale')
      return require('./locales/en-US.json')
    }
  }, [locale])

  const location = useLocation()
  const isRoot = location.pathname === '/'

  return (
    <IntlProvider locale={locale} messages={messages}>
      <LocaleContext.Provider value={{ locale, setLocale }}>
        <Header />
        <main>
          <Grid className="relative">
            <MainContainer>
              {isRoot && (
                <PlaceholderText>
                  <FormattedMessage id="homepage.urlPreview.placeholder" />
                </PlaceholderText>
              )}
              <UrlPreview />
            </MainContainer>
          </Grid>
        </main>
        <Footer />
      </LocaleContext.Provider>
    </IntlProvider>
  )
}

entry = {
    name: 'LEGO DUPLO Train',
    extensionId: 'duplotrain',
    collaborator: 'bricklife',
    iconURL: duplotrainIconURL,
    insetIconURL: duplotrainInsetIconURL,
    description: (
        <FormattedMessage
            defaultMessage="Build and control your train."
            id="gui.extension.duplotrain.description"
        />
    ),
    featured: true,
    disabled: false,
    bluetoothRequired: true,
    internetConnectionRequired: true,
    launchPeripheralConnectionFlow: true,
    useAutoScan: true,
    connectionIconURL: duplotrainConnectionIconURL,
    connectionSmallIconURL: duplotrainConnectionSmallIconURL,
    connectionTipIconURL: duplotrainConnectionTipIconURL,
    connectingMessage: (
        <FormattedMessage
            defaultMessage="Connecting"
            id="gui.extension.boost.connectingMessage"
        />
    ),
    helpLink: 'https://scratch.mit.edu/boost',
    translationMap: {
        'en': {
            'gui.extension.duplotrain.description': 'Build and control your train.'
        },
        'ja': {
            'gui.extension.duplotrain.description': 'レゴ デュプロの機関車を動かそう。'
        },
        'ja-Hira': {
            'gui.extension.duplotrain.description': 'レゴ デュプロのできかんしゃをうごかそう。'
        }
    }
}

render() {
        return (
            <div>
                <div>
                    <label className="required" htmlFor="linkUrl">
                        <FormattedMessage
                            id="embed.link-label"
                            defaultMessage="URL"
                        />
                    </label>
                    <input
                        className="form-control"
                        name="link"
                        type="text"
                        value={this.props.link}
                        onChange={e => {
                            this.props.onChange(e.target.value);
                            this.loadEmbedly(e.target.value);
                        }}
                    />
                    <p className="embedInputDescription">
                        <FormattedMessage
                            id="embed.description"
                            defaultMessage="The url must be accessible from the web"
                        />
                    </p>
                </div>
                {this.state.loading && <div className="fa fa-spin fa-spinner fa-4x" />}
                {this.state.invalidUrl && <div className="embedError">
                    <FormattedMessage
                        id="embed.invalid-url"
                        defaultMessage="Invalid url"
                    />
                </div>}
                {this.state.error && <div className="embedError">
                    {this.state.error}
                </div>}
                {this.is('card') && <Card card={this.state.data} />}
                {this.is('embed') && <Embed embed={this.state.data} />}
            </div>
        );
    }

render() {
        return (
            <IntlProvider locale={'en'} messages={navigator.language === 'zh-CN' ? zh_CN : en_US} >
                <div className="top">
                    <div className="top-left">
                        <img alt='' src={logo_xswap} />
                    </div>

                    {
                        this.props.account &&
                        <div className="top-right-connect">
                            <span className="top-dot" style={{ 'background': this.props.net_type === 'rinkeby' ? '#e8bb66' : '#27aaa0' }}></span>
                            <span onClick={() => { this.openOnEtherscan(this.props.account) }}>
                                {this.props.account.slice(0, 4) + '...' + this.props.account.slice(-4)}
                            </span>
                        </div>
                    }

                    {
                        !this.props.account &&
                        <div className="top-right-connect" onClick={() => { this.props.fn_connect() }}>
                            <FormattedMessage id='connect' />
                        </div>
                    }

                    <div className="top-meun">
                        <div className="top-meun-item">
                            <div className="item-fixed">
                                Yield Market
                                <img alt='' src={arrow_down} className='arrow-down img-right45' />
                            </div>
                            <div className="item-more">
                                <ul>
                                    <li>
                                        <a href='https://www.lendf.me/' target='_blank' rel="noopener noreferrer">
                                            <span className='title'>LendfMe</span>
                                        </a>
                                        <span className='details'>Lend and Borrow</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div className="top-meun-item">
                            <div className="item-fixed">
                                dForce Stablecoin
                                <img alt='' src={arrow_down} className='arrow-down' />
                            </div>
                            <div className="item-more">
                                <ul>
                                    <li>
                                        <a href='https://usdx.dforce.network/' target='_blank' rel="noopener noreferrer">
                                            <span className='title'>USDx</span>
                                        </a>
                                        <span className='details'>Portal</span>
                                    </li>
                                    <li>
                                        <a href='https://dip001.dforce.network/' target='_blank' rel="noopener noreferrer">
                                            <span className='title'>DIP001</span>
                                        </a>
                                        <span className='details'>Collateral Lending Dashboard</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="slogon">
                    <FormattedMessage id='slogon' />
                </div>
            </IntlProvider>
        )
    }

function LeftMenu(props) {
  const intl = useIntl()
  const classes = useStyles();

  const sideList = () => (
    <div
      className={classes.list}
      role="presentation"
    >
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Menu
          </Typography>
        </Toolbar>
      </AppBar>    

      <List>
        <ListItem button component={Link} naked href="/" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"home"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Inicio" description="leftMenu: title of inicio" />} />
        </ListItem>
        <ListItem button component={Link} naked href="/about" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"info"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Quienes somos" description="leftMenu: title of about" />} />
        </ListItem>
        <ListItem button component={Link} naked href="/schedule" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"event"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Programa" description="leftMenu: title of schedule" />} />
        </ListItem>
        {/**<ListItem button component={Link} naked href="/events" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"event"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Eventos" description="leftMenu: title of events" />} />
        </ListItem>
        <ListItem button component={Link} naked href="/contact" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"contact_mail"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Contacto" description="leftMenu: title of contact" />} />
        </ListItem>**/}
      </List>
      <Divider />
    </div>
  );

  return (
    <div>
      <SwipeableDrawer
        onClose={props.onClose}
        onOpen={() => {}}
        open={props.open}
      >
        {sideList()}
      </SwipeableDrawer>
    </div>
  );
}

render() {

        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'Host',
            dataIndex: 'host',
            key: 'host',
            defaultSortOrder: 'ascend',
        }, {
            title: 'Port',
            dataIndex: 'port',
            key: 'port',
        }, {
            title: 'Partitions as Leader',
            dataIndex: 'leaderPartitions',
            key: 'leaderPartitions',
            render: (leaderPartitions, record, index) => {
                return <Tooltip title={leaderPartitions.join('、')}>
                    <Button type="link" size='small'>{leaderPartitions.length}</Button>
                </Tooltip>;
            }
        }, {
            title: 'Partitions as Follower',
            dataIndex: 'followerPartitions',
            key: 'followerPartitions',
            render: (followerPartitions, record, index) => {
                return <Tooltip title={followerPartitions.join('、')}>
                    <Button type="link" size='small'>{followerPartitions.length}</Button>
                </Tooltip>;
            }
        }];

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        title={this.state.clusterName}
                        subTitle={<FormattedMessage id="broker-management" />}
                    />
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={8} key={1}>
                                <Title level={3}>Broker</Title>
                            </Col>
                            <Col span={16} key={2} style={{textAlign: 'right'}}>

                            </Col>
                        </Row>
                    </div>
                    <Table
                        rowKey='id'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'small'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />
                </div>

            </div>
        );
    }