refactor: toolOptions

src/pages/string/join/index.tsx

@@ -16,6 +16,7 @@ import Info from './Info';
 import Separator from '../../../tools/Separator';
 import AllTools from '../../../components/allTools/AllTools';
 import Examples from '../../../components/examples/Examples';
+import ColorSelector from '../../../components/options/ColorSelector';
 
 const initialValues = {
   joinCharacter: '',
@@ -115,23 +116,11 @@ s
 
 export default function JoinText() {
   const [input, setInput] = useState<string>('');
-  const { showSnackBar } = useContext(CustomSnackBarContext);
   const [result, setResult] = useState<string>('');
 
-  const FormikListenerComponent = ({ input }: { input: string }) => {
-    const { values } = useFormikContext<typeof initialValues>();
-    const { joinCharacter, deleteBlank, deleteTrailing } = values;
-
-    useEffect(() => {
-      try {
-        setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, input]);
-
-    return null;
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { joinCharacter, deleteBlank, deleteTrailing } = optionsValues;
+    setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
   };
 
   function changeInputResult(input: string, result: string) {
@@ -156,50 +145,39 @@ export default function JoinText() {
         }
         result={<ToolTextResult title={'Joined Text'} value={result} />}
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent input={input} />
-              <ToolOptionGroups
-                groups={[
-                  {
-                    title: 'Text Merged Options',
-                    component: (
-                      <TextFieldWithDesc
-                        placeholder={mergeOptions.placeholder}
-                        value={values['joinCharacter']}
-                        onChange={(value) =>
-                          setFieldValue(mergeOptions.accessor, value)
-                        }
-                        description={mergeOptions.description}
-                      />
-                    )
-                  },
-                  {
-                    title: 'Blank Lines and Trailing Spaces',
-                    component: blankTrailingOptions.map((option) => (
-                      <CheckboxWithDesc
-                        key={option.accessor}
-                        title={option.title}
-                        checked={!!values[option.accessor]}
-                        onChange={(value) =>
-                          setFieldValue(option.accessor, value)
-                        }
-                        description={option.description}
-                      />
-                    ))
-                  }
-                ]}
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'Text Merged Options',
+            component: (
+              <TextFieldWithDesc
+                placeholder={mergeOptions.placeholder}
+                value={values['joinCharacter']}
+                onChange={(value) =>
+                  setFieldValue(mergeOptions.accessor, value)
+                }
+                description={mergeOptions.description}
               />
-            </Stack>
-          )}
-        </Formik>
-      </ToolOptions>
+            )
+          },
+          {
+            title: 'Blank Lines and Trailing Spaces',
+            component: blankTrailingOptions.map((option) => (
+              <CheckboxWithDesc
+                key={option.accessor}
+                title={option.title}
+                checked={!!values[option.accessor]}
+                onChange={(value) => setFieldValue(option.accessor, value)}
+                description={option.description}
+              />
+            ))
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
       <Info
         title="What Is a Text Joiner?"
         description="With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!"

src/pages/string/split/index.tsx

@@ -12,6 +12,7 @@ import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -82,44 +83,31 @@ export default function SplitText() {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   // const formRef = useRef<FormikProps<typeof initialValues>>(null);
-  const { showSnackBar } = useContext(CustomSnackBarContext);
+  const computeExternal = (optionsValues: typeof initialValues, input: any) => {
+    const {
+      splitSeparatorType,
+      outputSeparator,
+      charBeforeChunk,
+      charAfterChunk,
+      chunksValue,
+      symbolValue,
+      regexValue,
+      lengthValue
+    } = optionsValues;
 
-  const FormikListenerComponent = () => {
-    const { values } = useFormikContext<typeof initialValues>();
-
-    useEffect(() => {
-      try {
-        const {
-          splitSeparatorType,
-          outputSeparator,
-          charBeforeChunk,
-          charAfterChunk,
-          chunksValue,
-          symbolValue,
-          regexValue,
-          lengthValue
-        } = values;
-
-        setResult(
-          compute(
-            splitSeparatorType,
-            input,
-            symbolValue,
-            regexValue,
-            Number(lengthValue),
-            Number(chunksValue),
-            charBeforeChunk,
-            charAfterChunk,
-            outputSeparator
-          )
-        );
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, input]);
-
-    return null; // This component doesn't render anything
+    setResult(
+      compute(
+        splitSeparatorType,
+        input,
+        symbolValue,
+        regexValue,
+        Number(lengthValue),
+        Number(chunksValue),
+        charBeforeChunk,
+        charAfterChunk,
+        outputSeparator
+      )
+    );
   };
   const validationSchema = Yup.object({
     // splitSeparator: Yup.string().required('The separator is required')
@@ -131,57 +119,42 @@ export default function SplitText() {
         input={<ToolTextInput value={input} onChange={setInput} />}
         result={<ToolTextResult title={'Text pieces'} value={result} />}
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent />
-              <ToolOptionGroups
-                groups={[
-                  {
-                    title: 'Split separator options',
-                    component: splitOperators.map(
-                      ({ title, description, type }) => (
-                        <RadioWithTextField
-                          key={type}
-                          radioValue={type}
-                          title={title}
-                          fieldName={'splitSeparatorType'}
-                          description={description}
-                          value={values[`${type}Value`]}
-                          onRadioChange={(type) =>
-                            setFieldValue('splitSeparatorType', type)
-                          }
-                          onTextChange={(val) =>
-                            setFieldValue(`${type}Value`, val)
-                          }
-                        />
-                      )
-                    )
-                  },
-                  {
-                    title: 'Output separator options',
-                    component: outputOptions.map((option) => (
-                      <TextFieldWithDesc
-                        key={option.accessor}
-                        value={values[option.accessor]}
-                        onChange={(value) =>
-                          setFieldValue(option.accessor, value)
-                        }
-                        description={option.description}
-                      />
-                    ))
-                  }
-                ]}
+      <ToolOptions
+        compute={computeExternal}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'Split separator options',
+            component: splitOperators.map(({ title, description, type }) => (
+              <RadioWithTextField
+                key={type}
+                radioValue={type}
+                title={title}
+                fieldName={'splitSeparatorType'}
+                description={description}
+                value={values[`${type}Value`]}
+                onRadioChange={(type) =>
+                  setFieldValue('splitSeparatorType', type)
+                }
+                onTextChange={(val) => setFieldValue(`${type}Value`, val)}
               />
-            </Stack>
-          )}
-        </Formik>
-      </ToolOptions>
+            ))
+          },
+          {
+            title: 'Output separator options',
+            component: outputOptions.map((option) => (
+              <TextFieldWithDesc
+                key={option.accessor}
+                value={values[option.accessor]}
+                onChange={(value) => setFieldValue(option.accessor, value)}
+                description={option.description}
+              />
+            ))
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }

src/pages/string/to-morse/index.tsx

@@ -1,15 +1,11 @@
-import { Box, Stack } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import React, { useContext, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
 import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';
-import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import ToolOptions from '../../../components/options/ToolOptions';
 import { compute } from './service';
-import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
@@ -21,23 +17,9 @@ export default function ToMorse() {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   // const formRef = useRef<FormikProps<typeof initialValues>>(null);
-  const { showSnackBar } = useContext(CustomSnackBarContext);
-
-  const FormikListenerComponent = () => {
-    const { values } = useFormikContext<typeof initialValues>();
-
-    useEffect(() => {
-      try {
-        const { dotSymbol, dashSymbol } = values;
-
-        setResult(compute(input, dotSymbol, dashSymbol));
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, input]);
-
-    return null; // This component doesn't render anything
+  const computeOptions = (optionsValues: typeof initialValues, input: any) => {
+    const { dotSymbol, dashSymbol } = optionsValues;
+    setResult(compute(input, dotSymbol, dashSymbol));
   };
   const validationSchema = Yup.object({
     // splitSeparator: Yup.string().required('The separator is required')
@@ -49,47 +31,38 @@ export default function ToMorse() {
         input={<ToolTextInput value={input} onChange={setInput} />}
         result={<ToolTextResult title={'Morse code'} value={result} />}
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent />
-              <ToolOptionGroups
-                groups={[
-                  {
-                    title: 'Short Signal',
-                    component: (
-                      <TextFieldWithDesc
-                        description={
-                          'Symbol that will correspond to the dot in Morse code.'
-                        }
-                        value={values.dotSymbol}
-                        onChange={(val) => setFieldValue('dotSymbol', val)}
-                      />
-                    )
-                  },
-                  {
-                    title: 'Long Signal',
-                    component: (
-                      <TextFieldWithDesc
-                        description={
-                          'Symbol that will correspond to the dash in Morse code.'
-                        }
-                        value={values.dashSymbol}
-                        onChange={(val) => setFieldValue('dashSymbol', val)}
-                      />
-                    )
-                  }
-                ]}
+      <ToolOptions
+        compute={computeOptions}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'Short Signal',
+            component: (
+              <TextFieldWithDesc
+                description={
+                  'Symbol that will correspond to the dot in Morse code.'
+                }
+                value={values.dotSymbol}
+                onChange={(val) => setFieldValue('dotSymbol', val)}
               />
-            </Stack>
-          )}
-        </Formik>
-      </ToolOptions>
+            )
+          },
+          {
+            title: 'Long Signal',
+            component: (
+              <TextFieldWithDesc
+                description={
+                  'Symbol that will correspond to the dash in Morse code.'
+                }
+                value={values.dashSymbol}
+                onChange={(val) => setFieldValue('dashSymbol', val)}
+              />
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }