fix: duplicate tooltip

eliasrosa · Nov 26, 2023 · 891479e · 891479e
1 parent 4ac0a2a
commit 891479e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 22 deletions.
diff --git a/cypress/e2e/toast.spec.cy.ts b/cypress/e2e/toast.spec.cy.ts
@@ -0,0 +1,14 @@
+describe('toast', () => {
+  it('show toast when add ticker', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.addTicker('XPLG11')
+
+    const toast =
+      '.Toastify .Toastify__toast-container > .Toastify__toast--success'
+
+    cy.get(toast).should('be.visible')
+    cy.get(toast).should('not.be.visible')
+  })
+})
diff --git a/src/actions/tickersActions.ts b/src/actions/tickersActions.ts
@@ -1,14 +1,12 @@
 import { Ticker } from '@/@types/TickersTypes'
 import { uniqWith } from 'lodash'
 import { config } from '@/config'
-import { toast } from 'react-toastify'
 
 export const tickersActions = {
   insert: (state: Ticker[], { tickersList, portfoliosList }: any): Ticker[] => {
     const newTickers: Ticker[] = []
     portfoliosList.forEach((portfolioId: string) => {
       tickersList.forEach((ticker: string) => {
-        toast(`${ticker} adicionado com sucesso!`, { type: 'success' })
         newTickers.push({ ...config.defaults.ticker, ticker, portfolioId })
       })
     })
@@ -21,8 +19,6 @@ export const tickersActions = {
   },
 
   remove: (state: Ticker[], { ticker, portfolioId }: any): Ticker[] => {
-    toast(`${ticker} removido com sucesso!`, { type: 'success' })
-
     const tickers = state.filter(
       (i) => i.ticker !== ticker || i.portfolioId !== portfolioId,
     )

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, Suspense } from 'react'
 import { Inter } from 'next/font/google'
-import { ToastContainer, ToastContainerProps } from 'react-toastify'
+import { ToastContainer } from 'react-toastify'
 
 import 'react-toastify/dist/ReactToastify.css'
 
@@ -23,19 +23,6 @@ const inter = Inter({
 
 export const metadata = config.app.metadata
 
-const toastConfig: ToastContainerProps = {
-  position: 'bottom-right',
-  autoClose: 3000,
-  hideProgressBar: false,
-  newestOnTop: false,
-  rtl: false,
-  pauseOnFocusLoss: true,
-  draggable: true,
-  closeOnClick: true,
-  pauseOnHover: true,
-  theme: 'light',
-}
-
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html
@@ -54,7 +41,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
               <Suspense fallback={<Loading />}>{children}</Suspense>
             </Main>
           </div>
-          <ToastContainer {...toastConfig} />
+          <ToastContainer {...config.toast} />
         </AppProvider>
       </body>
     </html>

diff --git a/src/config.ts b/src/config.ts
@@ -1,3 +1,5 @@
+import { ToastContainerProps } from 'react-toastify'
+
 export const getConfigAPI = () => {
   if (!process.env.NEXT_PUBLIC_API_KEY) {
     throw new Error('NEXT_PUBLIC_API_KEY not found')
@@ -38,7 +40,16 @@ export const config = {
     limit: 5,
   },
 
-  charts: {
-    colors: ['blue', 'green', 'red', 'yellow'],
-  },
+  toast: {
+    position: 'bottom-right',
+    autoClose: 3000,
+    hideProgressBar: false,
+    newestOnTop: false,
+    rtl: false,
+    pauseOnFocusLoss: true,
+    draggable: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    theme: 'light',
+  } as ToastContainerProps,
 }
diff --git a/src/hooks/useTickers.ts b/src/hooks/useTickers.ts
@@ -1,18 +1,33 @@
 import { Ticker } from '@/@types/TickersTypes'
 import { useData } from './useData'
+import { toast } from 'react-toastify'
 
 export const useTickers = () => {
   const { tickers, dispatchTickers } = useData()
 
   return {
     addTickers: (tickersList: string[], portfoliosList: string[]) => {
+      if (!tickersList.length) {
+        toast(`Nenhum ativo selecionado!`, { type: 'error' })
+        return
+      }
+
+      if (tickersList.length === 1) {
+        toast(`${tickersList[0]} adicionado com sucesso!`, { type: 'success' })
+      } else {
+        toast(`${tickersList.length} ativos adicionados com sucesso!`, {
+          type: 'success',
+        })
+      }
+
       dispatchTickers({
         type: 'INSERT',
         payload: { tickersList, portfoliosList },
       })
     },
 
     removeTicker: (ticker: Ticker) => {
+      toast(`${ticker.ticker} removido com sucesso!`, { type: 'success' })
       dispatchTickers({ type: 'REMOVE', payload: ticker })
     },