/* * (C) Copyright IBM Corp. 2020 All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ import React from 'react'; import { useTranslate } from 'ReactCustomHooks'; import { Body, Subheading, Heading } from 'Elements'; import { Consumer, Producer } from 'Panels'; import { ConfigContextConsumer } from 'Contexts'; import { NO_OP } from 'Utils'; import { Grid, Column, Row } from 'carbon-components-react'; import translations from './i18n.json'; import { PropTypes } from 'prop-types'; import clsx from 'clsx'; import es_logo from 'Images/es_logo.svg'; const App = (props) => { const translate = useTranslate(translations); const { consumer, producer, websocketFactory, className } = props; const commonColumnProps = { lg: 6, }; return ( <main className={clsx('App', className)}> <Grid> <ConfigContextConsumer> {({ topic, producerPath, consumerPath }) => ( <Row> <Column {...commonColumnProps} className={'App'}> <Grid className={'App__producer'}> <Row> <Column> <div className={'App__summary'}> <img alt={translate('logo_alt', {}, true)} src={es_logo} className={'App App__summary_icon'} /> <div> <Subheading className={'App App__summary_subheading'}> {translate('app_name')} </Subheading> </div> <div> <Heading className={'App App__summary_heading'}> {translate('heading')} </Heading> </div> <div className={'App__summary_body-container'}> <Body className={'App App__summary_body'}> {translate('body')} </Body> </div> </div> </Column> </Row> <Row> <Column> {producer && ( <Producer getProducerWebsocket={websocketFactory(producerPath)} topic={topic} /> )} </Column> </Row> </Grid> </Column> <Column {...commonColumnProps} className={'App App__column--consumer'} > <Grid> <Row> <Column> {consumer && ( <Consumer getConsumerWebsocket={websocketFactory(consumerPath)} topic={topic} /> )} </Column> </Row> </Grid> </Column> </Row> )} </ConfigContextConsumer> </Grid> </main> ); }; App.propTypes = { consumer: PropTypes.bool, producer: PropTypes.bool, className: PropTypes.string, websocketFactory: PropTypes.func.isRequired, }; App.defaultProps = { consumer: false, producer: false, websocketFactory: NO_OP, }; export { App };