refactor: changed toast to have centralized state management and sing…

dashboard/components/cloud-account/components/CloudAccountDeleteContents.tsx

@@ -1,22 +1,22 @@
 import { useState } from 'react';
+import { ToastProps } from '@components/toast/Toast';
 import AlertCircleIcon from '../../icons/AlertCircleIcon';
 import Button from '../../button/Button';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 import settingsService from '../../../services/settingsService';
-import { ToastProps } from '../../toast/hooks/useToast';
 
 interface CloudAccountDeleteContentsProps {
   cloudAccount: CloudAccount;
   onCancel: () => void;
   handleAfterDelete: (account: CloudAccount) => void;
-  setToast: (toast: ToastProps) => void;
+  showToast: (toast: ToastProps) => void;
 }
 
 function CloudAccountDeleteContents({
   cloudAccount,
   onCancel,
   handleAfterDelete,
-  setToast
+  showToast
 }: CloudAccountDeleteContentsProps) {
   const [loading, setLoading] = useState(false);
 
@@ -28,14 +28,14 @@ function CloudAccountDeleteContents({
     settingsService.deleteCloudAccount(cloudAccount.id).then(res => {
       setLoading(false);
       if (res === Error) {
-        setToast({
+        showToast({
           hasError: true,
           title: 'Cloud account was not deleted',
           message:
             'There was an error deleting this cloud account. Please try again.'
         });
       } else {
-        setToast({
+        showToast({
           hasError: false,
           title: 'Cloud account deleted',
           message: `The cloud account was successfully deleted!`

dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx

@@ -10,6 +10,7 @@ import MongoDbAtlasAccountDetails from '@components/account-details/MongoDBAtlas
 import OciAccountDetails from '@components/account-details/OciAccountDetails';
 import ScalewayAccountDetails from '@components/account-details/ScalewayAccountDetails';
 import { getPayloadFromForm } from '@utils/cloudAccountHelpers';
+import { ToastProps } from '@components/toast/Toast';
 import providers, {
   allProviders,
   Provider
@@ -24,7 +25,6 @@ import {
   CloudAccount,
   CloudAccountsPage
 } from '../hooks/useCloudAccounts/useCloudAccount';
-import { ToastProps } from '../../toast/hooks/useToast';
 import settingsService from '../../../services/settingsService';
 
 interface CloudAccountsSidePanelProps {
@@ -36,7 +36,7 @@ interface CloudAccountsSidePanelProps {
   handleAfterDelete: (account: CloudAccount) => void;
   page: CloudAccountsPage;
   goTo: (page: CloudAccountsPage) => void;
-  setToast: (toast: ToastProps) => void;
+  showToast: (toast: ToastProps) => void;
 }
 
 function AccountDetails({
@@ -81,7 +81,7 @@ function CloudAccountsSidePanel({
   handleAfterDelete,
   page,
   goTo,
-  setToast
+  showToast
 }: CloudAccountsSidePanelProps) {
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -101,15 +101,15 @@ function CloudAccountsSidePanel({
     settingsService.editCloudAccount(id, payloadJson).then(res => {
       if (res === Error || res.error) {
         setLoading(false);
-        setToast({
+        showToast({
           hasError: true,
           title: 'Cloud account not edited',
           message:
             'There was an error editing this cloud account. Refer to the logs and try again.'
         });
       } else {
         setLoading(false);
-        setToast({
+        showToast({
           hasError: false,
           title: 'Cloud account edited',
           message: `The cloud account was successfully edited!`
@@ -182,7 +182,7 @@ function CloudAccountsSidePanel({
                   setIsDeleteOpen(false);
                   closeModal();
                 }}
-                setToast={setToast}
+                showToast={showToast}
               />
             </div>
           ) : (

dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx

@@ -19,7 +19,7 @@ export default function InventoryFilterDropdown({
   toggle,
   closeDropdownAfterAdd
 }: InventoryFilterDropdownProps) {
-  const { setSkippedSearch, router, setToast } = useInventory();
+  const { setSkippedSearch, router, showToast } = useInventory();
 
   const {
     // toggle,
@@ -93,7 +93,7 @@ export default function InventoryFilterDropdown({
                   handleValueCheck={handleValueCheck}
                   handleValueInput={handleValueInput}
                   cleanValues={cleanValues}
-                  setToast={setToast}
+                  showToast={showToast}
                   costBetween={costBetween}
                   handleCostBetween={handleCostBetween}
                 />

dashboard/components/export-csv/ExportCSV.tsx

@@ -1,18 +1,18 @@
+import { ToastProps } from '@components/toast/Toast';
 import { useRouter } from 'next/router';
 import settingsService from '../../services/settingsService';
-import { ToastProps } from '../toast/hooks/useToast';
 import ExportCSVButton from './ExportCSVButton';
 
 type ExportCSVProps = {
-  setToast: (toast: ToastProps | undefined) => void;
+  showToast: (toast: ToastProps) => void;
 };
 
-function ExportCSV({ setToast }: ExportCSVProps) {
+function ExportCSV({ showToast }: ExportCSVProps) {
   const router = useRouter();
 
   function exportCSV(id?: string) {
     settingsService.exportCSV(id);
-    setToast({
+    showToast({
       hasError: false,
       title: 'CSV exported',
       message: 'The download of the CSV file should begin shortly.'

dashboard/components/feedback-widget/FeedbackWidget.tsx

@@ -8,8 +8,8 @@ import Modal from '@components/modal/Modal';
 import Input from '@components/input/Input';
 import settingsService from '@services/settingsService';
 import Button from '@components/button/Button';
-import useToast from '@components/toast/hooks/useToast';
 import Toast from '@components/toast/Toast';
+import { useToast } from '@components/toast/ToastProvider';
 
 // We define the placeholder here for convenience
 // It's difficult to read when passed inline
@@ -54,7 +54,7 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
     const [isTakingScreenCapture, setIsTakingScreenCapture] = useState(false);
     const [fileAttachement, setFileAttachement] = useState<File | null>(null);
     const [isSendingFeedback, setIsSendingFeedback] = useState(false);
-    const { toast, setToast, dismissToast } = useToast();
+    const { toast, showToast, dismissToast } = useToast();
 
     async function takeScreenshot() {
       if (
@@ -85,15 +85,15 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
             setFileAttachement(screenShotFile);
           }
 
-          setToast({
+          showToast({
             hasError: false,
             title: 'Screen capture',
             message:
               'A screenshot of your current page on Komiser has been captured and attached to your feedback.'
           });
         })
         .catch(err => {
-          setToast({
+          showToast({
             hasError: true,
             title: 'Screen capture failed',
             message:
@@ -126,7 +126,7 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
           settingsService
             .sendFeedback(formData)
             .then(result => {
-              setToast({
+              showToast({
                 hasError: false,
                 title: 'Feedback sent',
                 message:
@@ -136,7 +136,7 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
               clearFeedbackForm();
             })
             .catch(error => {
-              setToast({
+              showToast({
                 hasError: true,
                 title: 'Feedback',
                 message: 'An Error happened. Maybe try again please!'
@@ -267,14 +267,14 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                     hoverTitle="drop here"
                     maxSize={MAX_FILE_SIZE_MB}
                     onTypeError={(err: string) =>
-                      setToast({
+                      showToast({
                         hasError: true,
                         title: 'File upload failed',
                         message: err
                       })
                     }
                     onSizeError={(err: string) =>
-                      setToast({
+                      showToast({
                         hasError: true,
                         title: 'File upload failed',
                         message: err
@@ -459,7 +459,6 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
             </form>
           </div>
         </Modal>
-        {toast && <Toast {...toast} dismissToast={dismissToast} />}
       </>
     );
   };

dashboard/components/inventory/components/InventoryFilterDropdown.tsx

@@ -19,7 +19,7 @@ export default function InventoryFilterDropdown({
   toggle,
   closeDropdownAfterAdd
 }: InventoryFilterDropdownProps) {
-  const { setSkippedSearch, router, setToast } = useInventory();
+  const { setSkippedSearch, router, showToast } = useInventory();
 
   const {
     // toggle,
@@ -91,7 +91,7 @@ export default function InventoryFilterDropdown({
                   handleValueCheck={handleValueCheck}
                   handleValueInput={handleValueInput}
                   cleanValues={cleanValues}
-                  setToast={setToast}
+                  showToast={showToast}
                   costBetween={costBetween}
                   handleCostBetween={handleCostBetween}
                 />

dashboard/components/inventory/components/InventorySearchBar.tsx

@@ -1,20 +1,20 @@
+import { ToastProps } from '@components/toast/Toast';
 import ExportCSV from '../../export-csv/ExportCSV';
 import CloseIcon from '../../icons/CloseIcon';
 import SearchIcon from '../../icons/SearchIcon';
-import { ToastProps } from '../../toast/hooks/useToast';
 
 type InventorySearchBarProps = {
   query: string;
   setQuery: (query: string) => void;
   error: boolean;
-  setToast: (toast: ToastProps | undefined) => void;
+  showToast: (toast: ToastProps) => void;
 };
 
 function InventorySearchBar({
   query,
   setQuery,
   error,
-  setToast
+  showToast
 }: InventorySearchBarProps) {
   return (
     <>
@@ -45,7 +45,7 @@ function InventorySearchBar({
             maxLength={64}
           />
           <div className="absolute right-4 top-[14px]">
-            <ExportCSV setToast={setToast} />
+            <ExportCSV showToast={showToast} />
           </div>
         </div>
       )}

dashboard/components/inventory/components/InventoryTable.tsx

@@ -1,10 +1,10 @@
+import { ToastProps } from '@components/toast/Toast';
 import { NextRouter } from 'next/router';
 import { ChangeEvent } from 'react';
 import formatNumber from '../../../utils/formatNumber';
 import providers from '../../../utils/providerHelper';
 import Checkbox from '../../checkbox/Checkbox';
 import SkeletonInventory from '../../skeleton/SkeletonInventory';
-import { ToastProps } from '../../toast/hooks/useToast';
 import {
   InventoryItem,
   InventoryStats
@@ -32,7 +32,7 @@ type InventoryTableProps = {
   searchedLoading: boolean;
   hideResourceFromCustomView: () => void;
   hideResourcesLoading: boolean;
-  setToast: (toast: ToastProps | undefined) => void;
+  showToast: (toast: ToastProps) => void;
 };
 
 function InventoryTable({
@@ -52,7 +52,7 @@ function InventoryTable({
   searchedLoading,
   hideResourceFromCustomView,
   hideResourcesLoading,
-  setToast
+  showToast
 }: InventoryTableProps) {
   return (
     <>
@@ -63,7 +63,7 @@ function InventoryTable({
             query={query}
             setQuery={setQuery}
             error={error}
-            setToast={setToast}
+            showToast={showToast}
           />
           <div className="rounded-lg rounded-t-none pb-6">
             <table className="w-full table-auto bg-white text-left text-sm text-gray-900">

dashboard/components/inventory/components/filter/InventoryFilterValue.tsx

@@ -1,8 +1,8 @@
+import { ToastProps } from '@components/toast/Toast';
 import { ChangeEvent, useEffect, useState } from 'react';
 import settingsService from '../../../../services/settingsService';
 import Checkbox from '../../../checkbox/Checkbox';
 import Input from '../../../input/Input';
-import { ToastProps } from '../../../toast/hooks/useToast';
 import { InventoryFilterData } from '../../hooks/useInventory/types/useInventoryTypes';
 import { CostBetween } from './hooks/useFilterWizard';
 
@@ -14,7 +14,7 @@ type InventoryFilterValueProps = {
   ) => void;
   handleValueInput: (newValue: { values: string }) => void;
   cleanValues: () => void;
-  setToast: (toast: ToastProps | undefined) => void;
+  showToast: (toast: ToastProps) => void;
   costBetween: CostBetween;
   handleCostBetween: (newValue: Partial<CostBetween>) => void;
 };
@@ -26,7 +26,7 @@ function InventoryFilterValue({
   handleValueCheck,
   handleValueInput,
   cleanValues,
-  setToast,
+  showToast,
   costBetween,
   handleCostBetween
 }: InventoryFilterValueProps) {
@@ -45,7 +45,7 @@ function InventoryFilterValue({
       if (data.field === 'provider') {
         settingsService.getProviders().then(res => {
           if (res === Error) {
-            setToast({
+            showToast({
               hasError: true,
               title: `There was an error when fetching the cloud providers`,
               message: `Please refresh the page and try again.`
@@ -59,7 +59,7 @@ function InventoryFilterValue({
       if (data.field === 'account') {
         settingsService.getAccounts().then(res => {
           if (res === Error) {
-            setToast({
+            showToast({
               hasError: true,
               title: `There was an error when fetching the cloud accounts`,
               message: `Please refresh the page and try again.`
@@ -73,7 +73,7 @@ function InventoryFilterValue({
       if (data.field === 'region') {
         settingsService.getRegions().then(res => {
           if (res === Error) {
-            setToast({
+            showToast({
               hasError: true,
               title: `There was an error when fetching the cloud regions`,
               message: `Please refresh the page and try again.`
@@ -87,7 +87,7 @@ function InventoryFilterValue({
       if (data.field === 'service') {
         settingsService.getServices().then(res => {
           if (res === Error) {
-            setToast({
+            showToast({
               hasError: true,
               title: `There was an error when fetching the cloud services`,
               message: `Please refresh the page and try again.`