migrated from redux to recoil

frontend/src/providers/ToasterProvider.tsx

@@ -1,22 +1,34 @@
 import { Alert, Snackbar } from "@mui/material"
-import { useDispatch, useSelector } from "react-redux"
-import { setClose } from "../features/ui/toastSlice"
-import { RootState } from "../stores/store"
+import { useRecoilState } from 'recoil'
+import { toastListState } from '../atoms/toast'
+import { useEffect } from 'react'
 
 const Toaster: React.FC = () => {
-  const toast = useSelector((state: RootState) => state.toast)
-  const dispatch = useDispatch()
+  const [toasts, setToasts] = useRecoilState(toastListState)
+
+  useEffect(() => {
+    if (toasts.length > 0) {
+      const interval = setInterval(() => {
+        setToasts(t => t.filter((x) => (Date.now() - x.createdAt) < 1500))
+      }, 1500)
+
+      return () => clearInterval(interval)
+    }
+  }, [setToasts, toasts])
 
   return (
-    <Snackbar
-      open={toast.open}
-      autoHideDuration={toast.severity === 'error' ? 10000 : 1500}
-      onClose={() => dispatch(setClose())}
-    >
-      <Alert variant="filled" severity={toast.severity}>
-        {toast.message}
-      </Alert>
-    </Snackbar>
+    <>
+      {toasts.map((toast, index) => (
+        <Snackbar
+          key={index}
+          open={toast.open}
+        >
+          <Alert variant="filled" severity={toast.severity}>
+            {toast.message}
+          </Alert>
+        </Snackbar>
+      ))}
+    </>
   )
 }
 

frontend/src/providers/i18nProvider.tsx

@@ -1,30 +0,0 @@
-import { createContext, useMemo } from 'react'
-import { useSelector } from 'react-redux'
-import I18nBuilder from '../lib/intl'
-import { RootState, store } from '../stores/store'
-
-type Props = {
-  children: React.ReactNode
-}
-
-interface Context {
-  i18n: I18nBuilder
-}
-
-export const I18nContext = createContext<Context>({
-  i18n: new I18nBuilder(store.getState().settings.language)
-})
-
-export default function I18nProvider({ children }: Props) {
-  const settings = useSelector((state: RootState) => state.settings)
-
-  const i18n = useMemo(() => new I18nBuilder(
-    settings.language
-  ), [settings.language])
-
-  return (
-    <I18nContext.Provider value={{ i18n }}>
-      {children}
-    </I18nContext.Provider>
-  )
-}

frontend/src/providers/rpcClientProvider.tsx

@@ -1,31 +0,0 @@
-import { createContext, useMemo } from 'react'
-import { useSelector } from 'react-redux'
-import { RPCClient } from '../lib/rpcClient'
-import type { RootState } from '../stores/store'
-
-type Props = {
-  children: React.ReactNode
-}
-
-interface Context {
-  client: RPCClient
-}
-
-export const RPCClientContext = createContext<Context>({
-  client: new RPCClient()
-})
-
-export default function RPCClientProvider({ children }: Props) {
-  const settings = useSelector((state: RootState) => state.settings)
-
-  const client = useMemo(() => new RPCClient(), [
-    settings.serverAddr,
-    settings.serverPort,
-  ])
-
-  return (
-    <RPCClientContext.Provider value={{ client }}>
-      {children}
-    </RPCClientContext.Provider>
-  )
-}