removed derived atom from async cookies atom (#259)

frontend/package.json

@@ -6,6 +6,7 @@
     "dev": "vite --host 0.0.0.0",
     "build": "vite build"
   },
+  "type": "module",
   "author": "marcopiovanello",
   "license": "GPL-3.0-only",
   "private": true,

frontend/src/atoms/downloadTemplate.ts

@@ -1,10 +1,10 @@
 import { getOrElse } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
+import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
 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 = atom<Promise<string>>(async (get) =>
   await get(serverSideCookiesState)
@@ -22,12 +22,6 @@ export const filenameTemplateState = atomWithStorage(
   localStorage.getItem('lastFilenameTemplate') ?? ''
 )
 
-export const downloadTemplateState = atom<Promise<string>>(async (get) =>
-  `${get(customArgsState)} ${await get(cookiesTemplateState)}`
-    .replace(/  +/g, ' ')
-    .trim()
-)
-
 export const savedTemplatesState = atom<Promise<CustomTemplate[]>>(async (get) => {
   const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
   const either = await task()

frontend/src/components/CustomArgsTextField.tsx

@@ -0,0 +1,35 @@
+import { TextField } from '@mui/material'
+import { useAtom, useAtomValue } from 'jotai'
+import { customArgsState } from '../atoms/downloadTemplate'
+import { settingsState } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+import { useEffect } from 'react'
+
+const CustomArgsTextField: React.FC = () => {
+  const { i18n } = useI18n()
+
+  const settings = useAtomValue(settingsState)
+
+  const [customArgs, setCustomArgs] = useAtom(customArgsState)
+
+  useEffect(() => {
+    setCustomArgs('')
+  }, [])
+
+  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomArgs(e.target.value)
+  }
+
+  return (
+    <TextField
+      fullWidth
+      label={i18n.t('customArgsInput')}
+      variant="outlined"
+      onChange={handleCustomArgsChange}
+      value={customArgs}
+      disabled={settings.formatSelection}
+    />
+  )
+}
+
+export default CustomArgsTextField

frontend/src/components/DownloadDialog.tsx

@@ -28,14 +28,13 @@ import {
   FC,
   Suspense,
   forwardRef,
-  useEffect,
   useRef,
   useState,
   useTransition
 } from 'react'
 import {
+  cookiesTemplateState,
   customArgsState,
-  downloadTemplateState,
   filenameTemplateState,
   savedTemplatesState
 } from '../atoms/downloadTemplate'
@@ -47,6 +46,7 @@ import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import type { DLMetadata } from '../types'
 import { toFormatArgs } from '../utils'
+import CustomArgsTextField from './CustomArgsTextField'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
 import LoadingBackdrop from './LoadingBackdrop'
 
@@ -69,8 +69,9 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const settings = useAtomValue(settingsState)
   const isConnected = useAtomValue(connectedState)
   const availableDownloadPaths = useAtomValue(availableDownloadPathsState)
-  const downloadTemplate = useAtomValue(downloadTemplateState)
   const savedTemplates = useAtomValue(savedTemplatesState)
+  const customArgs = useAtomValue(customArgsState)
+  const cookies = useAtomValue(cookiesTemplateState)
 
   const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
   const [pickedVideoFormat, setPickedVideoFormat] = useState('')
@@ -78,8 +79,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const [pickedBestFormat, setPickedBestFormat] = useState('')
   const [isFormatsLoading, setIsFormatsLoading] = useState(false)
 
-  const [customArgs, setCustomArgs] = useAtom(customArgsState)
-
   const [downloadPath, setDownloadPath] = useState('')
 
   const [filenameTemplate, setFilenameTemplate] = useAtom(
@@ -101,10 +100,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
 
   const [isPending, startTransition] = useTransition()
 
-  useEffect(() => {
-    setCustomArgs('')
-  }, [open])
-
   /**
     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
   */
@@ -115,6 +110,10 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
       if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
       if (pickedBestFormat !== '') codes.push(pickedBestFormat)
 
+      const downloadTemplate = `${customArgsState} ${cookies}`
+        .replace(/  +/g, ' ')
+        .trim()
+
       await new Promise(r => setTimeout(r, 10))
       client.download({
         url: immediate || line,
@@ -178,10 +177,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
     setFileExtension(e.target.value)
   }
 
-  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCustomArgs(e.target.value)
-  }
-
   const parseUrlListFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.currentTarget.files
     if (!files || files.length < 1) {
@@ -277,20 +272,9 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                   />
                 </Grid>
                 <Grid container spacing={1} sx={{ mt: 1 }}>
-                  {
+                  {settings.enableCustomArgs &&
-                    settings.enableCustomArgs &&
                     <Grid item xs={12}>
-                      <TextField
+                      <CustomArgsTextField />
-                        fullWidth
-                        label={i18n.t('customArgsInput')}
-                        variant="outlined"
-                        onChange={handleCustomArgsChange}
-                        value={customArgs}
-                        disabled={
-                          !isConnected ||
-                          (settings.formatSelection && downloadFormats != null)
-                        }
-                      />
                     </Grid>
                   }
                   {