refactor: memoize buttons on export

This commit is contained in:
rusconn
2023-06-24 13:58:57 +09:00
parent 240fba0e74
commit 822a8db8f9
13 changed files with 103 additions and 188 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import { decode, encode, isValid } from "js-base64";
import { toolGroups } from "@/config/tools";
@@ -48,36 +48,21 @@ export default function Page() {
const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
setEncodedReactively(value);
const decodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setDecodedReactively} />,
[setDecodedReactively]
const decodedPasteButton = <PasteButton onClipboardRead={setDecodedReactively} />;
const encodedPasteButton = <PasteButton onClipboardRead={setEncodedReactively} />;
const decodedFileButton = (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
);
const encodedFileButton = (
<FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
);
const encodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setEncodedReactively} />,
[setEncodedReactively]
);
const decodedCopyButton = <CopyButton text={form.decoded} />;
const encodedCopyButton = <CopyButton text={form.encoded} />;
const decodedFileButton = useMemo(
() => (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
),
[setDecodedReactively]
);
const encodedFileButton = useMemo(
() => (
<FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
),
[setEncodedReactively]
);
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" />,
[clearBoth]
const clearButton = (
<ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />
);
const decodedControl = (

View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import { escape, unescape } from "html-escaper";
import { toolGroups } from "@/config/tools";
@@ -46,36 +46,21 @@ export default function Page() {
const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
setEncodedReactively(value);
const decodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setDecodedReactively} />,
[setDecodedReactively]
const decodedPasteButton = <PasteButton onClipboardRead={setDecodedReactively} />;
const encodedPasteButton = <PasteButton onClipboardRead={setEncodedReactively} />;
const decodedFileButton = (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
);
const encodedFileButton = (
<FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
);
const encodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setEncodedReactively} />,
[setEncodedReactively]
);
const decodedCopyButton = <CopyButton text={form.decoded} />;
const encodedCopyButton = <CopyButton text={form.encoded} />;
const decodedFileButton = useMemo(
() => (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
),
[setDecodedReactively]
);
const encodedFileButton = useMemo(
() => (
<FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
),
[setEncodedReactively]
);
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" />,
[clearBoth]
const clearButton = (
<ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />
);
const decodedControl = (

View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import { toolGroups } from "@/config/tools";
import { decode } from "@/lib/jwt";
@@ -27,20 +27,16 @@ export default function Page() {
const onJwtChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) => setJwt(value);
const jwtTokenPasteButton = useMemo(() => <PasteButton onClipboardRead={setJwt} />, [setJwt]);
const jwtTokenPasteButton = <PasteButton onClipboardRead={setJwt} />;
const jwtTokenFileButton = useMemo(
() => <FileButton onFileRead={setJwt} iconOnly aria-label="load a token file" />,
[setJwt]
const jwtTokenFileButton = (
<FileButton onFileRead={setJwt} iconOnly aria-label="load a token file" />
);
const jwtTokenClearButton = useMemo(
() => <ClearButton onClick={clearJwt} iconOnly aria-label="clear token" />,
[clearJwt]
);
const jwtTokenClearButton = <ClearButton onClick={clearJwt} iconOnly aria-label="clear token" />;
const heaederCopyButton = useMemo(() => <CopyButton text={header} />, [header]);
const payloadCopyButton = useMemo(() => <CopyButton text={payload} />, [payload]);
const heaederCopyButton = <CopyButton text={header} />;
const payloadCopyButton = <CopyButton text={payload} />;
const jwtTokenControl = (
<ControlMenu list={[jwtTokenPasteButton, jwtTokenFileButton, jwtTokenClearButton]} />

View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import { toolGroups } from "@/config/tools";
import { safeDecodeURIComponent, safeEncodeURIComponent } from "@/lib/uri";
@@ -46,36 +46,21 @@ export default function Page() {
const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
setEncodedReactively(value);
const decodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setDecodedReactively} />,
[setDecodedReactively]
const decodedPasteButton = <PasteButton onClipboardRead={setDecodedReactively} />;
const encodedPasteButton = <PasteButton onClipboardRead={setEncodedReactively} />;
const decodedFileButton = (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
);
const encodedFileButton = (
<FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
);
const encodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setEncodedReactively} />,
[setEncodedReactively]
);
const decodedCopyButton = <CopyButton text={form.decoded} />;
const encodedCopyButton = <CopyButton text={form.encoded} />;
const decodedFileButton = useMemo(
() => (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
),
[setDecodedReactively]
);
const encodedFileButton = useMemo(
() => (
<FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
),
[setEncodedReactively]
);
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" />,
[clearBoth]
const clearButton = (
<ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />
);
const decodedControl = (