From da3a053a6c60cab14abc16d21d629efd81fb2375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=E1=BA=A1m=20V=C4=83n=20Nguy=C3=AAn?= <npv2k1@gmail.com>
Date: Mon, 1 Jan 2024 10:33:19 +0700
Subject: [PATCH] update ui

---
 src/components/AppLayout/index.tsx            |  4 +-
 src/modules/tools/index.tsx                   |  7 +-
 src/modules/tools/tools/Convert/index.tsx     | 88 ------------------
 src/modules/tools/tools/index.tsx             |  2 +-
 .../tools/tools/remove-lines/index.tsx        | 93 +++++++++++++++++++
 .../tools/tools/remove-lines/utils/index.tsx  | 15 +++
 .../tools/tools/remove-lines/utils/text.tsx   | 24 +++++
 7 files changed, 139 insertions(+), 94 deletions(-)
 delete mode 100644 src/modules/tools/tools/Convert/index.tsx
 create mode 100644 src/modules/tools/tools/remove-lines/index.tsx
 create mode 100644 src/modules/tools/tools/remove-lines/utils/index.tsx
 create mode 100644 src/modules/tools/tools/remove-lines/utils/text.tsx

diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index ce0a574..2bd0767 100644
--- a/src/components/AppLayout/index.tsx
+++ b/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>
diff --git a/src/modules/tools/index.tsx b/src/modules/tools/index.tsx
index 2f0cdca..6d8b01c 100644
--- a/src/modules/tools/index.tsx
+++ b/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 />,
     },
   ],
 };
diff --git a/src/modules/tools/tools/Convert/index.tsx b/src/modules/tools/tools/Convert/index.tsx
deleted file mode 100644
index 4a4bc8f..0000000
--- a/src/modules/tools/tools/Convert/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {} from '@emotion/react';
-import Editor from '@monaco-editor/react';
-
-const ConvertTool = () => {
-  const [fromValue, setFromValue] = useState('');
-  const [toValue, setToValue] = useState('');
-  const [fromLang, setFromLang] = useState('javascript');
-
-  function convertSCSSToReactNative(scssCode) {
-    const styles = {};
-
-    // Remove comments from the SCSS code
-    const cleanedCode = scssCode.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
-
-    // Split the code into individual lines
-    const lines = cleanedCode.split(';');
-
-    // Process each line of SCSS code
-    lines.forEach((line) => {
-      if (line.trim().length === 0) {
-        return;
-      }
-
-      // Split the line into property and value
-      const [property, value] = line.split(':');
-
-      // Convert property names
-      const convertedProperty = property
-        .trim()
-        .replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
-
-      // Convert values
-      const convertedValue = value?.trim().replace(/([0-9.]+)px/g, '$1');
-
-      // Add the converted style to the stylesheet
-      styles[convertedProperty] = convertedValue;
-    });
-
-    return styles;
-  }
-
-  const handleConvert = () => {
-    if (!fromValue) return;
-    setToValue(JSON.stringify(convertSCSSToReactNative(fromValue), null, 2));
-  };
-
-  return (
-    <div className="flex h-0 flex-1 flex-shrink items-stretch space-x-3 p-5">
-      <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="css"
-            value={fromValue}
-            onChange={(value) => setFromValue(value)}
-            defaultValue=""
-          />
-        </div>
-      </div>
-      <div className="min-w-36 flex h-full items-center justify-center rounded-md bg-white shadow-md">
-        <div>
-          <button className="rounded-lg bg-blue-300 px-3 py-2 " onClick={handleConvert}>
-            Convert
-          </button>
-        </div>
-      </div>
-      <div className="flex h-full flex-1 rounded-md bg-white shadow-md">
-        <Editor
-          theme="vs-dark"
-          height="100%"
-          width="100%"
-          defaultLanguage="JSON"
-          defaultValue=""
-          value={toValue}
-          onChange={(value) => setToValue(value)}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ConvertTool;
diff --git a/src/modules/tools/tools/index.tsx b/src/modules/tools/tools/index.tsx
index 49983de..7e269e6 100644
--- a/src/modules/tools/tools/index.tsx
+++ b/src/modules/tools/tools/index.tsx
@@ -1,2 +1,2 @@
 export * from './RandomPasswordTool';
-export * from './Convert';
+export * from "./remove-lines"
\ No newline at end of file
diff --git a/src/modules/tools/tools/remove-lines/index.tsx b/src/modules/tools/tools/remove-lines/index.tsx
new file mode 100644
index 0000000..66aeaf3
--- /dev/null
+++ b/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;
diff --git a/src/modules/tools/tools/remove-lines/utils/index.tsx b/src/modules/tools/tools/remove-lines/utils/index.tsx
new file mode 100644
index 0000000..292c784
--- /dev/null
+++ b/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,
+};
diff --git a/src/modules/tools/tools/remove-lines/utils/text.tsx b/src/modules/tools/tools/remove-lines/utils/text.tsx
new file mode 100644
index 0000000..6b422a7
--- /dev/null
+++ b/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');
+}