refactor: validateJson

.idea/workspace.xml

@@ -6,7 +6,8 @@
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: remove unnecessary files">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/text-replacer/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/text-replacer/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/validateJson/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/validateJson/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/validateJson/servcie.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/validateJson/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -29,16 +30,19 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
   </component>
-  <component name="GitHubPullRequestSearchHistory">{
-  &quot;history&quot;: [
+  <component name="GitHubPullRequestSearchHistory"><![CDATA[{
+  "history": [
     {
-      &quot;assignee&quot;: &quot;iib0011&quot;
+      "assignee": "iib0011"
+    },
+    {
+      "state": "OPEN"
     }
   ],
-  &quot;lastFilter&quot;: {
-    &quot;assignee&quot;: &quot;iib0011&quot;
+  "lastFilter": {
+    "assignee": "iib0011"
   }
-}</component>
+}]]></component>
   <component name="GitHubPullRequestState">{
   &quot;prStates&quot;: [
     {
@@ -116,7 +120,7 @@
     "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
-    "git-widget-placeholder": "main",
+    "git-widget-placeholder": "#44 on fork/ady-cf/feature/validate-json",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/.husky",
@@ -167,7 +171,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
     </key>
   </component>
-  <component name="RunManager" selected="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="replaceText function (regexp mode).should return the original text when passed an invalid regexp" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -240,10 +244,10 @@
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.test:e2e" />
-        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function" />
       </list>
     </recent_temporary>

src/pages/tools/json/validateJson/index.tsx

@@ -1,16 +1,10 @@
-import { Box } from '@mui/material';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-import ToolInfo from '@components/ToolInfo';
-import Separator from '@components/Separator';
-import ToolExamples, {
-  CardExampleType
-} from '@components/examples/ToolExamples';
-import { FormikProps } from 'formik';
-import { validateJson } from './servcie';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { validateJson } from './service';
 import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
 
 const exampleCards: CardExampleType<{}>[] = [
   {
@@ -54,15 +48,8 @@ const exampleCards: CardExampleType<{}>[] = [
 export default function ValidateJson({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<{}>>(null);
 
-  useEffect(() => {
-    if (input) {
-      compute(input);
-    }
-  }, [input]);
-
-  const compute = (input: string) => {
+  const compute = (options: any, input: string) => {
     const { valid, error } = validateJson(input);
 
     if (valid) {
@@ -73,37 +60,33 @@ export default function ValidateJson({ title }: ToolComponentProps) {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
+    <ToolContent
+      title={title}
+      inputComponent={
         <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
       }
-        result={<ToolTextResult title="Validation Result" value={result} />}
-      />
-
-      <ToolInfo
-        title="What is JSON Validation?"
-        description="
+      resultComponent={
+        <ToolTextResult title="Validation Result" value={result} />
+      }
+      initialValues={{}}
+      getGroups={null}
+      toolInfo={{
+        title: 'What is JSON Validation?',
+        description: `
           JSON (JavaScript Object Notation) is a lightweight data-interchange format.
           JSON validation ensures that the structure of the data conforms to the JSON standard.
           A valid JSON object must have:
           - Property names enclosed in double quotes.
-          - Properly balanced curly braces `{}`.
+          - Properly balanced curly braces {}.
           - No trailing commas after the last key-value pair.
           - Proper nesting of objects and arrays.
           This tool checks the input JSON and provides feedback to help identify and fix common errors.
-        "
-      />
-
-      <Separator backgroundColor="#5581b5" margin="50px" />
-
-      <ToolExamples
-        title={title}
+          `
+      }}
       exampleCards={exampleCards}
-        getGroups={() => []}
-        formRef={formRef}
+      input={input}
       setInput={setInput}
+      compute={compute}
     />
-    </Box>
   );
 }

src/pages/tools/json/validateJson/service.ts

@@ -6,7 +6,6 @@ export const validateJson = (
     return { valid: true };
   } catch (error) {
     if (error instanceof SyntaxError) {
-      const message = error.message;
       return { valid: false, error: error.message };
     }
     return { valid: false, error: 'Unknown error occurred' };