refactor: sum

This commit is contained in:
Ibrahima G. Coulibaly
2025-03-09 18:14:41 +00:00
parent 27f7b5460b
commit 874efeed58
2 changed files with 46 additions and 73 deletions

57
.idea/workspace.xml generated
View File

@@ -4,20 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: missing tools"> <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: prettify json">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/index.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/pages/tools/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/sum/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/group/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/group/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/rotate/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/sort/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/sort/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/number/generate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generate/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/index.tsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -345,23 +334,7 @@
<workItem from="1741475969294" duration="4215000" /> <workItem from="1741475969294" duration="4215000" />
<workItem from="1741494053121" duration="178000" /> <workItem from="1741494053121" duration="178000" />
<workItem from="1741537936314" duration="1294000" /> <workItem from="1741537936314" duration="1294000" />
<workItem from="1741539602311" duration="3899000" /> <workItem from="1741539602311" duration="4370000" />
</task>
<task id="LOCAL-00108" summary="fix: docs">
<option name="closed" value="true" />
<created>1740324069359</created>
<option name="number" value="00108" />
<option name="presentableId" value="LOCAL-00108" />
<option name="project" value="LOCAL" />
<updated>1740324069359</updated>
</task>
<task id="LOCAL-00109" summary="fix: docs">
<option name="closed" value="true" />
<created>1740324274955</created>
<option name="number" value="00109" />
<option name="presentableId" value="LOCAL-00109" />
<option name="project" value="LOCAL" />
<updated>1740324274955</updated>
</task> </task>
<task id="LOCAL-00110" summary="feat: funding"> <task id="LOCAL-00110" summary="feat: funding">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -739,7 +712,23 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1741542318259</updated> <updated>1741542318259</updated>
</task> </task>
<option name="localTasksCounter" value="157" /> <task id="LOCAL-00157" summary="refactor: use ToolContent">
<option name="closed" value="true" />
<created>1741543593426</created>
<option name="number" value="00157" />
<option name="presentableId" value="LOCAL-00157" />
<option name="project" value="LOCAL" />
<updated>1741543593427</updated>
</task>
<task id="LOCAL-00158" summary="fix: prettify json">
<option name="closed" value="true" />
<created>1741543732607</created>
<option name="number" value="00158" />
<option name="presentableId" value="LOCAL-00158" />
<option name="project" value="LOCAL" />
<updated>1741543732607</updated>
</task>
<option name="localTasksCounter" value="159" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -786,7 +775,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" /> <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" /> <option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" /> <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="fix: examples" />
<MESSAGE value="feat: json pretty" /> <MESSAGE value="feat: json pretty" />
<MESSAGE value="style: tool categories" /> <MESSAGE value="style: tool categories" />
<MESSAGE value="chore: compute only if value" /> <MESSAGE value="chore: compute only if value" />
@@ -809,9 +797,10 @@
<MESSAGE value="feat: crop png" /> <MESSAGE value="feat: crop png" />
<MESSAGE value="chore: remove unnecessary files" /> <MESSAGE value="chore: remove unnecessary files" />
<MESSAGE value="refactor: validateJson" /> <MESSAGE value="refactor: validateJson" />
<MESSAGE value="refactor: use ToolContent" />
<MESSAGE value="feat: missing tools" /> <MESSAGE value="feat: missing tools" />
<option name="LAST_COMMIT_MESSAGE" value="feat: missing tools" /> <MESSAGE value="refactor: use ToolContent" />
<MESSAGE value="fix: prettify json" />
<option name="LAST_COMMIT_MESSAGE" value="fix: prettify json" />
</component> </component>
<component name="XSLT-Support.FileAssociations.UIState"> <component name="XSLT-Support.FileAssociations.UIState">
<expand /> <expand />

View File

@@ -1,20 +1,14 @@
import { Box } from '@mui/material'; import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput'; import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult'; import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions'; import { GetGroupsType } from '@components/options/ToolOptions';
import { compute, NumberExtractionType } from './service'; import { compute, NumberExtractionType } from './service';
import RadioWithTextField from '@components/options/RadioWithTextField'; import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio'; import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc'; import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult'; import { CardExampleType } from '@components/examples/ToolExamples';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import ToolInfo from '@components/ToolInfo';
import Separator from '@components/Separator';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik'; import ToolContent from '@components/ToolContent';
const initialValues = { const initialValues = {
extractionType: 'smart' as NumberExtractionType, extractionType: 'smart' as NumberExtractionType,
@@ -126,7 +120,6 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
export default function SumNumbers({ title }: ToolComponentProps) { export default function SumNumbers({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>(''); const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>(''); const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const getGroups: GetGroupsType<InitialValuesType> = ({ const getGroups: GetGroupsType<InitialValuesType> = ({
values, values,
@@ -175,33 +168,24 @@ export default function SumNumbers({ title }: ToolComponentProps) {
} }
]; ];
return ( return (
<Box> <ToolContent
<ToolInputAndResult title={title}
input={<ToolTextInput value={input} onChange={setInput} />} input={input}
result={<ToolTextResult title={'Total'} value={result} />} inputComponent={<ToolTextInput value={input} onChange={setInput} />}
/> resultComponent={<ToolTextResult title={'Total'} value={result} />}
<ToolOptions initialValues={initialValues}
formRef={formRef} getGroups={getGroups}
getGroups={getGroups} compute={(optionsValues, input) => {
compute={(optionsValues, input) => { const { extractionType, printRunningSum, separator } = optionsValues;
const { extractionType, printRunningSum, separator } = optionsValues; setResult(compute(input, extractionType, printRunningSum, separator));
setResult(compute(input, extractionType, printRunningSum, separator)); }}
}} setInput={setInput}
initialValues={initialValues} toolInfo={{
input={input} title: 'What Is a Number Sum Calculator?',
/> description:
<ToolInfo 'This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum.'
title="What Is a Number Sum Calculator?" }}
description="This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum." exampleCards={exampleCards}
/> />
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
); );
} }