ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-17 04:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: make some states grouped

Browse Source
This commit is contained in:
rusconn
2023-06-01 15:28:32 +09:00
parent d935d0579f
commit c8f69a7eef
4 changed files with 101 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/encoders-decoders/base64/page.tsx
View File

@@ -14,29 +14,32 @@ import { PageRootSection } from "@/components/page-root-section";
import { PageSection } from "@/components/page-section";
export default function Page() {
const [decoded, setDecoded] = useState("😀😂🤣");
const [encoded, setEncoded] = useState("8J+YgPCfmILwn6Sj");
const [form, setForm] = useState({
decoded: "😀😂🤣",
encoded: "8J+YgPCfmILwn6Sj",
});
const setDecodedReactively = useCallback((text: string) => {
setDecoded(text);
setEncoded(encode(text));
setForm({
decoded: text,
encoded: encode(text),
});
}, []);
const setEncodedReactively = useCallback((text: string) => {
setEncoded(text);
const newDecoded = decode(text);
if (isValid(text) && !newDecoded.includes("<22>")) {
setDecoded(newDecoded);
} else {
setDecoded("");
}
setForm({
encoded: text,
decoded: isValid(text) && !newDecoded.includes("<22>") ? newDecoded : "",
});
}, []);
const clearBoth = useCallback(() => {
setDecoded("");
setEncoded("");
setForm({
decoded: "",
encoded: "",
});
}, []);
const onDecodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
@@ -69,8 +72,8 @@ export default function Page() {
[setEncodedReactively]
);
const decodedCopyButton = useMemo(() => <CopyButton text={decoded} />, [decoded]);
const encodedCopyButton = useMemo(() => <CopyButton text={encoded} />, [encoded]);
const decodedCopyButton = useMemo(() => <CopyButton text={form.decoded} />, [form.decoded]);
const encodedCopyButton = useMemo(() => <CopyButton text={form.encoded} />, [form.encoded]);
const clearButton = useMemo(
() => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
@@ -88,10 +91,10 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.encodersDecoders.tools.base64.longTitle}>
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={decoded} onChange={onDecodedChange} rows={10} />
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={encoded} onChange={onEncodedChange} rows={10} />
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
</PageRootSection>
);

32
app/encoders-decoders/html/page.tsx
View File

@@ -14,22 +14,30 @@ import { PageRootSection } from "@/components/page-root-section";
import { PageSection } from "@/components/page-section";
export default function Page() {
const [decoded, setDecoded] = useState('> It\'s "HTML escaping".');
const [encoded, setEncoded] = useState("&gt; It&apos;s &quot;HTML escaping&quot;.");
const [form, setForm] = useState({
decoded: '> It\'s "HTML escaping".',
encoded: "&gt; It&apos;s &quot;HTML escaping&quot;.",
});
const setDecodedReactively = useCallback((text: string) => {
setDecoded(text);
setEncoded(encode(text));
setForm({
decoded: text,
encoded: encode(text),
});
}, []);
const setEncodedReactively = useCallback((text: string) => {
setEncoded(text);
setDecoded(decode(text));
setForm({
encoded: text,
decoded: decode(text),
});
}, []);
const clearBoth = useCallback(() => {
setDecoded("");
setEncoded("");
setForm({
decoded: "",
encoded: "",
});
}, []);
const onDecodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
@@ -62,8 +70,8 @@ export default function Page() {
[setEncodedReactively]
);
const decodedCopyButton = useMemo(() => <CopyButton text={decoded} />, [decoded]);
const encodedCopyButton = useMemo(() => <CopyButton text={encoded} />, [encoded]);
const decodedCopyButton = useMemo(() => <CopyButton text={form.decoded} />, [form.decoded]);
const encodedCopyButton = useMemo(() => <CopyButton text={form.encoded} />, [form.encoded]);
const clearButton = useMemo(
() => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
@@ -81,10 +89,10 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.encodersDecoders.tools.html.longTitle}>
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={decoded} onChange={onDecodedChange} rows={10} />
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={encoded} onChange={onEncodedChange} rows={10} />
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
</PageRootSection>
);

32
app/encoders-decoders/url/page.tsx
View File

@@ -16,22 +16,30 @@ import { PageRootSection } from "@/components/page-root-section";
import { PageSection } from "@/components/page-section";
export default function Page() {
const [decoded, setDecoded] = useState('> It\'s "URL encoding"?');
const [encoded, setEncoded] = useState("%3E%20It's%20%22URL%20encoding%22%3F");
const [form, setForm] = useState({
decoded: '> It\'s "URL encoding"?',
encoded: "%3E%20It's%20%22URL%20encoding%22%3F",
});
const setDecodedReactively = useCallback((text: string) => {
setDecoded(text);
setEncoded(O.getOrElse(constant(""))(safeEncodeURIComponent(text)));
setForm({
decoded: text,
encoded: O.getOrElse(constant(""))(safeEncodeURIComponent(text)),
});
}, []);
const setEncodedReactively = useCallback((text: string) => {
setEncoded(text);
setDecoded(O.getOrElse(constant(""))(safeDecodeURIComponent(text)));
setForm({
encoded: text,
decoded: O.getOrElse(constant(""))(safeDecodeURIComponent(text)),
});
}, []);
const clearBoth = useCallback(() => {
setDecoded("");
setEncoded("");
setForm({
decoded: "",
encoded: "",
});
}, []);
const onDecodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
@@ -64,8 +72,8 @@ export default function Page() {
[setEncodedReactively]
);
const decodedCopyButton = useMemo(() => <CopyButton text={decoded} />, [decoded]);
const encodedCopyButton = useMemo(() => <CopyButton text={encoded} />, [encoded]);
const decodedCopyButton = useMemo(() => <CopyButton text={form.decoded} />, [form.decoded]);
const encodedCopyButton = useMemo(() => <CopyButton text={form.encoded} />, [form.encoded]);
const clearButton = useMemo(
() => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
@@ -83,10 +91,10 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.encodersDecoders.tools.url.longTitle}>
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={decoded} onChange={onDecodedChange} rows={10} />
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={encoded} onChange={onEncodedChange} rows={10} />
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
</PageRootSection>
);