feat: add base64 encoder / decoder

package.json

@@ -28,6 +28,7 @@
     "fp-ts": "^2.11.9",
     "fuse.js": "^6.5.3",
     "html-entities": "^2.3.3",
+    "js-base64": "^3.7.2",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-ace": "^9.5.0",

src/components/pages/encoders-decoders/base64/Content.tsx

@@ -0,0 +1,53 @@
+import { encode, decode, isValid } from "js-base64";
+import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+
+import { Main, MainItem, TextField } from "@/components/common";
+
+type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+
+type Props = {
+  decoded: TextFieldValue;
+  encoded: TextFieldValue;
+  onDecodedChange: OnTextFieldChange;
+  onEncodedChange: OnTextFieldChange;
+};
+
+const StyledComponent = ({ decoded, encoded, onDecodedChange, onEncodedChange }: Props) => (
+  <Main title="Base 64 Encoder / Decoder">
+    <MainItem title="Decoded">
+      <TextField multiline rows={10} value={decoded} onChange={onDecodedChange} />
+    </MainItem>
+    <MainItem title="Encoded">
+      <TextField multiline rows={10} value={encoded} onChange={onEncodedChange} />
+    </MainItem>
+  </Main>
+);
+
+export const Component = memo(StyledComponent);
+
+const Container = () => {
+  const [decoded, setDecoded] = useState("Hello there !");
+  const [encoded, setEncoded] = useState("SGVsbG8gdGhlcmUgIQ==");
+
+  const onDecodedChange: Props["onDecodedChange"] = useCallback(({ currentTarget: { value } }) => {
+    setDecoded(value);
+    setEncoded(encode(value));
+  }, []);
+
+  const onEncodedChange: Props["onEncodedChange"] = useCallback(({ currentTarget: { value } }) => {
+    setEncoded(value);
+
+    const newDecoded = decode(value);
+
+    if (isValid(value) && !newDecoded.includes("<22>")) {
+      setDecoded(newDecoded);
+    } else {
+      setDecoded("");
+    }
+  }, []);
+
+  return <Component {...{ decoded, encoded, onDecodedChange, onEncodedChange }} />;
+};
+
+export default Container;

src/components/pages/encoders-decoders/base64/index.ts

@@ -0,0 +1,3 @@
+import Content from "./Content";
+
+export { Content };

src/data/tools.tsx

@@ -73,8 +73,8 @@ const toolGroups = [
         longTitle: "Base 64 Encoder / Decoder",
         description: "Encode and decode Base64 data",
         keywords: "base64 encoder decocder",
-        href: pagesPath.$url(),
+        href: pagesPath.encoders_decoders.base64.$url(),
-        disabled: true,
+        disabled: false,
       },
       {
         icon: <Key />,

src/libs/$path.ts

@@ -14,6 +14,12 @@ export const pagesPath = {
     },
   },
   encoders_decoders: {
+    base64: {
+      $url: (url?: { hash?: string }) => ({
+        pathname: "/encoders-decoders/base64" as const,
+        hash: url?.hash,
+      }),
+    },
     html: {
       $url: (url?: { hash?: string }) => ({
         pathname: "/encoders-decoders/html" as const,

src/pages/encoders-decoders/base64.tsx

@@ -0,0 +1,7 @@
+import type { NextPage } from "next";
+
+import { Content } from "@/components/pages/encoders-decoders/base64";
+
+const Page: NextPage = Content;
+
+export default Page;

yarn.lock

@@ -1625,6 +1625,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+js-base64@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
+  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"