Custom JSON formatter that works with template syntax (#128)

src-web/hooks/useFormatText.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import type { EditorProps } from '../components/core/Editor';
+import { tryFormatJson, tryFormatXml } from '../lib/formatters';
+
+export function useFormatText({
+  text,
+  language,
+  pretty,
+}: {
+  text: string;
+  language: EditorProps['language'];
+  pretty: boolean;
+}) {
+  return useQuery({
+    queryKey: [text],
+    queryFn: async () => {
+      if (text === '' || !pretty) {
+        return text;
+      } else if (language === 'json') {
+        return tryFormatJson(text);
+      } else if (language === 'xml' || language === 'html') {
+        return tryFormatXml(text);
+      } else {
+        return text;
+      }
+    },
+  });
+}

src-web/hooks/useSyncWorkspaceChildModels.ts

@@ -23,6 +23,7 @@ export function useSyncWorkspaceChildModels() {
   const workspaceId = workspace?.id ?? 'n/a';
   useEffect(() => {
     (async function () {
+      console.log('Syncing model stores', { workspaceId });
       // Set the things we need first, first
       setHttpRequests(await invokeCmd('cmd_list_http_requests', { workspaceId }));
       setGrpcRequests(await invokeCmd('cmd_list_grpc_requests', { workspaceId }));