jotai migration (#221)

frontend/src/components/CookiesTextField.tsx

@@ -5,12 +5,12 @@ import * as O from 'fp-ts/Option'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useMemo } from 'react'
-import { useRecoilValue } from 'recoil'
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
 import { serverSideCookiesState, serverURL } from '../atoms/settings'
 import { useSubscription } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { ffetch } from '../lib/httpClient'
+import { useAtomValue } from 'jotai'
 
 const validateCookie = (cookie: string) => pipe(
   cookie,
@@ -75,8 +75,8 @@ const noopValidator = (s: string): E.Either<string, string[]> => pipe(
 const isCommentOrNewLine = (s: string) => s === '' || s.startsWith('\n') || s.startsWith('#')
 
 const CookiesTextField: React.FC = () => {
-  const serverAddr = useRecoilValue(serverURL)
-  const savedCookies = useRecoilValue(serverSideCookiesState)
+  const serverAddr = useAtomValue(serverURL)
+  const savedCookies = useAtomValue(serverSideCookiesState)
 
   const { pushMessage } = useToast()
 

frontend/src/components/DownloadCard.tsx

@@ -16,10 +16,10 @@ import {
   Typography
 } from '@mui/material'
 import { useCallback } from 'react'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
 import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
+import { useAtomValue } from 'jotai'
 
 type Props = {
   download: RPCResult
@@ -37,7 +37,7 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
 
   const isCompleted = useCallback(
     () => download.progress.percentage === '-1',

frontend/src/components/DownloadDialog.tsx

@@ -30,7 +30,6 @@ import {
   useState,
   useTransition
 } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
@@ -42,6 +41,7 @@ import { toFormatArgs } from '../utils'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
 import { useToast } from '../hooks/toast'
 import LoadingBackdrop from './LoadingBackdrop'
+import { useAtom, useAtomValue } from 'jotai'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -59,11 +59,11 @@ type Props = {
 }
 
 const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
-  const settings = useRecoilValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
-  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
-  const downloadTemplate = useRecoilValue(downloadTemplateState)
-  const savedTemplates = useRecoilValue(savedTemplatesState)
+  const settings = useAtomValue(settingsState)
+  const isConnected = useAtomValue(connectedState)
+  const availableDownloadPaths = useAtomValue(availableDownloadPathsState)
+  const downloadTemplate = useAtomValue(downloadTemplateState)
+  const savedTemplates = useAtomValue(savedTemplatesState)
 
   const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
   const [pickedVideoFormat, setPickedVideoFormat] = useState('')
@@ -71,11 +71,11 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const [pickedBestFormat, setPickedBestFormat] = useState('')
   const [isFormatsLoading, setIsFormatsLoading] = useState(false)
 
-  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [customArgs, setCustomArgs] = useAtom(customArgsState)
 
   const [downloadPath, setDownloadPath] = useState('')
 
-  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
+  const [filenameTemplate, setFilenameTemplate] = useAtom(
     filenameTemplateState
   )
 

frontend/src/components/Downloads.tsx

@@ -1,5 +1,5 @@
+import { useAtom, useAtomValue } from 'jotai'
 import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
 import { loadingAtom } from '../atoms/ui'
@@ -7,10 +7,10 @@ import DownloadsGridView from './DownloadsGridView'
 import DownloadsTableView from './DownloadsTableView'
 
 const Downloads: React.FC = () => {
-  const tableView = useRecoilValue(listViewState)
-  const loadingDownloads = useRecoilValue(loadingDownloadsState)
+  const tableView = useAtomValue(listViewState)
+  const loadingDownloads = useAtomValue(loadingDownloadsState)
 
-  const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
+  const [isLoading, setIsLoading] = useAtom(loadingAtom)
 
   useEffect(() => {
     if (loadingDownloads) {

frontend/src/components/DownloadsGridView.tsx

@@ -1,5 +1,5 @@
 import { Grid } from '@mui/material'
-import { useRecoilValue } from 'recoil'
+import { useAtomValue } from 'jotai'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
@@ -8,7 +8,7 @@ import { ProcessStatus, RPCResult } from '../types'
 import DownloadCard from './DownloadCard'
 
 const DownloadsGridView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
+  const downloads = useAtomValue(activeDownloadsState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/DownloadsTableView.tsx

@@ -20,12 +20,12 @@ import {
 } from "@mui/material"
 import { forwardRef } from 'react'
 import { TableComponents, TableVirtuoso } from 'react-virtuoso'
-import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { serverURL } from '../atoms/settings'
 import { useRPC } from '../hooks/useRPC'
 import { ProcessStatus, RPCResult } from '../types'
 import { base64URLEncode, formatSize, formatSpeedMiB } from "../utils"
+import { useAtomValue } from 'jotai'
 
 const columns = [
   {
@@ -119,8 +119,8 @@ function fixedHeaderContent() {
 }
 
 const DownloadsTableView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
-  const serverAddr = useRecoilValue(serverURL)
+  const downloads = useAtomValue(activeDownloadsState)
+  const serverAddr = useAtomValue(serverURL)
   const { client } = useRPC()
 
   const viewFile = (path: string) => {

frontend/src/components/ExtraDownloadOptions.tsx

@@ -1,13 +1,13 @@
 import { Autocomplete, Box, TextField, Typography } from '@mui/material'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
 import { useI18n } from '../hooks/useI18n'
+import { useAtom, useAtomValue } from 'jotai'
 
 const ExtraDownloadOptions: React.FC = () => {
   const { i18n } = useI18n()
 
-  const customTemplates = useRecoilValue(savedTemplatesState)
-  const [, setCustomArgs] = useRecoilState(customArgsState)
+  const customTemplates = useAtomValue(savedTemplatesState)
+  const [, setCustomArgs] = useAtom(customArgsState)
 
   return (
     <>

frontend/src/components/Footer.tsx

@@ -2,7 +2,6 @@ import DownloadIcon from '@mui/icons-material/Download'
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
 import { AppBar, CircularProgress, Divider, Toolbar } from '@mui/material'
 import { Suspense } from 'react'
-import { useRecoilValue } from 'recoil'
 import { settingsState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { totalDownloadSpeedState } from '../atoms/ui'
@@ -10,11 +9,12 @@ import { useI18n } from '../hooks/useI18n'
 import { formatSpeedMiB } from '../utils'
 import FreeSpaceIndicator from './FreeSpaceIndicator'
 import VersionIndicator from './VersionIndicator'
+import { useAtomValue } from 'jotai'
 
 const Footer: React.FC = () => {
-  const settings = useRecoilValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
-  const totalDownloadSpeed = useRecoilValue(totalDownloadSpeedState)
+  const settings = useAtomValue(settingsState)
+  const isConnected = useAtomValue(connectedState)
+  const totalDownloadSpeed = useAtomValue(totalDownloadSpeedState)
 
   const mode = settings.theme
   const { i18n } = useI18n()

frontend/src/components/FreeSpaceIndicator.tsx

@@ -1,10 +1,10 @@
 import StorageIcon from '@mui/icons-material/Storage'
-import { useRecoilValue } from 'recoil'
 import { freeSpaceBytesState } from '../atoms/status'
 import { formatSize } from '../utils'
+import { useAtomValue } from 'jotai'
 
 const FreeSpaceIndicator = () => {
-  const freeSpace = useRecoilValue(freeSpaceBytesState)
+  const freeSpace = useAtomValue(freeSpaceBytesState)
 
   return (
     <div style={{

frontend/src/components/HomeActions.tsx

@@ -1,5 +1,5 @@
+import { useSetAtom } from 'jotai'
 import { Suspense, useState } from 'react'
-import { useRecoilState } from 'recoil'
 import { loadingAtom } from '../atoms/ui'
 import { useToast } from '../hooks/toast'
 import DownloadDialog from './DownloadDialog'
@@ -7,7 +7,7 @@ import HomeSpeedDial from './HomeSpeedDial'
 import TemplatesEditor from './TemplatesEditor'
 
 const HomeActions: React.FC = () => {
-  const [, setIsLoading] = useRecoilState(loadingAtom)
+  const setIsLoading = useSetAtom(loadingAtom)
 
   const [openDownload, setOpenDownload] = useState(false)
   const [openEditor, setOpenEditor] = useState(false)

frontend/src/components/HomeSpeedDial.tsx

@@ -9,7 +9,7 @@ import {
   SpeedDialAction,
   SpeedDialIcon
 } from '@mui/material'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useAtom, useAtomValue } from 'jotai'
 import { listViewState, serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
@@ -20,8 +20,8 @@ type Props = {
 }
 
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const serverAddr = useRecoilValue(serverURL)
-  const [listView, setListView] = useRecoilState(listViewState)
+  const serverAddr = useAtomValue(serverURL)
+  const [listView, setListView] = useAtom(listViewState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/LogTerminal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
+import { useAtomValue } from 'jotai'
 
 const token = localStorage.getItem('token')
 
@@ -11,7 +11,7 @@ const LogTerminal: React.FC = () => {
 
   const boxRef = useRef<HTMLDivElement>(null)
 
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
 
   const { i18n } = useI18n()
 

frontend/src/components/SocketSubscriber.tsx

@@ -1,7 +1,6 @@
 import * as O from 'fp-ts/Option'
 import { useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
 import { rpcPollingTimeState } from '../atoms/rpc'
@@ -12,15 +11,16 @@ import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import { datetimeCompareFunc, isRPCResponse } from '../utils'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
 
 const SocketSubscriber: React.FC<Props> = () => {
-  const [connected, setIsConnected] = useRecoilState(connectedState)
-  const [, setDownloads] = useRecoilState(downloadsState)
+  const [connected, setIsConnected] = useAtom(connectedState)
+  const setDownloads = useSetAtom(downloadsState)
 
-  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
-  const rpcPollingTime = useRecoilValue(rpcPollingTimeState)
+  const serverAddressAndPort = useAtomValue(serverAddressAndPortState)
+  const rpcPollingTime = useAtomValue(rpcPollingTimeState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/Splash.tsx

@@ -1,8 +1,8 @@
 import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
 import { Container, SvgIcon, Typography, styled } from '@mui/material'
-import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useI18n } from '../hooks/useI18n'
+import { useAtomValue } from 'jotai'
 
 const FlexContainer = styled(Container)({
   display: 'flex',
@@ -23,7 +23,7 @@ const Title = styled(Typography)({
 
 export default function Splash() {
   const { i18n } = useI18n()
-  const activeDownloads = useRecoilValue(activeDownloadsState)
+  const activeDownloads = useAtomValue(activeDownloadsState)
 
   if (activeDownloads.length !== 0) {
     return null

frontend/src/components/TemplatesEditor.tsx

@@ -20,12 +20,12 @@ import { TransitionProps } from '@mui/material/transitions'
 import { matchW } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
 import { forwardRef, useEffect, useState, useTransition } from 'react'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { CustomTemplate } from '../types'
+import { useAtomValue } from 'jotai'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -45,7 +45,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
   const [templateName, setTemplateName] = useState('')
   const [templateContent, setTemplateContent] = useState('')
 
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
   const [isPending, startTransition] = useTransition()
 
   const [templates, setTemplates] = useState<CustomTemplate[]>([])

frontend/src/components/ThemeToggler.tsx

@@ -2,12 +2,12 @@ import Brightness4 from '@mui/icons-material/Brightness4'
 import Brightness5 from '@mui/icons-material/Brightness5'
 import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
-import { useRecoilState } from 'recoil'
 import { Theme, themeState } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
+import { useAtom } from 'jotai'
 
 const ThemeToggler: React.FC = () => {
-  const [theme, setTheme] = useRecoilState(themeState)
+  const [theme, setTheme] = useAtom(themeState)
 
   const actions: Record<Theme, React.ReactNode> = {
     system: <BrightnessAuto />,

frontend/src/components/VersionIndicator.tsx

@@ -1,9 +1,9 @@
 import { Chip } from '@mui/material'
-import { useRecoilValue } from 'recoil'
 import { ytdlpRpcVersionState } from '../atoms/status'
+import { useAtomValue } from 'jotai'
 
 const VersionIndicator: React.FC = () => {
-  const version = useRecoilValue(ytdlpRpcVersionState)
+  const version = useAtomValue(ytdlpRpcVersionState)
 
   return (
     <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>