Skip to content

Commit 3a37db6

Browse files
alicanerdurmazalicanerdurmaz
committed
fix: test
1 parent 27d2f2d commit 3a37db6

2 files changed

Lines changed: 254 additions & 226 deletions

File tree

‎refine-nextjs/plugins/shadcn/src/components/refine-ui/layout/error-component.tsx‎

Lines changed: 127 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import React, { useEffect, useState } from "react";
2-
import { useGo, useResourceParams } from "@refinedev/core";
3-
import { useTranslate } from "@refinedev/core";
41
import { Button } from "@/components/ui/button";
52
import {
6-
Tooltip,
7-
TooltipContent,
8-
TooltipProvider,
9-
TooltipTrigger,
3+
Tooltip,
4+
TooltipContent,
5+
TooltipProvider,
6+
TooltipTrigger,
107
} from "@/components/ui/tooltip";
11-
import { ChevronLeft, InfoIcon } from "lucide-react";
128
import { cn } from "@/lib/utils";
9+
import { useGo, useResourceParams, useTranslate } from "@refinedev/core";
10+
import { ChevronLeft, InfoIcon } from "lucide-react";
11+
import React, { useEffect, useState } from "react";
1312

1413
/**
1514
* When the app is navigated to a non-existent route, refine shows a default error page.
@@ -18,118 +17,133 @@ import { cn } from "@/lib/utils";
1817
* @see {@link https://refine.dev/docs/packages/documentation/routers/} for more details.
1918
*/
2019
export function ErrorComponent() {
21-
const [errorMessage, setErrorMessage] = useState<string>();
20+
const [errorMessage, setErrorMessage] = useState<string>();
2221

23-
const translate = useTranslate();
24-
const go = useGo();
22+
const translate = useTranslate();
23+
const go = useGo();
2524

26-
const { resource, action } = useResourceParams();
25+
const { resource, action } = useResourceParams();
2726

28-
useEffect(() => {
29-
if (resource && action) {
30-
setErrorMessage(
31-
translate(
32-
"pages.error.info",
33-
{
34-
action: action,
35-
resource: resource?.name,
36-
},
37-
`You may have forgotten to add the "${action}" component to "${resource?.name}" resource.`,
38-
),
39-
);
40-
}
41-
}, [resource, action, translate]);
27+
useEffect(() => {
28+
if (resource && action) {
29+
setErrorMessage(
30+
translate(
31+
"pages.error.info",
32+
{
33+
action: action,
34+
resource: resource?.name,
35+
},
36+
`You may have forgotten to add the "${action}" component to "${resource?.name}" resource.`,
37+
),
38+
);
39+
}
40+
}, [resource, action, translate]);
4241

43-
return (
44-
<div
45-
className={cn(
46-
"flex",
47-
"items-center",
48-
"justify-center",
49-
"bg-background",
50-
"my-auto",
51-
)}
52-
>
53-
<div className={cn("text-center", "space-y-8")}>
54-
<div className={cn("flex", "justify-center")}>
55-
<svg
56-
width="199"
57-
height="73"
58-
viewBox="0 0 199 73"
59-
fill="none"
60-
xmlns="http://www.w3.org/2000/svg"
61-
className={cn("w-48", "h-auto")}
62-
>
63-
<title>404 text</title>
64-
<path
65-
d="M0.293794 60.0909V45.3636L25.112 1.18182H43.2483L18.9756 44.8182V45.3636H60.4302V60.0909H0.293794ZM34.2483 71V55.7273L34.9302 49.1818V27.3636H51.9756V71H34.2483ZM98.983 72.9091C92.642 72.8864 87.1648 71.4205 82.5511 68.5114C77.9375 65.6023 74.3807 61.4091 71.8807 55.9318C69.3807 50.4545 68.142 43.8864 68.1648 36.2273C68.1875 28.5455 69.4375 22.0227 71.9148 16.6591C74.4148 11.2955 77.9602 7.21591 82.5511 4.42045C87.1648 1.625 92.642 0.22727 98.983 0.22727C105.324 0.22727 110.801 1.63636 115.415 4.45455C120.028 7.25 123.585 11.3295 126.085 16.6932C128.585 22.0568 129.824 28.5682 129.801 36.2273C129.801 43.9318 128.551 50.5227 126.051 56C123.551 61.4773 119.994 65.6705 115.381 68.5795C110.79 71.4659 105.324 72.9091 98.983 72.9091ZM98.983 57.5C102.256 57.5 104.938 55.7955 107.028 52.3864C109.142 48.9545 110.188 43.5682 110.165 36.2273C110.165 31.4318 109.688 27.5114 108.733 24.4659C107.778 21.4205 106.46 19.1705 104.778 17.7159C103.097 16.2386 101.165 15.5 98.983 15.5C95.7102 15.5 93.0398 17.1591 90.9716 20.4773C88.9034 23.7955 87.8466 29.0455 87.8011 36.2273C87.7784 41.1136 88.2443 45.1364 89.1989 48.2955C90.1534 51.4318 91.4716 53.75 93.1534 55.25C94.858 56.75 96.8011 57.5 98.983 57.5ZM138.209 60.0909V45.3636L163.027 1.18182H181.164L156.891 44.8182V45.3636H198.345V60.0909H138.209ZM172.164 71V55.7273L172.845 49.1818V27.3636H189.891V71H172.164Z"
66-
fill="url(#paint0_linear_2672_10455)"
67-
/>
68-
<defs>
69-
<linearGradient
70-
id="paint0_linear_2672_10455"
71-
x1="99"
72-
y1="-16"
73-
x2="99"
74-
y2="88"
75-
gradientUnits="userSpaceOnUse"
76-
>
77-
<stop stopColor="#D4D4D8" />
78-
<stop offset="1" stopColor="#E4E4E7" stopOpacity="0.25" />
79-
</linearGradient>
80-
</defs>
81-
</svg>
82-
</div>
42+
return (
43+
<div
44+
className={cn(
45+
"flex",
46+
"items-center",
47+
"justify-center",
48+
"bg-background",
49+
"my-auto",
50+
)}
51+
>
52+
<div className={cn("text-center", "space-y-8")}>
53+
<div className={cn("flex", "justify-center")}>
54+
<svg
55+
width="199"
56+
height="73"
57+
viewBox="0 0 199 73"
58+
fill="none"
59+
xmlns="http://www.w3.org/2000/svg"
60+
className={cn("w-48", "h-auto")}
61+
>
62+
<title>404 text</title>
63+
<path
64+
d="M0.293794 60.0909V45.3636L25.112 1.18182H43.2483L18.9756 44.8182V45.3636H60.4302V60.0909H0.293794ZM34.2483 71V55.7273L34.9302 49.1818V27.3636H51.9756V71H34.2483ZM98.983 72.9091C92.642 72.8864 87.1648 71.4205 82.5511 68.5114C77.9375 65.6023 74.3807 61.4091 71.8807 55.9318C69.3807 50.4545 68.142 43.8864 68.1648 36.2273C68.1875 28.5455 69.4375 22.0227 71.9148 16.6591C74.4148 11.2955 77.9602 7.21591 82.5511 4.42045C87.1648 1.625 92.642 0.22727 98.983 0.22727C105.324 0.22727 110.801 1.63636 115.415 4.45455C120.028 7.25 123.585 11.3295 126.085 16.6932C128.585 22.0568 129.824 28.5682 129.801 36.2273C129.801 43.9318 128.551 50.5227 126.051 56C123.551 61.4773 119.994 65.6705 115.381 68.5795C110.79 71.4659 105.324 72.9091 98.983 72.9091ZM98.983 57.5C102.256 57.5 104.938 55.7955 107.028 52.3864C109.142 48.9545 110.188 43.5682 110.165 36.2273C110.165 31.4318 109.688 27.5114 108.733 24.4659C107.778 21.4205 106.46 19.1705 104.778 17.7159C103.097 16.2386 101.165 15.5 98.983 15.5C95.7102 15.5 93.0398 17.1591 90.9716 20.4773C88.9034 23.7955 87.8466 29.0455 87.8011 36.2273C87.7784 41.1136 88.2443 45.1364 89.1989 48.2955C90.1534 51.4318 91.4716 53.75 93.1534 55.25C94.858 56.75 96.8011 57.5 98.983 57.5ZM138.209 60.0909V45.3636L163.027 1.18182H181.164L156.891 44.8182V45.3636H198.345V60.0909H138.209ZM172.164 71V55.7273L172.845 49.1818V27.3636H189.891V71H172.164Z"
65+
fill="url(#paint0_linear_2672_10455)"
66+
/>
67+
<defs>
68+
<linearGradient
69+
id="paint0_linear_2672_10455"
70+
x1="99"
71+
y1="-16"
72+
x2="99"
73+
y2="88"
74+
gradientUnits="userSpaceOnUse"
75+
>
76+
<stop stopColor="#D4D4D8" />
77+
<stop
78+
offset="1"
79+
stopColor="#E4E4E7"
80+
stopOpacity="0.25"
81+
/>
82+
</linearGradient>
83+
</defs>
84+
</svg>
85+
</div>
8386

84-
<div className={cn("space-y-4")}>
85-
<h1 className={cn("text-2xl", "font-semibold", "text-foreground")}>
86-
{translate("pages.error.title", "Page not found.")}
87-
</h1>
87+
<div className={cn("space-y-4")}>
88+
<h1
89+
className={cn(
90+
"text-2xl",
91+
"font-semibold",
92+
"text-foreground",
93+
)}
94+
>
95+
{translate("pages.error.title", "Page not found.")}
96+
</h1>
8897

89-
<div
90-
className={cn("flex", "items-center", "justify-center", "gap-2")}
91-
>
92-
<p className={cn("text-muted-foreground")}>
93-
{translate(
94-
"pages.error.description",
95-
"The page you're looking for does not exist.",
96-
)}
97-
</p>
98-
{errorMessage && (
99-
<TooltipProvider>
100-
<Tooltip>
101-
<TooltipTrigger asChild>
102-
<InfoIcon
103-
className={cn(
104-
"h-4",
105-
"w-4",
106-
"text-muted-foreground",
107-
"cursor-help",
108-
)}
109-
data-testid="error-component-tooltip"
110-
/>
111-
</TooltipTrigger>
112-
<TooltipContent>
113-
<p>{errorMessage}</p>
114-
</TooltipContent>
115-
</Tooltip>
116-
</TooltipProvider>
117-
)}
118-
</div>
119-
</div>
98+
<div
99+
className={cn(
100+
"flex",
101+
"items-center",
102+
"justify-center",
103+
"gap-2",
104+
)}
105+
>
106+
<p className={cn("text-muted-foreground")}>
107+
{translate(
108+
"pages.error.description",
109+
"The page you're looking for does not exist.",
110+
)}
111+
</p>
112+
{errorMessage && (
113+
<TooltipProvider>
114+
<Tooltip>
115+
<TooltipTrigger asChild>
116+
<InfoIcon
117+
className={cn(
118+
"h-4",
119+
"w-4",
120+
"text-muted-foreground",
121+
"cursor-help",
122+
)}
123+
data-testid="error-component-tooltip"
124+
/>
125+
</TooltipTrigger>
126+
<TooltipContent>
127+
<p>{errorMessage}</p>
128+
</TooltipContent>
129+
</Tooltip>
130+
</TooltipProvider>
131+
)}
132+
</div>
133+
</div>
120134

121-
<Button
122-
onClick={() => {
123-
go({ to: "/" });
124-
}}
125-
className={cn("flex", "items-center", "gap-2", "mx-auto")}
126-
>
127-
<ChevronLeft className={cn("h-4", "w-4")} />
128-
{translate("pages.error.backHome", "Back to hompeage")}
129-
</Button>
130-
</div>
131-
</div>
132-
);
135+
<Button
136+
onClick={() => {
137+
go({ to: "/" });
138+
}}
139+
className={cn("flex", "items-center", "gap-2", "mx-auto")}
140+
>
141+
<ChevronLeft className={cn("h-4", "w-4")} />
142+
{translate("pages.error.backHome", "Back to homepage")}
143+
</Button>
144+
</div>
145+
</div>
146+
);
133147
}
134148

135149
ErrorComponent.displayName = "ErrorComponent";

0 commit comments

Comments
 (0)