Skip to content

Commit 440bc06

Browse files
simmmplewebsimmmpleweb
committed
Fixed build error
1 parent d892dbd commit 440bc06

File tree

10 files changed

+128
-206
lines changed

10 files changed

+128
-206
lines changed

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"react-calendar": "^3.9.0",
2727
"next": "^13.3.2",
2828
"next-transpile-modules": "^9.0.0",
29+
"react-custom-scrollbars-2": "^4.2.1",
2930
"react-dom": "^18.2.0",
3031
"react-icons": "^4.4.0",
3132
"react-router-dom": "^6.4.0",
@@ -44,9 +45,6 @@
4445
"predeploy": "yarn run build",
4546
"deploy": "gh-pages -d build"
4647
},
47-
"resolutions": {
48-
"react-error-overlay": "6.0.9"
49-
},
5048
"eslintConfig": {
5149
"extends": [
5250
"react-app",
@@ -89,6 +87,7 @@
8987
},
9088
"resolutions": {
9189
"@types/react": "18.0.31",
92-
"@types/react-dom": "18.0.11"
90+
"@types/react-dom": "18.0.11",
91+
"react-error-overlay": "6.0.9"
9392
}
9493
}

‎src/app/AppWrappers.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ const NoSSR = dynamic(() => Promise.resolve(_NoSSR), {
1616
});
1717

1818
export default function AppWrappers({ children }: { children: ReactNode }) {
19+
// @ts-expect-error
1920
return <NoSSR>{children}</NoSSR>;
2021
}

‎src/components/card/CardMenu.tsx‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from "react";
2-
import Dropdown from "components/dropdown";
3-
import { AiOutlineUser } from "react-icons/ai";
4-
import { BsThreeDots } from "react-icons/bs";
5-
import { FiSettings } from "react-icons/fi";
6-
import { AiOutlineShop } from "react-icons/ai";
7-
import { TiLightbulb } from "react-icons/ti";
8-
import { BsThreeDotsVertical } from "react-icons/bs";
1+
import React from 'react';
2+
import Dropdown from 'components/dropdown';
3+
import { AiOutlineUser } from 'react-icons/ai';
4+
import { BsThreeDots } from 'react-icons/bs';
5+
import { FiSettings } from 'react-icons/fi';
6+
import { AiOutlineShop } from 'react-icons/ai';
7+
import { TiLightbulb } from 'react-icons/ti';
8+
import { BsThreeDotsVertical } from 'react-icons/bs';
99

1010
function CardMenu(props: { transparent?: boolean; vertical?: boolean }) {
1111
const { transparent, vertical } = props;
@@ -17,10 +17,10 @@ function CardMenu(props: { transparent?: boolean; vertical?: boolean }) {
1717
onClick={() => setOpen(!open)}
1818
className={`flex items-center text-xl hover:cursor-pointer ${
1919
transparent
20-
? "bg-none text-white hover:bg-none active:bg-none"
20+
? 'bg-none text-white hover:bg-none active:bg-none'
2121
: vertical
22-
? "bg-none text-navy-700 dark:text-white"
23-
: "bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10"
22+
? 'bg-none text-navy-700 dark:text-white'
23+
: 'bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10'
2424
} linear justify-center rounded-lg font-bold transition duration-200`}
2525
>
2626
{vertical ? (
@@ -32,37 +32,36 @@ function CardMenu(props: { transparent?: boolean; vertical?: boolean }) {
3232
)}
3333
</button>
3434
}
35-
animation={"origin-top-right transition-all duration-300 ease-in-out"}
36-
classNames={`${transparent ? "top-8" : "top-11"} right-0 w-max`}
37-
children={
38-
<div className="z-50 w-max rounded-xl bg-white py-3 px-4 text-sm shadow-xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
39-
<p className="hover:text-black flex cursor-pointer items-center gap-2 text-gray-600 hover:font-medium">
40-
<span>
41-
<AiOutlineUser />
42-
</span>
43-
Panel 1
44-
</p>
45-
<p className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
46-
<span>
47-
<AiOutlineShop />
48-
</span>
49-
Panel 2
50-
</p>
51-
<p className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
52-
<span>
53-
<TiLightbulb />
54-
</span>
55-
Panel 3
56-
</p>
57-
<p className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
58-
<span>
59-
<FiSettings />
60-
</span>
61-
Panel 4
62-
</p>
63-
</div>
64-
}
65-
/>
35+
animation={'origin-top-right transition-all duration-300 ease-in-out'}
36+
classNames={`${transparent ? 'top-8' : 'top-11'} right-0 w-max`}
37+
>
38+
<div className="z-50 w-max rounded-xl bg-white px-4 py-3 text-sm shadow-xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
39+
<p className="hover:text-black flex cursor-pointer items-center gap-2 text-gray-600 hover:font-medium">
40+
<span>
41+
<AiOutlineUser />
42+
</span>
43+
Panel 1
44+
</p>
45+
<p className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
46+
<span>
47+
<AiOutlineShop />
48+
</span>
49+
Panel 2
50+
</p>
51+
<p className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
52+
<span>
53+
<TiLightbulb />
54+
</span>
55+
Panel 3
56+
</p>
57+
<p className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
58+
<span>
59+
<FiSettings />
60+
</span>
61+
Panel 4
62+
</p>
63+
</div>
64+
</Dropdown>
6665
);
6766
}
6867

‎src/components/charts/BarChart.tsx‎

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,23 @@
1-
import React from "react";
2-
import Chart from "react-apexcharts";
1+
'use client';
2+
import dynamic from 'next/dynamic';
3+
// import Chart from 'react-apexcharts';
4+
const Chart = dynamic(() => import('react-apexcharts'), {
5+
ssr: false,
6+
});
37

4-
type ChartProps = {
5-
// using `interface` is also ok
6-
[x: string]: any;
7-
};
8-
type ChartState = {
9-
chartData: any[];
10-
chartOptions: any;
11-
};
12-
13-
class ColumnChart extends React.Component<ChartProps, ChartState> {
14-
constructor(props: { chartData: any[]; chartOptions: any }) {
15-
super(props);
16-
this.state = {
17-
chartData: [],
18-
chartOptions: {},
19-
};
20-
}
8+
const BarChart = (props) => {
9+
const { chartData, chartOptions } = props;
2110

22-
componentDidMount() {
23-
this.setState({
24-
chartData: this.props.chartData,
25-
chartOptions: this.props.chartOptions,
26-
});
27-
}
28-
29-
render() {
30-
return (
31-
<Chart
32-
options={this.state.chartOptions}
33-
series={this.state.chartData}
34-
type="bar"
35-
width="100%"
36-
height="100%"
37-
/>
38-
);
39-
}
40-
}
11+
return (
12+
// @ts-expect-error
13+
<Chart
14+
options={chartOptions}
15+
type="bar"
16+
width="100%"
17+
height="100%"
18+
series={chartData}
19+
/>
20+
);
21+
};
4122

42-
export default ColumnChart;
23+
export default BarChart;

‎src/components/charts/LineAreaChart.tsx‎

Lines changed: 20 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,23 @@
1-
import React from 'react';
2-
import ReactApexChart from 'react-apexcharts';
1+
'use client';
2+
import dynamic from 'next/dynamic';
3+
// import Chart from 'react-apexcharts';
4+
const Chart = dynamic(() => import('react-apexcharts'), {
5+
ssr: false,
6+
});
37

4-
type ChartProps = {
5-
// using `interface` is also ok
6-
[x: string]: any;
7-
};
8-
type ChartState = {
9-
chartData: any[];
10-
chartOptions: any;
11-
};
12-
13-
class LineChart extends React.Component<ChartProps, ChartState> {
14-
constructor(props: { chartData: any[]; chartOptions: any }) {
15-
super(props);
8+
const LineAreaChart = (props) => {
9+
const { chartData, chartOptions } = props;
1610

17-
this.state = {
18-
chartData: [],
19-
chartOptions: {}
20-
};
21-
}
22-
23-
componentDidMount() {
24-
this.setState({
25-
chartData: this.props.chartData,
26-
chartOptions: this.props.chartOptions
27-
});
28-
}
29-
30-
render() {
31-
return (
32-
<ReactApexChart
33-
options={this.state.chartOptions}
34-
series={this.state.chartData}
35-
type='area'
36-
width='100%'
37-
height='100%'
38-
/>
39-
);
40-
}
41-
}
11+
return (
12+
// @ts-expect-error
13+
<Chart
14+
options={chartOptions}
15+
type="area"
16+
width="100%"
17+
height="100%"
18+
series={chartData}
19+
/>
20+
);
21+
};
4222

43-
export default LineChart;
23+
export default LineAreaChart;

‎src/components/charts/LineChart.tsx‎

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,23 @@
1-
import React from "react";
2-
import ReactApexChart from "react-apexcharts";
1+
'use client';
2+
import dynamic from 'next/dynamic';
3+
// import Chart from 'react-apexcharts';
4+
const Chart = dynamic(() => import('react-apexcharts'), {
5+
ssr: false,
6+
});
37

4-
type ChartProps = {
5-
// using `interface` is also ok
6-
[x: string]: any;
7-
};
8-
type ChartState = {
9-
chartData: any[];
10-
chartOptions: any;
11-
};
12-
13-
class LineChart extends React.Component<ChartProps, ChartState> {
14-
constructor(props: { chartData: any[]; chartOptions: any }) {
15-
super(props);
8+
const LineChart = (props) => {
9+
const { chartData, chartOptions } = props;
1610

17-
this.state = {
18-
chartData: [],
19-
chartOptions: {},
20-
};
21-
}
22-
23-
componentDidMount() {
24-
this.setState({
25-
chartData: this.props.chartData,
26-
chartOptions: this.props.chartOptions,
27-
});
28-
}
29-
30-
render() {
31-
return (
32-
<ReactApexChart
33-
options={this.state.chartOptions}
34-
series={this.state.chartData}
35-
type="line"
36-
width="100%"
37-
height="100%"
38-
/>
39-
);
40-
}
41-
}
11+
return (
12+
// @ts-expect-error
13+
<Chart
14+
options={chartOptions}
15+
type="line"
16+
width="100%"
17+
height="100%"
18+
series={chartData}
19+
/>
20+
);
21+
};
4222

4323
export default LineChart;

‎src/components/charts/PieChart.tsx‎

Lines changed: 20 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,23 @@
1-
import React from "react";
2-
import ReactApexChart from "react-apexcharts";
1+
'use client';
2+
import dynamic from 'next/dynamic';
3+
// import Chart from 'react-apexcharts';
4+
const Chart = dynamic(() => import('react-apexcharts'), {
5+
ssr: false,
6+
});
37

4-
type ChartProps = {
5-
// using `interface` is also ok
6-
[x: string]: any;
7-
};
8-
type ChartState = {
9-
chartData: any[];
10-
chartOptions: any;
11-
};
12-
13-
class PieChart extends React.Component<ChartProps, ChartState> {
14-
constructor(props: { chartData: any[]; chartOptions: any }) {
15-
super(props);
8+
const LineChart = (props) => {
9+
const { chartData, chartOptions } = props;
1610

17-
this.state = {
18-
chartData: [],
19-
chartOptions: {},
20-
};
21-
}
22-
23-
componentDidMount() {
24-
this.setState({
25-
chartData: this.props.chartData,
26-
chartOptions: this.props.chartOptions,
27-
});
28-
}
29-
30-
render() {
31-
return (
32-
<ReactApexChart
33-
options={this.state.chartOptions}
34-
series={this.state.chartData}
35-
type="pie"
36-
width="100%"
37-
height="100%"
38-
/>
39-
);
40-
}
41-
}
11+
return (
12+
// @ts-expect-error
13+
<Chart
14+
options={chartOptions}
15+
type="line"
16+
width="100%"
17+
height="100%"
18+
series={chartData}
19+
/>
20+
);
21+
};
4222

43-
export default PieChart;
23+
export default LineChart;

0 commit comments

Comments
 (0)