update ui

src/components/AppLayout/index.tsx

@@ -84,8 +84,8 @@ const AppLayout: React.FC<PropsWithChildren> = ({ children }) => {
             </Col>
           </Row>
         </Header> */}
-        <Content className="bg-slate-300 p-2 text-start">
-          <div className="h-full flex-1 justify-start overflow-auto rounded-xl bg-white p-3 shadow-xl ">
+        <Content className="bg-slate-300 p-1 text-start">
+          <div className="h-full flex-1 justify-start overflow-auto rounded-xl bg-white p-1 shadow-xl ">
             {children}
           </div>
         </Content>

src/modules/tools/index.tsx

@@ -1,8 +1,8 @@
 import ToolsLayout from './components/ToolsLayout';
 import { RandomPasswordTool } from './tools';
-import ConvertTool from './tools/Convert';
 
 import { RouteObject } from 'react-router-dom';
+import RemoveLines from './tools/remove-lines';
 
 const ToolsModule: RouteObject = {
   path: 'tools',
@@ -12,9 +12,10 @@ const ToolsModule: RouteObject = {
       path: 'random-password-tool',
       element: <RandomPasswordTool />,
     },
+
     {
-      path: 'convert-tool',
-      element: <ConvertTool />,
+      path: 'Convert',
+      element: <RemoveLines />,
     },
   ],
 };

src/modules/tools/tools/index.tsx

@@ -1,2 +1,2 @@
 export * from './RandomPasswordTool';
-export * from './Convert';
+export * from "./remove-lines"

src/modules/tools/tools/remove-lines/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import {} from '@emotion/react';
+import Editor from '@monaco-editor/react';
+import { Select } from 'antd';
+import { BaseOptionType } from 'antd/es/select';
+import { formatFunc, FormatTool } from './utils';
+
+const convertOption: BaseOptionType[] = Object.keys(FormatTool).map((e) => {
+  return {
+    label: FormatTool[e as keyof typeof FormatTool],
+    value: FormatTool[e as keyof typeof FormatTool],
+  };
+});
+
+const RemoveLines = () => {
+  const [fromValue, setFromValue] = useState('');
+  const [toValue, setToValue] = useState('');
+  const [convertFunction, setConvertFunction] = useState('');
+  const [convertSelected, setConvertSelected] = useState<FormatTool>(FormatTool.DEFAULT);
+
+  const handleConvert = () => {
+    console.log(convertSelected);
+    const _formatFunc = formatFunc[convertSelected];
+    try {
+      const _output = _formatFunc(fromValue);
+      console.log('🚀 ~ file: index.tsx:26 ~ handleConvert ~ _output:', _output);
+      setToValue(_output);
+    } catch (e) {
+      setToValue(JSON.stringify(e, null, 2));
+    }
+  };
+
+  return (
+    <div className="flex h-0 flex-1 flex-shrink items-stretch space-x-3 rounded-md p-1">
+      <div className="flex h-full flex-1 rounded-md bg-white shadow-md">
+        <div className="flex flex-1 flex-col">
+          {/* <div className='h-10'>
+              copy
+          </div> */}
+          <Editor
+            theme="vs-dark"
+            height="100%"
+            width="100%"
+            defaultLanguage="plaintext"
+            value={fromValue}
+            onChange={(value) => value && setFromValue(value)}
+            defaultValue=""
+          />
+        </div>
+      </div>
+      <div className="flex h-full min-w-[300px] flex-col items-stretch justify-center space-y-4 rounded-md bg-white shadow-md">
+        <Select
+          showSearch
+          defaultValue="default"
+          onChange={(value) => setConvertSelected(value)}
+          value={convertSelected}
+          options={convertOption}
+          className="w-full"
+        />
+        <button className="rounded-lg bg-blue-300 px-3 py-2 " onClick={handleConvert}>
+          Convert
+        </button>
+        {/* <Editor
+          theme="vs-dark"
+          height="100%"
+          width="100%"
+          defaultLanguage="javascript"
+          defaultValue=""
+          value={convertFunction}
+          onChange={(value) => value && setConvertFunction(value)}
+          options={{
+            minimap: {
+              enabled: false,
+            },
+          }}
+        /> */}
+      </div>
+      <div className="flex h-full flex-1 rounded-md bg-white shadow-md">
+        <Editor
+          theme="vs-dark"
+          height="100%"
+          width="100%"
+          defaultLanguage="plaintext"
+          defaultValue=""
+          value={toValue}
+          onChange={(value) => value && setToValue(value)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RemoveLines;

src/modules/tools/tools/remove-lines/utils/index.tsx

@@ -0,0 +1,15 @@
+import { getUniqueCharacters, removeDuplicatedLines, sortLines } from './text';
+
+export enum FormatTool {
+  DEFAULT = 'Default',
+  REMOVE_DUMPLICATE_LINE = 'remove dumplicate line',
+  SORT_LINE = 'Sort line',
+  GET_CHAR = 'Get char',
+}
+
+export const formatFunc = {
+  [FormatTool.DEFAULT]: (text: string) => text,
+  [FormatTool.REMOVE_DUMPLICATE_LINE]: removeDuplicatedLines,
+  [FormatTool.SORT_LINE]: sortLines,
+  [FormatTool.GET_CHAR]: getUniqueCharacters,
+};

src/modules/tools/tools/remove-lines/utils/text.tsx

@@ -0,0 +1,24 @@
+import * as _ from 'lodash';
+
+const getLines = (text: string): string[] => {
+  const lines = _.split(text, /\r?\n/);
+  return lines;
+};
+
+export function removeDuplicatedLines(text: string): string {
+  const lines = getLines(text);
+  const uniqueLines = _.uniq(lines);
+  return uniqueLines.join('\n');
+}
+
+export function sortLines(text: string): string {
+  const lines = _.split(text, /\r?\n/);
+  const sortedLines = _.sortBy(lines);
+  return sortedLines.join('\n');
+}
+
+export function getUniqueCharacters(text: string): string {
+  const uniqueChars = new Set(text.split(/\s+|\r\n|\r|\n/));
+  const sortedUniqueChars = Array.from(uniqueChars).sort();
+  return sortedUniqueChars.join('\n');
+}