Action Builder JSX cleanup

src/components/Builder/index.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import "./index.module.css";
-import SchemaForm from "../SchemaForms/SchemaForm";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { schemas } from "doc-detective-common";
 import JSONBlock from "../JSONBlock";
-import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import SchemaForm from "../SchemaForms/SchemaForm";
 
 function App() {
   const [selectedSchema, setSelectedSchema] = useState("");
@@ -23,7 +23,7 @@ function App() {
 
   const removeEmptyValues = (obj) => {
     // console.log(`Removing empty values from ${JSON.stringify(obj)}`);
-    Object.keys(obj).forEach((key) => {
+    for (const key of Object.keys(obj)) {
       if (
         obj[key] &&
         !Array.isArray(obj) &&
@@ -38,7 +38,7 @@ function App() {
         (typeof obj[key] === "object" && Object.keys(obj[key]).length === 0)
       )
         delete obj[key];
-    });
+    }
     // console.log(`Removed empty values from ${JSON.stringify(obj)}`);
     return obj;
   };

src/components/Builder/index.module.css

@@ -31,4 +31,4 @@ p {
   font-size: 16px;
   margin-top: 8px;
   margin-bottom: 4px;
- }
+}

src/components/HomepageFeatures/index.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import Heading from "@theme/Heading";
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 type FeatureItem = {

src/components/JSONBlock.jsx

@@ -1,48 +1,49 @@
-import React, { useState } from 'react';
+import { FormControlLabel, Switch } from "@mui/material";
+import CodeBlock from "@theme/CodeBlock";
+import { useState } from "react";
 import ReactMarkdown from "react-markdown";
-import { Switch, FormControlLabel } from "@mui/material";
-import CodeBlock from '@theme/CodeBlock';
 
-const JSONBlock = ({object, multiline}) => {
-    // Prop definitions.
-    // object: The object to display.
-    // multiline: Whether to display the object as a single line or multiline.
+const JSONBlock = ({ object, multiline }) => {
+  // Prop definitions.
+  // object: The object to display.
+  // multiline: Whether to display the object as a single line or multiline.
 
-    // Set up state.
-    const [isMultiline, setMultiline] = useState(multiline);
+  // Set up state.
+  const [isMultiline, setMultiline] = useState(multiline);
 
-    // Run custom logic.
-    const text = isMultiline ? JSON.stringify(object, null, 2) : JSON.stringify(object);
+  // Run custom logic.
+  const text = isMultiline
+    ? JSON.stringify(object, null, 2)
+    : JSON.stringify(object);
 
-    // Return the component.
-    return (
-        <div className="json-preview">
-            <ReactMarkdown>{`## JSON`}</ReactMarkdown>
-
-            <CodeBlock
-                text={text}
-                language="json"
-                showLineNumber>{text}</CodeBlock>
-            <FormControlLabel
-                labelPlacement="start"
-                label="Multiline"
-                control={
-                    <Switch
-                        checked={isMultiline}
-                        onChange={() => setMultiline(!isMultiline)}
-                        inputProps={{ 'aria-label': 'Toggle multiline state.' }}
-                    />
-                }
-            />
-        </div>
-    );
-}
+  // Return the component.
+  return (
+    <div className="json-preview">
+      <ReactMarkdown>{"## JSON"}</ReactMarkdown>
+
+      <CodeBlock text={text} language="json" showLineNumber>
+        {text}
+      </CodeBlock>
+      <FormControlLabel
+        labelPlacement="start"
+        label="Multiline"
+        control={
+          <Switch
+            checked={isMultiline}
+            onChange={() => setMultiline(!isMultiline)}
+            inputProps={{ "aria-label": "Toggle multiline state." }}
+          />
+        }
+      />
+    </div>
+  );
+};
 
 // Default props.
 JSONBlock.defaultProps = {
-    object: {},
-    multiline: true,
-}
+  object: {},
+  multiline: true,
+};
 
 // Export the component.
-export default JSONBlock;
+export default JSONBlock;

src/components/JsonYamlTabs/index.jsx

@@ -1,28 +1,28 @@
-import React, { useState } from 'react';
-import { Tabs, Tab } from 'react-bootstrap';
-import yaml from 'yaml';
+import React, { useState } from "react";
+import { Tab, Tabs } from "react-bootstrap";
+import yaml from "yaml";
 
 const JsonYamlTabs = ({ jsonInput }) => {
-    const [yamlOutput, setYamlOutput] = useState('');
+  const [yamlOutput, setYamlOutput] = useState("");
 
-    const handleTabSelect = (key) => {
-        if (key === 'yaml') {
-            const parsedJson = JSON.parse(jsonInput);
-            const yamlString = yaml.stringify(parsedJson);
-            setYamlOutput(yamlString);
-        }
-    };
-// Change to use Docusaurus code block
-    return (
-        <Tabs defaultActiveKey="json" onSelect={handleTabSelect}>
-            <Tab eventKey="json" title="JSON">
-                <pre>{jsonInput}</pre>
-            </Tab>
-            <Tab eventKey="yaml" title="YAML">
-                <pre>{yamlOutput}</pre>
-            </Tab>
-        </Tabs>
-    );
+  const handleTabSelect = (key) => {
+    if (key === "yaml") {
+      const parsedJson = JSON.parse(jsonInput);
+      const yamlString = yaml.stringify(parsedJson);
+      setYamlOutput(yamlString);
+    }
+  };
+  // Change to use Docusaurus code block
+  return (
+    <Tabs defaultActiveKey="json" onSelect={handleTabSelect}>
+      <Tab eventKey="json" title="JSON">
+        <pre>{jsonInput}</pre>
+      </Tab>
+      <Tab eventKey="yaml" title="YAML">
+        <pre>{yamlOutput}</pre>
+      </Tab>
+    </Tabs>
+  );
 };
 
-export default JsonYamlTabs;
+export default JsonYamlTabs;