Persist operation state in server and reuse returned snapshots

src/web/App.jsx

@@ -8,15 +8,12 @@ function App() {
   const previewReady = new URLSearchParams(window.location.search).has('preview-ready');
   const [state, setState] = useState(null);
   const [subscriptionUrl, setSubscriptionUrl] = useState('');
-  const [servers, setServers] = useState([]);
   const [pendingTag, setPendingTag] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
 
-  async function loadState() {
-    const data = await api.state();
+  function syncState(data) {
     setState(data);
-    setServers(data.servers || []);
     setPendingTag((current) => (
       (data.servers || []).some((server) => server.tag === current)
         ? current
@@ -24,6 +21,10 @@ function App() {
     ));
   }
 
+  async function loadState() {
+    syncState(await api.state());
+  }
+
   useEffect(() => {
     loadState().catch((err) => setError(err.message));
     const timer = setInterval(() => loadState().catch(() => {}), 5000);
@@ -43,8 +44,10 @@ function App() {
     setBusy(true);
     setError('');
     try {
-      await action();
-      await loadState();
+      const result = await action();
+      if (result?.state) syncState(result.state);
+      else await loadState();
+      return result;
     } catch (err) {
       setError(err.message);
       throw err;
@@ -56,31 +59,24 @@ function App() {
   async function fetchSubscription() {
     return run(async () => {
       const data = await api.subscription.fetch(subscriptionUrl);
-      setServers(data.servers || []);
       setPendingTag('');
+      return data;
     });
   }
 
   async function refreshSubscription() {
     const data = await api.subscription.refresh();
-    setState((current) => current ? {
-      ...current,
-      userInfo: data.userInfo,
-      fetchedAt: data.fetchedAt,
-      servers: data.servers,
-      selectedTag: data.selectedTag,
-    } : current);
-    setServers(data.servers || []);
+    syncState(data.state || data);
     setPendingTag(data.selectedTag || '');
     return data;
   }
 
   async function forgetSubscription() {
     return run(async () => {
-      await api.subscription.forget();
+      const data = await api.subscription.forget();
       setSubscriptionUrl('');
-      setServers([]);
       setPendingTag('');
+      return data;
     });
   }
 
@@ -96,7 +92,7 @@ function App() {
             error={error}
             subscriptionUrl={subscriptionUrl}
             setSubscriptionUrl={setSubscriptionUrl}
-            servers={previewReady ? [{ tag: 'Amsterdam', server: '127.0.0.1', server_port: 443 }] : servers}
+            servers={previewReady ? [{ tag: 'Amsterdam', server: '127.0.0.1', server_port: 443 }] : state.servers || []}
             pendingTag={previewReady ? 'Amsterdam' : pendingTag}
             setPendingTag={setPendingTag}
             onFetchSubscription={fetchSubscription}