fix: admin/fs: in file dialog, changing base_url won't update the form

admin/src/FileForm.ts

@@ -8,7 +8,8 @@ import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, Sel
 import { apiCall, UseApi } from './api'
 import {
     basename, defaultPerms, formatBytes, formatTimestamp, isEqualLax, isWhoObject, newDialog, objSameKeys,
-    onlyTruthy, prefix, VfsPerms, wantArray, Who, WhoObject, matches, HTTP_MESSAGES, xlate, md, Callback
+    onlyTruthy, prefix, VfsPerms, wantArray, Who, WhoObject, matches, HTTP_MESSAGES, xlate, md, Callback,
+    useRequestRender
 } from './misc'
 import { Btn, IconBtn, LinkBtn, modifiedProps, useBreakpoint, wikiLink } from './mui'
 import { reloadVfs, VfsNode } from './VfsPage'
@@ -289,7 +290,12 @@ interface LinkFieldProps extends FieldProps<string> {
     statusApi: UseApi<any> // receive status from parent, to avoid asking server at each click on a file
 }
 function LinkField({ value, statusApi }: LinkFieldProps) {
-    const { data, reload, error } = statusApi
+    const { reload, error } = statusApi
+    // workaround to get fresh data and be rerendered even when mounted inside imperative dialog
+    const requestRender = useRequestRender()
+    useEffect(() => statusApi.sub(requestRender), [])
+    const data = statusApi.getData()
+
     const urls: string[] = data?.urls.https || data?.urls.http
     const baseHost = data?.baseUrl && new URL(data.baseUrl).host
     const root = useMemo(() => baseHost && _.find(data.roots, (root, host) => matches(baseHost, host)),

shared/api.ts

@@ -1,8 +1,8 @@
 // This file is part of HFS - Copyright 2021-2023, Massimo Melina <[email protected]> - License https://www.gnu.org/licenses/gpl-3.0.txt
 
 import _ from 'lodash';
-import { useCallback, useEffect, useRef } from 'react';
-import { Dict, Falsy, getPrefixUrl, pendingPromise, useStateMounted, wait } from '.'
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Dict, EventEmitter, Falsy, getPrefixUrl, pendingPromise, useStateMounted, wait } from '.'
 
 export const API_URL = '/~/api/'
 
@@ -112,7 +112,10 @@ export function useApi<T=any>(cmd: string | Falsy, params?: object, options: Api
         setForcer(v => v + 1)
         reloadingRef.current = pendingPromise()
     }, [setForcer])
-    return { data, setData, error, reload, loading: loadingRef.current || reloadingRef.current, getData: () => dataRef.current,  }
+    const ee = useMemo(() => new EventEmitter, [])
+    const sub = useCallback((cb: EventListener) => ee.on('data', cb), [])
+    useEffect(() => ee.emit('data'), [data])
+    return { data, setData, error, reload, sub, loading: loadingRef.current || reloadingRef.current, getData: () => dataRef.current,  }
 }
 
 type EventHandler = (type:string, data?:any) => void

shared/index.ts

@@ -140,6 +140,14 @@ export function createDurationFormatter({ locale=undefined, unitDisplay='narrow'
     }
 }
 
+export class EventEmitter extends EventTarget {
+    emit(name: string) { this.dispatchEvent(new Event(name)) }
+    on(name: string, cb: EventListener) {
+        this.addEventListener(name, cb)
+        return () => this.removeEventListener(name, cb)
+    }
+}
+
 Element.prototype.replaceChildren ||= function(this:Element, addNodes) { // polyfill
     while (this.lastChild) this.removeChild(this.lastChild);
     if (addNodes !== undefined) this.append(addNodes);