refactor(toaster): move roaster with options to shared component

danilych · Feb 11, 2024 · b00d169 · b00d169
1 parent 3ad571f
commit b00d169
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 96 deletions.
diff --git a/app/features/hidden-list-component.tsx b/app/features/hidden-list-component.tsx
@@ -1,11 +1,12 @@
 import clsx from 'clsx'
 import { useState } from 'react'
-import { Arrow, DeleteIcon, EditIcon } from 'assets/icons'
+import { DeleteIcon, EditIcon } from 'assets/icons'
 import { useDispatch } from 'react-redux'
-import { ThunkDispatch } from '@reduxjs/toolkit'
-import toast, { Toaster } from 'react-hot-toast'
+import type { ThunkDispatch } from '@reduxjs/toolkit'
+import toast from 'react-hot-toast'
 import { removeBlock } from '~/redux/slices/course'
 import { delay } from '~/widgets/helpers/delay'
+import { ToasterWithOptions } from '~/shared'
 
 interface Props {
   header: string
@@ -88,23 +89,7 @@ export function HiddenListComponent({ header, index, className, id }: Props) {
         </p>
       </div>
 
-      <Toaster
-        toastOptions={{
-          duration: 5000,
-          success: {
-            style: {
-              background: 'green',
-              color: 'white',
-            },
-          },
-          error: {
-            style: {
-              background: 'red',
-              color: 'white',
-            },
-          },
-        }}
-      />
+      <ToasterWithOptions />
     </div>
   )
 }
diff --git a/app/routes/edit-course.$course.tsx b/app/routes/edit-course.$course.tsx
@@ -3,13 +3,12 @@ import { useParams } from '@remix-run/react'
 import { Spinner } from 'flowbite-react'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast, { Toaster } from 'react-hot-toast'
+import toast from 'react-hot-toast'
 import { useDispatch, useSelector } from 'react-redux'
 import { HiddenListComponent } from '~/features'
 import { fetchCourse, updateBlock } from '~/redux/slices/course'
-import { Header2, Header3, Header4, TransparentButton } from '~/shared'
+import { Header3, Header4, ToasterWithOptions, TransparentButton } from '~/shared'
 import { delay } from '~/widgets/helpers/delay'
-// import { delay } from '~/widgets/helpers/delay'
 
 export default function Course() {
   const params = useParams()
@@ -134,23 +133,7 @@ export default function Course() {
         </div>
       )}
 
-      <Toaster
-        toastOptions={{
-          duration: 5000,
-          success: {
-            style: {
-              background: 'green',
-              color: 'white',
-            },
-          },
-          error: {
-            style: {
-              background: 'red',
-              color: 'white',
-            },
-          },
-        }}
-      />
+      <ToasterWithOptions />
     </div>
   )
 }
diff --git a/app/shared/Common/toaster-with-options.tsx b/app/shared/Common/toaster-with-options.tsx
@@ -0,0 +1,23 @@
+import { Toaster } from 'react-hot-toast'
+
+export function ToasterWithOptions() {
+  return (
+    <Toaster
+      toastOptions={{
+        duration: 5000,
+        success: {
+          style: {
+            background: 'green',
+            color: 'white',
+          },
+        },
+        error: {
+          style: {
+            background: 'red',
+            color: 'white',
+          },
+        },
+      }}
+    />
+  )
+}
diff --git a/app/shared/index.ts b/app/shared/index.ts
@@ -11,3 +11,4 @@ export * from './Typo/header-3'
 export * from './Typo/header-4'
 export * from './divider'
 export * from './tag'
+export * from './Common/toaster-with-options'
diff --git a/app/widgets/create-course-form.tsx b/app/widgets/create-course-form.tsx
@@ -4,14 +4,15 @@ import {
   FilledButton,
   Header3,
   Text,
+  ToasterWithOptions,
 } from '~/shared'
 import clsx from 'clsx'
 import { useDispatch } from 'react-redux'
 import type { ThunkDispatch } from '@reduxjs/toolkit'
 import { useForm } from 'react-hook-form'
 import { objectToFormData } from './helpers/object-to-form-data'
 import { createCourse } from '~/redux/slices/courses'
-import toast, { Toaster } from 'react-hot-toast'
+import toast from 'react-hot-toast'
 import { delay } from './helpers/delay'
 import { useNavigate } from '@remix-run/react'
 
@@ -302,23 +303,7 @@ export function CreateCourseForm() {
         <p className="text-white w-[216px] text-2xl">Створити</p>
       </FilledButton>
 
-      <Toaster
-        toastOptions={{
-          duration: 5000,
-          success: {
-            style: {
-              background: 'green',
-              color: 'white',
-            },
-          },
-          error: {
-            style: {
-              background: 'red',
-              color: 'white',
-            },
-          },
-        }}
-      />
+      <ToasterWithOptions />
     </form>
   )
 }
diff --git a/app/widgets/login-card.tsx b/app/widgets/login-card.tsx
@@ -1,10 +1,10 @@
 import type { ThunkDispatch } from '@reduxjs/toolkit'
 import { Link, useNavigate } from '@remix-run/react'
 import { useForm } from 'react-hook-form'
-import toast, { Toaster } from 'react-hot-toast'
+import toast from 'react-hot-toast'
 import { useDispatch } from 'react-redux'
 import { fetchAuth } from '~/redux/slices/auth'
-import { Text, FilledButton } from '~/shared'
+import { Text, FilledButton, ToasterWithOptions } from '~/shared'
 import { delay } from './helpers/delay'
 
 export default function LoginCard() {
@@ -90,23 +90,7 @@ export default function LoginCard() {
         </FilledButton>
       </div>
 
-      <Toaster
-        toastOptions={{
-          duration: 5000,
-          success: {
-            style: {
-              background: 'green',
-              color: 'white',
-            },
-          },
-          error: {
-            style: {
-              background: 'red',
-              color: 'white',
-            },
-          },
-        }}
-      />
+      <ToasterWithOptions />
     </form>
   )
 }
diff --git a/app/widgets/register-card.tsx b/app/widgets/register-card.tsx
@@ -1,10 +1,10 @@
-import { Text, FilledButton } from '~/shared'
+import { Text, FilledButton, ToasterWithOptions } from '~/shared'
 import { useForm } from 'react-hook-form'
 import { useDispatch } from 'react-redux'
 import { fetchRegister } from '~/redux/slices/auth'
 import type { ThunkDispatch } from '@reduxjs/toolkit'
 import { useNavigate } from '@remix-run/react'
-import toast, { Toaster } from 'react-hot-toast'
+import toast from 'react-hot-toast'
 import { delay } from './helpers/delay'
 
 export default function RegisterCard() {
@@ -105,23 +105,8 @@ export default function RegisterCard() {
           <p className=" text-white text-2xl">Зареєструвати</p>
         </FilledButton>
       </div>
-      <Toaster
-        toastOptions={{
-          duration: 5000,
-          success: {
-            style: {
-              background: 'green',
-              color: 'white',
-            },
-          },
-          error: {
-            style: {
-              background: 'red',
-              color: 'white',
-            },
-          },
-        }}
-      />
+
+      <ToasterWithOptions />
     </form>
   )
 }