my code is and the warning from console is attached.i would appreciate if you can tell me whats the problem...
When i use the "data" which is hardcoded as props i can show them in the components but when i try to fetch from api i can get the data but cant pass it to ui..
import numeral from 'numeral';
import { Box, Card, Grid, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Chart } from '../../chart';
import { useEffect } from 'react';
const ChartLine = () => {
const theme = useTheme();
const chartOptions = {
chart: {
background: 'transparent',
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
colors: ['#2F3EB1'],
dataLabels: {
enabled: false
},
fill: {
opacity: 1
},
grid: {
show: false
},
stroke: {
curve: 'smooth',
width: 3
},
theme: {
mode: theme.palette.mode
},
tooltip: {
enabled: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
show: false
}
};
const chartSeries = [{ data: [256, 282, 221, 245, 235, 274, 234, 256] }];
return (
<Chart
options={chartOptions}
series={chartSeries}
type="area"
/>
);
};
// const data = {
// "Last1WeekQuantity": 0,
// "Last1WeekAmount": 0,
// "Last1MonthQuantity": 3,
// "Last1MonthAmount": 73,
// "Last3MonthQuantity": 3,
// "Last3MonthAmount": 73
// };
export const getServerSideProps = async () => {
const res = await fetch('http://localhost:8080/api/hbreport');
const data = await res.json();
{console.log("consolelog getServerSideProps")}
console.log(data);
return {
props : {
data
}
}
}
export const FinanceOverview = (data) => {
useEffect(() => {
getServerSideProps();
}, []);
return (
<Card {...data}>
{console.log("consolelog under card")}
{console.log(data)}
<Grid container>
<Grid
item
md={4}
xs={12}
sx={{
alignItems: 'center',
borderRight: (theme) => ({
md: `1px solid ${theme.palette.divider}`
}),
borderBottom: (theme) => ({
md: 'none',
xs: `1px solid ${theme.palette.divider}`
}),
display: 'flex',
justifyContent: 'space-between',
p: 3
}}
>
<div>
<Typography
color="textSecondary"
variant="overline"
>
Last Week
</Typography>
<Typography variant="h5">
{data.Last1WeekQuantity} orders
</Typography>
<Typography
color="textSecondary"
variant="body2"
>
{numeral(data.Last1WeekAmount).format('$0,0.00')}
last week
</Typography>
</div>
<Box
sx={{
alignItems: 'center',
display: 'flex',
height: 54,
width: 177
}}
>
<ChartLine />
</Box>
</Grid>
<Grid
item
md={4}
xs={12}
sx={{
alignItems: 'center',
borderRight: (theme) => ({
md: `1px solid ${theme.palette.divider}`
}),
borderBottom: (theme) => ({
xs: `1px solid ${theme.palette.divider}`,
md: 'none'
}),
display: 'flex',
justifyContent: 'space-between',
p: 3
}}
>
<div>
<Typography
color="textSecondary"
variant="overline"
>
Last Month
</Typography>
<Typography variant="h5">
{data.Last1MonthQuantity} orders
</Typography>
<Typography
color="textSecondary"
variant="body2"
>
{numeral(data.Last1MonthAmount).format('$0,0.00')}
last month
</Typography>
</div>
<Box
sx={{
alignItems: 'center',
display: 'flex',
height: 54,
width: 177
}}
>
<ChartLine />
</Box>
</Grid>
<Grid
item
md={4}
xs={12}
sx={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
p: 3
}}
>
<div>
<Typography
color="textSecondary"
variant="overline"
>
Last 3 Month
</Typography>
<Typography variant="h5">
{data.Last3MonthQuantity} orders
</Typography>
<Typography
color="textSecondary"
variant="body2"
>
{numeral(data.Last3MonthAmount).format('$0,0.00')}
last 3 month
</Typography>
</div>
<Box
sx={{
alignItems: 'center',
display: 'flex',
height: 54,
width: 177
}}
>
<ChartLine />
</Box>
</Grid>
</Grid>
</Card>
);}
Console :
[Fast Refresh] done in 525ms
under card
{} ---- > empty array
undergetServerSideProps
{Last1WeekQuantity: 0, Last1WeekAmount: 0, Last1MonthQuantity: 3, Last1MonthAmount: 73, Last3MonthQuantity: 3, …}
I try to fetch the data and pass it to components
