From d550594b08291af7163b9f2dc00c6214d982ce05 Mon Sep 17 00:00:00 2001 From: rusconn Date: Tue, 29 Mar 2022 12:55:14 +0900 Subject: [PATCH] feat: add html encoder / decoder --- package.json | 1 + src/components/layout/Drawer.tsx | 7 ++- .../pages/encoders-decoders/html/Content.tsx | 46 +++++++++++++++++++ .../pages/encoders-decoders/html/index.ts | 3 ++ src/components/pages/home/Content.tsx | 4 +- src/libs/$path.ts | 8 ++++ src/pages/encoders-decoders/html.tsx | 7 +++ yarn.lock | 5 ++ 8 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 src/components/pages/encoders-decoders/html/Content.tsx create mode 100644 src/components/pages/encoders-decoders/html/index.ts create mode 100644 src/pages/encoders-decoders/html.tsx diff --git a/package.json b/package.json index aed4963..d9dbfa5 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "fast-deep-equal": "^3.1.3", "fp-ts": "^2.11.9", "fuse.js": "^6.5.3", + "html-entities": "^2.3.3", "next": "12.1.0", "react": "17.0.2", "react-ace": "^9.5.0", diff --git a/src/components/layout/Drawer.tsx b/src/components/layout/Drawer.tsx index 80b3d61..6166254 100644 --- a/src/components/layout/Drawer.tsx +++ b/src/components/layout/Drawer.tsx @@ -65,7 +65,12 @@ const toolGroups = [ icon: , title: "Encoders / Decoders", tools: [ - { icon: , title: "HTML", href: pagesPath.$url(), disabled: true }, + { + icon: , + title: "HTML", + href: pagesPath.encoders_decoders.html.$url(), + disabled: false, + }, { icon: , title: "URL", href: pagesPath.$url(), disabled: true }, { icon: , title: "Base 64", href: pagesPath.$url(), disabled: true }, { icon: , title: "JWT", href: pagesPath.$url(), disabled: true }, diff --git a/src/components/pages/encoders-decoders/html/Content.tsx b/src/components/pages/encoders-decoders/html/Content.tsx new file mode 100644 index 0000000..de79a87 --- /dev/null +++ b/src/components/pages/encoders-decoders/html/Content.tsx @@ -0,0 +1,46 @@ +import { decode, encode } from "html-entities"; +import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react"; + +import { Main, MainItem, TextField } from "@/components/common"; + +type TextFieldValue = ComponentPropsWithoutRef["value"]; +type OnTextFieldChange = NonNullable["onChange"]>; + +type Props = { + decoded: TextFieldValue; + encoded: TextFieldValue; + onDecodedChange: OnTextFieldChange; + onEncodedChange: OnTextFieldChange; +}; + +const StyledComponent = ({ decoded, encoded, onDecodedChange, onEncodedChange }: Props) => ( +
+ + + + + + +
+); + +export const Component = memo(StyledComponent); + +const Container = () => { + const [decoded, setDecoded] = useState(""); + const [encoded, setEncoded] = useState("<Hello World>"); + + const onDecodedChange: Props["onDecodedChange"] = useCallback(({ currentTarget: { value } }) => { + setDecoded(value); + setEncoded(encode(value)); + }, []); + + const onEncodedChange: Props["onEncodedChange"] = useCallback(({ currentTarget: { value } }) => { + setEncoded(value); + setDecoded(decode(value)); + }, []); + + return ; +}; + +export default Container; diff --git a/src/components/pages/encoders-decoders/html/index.ts b/src/components/pages/encoders-decoders/html/index.ts new file mode 100644 index 0000000..ae1b8af --- /dev/null +++ b/src/components/pages/encoders-decoders/html/index.ts @@ -0,0 +1,3 @@ +import Content from "./Content"; + +export { Content }; diff --git a/src/components/pages/home/Content.tsx b/src/components/pages/home/Content.tsx index f5d6b7e..4aa631e 100644 --- a/src/components/pages/home/Content.tsx +++ b/src/components/pages/home/Content.tsx @@ -48,8 +48,8 @@ const tools = [ description: "Encode or decode all the applicable characters to their corresponding HTML entities", keywords: "html encoder escaper decocder unescaper", - href: pagesPath.$url(), - disabled: true, + href: pagesPath.encoders_decoders.html.$url(), + disabled: false, }, { icon: , diff --git a/src/libs/$path.ts b/src/libs/$path.ts index fad7389..40c1318 100644 --- a/src/libs/$path.ts +++ b/src/libs/$path.ts @@ -13,6 +13,14 @@ export const pagesPath = { }), }, }, + encoders_decoders: { + html: { + $url: (url?: { hash?: string }) => ({ + pathname: "/encoders-decoders/html" as const, + hash: url?.hash, + }), + }, + }, $url: (url?: { hash?: string }) => ({ pathname: "/" as const, hash: url?.hash }), }; diff --git a/src/pages/encoders-decoders/html.tsx b/src/pages/encoders-decoders/html.tsx new file mode 100644 index 0000000..da08270 --- /dev/null +++ b/src/pages/encoders-decoders/html.tsx @@ -0,0 +1,7 @@ +import type { NextPage } from "next"; + +import { Content } from "@/components/pages/encoders-decoders/html"; + +const Page: NextPage = Content; + +export default Page; diff --git a/yarn.lock b/yarn.lock index c28a108..9fda584 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1445,6 +1445,11 @@ hosted-git-info@^2.1.4: resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== +html-entities@^2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46" + integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA== + html-tokenize@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/html-tokenize/-/html-tokenize-2.0.1.tgz#c3b2ea6e2837d4f8c06693393e9d2a12c960be5f"