added download toast optimize chart load skeleton

airqo-platform · Oct 26, 2024 · 39fa56b · 39fa56b
1 parent 420962e
commit 39fa56b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git a/platform/public/icons/Analytics/checkCircleIcon.js b/platform/public/icons/Analytics/checkCircleIcon.js
@@ -1,14 +1,13 @@
 import React from 'react';
 
-const checkCircleIcon = (props) => {
+const CheckCircleIcon = ({ width, height }) => {
   return (
     <svg
-      width={20}
-      height={20}
+      width={width || 20}
+      height={height || 20}
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       <path
         d="M18.334 9.237v.767a8.334 8.334 0 11-4.942-7.617m4.942.946L10 11.674l-2.5-2.5"
@@ -21,4 +20,4 @@ const checkCircleIcon = (props) => {
   );
 };
 
-export default checkCircleIcon;
+export default CheckCircleIcon;
diff --git a/platform/src/common/components/Charts/ChartContainer.jsx b/platform/src/common/components/Charts/ChartContainer.jsx
@@ -10,8 +10,7 @@ import MoreInsightsChart from './MoreInsightsChart';
 import SkeletonLoader from './components/SkeletonLoader';
 import { setOpenModal, setModalType } from '@/lib/store/services/downloadModal';
 import useFetchAnalyticsData from '@/core/utils/useFetchAnalyticsData';
-// import { toast } from 'sonner';
-// import checkCircleIcon from '@/icons/Analytics/checkCircleIcon';
+import CustomToast from '../Toast/CustomToast';
 
 const ChartContainer = memo(
   ({
@@ -97,9 +96,9 @@ const ChartContainer = memo(
           const link = document.createElement('a');
           link.href = imgData;
           link.download = `airquality-data.${format}`;
-          document.body.appendChild(link); // Append to body to make it clickable in Firefox
+          document.body.appendChild(link);
           link.click();
-          document.body.removeChild(link); // Remove after clicking
+          document.body.removeChild(link);
         } else if (format === 'pdf') {
           const pdf = new jsPDF({
             orientation: 'landscape',
@@ -114,12 +113,7 @@ const ChartContainer = memo(
         }
 
         setDownloadComplete(format);
-        // toast('Download complete', {
-        //   className: 'bg-black text-white p-2 rounded-md max-w-xs',
-        //   duration: 5000,
-        //   position: 'bottom-center',
-        //   icon: <checkCircleIcon width={20} height={20} />,
-        // });
+        CustomToast();
       } catch (error) {
         console.error('Error exporting chart:', error);
       } finally {
@@ -204,7 +198,7 @@ const ChartContainer = memo(
     );
 
     const ErrorOverlay = () => (
-      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-400 bg-opacity-50 z-10">
         <p className="text-red-500 font-semibold">
           Something went wrong. Please try again.
         </p>
@@ -249,7 +243,7 @@ const ChartContainer = memo(
 
             {!chartLoading && error && <ErrorOverlay />}
 
-            {!chartLoading && !error && allSiteData?.length > 0 ? (
+            {!chartLoading && !error && allSiteData?.length > 0 && (
               <MoreInsightsChart
                 data={allSiteData}
                 selectedSites={chartSites}
@@ -261,7 +255,7 @@ const ChartContainer = memo(
                 pollutantType={pollutionType}
                 isLoading={chartLoading}
               />
-            ) : null}
+            )}
           </div>
         </div>
 

diff --git a/platform/src/common/components/Charts/MoreInsightsChart.jsx b/platform/src/common/components/Charts/MoreInsightsChart.jsx
@@ -179,7 +179,7 @@ const MoreInsightsChart = React.memo(
      * Render the chart or appropriate messages based on state
      */
     const renderChart = useMemo(() => {
-      if (chartData.length === 0 && !isLoading) {
+      if (chartData.length === 0 && isLoading) {
         return (
           <div className="w-full flex flex-col justify-center items-center h-[380px] text-gray-500">
             <p className="text-lg font-medium mb-2">No Data Available</p>

diff --git a/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx b/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx
@@ -19,6 +19,7 @@ import { exportDataApi } from '@/core/apis/Analytics';
 import jsPDF from 'jspdf';
 import 'jspdf-autotable';
 import { saveAs } from 'file-saver';
+import CustomToast from '../../../Toast/CustomToast';
 
 /**
  * Header component for the Download Data modal.
@@ -214,7 +215,8 @@ const DataDownload = ({ onClose }) => {
           throw new Error('Unsupported file type');
         }
 
-        // Optionally, provide user feedback (e.g., toast notification)
+        // Show success toast
+        CustomToast();
 
         // Clear selections after successful download
         handleClearSelection();

diff --git a/platform/src/common/components/Toast/CustomToast.jsx b/platform/src/common/components/Toast/CustomToast.jsx
@@ -0,0 +1,20 @@
+import { toast } from 'sonner';
+import CheckCircleIcon from '@/icons/Analytics/checkCircleIcon';
+
+const CustomToast = () => {
+  toast('Download complete', {
+    className:
+      'bg-blue-600 text-white p-3 rounded-xl max-w-[200px] w-full flex items-center justify-center space-x-2',
+    duration: 5000,
+    position: 'bottom-center',
+    style: {
+      left: '50%',
+      transform: 'translateX(10%)',
+      bottom: '10px',
+      position: 'fixed',
+    },
+    icon: <CheckCircleIcon width={20} height={20} className="text-white" />,
+  });
+};
+
+export default CustomToast;