jotai migration (#221)

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>())
+  )
+}
+)