jotai migration

frontend/package.json

@@ -21,7 +21,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
     "react-virtuoso": "^4.7.11",
-    "recoil": "^0.7.7",
+    "jotai": "^2.10.2",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import { RouterProvider } from 'react-router-dom'
-import { RecoilRoot } from 'recoil'
+import { Provider } from 'jotai'
 import { router } from './router'
 
 export function App() {
   return (
-    <RecoilRoot>
+    <Provider>
       <RouterProvider router={router} />
-    </RecoilRoot>
+    </Provider>
   )
 }

frontend/src/Layout.tsx

@@ -19,7 +19,6 @@ import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
 import { useMemo, useState } from 'react'
 import { Link, Outlet } from 'react-router-dom'
-import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
@@ -29,11 +28,12 @@ import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
+import { useAtomValue } from 'jotai'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
 
-  const settings = useRecoilValue(settingsState)
+  const settings = useAtomValue(settingsState)
 
   const mode = settings.theme
   const theme = useMemo(() =>

frontend/src/atoms/downloadTemplate.ts

@@ -1,50 +1,40 @@
 import { getOrElse } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
-import { atom, selector } from 'recoil'
 import { ffetch } from '../lib/httpClient'
 import { CustomTemplate } from '../types'
 import { serverSideCookiesState, serverURL } from './settings'
+import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
 
-export const cookiesTemplateState = selector({
-  key: 'cookiesTemplateState',
-  get: ({ get }) => get(serverSideCookiesState)
+export const cookiesTemplateState = atom<Promise<string>>(async (get) =>
+  await get(serverSideCookiesState)
     ? '--cookies=cookies.txt'
     : ''
-})
+)
 
-export const customArgsState = atom({
-  key: 'customArgsState',
-  default: localStorage.getItem('customArgs') ?? '',
-  effects: [
-    ({ onSet }) => onSet(e => localStorage.setItem('customArgs', e))
-  ]
-})
+export const customArgsState = atomWithStorage(
+  'customArgs',
+  localStorage.getItem('customArgs') ?? ''
+)
 
-export const filenameTemplateState = atom({
-  key: 'filenameTemplateState',
-  default: localStorage.getItem('lastFilenameTemplate') ?? '',
-  effects: [
-    ({ onSet }) => onSet(e => localStorage.setItem('lastFilenameTemplate', e))
-  ]
-})
+export const filenameTemplateState = atomWithStorage(
+  'lastFilenameTemplate',
+  localStorage.getItem('lastFilenameTemplate') ?? ''
+)
 
-export const downloadTemplateState = selector({
-  key: 'downloadTemplateState',
-  get: ({ get }) =>
-    `${get(customArgsState)} ${get(cookiesTemplateState)}`
-      .replace(/  +/g, ' ')
-      .trim()
-})
+export const downloadTemplateState = atom<string>((get) =>
+  `${get(customArgsState)} ${get(cookiesTemplateState)}`
+    .replace(/  +/g, ' ')
+    .trim()
+)
 
-export const savedTemplatesState = selector<CustomTemplate[]>({
-  key: 'savedTemplatesState',
-  get: async ({ get }) => {
-    const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
-    const either = await task()
+export const savedTemplatesState = atom<Promise<CustomTemplate[]>>(async (get) => {
+  const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
+  const either = await task()
 
-    return pipe(
-      either,
-      getOrElse(() => new Array<CustomTemplate>())
-    )
-  }
-})
+  return pipe(
+    either,
+    getOrElse(() => new Array<CustomTemplate>())
+  )
+}
+)

frontend/src/atoms/downloads.ts

@@ -1,22 +1,13 @@
 import * as O from 'fp-ts/Option'
 import { pipe } from 'fp-ts/lib/function'
-import { atom, selector } from 'recoil'
 import { RPCResult } from '../types'
+import { atom } from 'jotai'
 
-export const downloadsState = atom<O.Option<RPCResult[]>>({
-  key: 'downloadsState',
-  default: O.none
-})
+export const downloadsState = atom<O.Option<RPCResult[]>>(O.none)
 
-export const loadingDownloadsState = selector<boolean>({
-  key: 'loadingDownloadsState',
-  get: ({ get }) => O.isNone(get(downloadsState))
-})
+export const loadingDownloadsState = atom<boolean>((get) => O.isNone(get(downloadsState)))
 
-export const activeDownloadsState = selector<RPCResult[]>({
-  key: 'activeDownloadsState',
-  get: ({ get }) => pipe(
-    get(downloadsState),
-    O.getOrElse(() => new Array<RPCResult>())
-  )
-})
+export const activeDownloadsState = atom<RPCResult[]>((get) => pipe(
+  get(downloadsState),
+  O.getOrElse(() => new Array<RPCResult>())
+))

frontend/src/atoms/i18n.ts

@@ -1,9 +1,5 @@
-import { selector } from 'recoil'
+import { atom } from 'jotai'
 import I18nBuilder from '../lib/intl'
 import { languageState } from './settings'
 
-export const i18nBuilderState = selector({
-  key: 'i18nBuilderState',
-  get: ({ get }) => new I18nBuilder(get(languageState)),
-  dangerouslyAllowMutability: true,
-})
+export const i18nBuilderState = atom((get) => new I18nBuilder(get(languageState)))

frontend/src/atoms/rpc.ts

@@ -1,23 +1,17 @@
-import { atom, selector } from 'recoil'
+import { atom } from 'jotai'
 import { RPCClient } from '../lib/rpcClient'
 import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
+import { atomWithStorage } from 'jotai/utils'
 
-export const rpcClientState = selector({
-  key: 'rpcClientState',
-  get: ({ get }) =>
-    new RPCClient(
-      get(rpcHTTPEndpoint),
-      get(rpcWebSocketEndpoint),
-      localStorage.getItem('token') ?? ''
-    ),
-  dangerouslyAllowMutability: true,
-})
+export const rpcClientState = atom((get) =>
+  new RPCClient(
+    get(rpcHTTPEndpoint),
+    get(rpcWebSocketEndpoint),
+    localStorage.getItem('token') ?? ''
+  ),
+)
 
-export const rpcPollingTimeState = atom({
-  key: 'rpcPollingTimeState',
-  default: Number(localStorage.getItem('rpc-polling-time')) || 1000,
-  effects: [
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('rpc-polling-time', a.toString()))
-  ]
-})
+export const rpcPollingTimeState = atomWithStorage(
+  'rpc-polling-time',
+  Number(localStorage.getItem('rpc-polling-time')) || 1000
+)