import React, { Fragment } from 'react'; import { NavLink, Redirect } from 'react-router-dom'; import Sidebar from './sidebar'; import { EditIcon } from './icons'; import CONFIG from './fields-config.json'; const Overview = (props) => { var data_layer = 'age'; // always default if (props.match && props.match.params && props.match.params.cat) { data_layer = props.match.params.cat; } if (props.mode === 'edit' && !props.user){ return <Redirect to="/sign-up.html" /> } let title = (props.mode === 'view')? 'View maps' : 'Add or edit data'; let back = (props.mode === 'edit')? `/view/${data_layer}.html` : undefined; return ( <Sidebar title={title} back={back}> { CONFIG.map((data_group) => ( <OverviewSection {...data_group} data_layer={data_layer} key={data_group.slug} mode={props.mode} /> )) } </Sidebar> ); } const OverviewSection = (props) => { const match = props.data_layer === props.slug; const inactive = props.inactive; return ( <section className={(inactive? 'inactive ': '') + 'data-section legend'}> <header className={`section-header ${props.mode} ${props.slug} ${(match? 'active' : '')}`}> <NavLink to={`/${props.mode}/${props.slug}.html`} isActive={() => match} title={(inactive)? 'Coming soon… Click the ? for more info.' : (match)? '' : 'Show on map'}> <h3 className="h3">{props.title}</h3> </NavLink> <nav className="icon-buttons"> { props.help? <a className="icon-button help" href={props.help}> Info </a> : null } { props.mode === 'view'? <NavLink className="icon-button edit" title="Edit data" to={`/edit/${props.slug}.html`}> Edit <EditIcon /> </NavLink> : null } </nav> </header> { (match && props.intro)? ( <Fragment> <p className="data-intro">{props.intro}</p> <ul> { props.fields.map((field) => { return (<li key={field.slug}>{field.title}</li>) }) } </ul> </Fragment> ) : null } </section> ) }; export default Overview;