feat(web): general errors

betofigueiredo · Apr 6, 2024 · 6150bcc · 6150bcc
1 parent 54352fd
commit 6150bcc
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 17 deletions.
diff --git a/web/src/components/Errors/Errors.tsx b/web/src/components/Errors/Errors.tsx
@@ -0,0 +1,17 @@
+const Errors = () => {
+  return (
+    <div className="container">
+      <h1 className="mb-6 mt-24 font-serif text-4xl font-bold leading-none text-amber-300">
+        Ops! Ocorreu um erro inesperado.
+      </h1>
+      <p className="text-gray-700">
+        Por favor, recarregue a página para tentar novamente.
+        <br />
+        Se o problema persistir, entre em contato conosco para que possamos
+        resolver isso o mais rápido possível.
+      </p>
+    </div>
+  );
+};
+
+export default Errors;
diff --git a/web/src/components/Errors/index.ts b/web/src/components/Errors/index.ts
@@ -0,0 +1 @@
+export { default } from "./Errors";
diff --git a/web/src/components/Loadings/components/LoadingDrink/LoadingDrink.tsx b/web/src/components/Loadings/components/LoadingDrink/LoadingDrink.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 const LoadingDrink = () => {
   return (
-    <div className="grid grid-cols-[max-content_1fr] gap-4 text-gray-700">
+    <div className="grid grid-cols-[max-content_1fr] gap-4">
       <div className="pr-36 pt-14">
         <Skeleton className="h-[325px] w-[250px] rounded-xl" />
       </div>

diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
@@ -1,15 +1,18 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-slate-100 dark:bg-slate-800", className)}
+      className={cn(
+        "animate-pulse rounded-md bg-gray-100 dark:bg-gray-800",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/web/src/pages/Drink/Drink.tsx b/web/src/pages/Drink/Drink.tsx
@@ -1,7 +1,8 @@
 import { useParams } from "react-router-dom";
 import useGetDrink from "@/api/useGetDrink";
-import DrinkView from "@/components/DrinkView";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
+import DrinkView from "@/components/DrinkView";
 import SimilarDrinks from "@/components/SimilarDrinks";
 
 const Drink = () => {
@@ -17,7 +18,7 @@ const Drink = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   return (

diff --git a/web/src/pages/Drinks/Drinks.tsx b/web/src/pages/Drinks/Drinks.tsx
@@ -4,6 +4,7 @@ import SearchBar from "@/components/SearchBar";
 import DrinksList from "@/components/DrinksList";
 import DrinksListHighlights from "@/components/DrinksListHighlights";
 import Loadings from "@/components/Loadings";
+import Errors from "@/components/Errors";
 
 const Drinks = ({ category }: { category?: string }) => {
   const perPage = category === "caipirinhas" ? 50 : 20;
@@ -26,7 +27,7 @@ const Drinks = ({ category }: { category?: string }) => {
       {!category && <SearchBar />}
       <div className="container">
         {isPending && <Loadings.Drinks />}
-        {error && <div>Erro</div>}
+        {error && <Errors />}
         {!isPending && !error && (
           <div className="grid gap-24 md:grid-cols-[auto,300px]">
             <DrinksList

diff --git a/web/src/pages/Highlight/Highlight.tsx b/web/src/pages/Highlight/Highlight.tsx
@@ -1,5 +1,6 @@
 import { Link, useParams } from "react-router-dom";
 import useGetHighlight from "@/api/useGetHighlight";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import { Button } from "@/components/ui/button";
@@ -17,7 +18,7 @@ const Highlight = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   const highlight = data?.highlight;

diff --git a/web/src/pages/Highlights/Highlights.tsx b/web/src/pages/Highlights/Highlights.tsx
@@ -1,6 +1,7 @@
 import useGetHighlights from "@/api/useGetHighlights";
-import HighlightCard from "@/components/HighlightCard";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
+import HighlightCard from "@/components/HighlightCard";
 
 const Highlights = () => {
   const { isPending, error, data } = useGetHighlights();
@@ -14,7 +15,7 @@ const Highlights = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   const specialOccasions = data?.highlights.filter(

diff --git a/web/src/pages/Instruction/Instruction.tsx b/web/src/pages/Instruction/Instruction.tsx
@@ -1,5 +1,6 @@
 import { useParams } from "react-router-dom";
 import useGetInstruction from "@/api/useGetInstruction";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
 import Breadcrumbs from "@/components/Breadcrumbs";
 
@@ -16,7 +17,7 @@ const Instruction = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   const instruction = data?.instruction;

diff --git a/web/src/pages/Instructions/Instructions.tsx b/web/src/pages/Instructions/Instructions.tsx
@@ -1,6 +1,7 @@
 import useGetInstructions from "@/api/useGetInstructions";
-import InstructionCard from "@/components/InstructionCard";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
+import InstructionCard from "@/components/InstructionCard";
 
 const Instructions = () => {
   const { isPending, error, data } = useGetInstructions();
@@ -14,7 +15,7 @@ const Instructions = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   return (

diff --git a/web/src/pages/Knowledge/Knowledge.tsx b/web/src/pages/Knowledge/Knowledge.tsx
@@ -1,5 +1,6 @@
 import useGetKnowledge from "@/api/useGetKnowledge";
 import Breadcrumbs from "@/components/Breadcrumbs";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
 import { useParams } from "react-router-dom";
 
@@ -16,7 +17,7 @@ const Knowledge = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   const knowledge = data?.knowledge;

diff --git a/web/src/pages/Knowledges/Knowledges.tsx b/web/src/pages/Knowledges/Knowledges.tsx
@@ -1,6 +1,7 @@
 import useGetKnowledges from "@/api/useGetKnowledges";
-import KnowledgeCard from "@/components/KnowledgeCard";
+import Errors from "@/components/Errors";
 import Loadings from "@/components/Loadings";
+import KnowledgeCard from "@/components/KnowledgeCard";
 
 const Knowledges = () => {
   const { isPending, error, data } = useGetKnowledges();
@@ -14,7 +15,7 @@ const Knowledges = () => {
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <Errors />;
   }
 
   return (