mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-12-29 16:16:02 +00:00
refactor: tools folder inside pages
This commit is contained in:
Ibrahima G. Coulibaly
@@ -0,0 +1,100 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { TopItemsList } 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 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 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 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');
|
||||
});
|
||||
});
|
||||
167
src/pages/tools/list/find-most-popular/index.tsx
Normal file
167
src/pages/tools/list/find-most-popular/index.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
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 {
|
||||
DisplayFormat,
|
||||
SortingMethod,
|
||||
SplitOperatorType,
|
||||
TopItemsList
|
||||
} 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';
|
||||
import SelectWithDesc from '@components/options/SelectWithDesc';
|
||||
|
||||
const initialValues = {
|
||||
splitSeparatorType: 'symbol' as SplitOperatorType,
|
||||
sortingMethod: 'alphabetic' as SortingMethod,
|
||||
displayFormat: 'count' as DisplayFormat,
|
||||
splitSeparator: ',',
|
||||
deleteEmptyItems: false,
|
||||
ignoreItemCase: false,
|
||||
trimItems: false
|
||||
};
|
||||
const splitOperators: {
|
||||
title: string;
|
||||
description: string;
|
||||
type: SplitOperatorType;
|
||||
}[] = [
|
||||
{
|
||||
title: 'Use a Symbol for Splitting',
|
||||
description: 'Delimit input list items with a character.',
|
||||
type: 'symbol'
|
||||
},
|
||||
{
|
||||
title: 'Use a Regex for Splitting',
|
||||
type: 'regex',
|
||||
description: 'Delimit input list items with a regular expression.'
|
||||
}
|
||||
];
|
||||
|
||||
export default function FindMostPopular() {
|
||||
const [input, setInput] = useState<string>('');
|
||||
const [result, setResult] = useState<string>('');
|
||||
const compute = (optionsValues: typeof initialValues, input: any) => {
|
||||
const {
|
||||
splitSeparatorType,
|
||||
splitSeparator,
|
||||
displayFormat,
|
||||
sortingMethod,
|
||||
deleteEmptyItems,
|
||||
ignoreItemCase,
|
||||
trimItems
|
||||
} = optionsValues;
|
||||
|
||||
setResult(
|
||||
TopItemsList(
|
||||
splitSeparatorType,
|
||||
sortingMethod,
|
||||
displayFormat,
|
||||
splitSeparator,
|
||||
input,
|
||||
deleteEmptyItems,
|
||||
ignoreItemCase,
|
||||
trimItems
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<ToolInputAndResult
|
||||
input={
|
||||
<ToolTextInput
|
||||
title={'Input list'}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
/>
|
||||
}
|
||||
result={<ToolTextResult title={'Most popular items'} value={result} />}
|
||||
/>
|
||||
<ToolOptions
|
||||
compute={compute}
|
||||
getGroups={({ values, updateField }) => [
|
||||
{
|
||||
title: 'How to Extract List Items?',
|
||||
component: (
|
||||
<Box>
|
||||
{splitOperators.map(({ title, description, type }) => (
|
||||
<SimpleRadio
|
||||
key={type}
|
||||
onClick={() => updateField('splitSeparatorType', type)}
|
||||
title={title}
|
||||
description={description}
|
||||
checked={values.splitSeparatorType === type}
|
||||
/>
|
||||
))}
|
||||
<TextFieldWithDesc
|
||||
description={'Set a delimiting symbol or regular expression.'}
|
||||
value={values.splitSeparator}
|
||||
onOwnChange={(val) => updateField('splitSeparator', val)}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Item comparison',
|
||||
component: (
|
||||
<Box>
|
||||
<CheckboxWithDesc
|
||||
title={'Remove empty items'}
|
||||
description={'Ignore empty items from comparison.'}
|
||||
checked={values.deleteEmptyItems}
|
||||
onChange={(value) => updateField('deleteEmptyItems', 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={'Ignore Item Case'}
|
||||
description={'Compare all list items in lowercase.'}
|
||||
checked={values.ignoreItemCase}
|
||||
onChange={(value) => updateField('ignoreItemCase', value)}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Top item output format',
|
||||
component: (
|
||||
<Box>
|
||||
<SelectWithDesc
|
||||
selected={values.displayFormat}
|
||||
options={[
|
||||
{ label: 'Show item percentage', value: 'percentage' },
|
||||
{ label: 'Show item count', value: 'count' },
|
||||
{ label: 'Show item total', value: 'total' }
|
||||
]}
|
||||
onChange={(value) => updateField('displayFormat', value)}
|
||||
description={'How to display the most popular list items?'}
|
||||
/>
|
||||
<SelectWithDesc
|
||||
selected={values.sortingMethod}
|
||||
options={[
|
||||
{ label: 'Sort Alphabetically', value: 'alphabetic' },
|
||||
{ label: 'Sort by count', value: 'count' }
|
||||
]}
|
||||
onChange={(value) => updateField('sortingMethod', value)}
|
||||
description={'Select a sorting method.'}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
]}
|
||||
initialValues={initialValues}
|
||||
input={input}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
13
src/pages/tools/list/find-most-popular/meta.ts
Normal file
13
src/pages/tools/list/find-most-popular/meta.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { defineTool } from '@tools/defineTool';
|
||||
import { lazy } from 'react';
|
||||
// import image from '@assets/text.png';
|
||||
|
||||
export const tool = defineTool('list', {
|
||||
name: 'Find most popular',
|
||||
path: 'find-most-popular',
|
||||
// image,
|
||||
description: '',
|
||||
shortDescription: '',
|
||||
keywords: ['find', 'most', 'popular'],
|
||||
component: lazy(() => import('./index'))
|
||||
});
|
||||
114
src/pages/tools/list/find-most-popular/service.ts
Normal file
114
src/pages/tools/list/find-most-popular/service.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
export type SplitOperatorType = 'symbol' | 'regex';
|
||||
export type DisplayFormat = 'count' | 'percentage' | 'total';
|
||||
export type SortingMethod = 'count' | 'alphabetic';
|
||||
|
||||
// Function that takes the array as arg and returns a dict of element occurrences and handle the ignoreItemCase
|
||||
function dictMaker(
|
||||
array: string[],
|
||||
ignoreItemCase: boolean
|
||||
): { [key: string]: number } {
|
||||
const dict: { [key: string]: number } = {};
|
||||
for (const item of array) {
|
||||
const key = ignoreItemCase ? item.toLowerCase() : item;
|
||||
dict[key] = (dict[key] || 0) + 1;
|
||||
}
|
||||
return dict;
|
||||
}
|
||||
|
||||
// Function that sorts the dict created with dictMaker based on the chosen sorting method
|
||||
function dictSorter(
|
||||
dict: { [key: string]: number },
|
||||
sortingMethod: SortingMethod
|
||||
): { [key: string]: number } {
|
||||
let sortedArray: [string, number][];
|
||||
switch (sortingMethod) {
|
||||
case 'count':
|
||||
sortedArray = Object.entries(dict).sort(
|
||||
([, countA], [, countB]) => countB - countA
|
||||
);
|
||||
break;
|
||||
case 'alphabetic':
|
||||
sortedArray = Object.entries(dict).sort(([keyA], [keyB]) => {
|
||||
return keyA.localeCompare(keyB);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
sortedArray = Object.entries(dict);
|
||||
break;
|
||||
}
|
||||
return Object.fromEntries(sortedArray);
|
||||
}
|
||||
|
||||
// Function that prepares the output of dictSorter based on the chosen display format
|
||||
function displayFormater(
|
||||
dict: { [key: string]: number },
|
||||
displayFormat: DisplayFormat
|
||||
): string[] {
|
||||
const formattedOutput: string[] = [];
|
||||
const total = Object.values(dict).reduce((acc, val) => acc + val, 0);
|
||||
|
||||
switch (displayFormat) {
|
||||
case 'percentage':
|
||||
Object.entries(dict).forEach(([key, value]) => {
|
||||
formattedOutput.push(
|
||||
`${key}: ${value} (${((value / total) * 100).toFixed(2)}%)`
|
||||
);
|
||||
});
|
||||
break;
|
||||
case 'total':
|
||||
Object.entries(dict).forEach(([key, value]) => {
|
||||
formattedOutput.push(`${key}: ${value} (${value} / ${total})`);
|
||||
});
|
||||
break;
|
||||
case 'count':
|
||||
Object.entries(dict).forEach(([key, value]) => {
|
||||
formattedOutput.push(`${key}: ${value}`);
|
||||
});
|
||||
break;
|
||||
}
|
||||
return formattedOutput;
|
||||
}
|
||||
|
||||
export function TopItemsList(
|
||||
splitOperatorType: SplitOperatorType,
|
||||
sortingMethod: SortingMethod,
|
||||
displayFormat: DisplayFormat,
|
||||
splitSeparator: string,
|
||||
input: string,
|
||||
deleteEmptyItems: boolean,
|
||||
ignoreItemCase: boolean,
|
||||
trimItems: boolean
|
||||
): string {
|
||||
let array: string[];
|
||||
switch (splitOperatorType) {
|
||||
case 'symbol':
|
||||
array = input.split(splitSeparator);
|
||||
break;
|
||||
case 'regex':
|
||||
array = input
|
||||
.split(new RegExp(splitSeparator))
|
||||
.filter((item) => item !== '');
|
||||
break;
|
||||
}
|
||||
|
||||
// Trim items if required
|
||||
if (trimItems) {
|
||||
array = array.map((item) => item.trim());
|
||||
}
|
||||
|
||||
// Delete empty items after initial split
|
||||
if (deleteEmptyItems) {
|
||||
array = array.filter((item) => item !== '');
|
||||
}
|
||||
|
||||
// Transform the array into dict
|
||||
const unsortedDict = dictMaker(array, ignoreItemCase);
|
||||
|
||||
// Sort the list if required
|
||||
const sortedDict = dictSorter(unsortedDict, sortingMethod);
|
||||
|
||||
// Format the output with desired format
|
||||
const formattedOutput = displayFormater(sortedDict, displayFormat);
|
||||
|
||||
return formattedOutput.join('\n');
|
||||
}
|
||||
Reference in New Issue
Block a user