From b8e9645262b5e7c1ad8c74414cbca2006b2bc2f6 Mon Sep 17 00:00:00 2001
From: Lucas Tavares <lucastavarestt@gmail.com>
Date: Thu, 12 Dec 2024 14:47:36 -0300
Subject: [PATCH 1/2] feat: loading

---
 .../v1/[...modelView]/page.tsx                | 23 +++++++-
 .../radar/mendanha/[...radarView]/page.tsx    | 24 +++++++-
 .../satelite/[...sateliteView]/page.tsx       | 57 ++++++++++++-------
 3 files changed, 80 insertions(+), 24 deletions(-)

diff --git a/src/app/(demo)/previsao-de-chuva/v1/[...modelView]/page.tsx b/src/app/(demo)/previsao-de-chuva/v1/[...modelView]/page.tsx
index 52723e8..e7f60cf 100644
--- a/src/app/(demo)/previsao-de-chuva/v1/[...modelView]/page.tsx
+++ b/src/app/(demo)/previsao-de-chuva/v1/[...modelView]/page.tsx
@@ -18,10 +18,12 @@ const ModelView = ({ params }: ModelViewProps) => {
   const [view] = params.modelView;
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const time_horizon_ = "1h";
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true);
       try {
         const rootUrl = process.env.NEXT_PUBLIC_ENV === 'production'
           ? process.env.NEXT_PUBLIC_ROOT_URL_PROD
@@ -31,7 +33,9 @@ const ModelView = ({ params }: ModelViewProps) => {
         const result = await response.json();
         setData(result);
       } catch (error) {
-        console.error('Error fetching data:', error);
+        setError("Failed to fetch data");
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -39,7 +43,17 @@ const ModelView = ({ params }: ModelViewProps) => {
   }, [view]);
 
   if (error) {
-    return <div>{error}</div>;
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+        <p className="text-white mb-4">{error}</p>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+          onClick={() => location.reload()} // Simple refresh to retry
+        >
+          Algo deu errado. Tente novamente.
+        </button>
+      </div>
+    );
   }
 
   const product = data?.product || {};
@@ -60,6 +74,11 @@ const ModelView = ({ params }: ModelViewProps) => {
 
   return (
     <ModelLayout title="Modelo">
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+        </div>
+      )}
       <>
         <ModelLayer name={name} modelView={view} time_horizon={time_horizon_} />
         <ColorLabel colorStops={productLabel} unit={unit} />
diff --git a/src/app/(demo)/radar/mendanha/[...radarView]/page.tsx b/src/app/(demo)/radar/mendanha/[...radarView]/page.tsx
index 43bd7e8..740d499 100644
--- a/src/app/(demo)/radar/mendanha/[...radarView]/page.tsx
+++ b/src/app/(demo)/radar/mendanha/[...radarView]/page.tsx
@@ -30,10 +30,12 @@ const RadarView = ({ params }: RadarViewProps) => {
   const [indice, view] = params.radarView;
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   // const indice = "reflectivity".toLowerCase();  // forço o valor do índice
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true);
       try {
         const rootUrl = process.env.NEXT_PUBLIC_ENV === 'production'
           ? process.env.NEXT_PUBLIC_ROOT_URL_PROD
@@ -44,8 +46,9 @@ const RadarView = ({ params }: RadarViewProps) => {
         setData(result);
       }
       catch (error) {
-        // console.error('Error fetching data:', error);
-        // setError('Failed to fetch data');
+        setError("Failed to fetch data");
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -53,7 +56,17 @@ const RadarView = ({ params }: RadarViewProps) => {
   }, [indice]);
 
   if (error) {
-    return <div>{error}</div>;
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+        <p className="text-white mb-4">{error}</p>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+          onClick={() => location.reload()} // Simple refresh to retry
+        >
+          Algo deu errado. Tente novamente.
+        </button>
+      </div>
+    );
   }
 
   const product = data?.product || {};
@@ -74,6 +87,11 @@ const RadarView = ({ params }: RadarViewProps) => {
 
   return (
     <RadarLayout title="Radar">
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+        </div>
+      )}
       {
         <>
           <RadarLayer name={name} radarView={indice} />
diff --git a/src/app/(demo)/satelite/[...sateliteView]/page.tsx b/src/app/(demo)/satelite/[...sateliteView]/page.tsx
index a62e3bd..fcf6d13 100644
--- a/src/app/(demo)/satelite/[...sateliteView]/page.tsx
+++ b/src/app/(demo)/satelite/[...sateliteView]/page.tsx
@@ -8,7 +8,6 @@ import SatelliteLayer from "@/components/satelite-map";
 import ColorLabel from "@/components/color-label";
 import { LineChartComponent } from "@/components/ui/line-chart";
 
-
 interface SateliteViewProps {
   params: {
     sateliteView: string[];
@@ -16,25 +15,26 @@ interface SateliteViewProps {
 }
 
 const SateliteView = ({ params }: SateliteViewProps) => {
-
   const [indice, view] = params.sateliteView;
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true); // Start loading
       try {
-        const rootUrl = process.env.NEXT_PUBLIC_ENV === 'production'
+        const rootUrl = process.env.NEXT_PUBLIC_ENV === "production"
           ? process.env.NEXT_PUBLIC_ROOT_URL_PROD
           : process.env.NEXT_PUBLIC_ROOT_URL_DEV;
         const apiUrl = `${rootUrl}satellite/info/${indice.toLowerCase()}`;
         const response = await fetch(apiUrl);
         const result = await response.json();
         setData(result);
-      }
-      catch (error) {
-        // console.error('Error fetching data:', error);
-        // setError('Failed to fetch data');
+      } catch (error) {
+        setError("Failed to fetch data");
+      } finally {
+        setIsLoading(false); // Stop loading
       }
     };
 
@@ -42,7 +42,17 @@ const SateliteView = ({ params }: SateliteViewProps) => {
   }, [indice]);
 
   if (error) {
-    return <div>{error}</div>;
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+        <p className="text-white mb-4">{error}</p>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+          onClick={() => location.reload()} // Simple refresh to retry
+        >
+          Algo deu errado. Tente novamente.
+        </button>
+      </div>
+    );
   }
 
   const product = data?.product || {};
@@ -63,18 +73,27 @@ const SateliteView = ({ params }: SateliteViewProps) => {
 
   return (
     <SateliteLayout title="Satélite" view={view} indice={indice}>
-      {
-        view == "mapa" ? (
-          <>
-            <SatelliteLayer name={name} sateliteView={indice} />
-            <ColorLabel colorStops={productLabel} unit={unit} />
-          </>
-        ) : (
-          <LineChartComponent unit={unit} valueRange={valueRange} stepRange={stepRange} name={name} sateliteView={indice} />
-        )
-      }
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+        </div>
+      )}
+      {view === "mapa" ? (
+        <>
+          <SatelliteLayer name={name} sateliteView={indice} />
+          <ColorLabel colorStops={productLabel} unit={unit} />
+        </>
+      ) : (
+        <LineChartComponent
+          unit={unit}
+          valueRange={valueRange}
+          stepRange={stepRange}
+          name={name}
+          sateliteView={indice}
+        />
+      )}
     </SateliteLayout>
   );
 };
 
-export default SateliteView;
\ No newline at end of file
+export default SateliteView;

From 573268489f9c437f040417874413f8fe5fc3df06 Mon Sep 17 00:00:00 2001
From: Lucas Tavares <lucastavarestt@gmail.com>
Date: Fri, 13 Dec 2024 08:55:11 -0300
Subject: [PATCH 2/2] fix: increased rain forecast slider time

---
 src/components/time-slider-previsao.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/time-slider-previsao.tsx b/src/components/time-slider-previsao.tsx
index ce4d7b6..5241366 100644
--- a/src/components/time-slider-previsao.tsx
+++ b/src/components/time-slider-previsao.tsx
@@ -54,7 +54,7 @@ export function TimeSliderPrevisao({
           onTimeChange(newValue);
           return newValue;
         });
-      }, 1200);
+      }, 3600);
     } else if (interval) {
       clearInterval(interval);
     }