refactor: use ToolContent

src/pages/tools/list/duplicate/index.tsx

@@ -8,12 +8,5 @@ const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
 export default function Duplicate() {
-  return (
-    <ToolContent
-      title="Duplicate"
-      initialValues={initialValues}
-      compute={() => {}}
-      resultComponent={<Box>Lorem ipsum</Box>}
-    />
-  );
+  return <Box>Lorem ipsum</Box>;
 }

src/pages/tools/list/find-unique/index.tsx

@@ -2,9 +2,8 @@ import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolContent from '@components/ToolContent';
 import { findUniqueCompute, SplitOperatorType } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
@@ -64,95 +63,89 @@ export default function FindUnique() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input list'}
-            value={input}
-            onChange={setInput}
-          />
+    <ToolContent
+      title="Find Unique"
+      initialValues={initialValues}
+      compute={compute}
+      input={input}
+      setInput={setInput}
+      inputComponent={
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title={'Unique items'} value={result} />}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Input List Delimiter',
+          component: (
+            <Box>
+              {splitOperators.map(({ title, description, type }) => (
+                <SimpleRadio
+                  key={type}
+                  onClick={() => updateField('splitOperatorType', type)}
+                  title={title}
+                  description={description}
+                  checked={values.splitOperatorType === type}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Set a delimiting symbol or regular expression.'}
+                value={values.splitSeparator}
+                onOwnChange={(val) => updateField('splitSeparator', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Output List Delimiter',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                value={values.joinSeparator}
+                onOwnChange={(value) => updateField('joinSeparator', value)}
+              />
+              <CheckboxWithDesc
+                title={'Trim top list items'}
+                description={
+                  'Remove leading and trailing spaces before comparing items'
+                }
+                checked={values.trimItems}
+                onChange={(value) => updateField('trimItems', value)}
+              />
+              <CheckboxWithDesc
+                title={'Skip empty items'}
+                description={
+                  "Don't include the empty list items in the output."
+                }
+                checked={values.deleteEmptyItems}
+                onChange={(value) => updateField('deleteEmptyItems', value)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Unique Item Options',
+          component: (
+            <Box>
+              <CheckboxWithDesc
+                title={'Find Absolutely Unique Items'}
+                description={
+                  'Display only those items of the list that exist in a single copy.'
+                }
+                checked={values.absolutelyUnique}
+                onChange={(value) => updateField('absolutelyUnique', value)}
+              />
+              <CheckboxWithDesc
+                title={'Case Sensitive Items'}
+                description={
+                  'Output items with different case as unique elements in the list.'
+                }
+                checked={values.caseSensitive}
+                onChange={(value) => updateField('caseSensitive', value)}
+              />
+            </Box>
+          )
         }
-        result={<ToolTextResult title={'Unique items'} value={result} />}
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Input List Delimiter',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitOperatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitOperatorType === type}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Output List Delimiter',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  value={values.joinSeparator}
-                  onOwnChange={(value) => updateField('joinSeparator', value)}
-                />
-                <CheckboxWithDesc
-                  title={'Trim top list items'}
-                  description={
-                    'Remove leading and trailing spaces before comparing items'
-                  }
-                  checked={values.trimItems}
-                  onChange={(value) => updateField('trimItems', value)}
-                />
-                <CheckboxWithDesc
-                  title={'Skip empty items'}
-                  description={
-                    "Don't include the empty list items in the output."
-                  }
-                  checked={values.deleteEmptyItems}
-                  onChange={(value) => updateField('deleteEmptyItems', value)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Unique Item Options',
-            component: (
-              <Box>
-                <CheckboxWithDesc
-                  title={'Find Absolutely Unique Items'}
-                  description={
-                    'Display only those items of the list that exist in a single copy.'
-                  }
-                  checked={values.absolutelyUnique}
-                  onChange={(value) => updateField('absolutelyUnique', value)}
-                />
-                <CheckboxWithDesc
-                  title={'Case Sensitive Items'}
-                  description={
-                    'Output items with different case as unique elements in the list.'
-                  }
-                  checked={values.caseSensitive}
-                  onChange={(value) => updateField('caseSensitive', value)}
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+      ]}
+    />
   );
 }

src/pages/tools/list/index.ts

@@ -11,15 +11,15 @@ import { tool as listShuffle } from './shuffle/meta';
 import { tool as listSort } from './sort/meta';
 
 export const listTools = [
-  listSort, // TODO: Check if uses ToolContent - Needs update to use ToolContent - Implemented ToolContent
+  listSort,
   // listUnwrap,
-  listReverse, // TODO: Check if uses ToolContent - Needs update to use ToolContent
-  listFindUnique, // TODO: Check if uses ToolContent - Needs update to use ToolContent
-  listFindMostPopular, // TODO: Check if uses ToolContent - Needs update to use ToolContent
-  listGroup, // TODO: Check if uses ToolContent - Needs update to use ToolContent
+  listReverse,
+  listFindUnique,
+  listFindMostPopular,
+  listGroup,
   // listWrap,
-  listRotate, // TODO: Check if uses ToolContent - Needs update to use ToolContent
-  listShuffle // TODO: Check if uses ToolContent - Needs update to use ToolContent
+  listRotate,
+  listShuffle
   // listTruncate,
   // listDuplicate
 ];

src/pages/tools/list/shuffle/index.tsx

@@ -2,12 +2,11 @@ import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolContent from '@components/ToolContent';
 import { shuffleList, SplitOperatorType } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
-import { isNumber } from '../../../../utils/string';
+import { isNumber } from '@utils/string';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -51,69 +50,65 @@ export default function Shuffle() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input list'}
-            value={input}
-            onChange={setInput}
-          />
+    <ToolContent
+      title="Shuffle"
+      initialValues={initialValues}
+      compute={compute}
+      input={input}
+      setInput={setInput}
+      inputComponent={
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult title={'Shuffled list'} value={result} />
+      }
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Input list separator',
+          component: (
+            <Box>
+              {splitOperators.map(({ title, description, type }) => (
+                <SimpleRadio
+                  key={type}
+                  onClick={() => updateField('splitOperatorType', type)}
+                  title={title}
+                  description={description}
+                  checked={values.splitOperatorType === type}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Set a delimiting symbol or regular expression.'}
+                value={values.splitSeparator}
+                onOwnChange={(val) => updateField('splitSeparator', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Shuffled List Length',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                description={'Output this many random items'}
+                value={values.length}
+                onOwnChange={(val) => updateField('length', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Shuffled List Separator',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                value={values.joinSeparator}
+                onOwnChange={(value) => updateField('joinSeparator', value)}
+                description={'Use this separator in the randomized list.'}
+              />
+            </Box>
+          )
         }
-        result={<ToolTextResult title={'Shuffled list'} value={result} />}
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Input list separator',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitOperatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitOperatorType === type}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Shuffled List Length',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  description={'Output this many random items'}
-                  value={values.length}
-                  onOwnChange={(val) => updateField('length', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Shuffled List Separator',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  value={values.joinSeparator}
-                  onOwnChange={(value) => updateField('joinSeparator', value)}
-                  description={'Use this separator in the randomized list.'}
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+      ]}
+    />
   );
 }