From e4c726c7b54c33702b23a10cbd27bddcf53f7121 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 9 Jul 2024 21:58:08 +0100
Subject: [PATCH] fix: misc

---
 .idea/workspace.xml                           | 107 ++++++------
 src/components/options/SelectWithDesc.tsx     |   6 +-
 src/components/result/ToolTextResult.tsx      |   5 +-
 .../find-most-popular.service.test.ts         | 154 +++++++++++-------
 src/pages/list/sort/index.tsx                 |   4 +-
 src/utils/string.ts                           |  10 ++
 6 files changed, 173 insertions(+), 113 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 57c0481..9d2dab7 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: sort list">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: find most popular ui">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/find-most-popular/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/find-most-popular/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/find-most-popular/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/find-most-popular/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/SelectWithDesc.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/SelectWithDesc.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/find-most-popular/find-most-popular.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/find-most-popular/find-most-popular.service.test.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/list/sort/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/sort/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/utils/string.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/string.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -45,44 +47,44 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "Playwright.JoinText Component.executor": "Run",
-    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "Vitest.compute function (1).executor": "Run",
-    "Vitest.compute function.executor": "Run",
-    "Vitest.mergeText.executor": "Run",
-    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/components/options",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.dev.executor": "Run",
-    "npm.lint.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "npm.script:create:tool.executor": "Run",
-    "npm.test.executor": "Run",
-    "npm.test:e2e.executor": "Run",
-    "npm.test:e2e:run.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
+    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/components/options&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -203,15 +205,8 @@
       <workItem from="1719475764139" duration="14903000" />
       <workItem from="1719492452780" duration="8000" />
       <workItem from="1719496624579" duration="6148000" />
-      <workItem from="1720542757452" duration="4048000" />
-    </task>
-    <task id="LOCAL-00040" summary="chore: CODEOWNERS">
-      <option name="closed" value="true" />
-      <created>1719184899883</created>
-      <option name="number" value="00040" />
-      <option name="presentableId" value="LOCAL-00040" />
-      <option name="project" value="LOCAL" />
-      <updated>1719184899883</updated>
+      <workItem from="1720542757452" duration="5355000" />
+      <workItem from="1720557527691" duration="1135000" />
     </task>
     <task id="LOCAL-00041" summary="ci: fix">
       <option name="closed" value="true" />
@@ -597,7 +592,15 @@
       <option name="project" value="LOCAL" />
       <updated>1720545582958</updated>
     </task>
-    <option name="localTasksCounter" value="89" />
+    <task id="LOCAL-00089" summary="feat: find most popular ui">
+      <option name="closed" value="true" />
+      <created>1720546921899</created>
+      <option name="number" value="00089" />
+      <option name="presentableId" value="LOCAL-00089" />
+      <option name="project" value="LOCAL" />
+      <updated>1720546921899</updated>
+    </task>
+    <option name="localTasksCounter" value="90" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -641,7 +644,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: create transparent png" />
     <MESSAGE value="fix: ToolFileInput.tsx" />
     <MESSAGE value="fix: generate numbers" />
     <MESSAGE value="fix: merging branches" />
@@ -666,7 +668,8 @@
     <MESSAGE value="feat: playwright report" />
     <MESSAGE value="chore: idea config" />
     <MESSAGE value="feat: sort list" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: sort list" />
+    <MESSAGE value="feat: find most popular ui" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: find most popular ui" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/options/SelectWithDesc.tsx b/src/components/options/SelectWithDesc.tsx
index 1b219fe..f0a5a23 100644
--- a/src/components/options/SelectWithDesc.tsx
+++ b/src/components/options/SelectWithDesc.tsx
@@ -24,7 +24,11 @@ const SelectWithDesc = <T extends string | boolean>({
   description: string;
 }) => {
   const handleChange = (event: SelectChangeEvent<T>) => {
-    onChange(event.target.value as T);
+    const newValue =
+      typeof selected === 'boolean'
+        ? event.target.value === 'true'
+        : event.target.value;
+    onChange(newValue as T);
   };
 
   return (
diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx
index 2a5e596..9baf4cc 100644
--- a/src/components/result/ToolTextResult.tsx
+++ b/src/components/result/ToolTextResult.tsx
@@ -1,8 +1,9 @@
 import { Box, TextField } from '@mui/material';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';
 import ResultFooter from './ResultFooter';
+import { replaceSpecialCharacters } from '../../utils/string';
 
 export default function ToolTextResult({
   title = 'Result',
@@ -37,7 +38,7 @@ export default function ToolTextResult({
     <Box>
       <InputHeader title={title} />
       <TextField
-        value={value}
+        value={replaceSpecialCharacters(value)}
         fullWidth
         multiline
         rows={10}
diff --git a/src/pages/list/find-most-popular/find-most-popular.service.test.ts b/src/pages/list/find-most-popular/find-most-popular.service.test.ts
index 665de8e..b5e0248 100644
--- a/src/pages/list/find-most-popular/find-most-popular.service.test.ts
+++ b/src/pages/list/find-most-popular/find-most-popular.service.test.ts
@@ -1,65 +1,105 @@
 import { expect, describe, it } from 'vitest';
-import { TopItemsList, SplitOperatorType, SortingMethod, DisplayFormat } from './service';
+import {
+  TopItemsList,
+  SplitOperatorType,
+  SortingMethod,
+  DisplayFormat
+} from './service';
 
 describe('TopItemsList function', () => {
-    it('should handle sorting alphabetically ignoring case', () => {
-        const input = 'Apple,banana,apple,Orange,Banana,apple';
-        const result = TopItemsList('symbol', 'alphabetic', 'count', ',', input, false, true, false);
-        expect(result).toEqual(
-            'apple: 3\n' +
-            'banana: 2\n' +
-            'orange: 1'
-        );
-    });
+  it('should handle sorting alphabetically ignoring case', () => {
+    const input = 'Apple,banana,apple,Orange,Banana,apple';
+    const result = TopItemsList(
+      'symbol',
+      'alphabetic',
+      'count',
+      ',',
+      input,
+      false,
+      true,
+      false
+    );
+    expect(result).toEqual('apple: 3\n' + 'banana: 2\n' + 'orange: 1');
+  });
 
-    it('should handle sorting by count and not ignoring case', () => {
-        const input = 'apple,banana,apple,orange,banana,apple,Banana';
-        const result = TopItemsList('symbol', 'count', 'count', ',', input, false, false, false);
-        expect(result).toEqual(
-            'apple: 3\n' +
-            'banana: 2\n' +
-            'orange: 1\n' +
-            'Banana: 1'
-        );
-    });
+  it('should handle sorting by count and not ignoring case', () => {
+    const input = 'apple,banana,apple,orange,banana,apple,Banana';
+    const result = TopItemsList(
+      'symbol',
+      'count',
+      'count',
+      ',',
+      input,
+      false,
+      false,
+      false
+    );
+    expect(result).toEqual(
+      'apple: 3\n' + 'banana: 2\n' + 'orange: 1\n' + 'Banana: 1'
+    );
+  });
 
-    it('should handle regex split operator', () => {
-        const input = 'apple123banana456apple789orange012banana345apple678';
-        const result = TopItemsList('regex', 'count', 'count', '\\d+', input, false, false, false);
-        expect(result).toEqual(
-            'apple: 3\n' +
-            'banana: 2\n' +
-            'orange: 1'
-        );
-    });
+  it('should handle regex split operator', () => {
+    const input = 'apple123banana456apple789orange012banana345apple678';
+    const result = TopItemsList(
+      'regex',
+      'count',
+      'count',
+      '\\d+',
+      input,
+      false,
+      false,
+      false
+    );
+    expect(result).toEqual('apple: 3\n' + 'banana: 2\n' + 'orange: 1');
+  });
 
-    it('should handle percentage display format', () => {
-        const input = 'apple,banana,apple,orange,banana,apple';
-        const result = TopItemsList('symbol', 'count', 'percentage', ',', input, false, false, false);
-        expect(result).toEqual(
-            'apple: 3 (50.00%)\n' +
-            'banana: 2 (33.33%)\n' +
-            'orange: 1 (16.67%)'
-        );
-    });
+  it('should handle percentage display format', () => {
+    const input = 'apple,banana,apple,orange,banana,apple';
+    const result = TopItemsList(
+      'symbol',
+      'count',
+      'percentage',
+      ',',
+      input,
+      false,
+      false,
+      false
+    );
+    expect(result).toEqual(
+      'apple: 3 (50.00%)\n' + 'banana: 2 (33.33%)\n' + 'orange: 1 (16.67%)'
+    );
+  });
 
-    it('should handle total display format', () => {
-        const input = 'apple,banana,apple,orange,banana,apple';
-        const result = TopItemsList('symbol', 'count', 'total', ',', input, false, false, false);
-        expect(result).toEqual(
-            'apple: 3 (3 / 6)\n' +
-            'banana: 2 (2 / 6)\n' +
-            'orange: 1 (1 / 6)'
-        );
-    });
+  it('should handle total display format', () => {
+    const input = 'apple,banana,apple,orange,banana,apple';
+    const result = TopItemsList(
+      'symbol',
+      'count',
+      'total',
+      ',',
+      input,
+      false,
+      false,
+      false
+    );
+    expect(result).toEqual(
+      'apple: 3 (3 / 6)\n' + 'banana: 2 (2 / 6)\n' + 'orange: 1 (1 / 6)'
+    );
+  });
 
-    it('should handle trimming and ignoring empty items', () => {
-        const input = ' apple , banana , apple , orange , banana , apple ';
-        const result = TopItemsList('symbol', 'count', 'count', ',', input, true, false, true);
-        expect(result).toEqual(
-            'apple: 3\n' +
-            'banana: 2\n' +
-            'orange: 1'
-        );
-    });
-});
\ No newline at end of file
+  it('should handle trimming and ignoring empty items', () => {
+    const input = ' apple , banana , apple , orange , banana , apple ';
+    const result = TopItemsList(
+      'symbol',
+      'count',
+      'count',
+      ',',
+      input,
+      true,
+      false,
+      true
+    );
+    expect(result).toEqual('apple: 3\n' + 'banana: 2\n' + 'orange: 1');
+  });
+});
diff --git a/src/pages/list/sort/index.tsx b/src/pages/list/sort/index.tsx
index d4d345a..0e5c063 100644
--- a/src/pages/list/sort/index.tsx
+++ b/src/pages/list/sort/index.tsx
@@ -124,7 +124,9 @@ export default function SplitText() {
                     { label: 'Increasing order', value: true },
                     { label: 'Decreasing order', value: false }
                   ]}
-                  onChange={(value) => updateField('increasing', value)}
+                  onChange={(value) => {
+                    updateField('increasing', value);
+                  }}
                   description={'Select a sorting order.'}
                 />
                 <CheckboxWithDesc
diff --git a/src/utils/string.ts b/src/utils/string.ts
index d2e4e8f..db558eb 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -6,3 +6,13 @@ export function capitalizeFirstLetter(string: string | undefined) {
 export function isNumber(number: any) {
   return !isNaN(parseFloat(number)) && isFinite(number);
 }
+
+export const replaceSpecialCharacters = (str: string) => {
+  return str
+    .replace(/\\n/g, '\n')
+    .replace(/\\t/g, '\t')
+    .replace(/\\r/g, '\r')
+    .replace(/\\b/g, '\b')
+    .replace(/\\f/g, '\f')
+    .replace(/\\v/g, '\v');
+};