Skip to content

Commit 05ae4e7

Browse files
author
jamir45
committed
authguard issue and useEffect warning have rosolved
1 parent 5c039ba commit 05ae4e7

16 files changed

+25074
-2857
lines changed

‎package-lock.json

+24,492-2,755
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"clsx": "^1.1.1",
1616
"cross-fetch": "^3.1.4",
1717
"date-fns": "^2.26.0",
18-
"echarts": "^4.8.0",
19-
"echarts-for-react": "^2.0.16",
18+
"echarts": "^5.2.2",
19+
"echarts-for-react": "^3.0.2",
2020
"formik": "^2.2.9",
2121
"jsonwebtoken": "^8.5.1",
2222
"jwt-decode": "^3.1.2",

‎src/app/App.jsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import '../fake-db'
22
import React from 'react'
33
import { Store } from './redux/Store'
44
import { Provider } from 'react-redux'
5+
import { AllPages } from './routes/routes'
6+
import { MatxTheme } from 'app/components'
7+
import { useRoutes } from 'react-router-dom'
58
import { AuthProvider } from 'app/contexts/JWTAuthContext'
6-
import { Routes, Route, Navigate, useRoutes } from 'react-router-dom'
79
import { SettingsProvider } from 'app/contexts/SettingsContext'
8-
import { MatxTheme } from 'app/components'
9-
import { AllPages } from './routes/routes'
1010

1111
const App = () => {
1212
const all_pages = useRoutes(AllPages())
@@ -15,12 +15,7 @@ const App = () => {
1515
<Provider store={Store}>
1616
<SettingsProvider>
1717
<MatxTheme>
18-
<AuthProvider>
19-
{all_pages}
20-
<Routes>
21-
<Route path='/' element={<Navigate to="/dashboard/default" />} />
22-
</Routes>
23-
</AuthProvider>
18+
<AuthProvider>{all_pages}</AuthProvider>
2419
</MatxTheme>
2520
</SettingsProvider>
2621
</Provider>

‎src/app/auth/AuthGuard.jsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
2-
import { useNavigate } from 'react-router-dom'
32
import useAuth from 'app/hooks/useAuth'
3+
import { Navigate } from 'react-router-dom'
44

55
const AuthGuard = ({ children }) => {
66
const { isAuthenticated } = useAuth()
7-
const redirect = useNavigate();
8-
let authenticated = isAuthenticated;
97

10-
return <>{authenticated ? children : redirect("/session/signin")}</>;
8+
return <>{isAuthenticated ? children : <Navigate to="/session/signin" />}</>
119
}
1210

1311
export default AuthGuard

‎src/app/components/MatxLayout/Layout1/Layout1.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ const Layout1 = () => {
8080
let mode = isMdScreen ? 'close' : sidebarMode
8181
updateSettings({ layout1Settings: { leftSidebar: { mode } } })
8282
}
83+
// eslint-disable-next-line react-hooks/exhaustive-deps
8384
}, [isMdScreen])
8485

8586
return (

‎src/app/components/MatxTheme/EchartTheme.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import echarts from 'echarts'
1+
import * as echarts from 'echarts'
22

33
export const EchartTheme = (MuiTheme) => ({
44
backgroundColor: MuiTheme.palette.background.paper,

‎src/app/components/charts/EchartCreator.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import echarts from 'echarts'
2+
import * as echarts from 'echarts'
33
import ReactEcharts from 'echarts-for-react'
44
import PropTypes from 'prop-types'
55
import { EchartTheme } from 'app/components'

‎src/app/routes/routes.jsx

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
import AuthGuard from "app/auth/AuthGuard";
2-
import NotFound from "app/views/sessions/NotFound";
3-
import chartsRoute from "app/views/charts/ChartsRoute";
4-
import materialRoutes from "app/views/material-kit/MaterialRoutes";
5-
import dashboardRoutes from "app/views/dashboard/DashboardRoutes";
6-
import sessionRoutes from "app/views/sessions/SessionRoutes";
1+
import AuthGuard from 'app/auth/AuthGuard'
2+
import NotFound from 'app/views/sessions/NotFound'
3+
import chartsRoute from 'app/views/charts/ChartsRoute'
4+
import materialRoutes from 'app/views/material-kit/MaterialRoutes'
5+
import dashboardRoutes from 'app/views/dashboard/DashboardRoutes'
6+
import sessionRoutes from 'app/views/sessions/SessionRoutes'
77
import MatxLayout from '../components/MatxLayout/MatxLayout'
8+
import { Navigate } from 'react-router-dom'
89

910
export const AllPages = () => {
10-
const all_routes = [
11-
{
12-
path: "/",
13-
element: (
14-
<AuthGuard>
15-
<MatxLayout />
16-
</AuthGuard>
17-
),
18-
children: [
19-
...dashboardRoutes,
20-
...chartsRoute,
21-
...materialRoutes,
22-
],
23-
},
24-
...sessionRoutes,
25-
{
26-
path: "*",
27-
element: <NotFound />,
28-
},
29-
];
11+
const all_routes = [
12+
{
13+
element: (
14+
<AuthGuard>
15+
<MatxLayout />
16+
</AuthGuard>
17+
),
18+
children: [...dashboardRoutes, ...chartsRoute, ...materialRoutes],
19+
},
20+
...sessionRoutes,
21+
{
22+
path: '/',
23+
element: <Navigate to="dashboard/default" />,
24+
},
25+
{
26+
path: '*',
27+
element: <NotFound />,
28+
},
29+
]
3030

31-
return all_routes;
32-
}
31+
return all_routes
32+
}

‎src/app/views/cards/echarts/AppEchart.jsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react'
2+
import LineChart from './LineChart'
3+
import AreaChart from './AreaChart'
4+
import { useTheme, Box, styled } from '@mui/system'
5+
import DoughnutChart from './Doughnut'
6+
import ComparisonChart from './ComparisonChart'
7+
import SimpleCard from 'app/components/cards/SimpleCard'
8+
import Breadcrumb from 'app/components/Breadcrumb/Breadcrumb'
9+
10+
const Container = styled('div')(({ theme }) => ({
11+
margin: '30px',
12+
[theme.breakpoints.down('sm')]: {
13+
margin: '16px',
14+
},
15+
'& .breadcrumb': {
16+
marginBottom: '30px',
17+
[theme.breakpoints.down('sm')]: {
18+
marginBottom: '16px',
19+
},
20+
},
21+
}))
22+
23+
const AppEchart = () => {
24+
const theme = useTheme()
25+
return (
26+
<Container>
27+
<div className="breadcrumb">
28+
<Breadcrumb
29+
routeSegments={[
30+
{ name: 'Charts', path: '/charts' },
31+
{ name: 'Echarts' },
32+
]}
33+
/>
34+
</div>
35+
36+
<SimpleCard title="Doughnut Chart">
37+
<DoughnutChart
38+
height="350px"
39+
color={[
40+
theme.palette.primary.dark,
41+
theme.palette.primary.main,
42+
theme.palette.primary.light,
43+
]}
44+
/>
45+
</SimpleCard>
46+
<Box sx={{ py: '12px' }} />
47+
<SimpleCard title="Line Chart">
48+
<LineChart
49+
height="350px"
50+
color={[
51+
theme.palette.primary.main,
52+
theme.palette.primary.light,
53+
]}
54+
/>
55+
</SimpleCard>
56+
<Box sx={{ py: '12px' }} />
57+
<SimpleCard title="Comparison Chart">
58+
<ComparisonChart
59+
height="350px"
60+
color={[
61+
theme.palette.primary.dark,
62+
// theme.palette.primary.main,
63+
theme.palette.primary.light,
64+
]}
65+
/>
66+
</SimpleCard>
67+
<Box sx={{ py: '12px' }} />
68+
<SimpleCard title="Area Chart">
69+
<AreaChart
70+
height="350px"
71+
color={[theme.palette.primary.main]}
72+
/>
73+
</SimpleCard>
74+
</Container>
75+
)
76+
}
77+
78+
export default AppEchart

‎src/app/views/cards/echarts/AreaChart.jsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
import ReactEcharts from 'echarts-for-react'
3+
4+
const option = {
5+
grid: {
6+
left: 0,
7+
top: 0,
8+
right: 0,
9+
bottom: 0,
10+
},
11+
legend: {},
12+
tooltip: {},
13+
xAxis: {
14+
show: false,
15+
type: 'category',
16+
showGrid: false,
17+
boundaryGap: false,
18+
},
19+
yAxis: {
20+
show: false,
21+
type: 'value',
22+
splitLine: {
23+
show: false,
24+
},
25+
},
26+
series: [
27+
{
28+
// data: [13, 4, 15, 6, 30, 8, 43],
29+
data: [25, 18, 20, 30, 40, 43],
30+
type: 'line',
31+
areaStyle: {},
32+
smooth: true,
33+
},
34+
],
35+
}
36+
37+
const AreaChart = ({ height, color }) => {
38+
return (
39+
<ReactEcharts
40+
style={{ height: height }}
41+
option={{
42+
...option,
43+
color: [...color],
44+
}}
45+
/>
46+
)
47+
}
48+
49+
export default AreaChart

‎src/app/views/cards/echarts/ComparisonChart.jsx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from 'react'
2+
import { useTheme } from '@mui/system'
3+
import ReactEcharts from 'echarts-for-react'
4+
5+
const ComparisonChart = ({ height, color = [] }) => {
6+
const theme = useTheme()
7+
8+
const option = {
9+
grid: {
10+
top: '10%',
11+
bottom: '10%',
12+
right: '5%',
13+
},
14+
legend: {
15+
show: false,
16+
},
17+
color: ['#223388', 'rgba(34, 51, 136, 0.8)'],
18+
barGap: 0,
19+
barMaxWidth: '64px',
20+
tooltip: {},
21+
dataset: {
22+
source: [
23+
['Month', 'Website', 'App'],
24+
['Jan', 2200, 1200],
25+
['Feb', 800, 500],
26+
['Mar', 700, 1350],
27+
['Apr', 1500, 1250],
28+
['May', 2450, 450],
29+
['June', 1700, 1250],
30+
],
31+
},
32+
xAxis: {
33+
type: 'category',
34+
axisLine: {
35+
show: false,
36+
},
37+
splitLine: {
38+
show: false,
39+
},
40+
axisTick: {
41+
show: false,
42+
},
43+
axisLabel: {
44+
color: theme.palette.text.secondary,
45+
fontSize: 13,
46+
fontFamily: 'roboto',
47+
},
48+
},
49+
yAxis: {
50+
axisLine: {
51+
show: false,
52+
},
53+
axisTick: {
54+
show: false,
55+
},
56+
splitLine: {
57+
// show: false
58+
lineStyle: {
59+
color: theme.palette.text.secondary,
60+
opacity: 0.15,
61+
},
62+
},
63+
axisLabel: {
64+
color: theme.palette.text.secondary,
65+
fontSize: 13,
66+
fontFamily: 'roboto',
67+
},
68+
},
69+
// Declare several bar series, each will be mapped
70+
// to a column of dataset.source by default.
71+
series: [{ type: 'bar' }, { type: 'bar' }],
72+
}
73+
74+
return (
75+
<ReactEcharts
76+
style={{ height: height }}
77+
option={{
78+
...option,
79+
// color: [...color],
80+
}}
81+
/>
82+
)
83+
}
84+
85+
export default ComparisonChart

0 commit comments

Comments
 (0)