feat: prettify json body automatically

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -1,13 +1,15 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
 import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestBodyMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
+import React, { forwardRef, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { humanizeRequestBodyMode } from 'utils/collections';
 import { toastError } from 'utils/common/error';
+import useOnMount from '../../../../hooks/useOnMount/index';
+import { isValidJson } from '../../../../utils/common/index';
+import StyledWrapper from './StyledWrapper';
 
 const RequestBodyMode = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -52,6 +54,12 @@ const RequestBodyMode = ({ item, collection }) => {
     }
   };
 
+  useOnMount(() => {
+    if (bodyMode === 'json' && body?.json && isValidJson(body.json)) {
+      onPrettify();
+    }
+  });
+
   return (
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer body-mode-selector">

packages/bruno-app/src/hooks/useOnMount/index.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function useOnMount(mountedFunction, cleanupFunction = null) {
+  useEffect(() => {
+    mountedFunction();
+    return () => {
+      if (cleanupFunction) {
+        cleanupFunction();
+      }
+    };
+  }, []);
+}

packages/bruno-app/src/utils/common/index.js

@@ -59,6 +59,16 @@ export const convertToCodeMirrorJson = (obj) => {
   }
 };
 
+export const isValidJson = (str) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+
+  return true;
+};
+
 export const safeParseXML = (str, options) => {
   if (!str || !str.length || typeof str !== 'string') {
     return str;