wip

src/components/toast/ToastContainer.tsx

@@ -1,13 +1,13 @@
-import { SystemCssProperties } from '@styled-system/css'
-import { motion } from 'framer-motion'
+import {SystemCssProperties} from '@styled-system/css'
+import {motion} from 'framer-motion'
 import * as React from 'react'
-import { useEffect, useState } from 'react'
+import {useEffect, useState} from 'react'
 import styled from 'styled-components'
 
-import { LAYOUT_TRANSITION_SPRING } from '../../styles/modules/variables'
-import { Box } from '../box/Box'
-import { UIEvents } from './enums'
-import { Emitter, ToastProps, Toast } from './index'
+import {LAYOUT_TRANSITION_SPRING} from '../../styles/modules/variables'
+import {Box} from '../box/Box'
+import {UIEvents} from './enums'
+import {Emitter, ToastProps, Toast} from './index'
 
 const ToastWrapper = styled(motion(Box)).attrs({
   width: ['100%', 'auto'],
@@ -28,13 +28,14 @@ const ToastContainer = () => {
   useEffect(() => {
     // We use several <ToastContainer> throughout the app
     // We check if a Container already exists before creating a new one that could interfere with others, preventing events from working
-    if (Emitter.listenerCount(UIEvents.ToastShow) === 0) {      
+    if (Emitter.listenerCount(UIEvents.ToastShow) === 0) {
       Emitter.on(UIEvents.ToastShow, (newToast: ToastProps) => {
         setToast(newToast)
       })
       Emitter.on(UIEvents.ToastClear, () => {
         setToast(null)
       })
+
     }
 
     return () => {
@@ -50,7 +51,7 @@ const ToastContainer = () => {
   return (
     <Box
       className={`toasts-container toasts-container--${toast?.position ||
-        'top'}`}
+      'top'}`}
       display={visible ? 'flex' : 'none'}
       top={toast?.position?.includes('top') ? 2 : 0}
       left={toast?.position?.includes('left') ? 2 : 0}
@@ -61,8 +62,8 @@ const ToastContainer = () => {
         alignItems: toast?.position?.includes('left')
           ? 'flex-start'
           : toast?.position?.includes('right')
-          ? 'flex-end'
-          : 'center',
+            ? 'flex-end'
+            : 'center',
         flexDirection: toast?.position?.includes('bottom')
           ? 'column-reverse'
           : 'column',