index.js
30 lines
| 1 | import {useLocation} from 'react-router-dom'; |
| 2 | import {useSelector} from 'react-redux'; |
| 3 | import {Fragment} from 'react'; |
| 4 | import Heading from '../heading'; |
| 5 | import {__} from '@wordpress/i18n'; |
| 6 | |
| 7 | import './style.scss'; |
| 8 | |
| 9 | const TabContent = () => { |
| 10 | const location = useLocation(); |
| 11 | const tabsSelector = useSelector((state) => state.tabs); |
| 12 | const applicationError = useSelector((state) => state.applicationError); |
| 13 | |
| 14 | const slug = location.pathname.length > 2 ? location.pathname.split('/')[1] : 'dashboard'; |
| 15 | const Content = tabsSelector[slug] ? tabsSelector[slug].content : null; |
| 16 | |
| 17 | return ( |
| 18 | <div className="give-donor-dashboard-tab-content"> |
| 19 | {applicationError ? ( |
| 20 | <Fragment> |
| 21 | <Heading icon="exclamation-triangle">{__('Error', 'give')}</Heading> |
| 22 | <p style={{color: '#6b6b6b'}}>{applicationError}</p> |
| 23 | </Fragment> |
| 24 | ) : null} |
| 25 | {Content && applicationError === null ? <Content /> : null} |
| 26 | </div> |
| 27 | ); |
| 28 | }; |
| 29 | export default TabContent; |
| 30 |