import Disqus from "disqus-react" import PropTypes from 'prop-types'; import React from 'react'; import {FacebookProvider, Comments as FacebookComments} from 'react-facebook'; import {Paper, Tab, Tabs} from '@material-ui/core'; import {makeStyles} from '@material-ui/core/styles'; const disqusConfig = { url: "https://covid-19.direct/country/", identifier: "world-frontpage", title: "world page" }; // Facebook comments are lazily loaded, so we have to render it ahead of time // even though it'd be better to not. const useStyles = makeStyles(theme => ({ 'scrollPane': { overflow: 'scroll', maxHeight: '80vh', }, 'hide': { display: 'none', }, })); export const Discussion = (props) => { const classes = useStyles(); const sources = [{ 'label': 'Disqus comments', 'content': <Disqus.DiscussionEmbed shortname={"covid19direct-world"} config={disqusConfig} /> }, { 'label': 'Facebook', 'content': <FacebookProvider appId="201788627783795"> <FacebookComments href="https://covid-19.direct/" /> </FacebookProvider>, }]; const [source, setSource] = React.useState(0); const change = (e, to) => { setSource(to); }; return ( <Paper className={props.className}> <Tabs value={source} onChange={change}> {sources.map(({label}, i) => <Tab key={label} label={label} value={i} /> )} </Tabs> <div className={classes.scrollPane}> {sources.map(({label, content}, i) => <div key={label} className={source !== i ? classes.hide : ''}> {content} </div> )} </div> </Paper> ); }; Discussion.propTypes = { className: PropTypes.string, };