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

refactor: memoize buttons on export

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

29
app/converters/json-yaml/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import yaml from "js-yaml";
import { toolGroups } from "@/config/tools";
@@ -104,47 +104,30 @@ export default function Page() {
/>
);
const jsonPasteButton = useMemo(
() => <PasteButton onClipboardRead={setJsonReactively} />,
[setJsonReactively]
);
const jsonPasteButton = <PasteButton onClipboardRead={setJsonReactively} />;
const yamlPasteButton = <PasteButton onClipboardRead={setYamlReactively} />;
const yamlPasteButton = useMemo(
() => <PasteButton onClipboardRead={setYamlReactively} />,
[setYamlReactively]
);
const jsonFileButton = useMemo(
() => (
const jsonFileButton = (
<FileButton
accept=".json"
onFileRead={setJsonReactively}
iconOnly
aria-label="load a json file"
/>
),
[setJsonReactively]
);
const yamlFileButton = useMemo(
() => (
const yamlFileButton = (
<FileButton
accept=".yml,.yaml"
onFileRead={setYamlReactively}
iconOnly
aria-label="load a yaml file"
/>
),
[setYamlReactively]
);
const jsonCopyButton = <CopyButton text={form.json} />;
const yamlCopyButton = <CopyButton text={form.yaml} />;
const clearButton = useMemo(
() => <ClearButton onClick={clearBoth} iconOnly aria-label="clear json and yaml" />,
[clearBoth]
);
const clearButton = <ClearButton onClick={clearBoth} iconOnly aria-label="clear json and yaml" />;
const jsonControl = (
<ControlMenu list={[jsonPasteButton, jsonFileButton, jsonCopyButton, clearButton]} />

8
app/converters/number-base/page.tsx
View File

@@ -77,10 +77,10 @@ export default function Page() {
[format]
);
const decPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetDec} />, [trySetDec]);
const hexPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetHex} />, [trySetHex]);
const octPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetOct} />, [trySetOct]);
const binPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetBin} />, [trySetBin]);
const decPasteButton = <PasteButton onClipboardRead={trySetDec} />;
const hexPasteButton = <PasteButton onClipboardRead={trySetHex} />;
const octPasteButton = <PasteButton onClipboardRead={trySetOct} />;
const binPasteButton = <PasteButton onClipboardRead={trySetBin} />;
const decControl = <ControlMenu list={[decPasteButton]} />;
const hexControl = <ControlMenu list={[hexPasteButton]} />;

33
app/encoders-decoders/base64/page.tsx
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 encodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setEncodedReactively} />,
[setEncodedReactively]
);
const decodedFileButton = useMemo(
() => (
const decodedFileButton = (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
),
[setDecodedReactively]
);
const encodedFileButton = useMemo(
() => (
const encodedFileButton = (
<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 decodedCopyButton = <CopyButton text={form.decoded} />;
const encodedCopyButton = <CopyButton text={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 = (

33
app/encoders-decoders/html/page.tsx
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 encodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setEncodedReactively} />,
[setEncodedReactively]
);
const decodedFileButton = useMemo(
() => (
const decodedFileButton = (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
),
[setDecodedReactively]
);
const encodedFileButton = useMemo(
() => (
const encodedFileButton = (
<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 decodedCopyButton = <CopyButton text={form.decoded} />;
const encodedCopyButton = <CopyButton text={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 = (

18
app/encoders-decoders/jwt/page.tsx
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]} />

33
app/encoders-decoders/url/page.tsx
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 encodedPasteButton = useMemo(
() => <PasteButton onClipboardRead={setEncodedReactively} />,
[setEncodedReactively]
);
const decodedFileButton = useMemo(
() => (
const decodedFileButton = (
<FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
),
[setDecodedReactively]
);
const encodedFileButton = useMemo(
() => (
const encodedFileButton = (
<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 decodedCopyButton = <CopyButton text={form.decoded} />;
const encodedCopyButton = <CopyButton text={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 = (

14
app/formatters/json/page.tsx
View File

@@ -67,21 +67,15 @@ export default function Page() {
[indentation]
);
const inputPasteButton = useMemo(() => <PasteButton onClipboardRead={setInput} />, []);
const inputPasteButton = <PasteButton onClipboardRead={setInput} />;
const inputFileButton = useMemo(
() => (
const inputFileButton = (
<FileButton accept=".json" onFileRead={setInput} iconOnly aria-label="load a json file" />
),
[]
);
const inputClearButton = useMemo(
() => <ClearButton onClick={clearInput} iconOnly aria-label="clear json" />,
[clearInput]
);
const inputClearButton = <ClearButton onClick={clearInput} iconOnly aria-label="clear json" />;
const outputCopyButton = useMemo(() => <CopyButton text={output} />, [output]);
const outputCopyButton = <CopyButton text={output} />;
const inputControl = <ControlMenu list={[inputPasteButton, inputFileButton, inputClearButton]} />;
const outputControl = <ControlMenu list={[outputCopyButton]} />;

37
app/generators/hash/page.tsx
View File

@@ -56,39 +56,16 @@ export default function Page() {
[uppercase]
);
const inputPasteButton = useMemo(() => <PasteButton onClipboardRead={setInput} />, []);
const inputFileButton = useMemo(
() => <FileButton onFileRead={setInput} iconOnly aria-label="load a file" />,
[]
);
const inputClearButton = useMemo(
() => <ClearButton onClick={clearInput} iconOnly aria-label="clear input" />,
[clearInput]
);
const inputPasteButton = <PasteButton onClipboardRead={setInput} />;
const inputFileButton = <FileButton onFileRead={setInput} iconOnly aria-label="load a file" />;
const inputClearButton = <ClearButton onClick={clearInput} iconOnly aria-label="clear input" />;
const inputControl = <ControlMenu list={[inputPasteButton, inputFileButton, inputClearButton]} />;
const md5CopyButton = useMemo(
() => <CopyButton text={md5} iconOnly aria-label="copy generated md5" />,
[md5]
);
const sha1CopyButton = useMemo(
() => <CopyButton text={sha1} iconOnly aria-label="copy generated sha1" />,
[sha1]
);
const sha256CopyButton = useMemo(
() => <CopyButton text={sha256} iconOnly aria-label="copy generated sha256" />,
[sha256]
);
const sha512CopyButton = useMemo(
() => <CopyButton text={sha512} iconOnly aria-label="copy generated sha512" />,
[sha512]
);
const md5CopyButton = <CopyButton text={md5} iconOnly aria-label="copy generated md5" />;
const sha1CopyButton = <CopyButton text={sha1} iconOnly aria-label="copy generated sha1" />;
const sha256CopyButton = <CopyButton text={sha256} iconOnly aria-label="copy generated sha256" />;
const sha512CopyButton = <CopyButton text={sha512} iconOnly aria-label="copy generated sha512" />;
return (
<PageRootSection title={toolGroups.generators.tools.hash.longTitle}>

8
app/generators/uuid/page.tsx
View File

@@ -142,12 +142,8 @@ export default function Page() {
[generates]
);
const uuidsCopyButton = useMemo(() => <CopyButton text={uuidsString} />, [uuidsString]);
const uuidsClearButton = useMemo(
() => <ClearButton onClick={clearUuids} iconOnly aria-label="clear uuids" />,
[clearUuids]
);
const uuidsCopyButton = <CopyButton text={uuidsString} />;
const uuidsClearButton = <ClearButton onClick={clearUuids} iconOnly aria-label="clear uuids" />;
const uuidsControl = <ControlMenu list={[uuidsCopyButton, uuidsClearButton]} />;

7
components/buttons/clear.tsx
View File

@@ -1,9 +1,14 @@
import { memo } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
import { BaseButton, BaseButtonProps } from "./base";
export type ClearButtonProps = Omit<BaseButtonProps, "icon" | "labelText">;
export function ClearButton({ iconOnly, ...props }: ClearButtonProps) {
function RawClearButton({ iconOnly, ...props }: ClearButtonProps) {
return <BaseButton {...props} icon={<icons.X size={16} />} {...{ iconOnly }} labelText="Clear" />;
}
export const ClearButton = memo(RawClearButton, equal);

7
components/buttons/copy.tsx
View File

@@ -1,4 +1,5 @@
import { useCallback } from "react";
import { memo, useCallback } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
@@ -8,7 +9,7 @@ export type CopyButtonProps = Omit<BaseButtonProps, "icon" | "labelText" | "onCl
text: string;
};
export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
function RawCopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
const onClick: BaseButtonProps["onClick"] = useCallback(() => {
navigator.clipboard.writeText(text).catch(e => {
if (e instanceof Error) {
@@ -27,3 +28,5 @@ export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
/>
);
}
export const CopyButton = memo(RawCopyButton, equal);

7
components/buttons/file.tsx
View File

@@ -1,4 +1,5 @@
import { useCallback, useRef } from "react";
import { memo, useCallback, useRef } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
@@ -12,7 +13,7 @@ export type FileButtonProps = Pick<InputProps, "accept"> &
onFileRead: (text: string) => void;
};
export function FileButton({
export function RawFileButton({
accept,
iconOnly,
maxFileSizeMb = 20,
@@ -67,3 +68,5 @@ export function FileButton({
</>
);
}
export const FileButton = memo(RawFileButton, equal);

7
components/buttons/paste.tsx
View File

@@ -1,4 +1,5 @@
import { useCallback } from "react";
import { memo, useCallback } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
@@ -8,7 +9,7 @@ export type PasteButtonProps = Omit<BaseButtonProps, "icon" | "labelText" | "onC
onClipboardRead: (text: string) => void;
};
export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) {
export function RawPasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) {
const onClick: BaseButtonProps["onClick"] = useCallback(() => {
navigator.clipboard
.readText()
@@ -30,3 +31,5 @@ export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButton
/>
);
}
export const PasteButton = memo(RawPasteButton, equal);