code refactoring

frontend/src/components/DownloadDialog.tsx

@@ -171,7 +171,9 @@ export default function DownloadDialog({
 
   const resetInput = () => {
     urlInputRef.current!.value = ''
-    customFilenameInputRef.current!.value = ''
+    if (customFilenameInputRef.current) {
+      customFilenameInputRef.current!.value = ''
+    }
   }
 
   return (

frontend/src/lib/httpClient.ts

@@ -1,13 +1,11 @@
 import { tryCatch } from 'fp-ts/TaskEither'
-import { flow } from 'fp-ts/lib/function'
 
-export const ffetch = <T>(url: string, opt?: RequestInit) => flow(
-  tryCatch(
-    () => fetcher<T>(url, opt),
-    (e) => `error while fetching: ${e}`
-  )
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
+  () => fetcher<T>(url, opt),
+  (e) => `error while fetching: ${e}`
 )
 
+
 const fetcher = async <T>(url: string, opt?: RequestInit) => {
   const res = await fetch(url, opt)
 

frontend/src/views/Archive.tsx

@@ -66,7 +66,7 @@ export default function Downloaded() {
     ),
     matchW(
       (e) => {
-        pushMessage(e)
+        pushMessage(e, 'error')
         navigate('/login')
       },
       (d) => files$.next(d),
@@ -87,24 +87,32 @@ export default function Downloaded() {
       ? ['.', ..._upperLevel].join('/')
       : _upperLevel.join('/')
 
-    fetch(`${serverAddr}/archive/downloaded`, {
+    const task = ffetch<DirectoryEntry[]>(`${serverAddr}/archive/downloaded`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({ subdir: relpath })
     })
-      .then(res => res.json())
-      .then(data => {
-        files$.next(sub
+
+    pipe(
+      task,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        (r) => files$.next(sub
           ? [{
-            name: '..',
             isDirectory: true,
+            isVideo: false,
+            modTime: '',
+            name: '..',
             path: upperLevel,
-          }, ...data]
-          : data
+            shaSum: '',
+            size: 0,
+          }, ...r]
+          : r
         )
-      })
+      )
+    )()
   }
 
   const selectable$ = useMemo(() => files$.pipe(

frontend/src/views/Login.tsx

@@ -15,6 +15,10 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+import { ffetch } from '../lib/httpClient'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
 
 const LoginContainer = styled(Container)({
   display: 'flex',
@@ -42,13 +46,15 @@ export default function Login() {
 
   const navigate = useNavigate()
 
+  const { pushMessage } = useToast()
+
   const navigateAndReload = () => {
     navigate('/')
     window.location.reload()
   }
 
   const login = async () => {
-    const res = await fetch(`${url}/auth/login`, {
+    const task = ffetch(`${url}/auth/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -56,9 +62,20 @@ export default function Login() {
       body: JSON.stringify({
         username,
         password,
-      })
+      }),
+      redirect: 'follow'
     })
-    res.ok ? navigateAndReload() : setFormHasError(true)
+
+    pipe(
+      task,
+      matchW(
+        (l) => {
+          setFormHasError(true)
+          pushMessage(l, 'error')
+        },
+        () => navigateAndReload()
+      )
+    )()
   }
 
   return (