import React, { useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { Tabs, Spin } from 'antd' import useCurrency from '../hooks/useCurrency' import Pane1 from './Pane1' import Pane2 from './Pane2' import * as actionCreators from '../../state/actionCreators' const { TabPane } = Tabs const Content = ({ currency, storeId }) => { const dispatch = useDispatch() const sign = useCurrency(currency) useEffect(() => { dispatch(actionCreators.getSalesHistory()) dispatch(actionCreators.setLoading(false)) }, [dispatch, storeId]) const dashboard = useSelector(state => state.dashboard) const isLoading = useSelector(state => state.user.isLoading) return ( <div> <Tabs defaultActiveKey='1' className='content'> <TabPane tab='Overview' key='1'> <Spin spinning={isLoading}> <Pane1 currency={sign} amount={dashboard && dashboard.totalSales} monthSales={dashboard && dashboard.monthSales} /> </Spin> </TabPane> <TabPane tab='Sales History' key='2'> {dashboard && dashboard.transactionDetails && dashboard.transactionDetails.length > 0 ? ( dashboard.transactionDetails.map(sale => ( <Pane2 currencySymbol={sign} currency={currency && currency.toUpperCase()} key={sale._id} name={sale.name.trim()} price={sale.price} description={sale.description} checkoutDate={sale.checkoutDate} quantity={sale.quantity} /> )) ) : ( <p>You haven't made any sales yet</p> )} </TabPane> </Tabs> </div> ) } export default Content // get dashboard details from the dashboard component // run the component did mount function from the main component