Add urlencode tool

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kevins-data-toolbox",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "private": true,
   "dependencies": {
     "@loadable/component": "^5.15.0",

public/locales/de/translation.json

@@ -49,6 +49,10 @@
             "octal": "Oktal",
             "hexadecimal": "Hexadezimal",
             "nanWarning": "Die Eingabe ist keine gültige Zahl!"
+        },
+        "urlencode": {
+          "title": "URL-Kodierung",
+          "description": "Kodiere und dekodiere <wikipedia>URL-kodierte (or Prozent-kodierte)</wikipedia> Zeichenfolgen."
         }
     }
   },

public/locales/en/translation.json

@@ -49,6 +49,10 @@
             "octal": "Octal",
             "hexadecimal": "Hexadecimal",
             "nanWarning": "The input is not a valid number!"
+        },
+        "urlencode": {
+          "title": "URL-Encoding",
+          "description": "Encode and decode strings to and from <wikipedia>URL-encoding (or Percent-encoding)</wikipedia>."
         }
     }
   },

src/tools/ToolLoader.tsx

@@ -14,6 +14,7 @@ const HomePage = prerenderedLoadable(() => import('../pages/Home'));
 const RotTool = prerenderedLoadable(() => import('./cyphers_and_cryptography/rot/RotTool'));
 const Base64Tool = prerenderedLoadable(() => import('./encodings/base64/Base64Tool'));
 const NumberBaseTool = prerenderedLoadable(() => import('./encodings/numberbase/NumberBaseTool'));
+const URLEncodeTool = prerenderedLoadable(() => import('./encodings/urlencode/URLEncodeTool'));
 
 type ErrorBoundaryProps = {
     resetFunction: () => void
@@ -72,6 +73,9 @@ const ToolLoader = () => {
         case "numberbase":
             return <ToolErrorBoundary resetFunction={forceReset} key={key}><NumberBaseTool/></ToolErrorBoundary>;
 
+        case "urlencode":
+            return <ToolErrorBoundary resetFunction={forceReset} key={key}><URLEncodeTool/></ToolErrorBoundary>;
+
         default:
             return <NotFoundPage/>;
     }

src/tools/encodings/urlencode/URLEncodeTool.module.scss

@@ -0,0 +1 @@
+@import "../../../common";

src/tools/encodings/urlencode/URLEncodeTool.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/tools/encodings/urlencode/URLEncodeTool.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
+import * as styles from "./URLEncodeTool.module.scss"
+import { Helmet } from "react-helmet";
+
+const URLEncodeTool = () => {
+    const { t } = useTranslation();
+
+    let [input, setInput] = useState("");
+    let [output, setOutput] = useState("");
+    let [reversed, setReversed] = useState(false)
+
+    useEffect(() => {
+        if(!reversed) {
+            setOutput(encodeURIComponent(input))
+        }
+
+        if(reversed) {
+            setInput(decodeURIComponent(output))
+        }
+
+    }, [input, output, reversed])
+    
+    return (
+        <main>
+            <Helmet>
+                <title>{t("tools.encodings.urlencode.title")} | {t("site.title")}</title>
+                <meta name="keywords" content="URL, urlencode, urldecode, URI, uriencode, uridecode, encoding, decoding, encoder, decoder, tool" />
+            </Helmet>
+            <div className={styles.layoutBox}>
+                <h1>{t("tools.encodings.urlencode.title")}</h1>
+
+                <p><Trans i18nKey={"tools.encodings.urlencode.description"} components={{wikipedia: <a href="https://en.wikipedia.org/wiki/Percent-encoding">xxx</a>, pre: <pre/>}} /></p>
+
+                <label htmlFor="urlencode-input">{t("tools.encodings.common.decoded")}</label>
+                <textarea id="urlencode-input" placeholder={t("tools.encodings.common.decoded")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value);}} value={input}></textarea>
+
+                <label htmlFor="urlencode-output">{t("tools.encodings.common.encoded")}</label>
+                <textarea id="urlencode-output" placeholder={t("tools.encodings.common.encoded")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value);}} value={output}></textarea>
+            </div>
+        </main>
+    )
+}
+
+export default URLEncodeTool;

src/tools/tools.ts

@@ -1,4 +1,4 @@
-import {Smile, PlusSquare, Binary, Hash} from "lucide-react"
+import {Smile, PlusSquare, Binary, Hash, Globe} from "lucide-react"
 
 const tools = [
         {
@@ -35,6 +35,15 @@ const tools = [
             "category": "encodings",
             "hidden": false,
             "keywords": "binary, base, base6, base10, base2, binary, hex, hexadecimal, oct, bin, dec, encodings, encoding, decoding"
+        },
+        {
+            "name": "tools.encodings.urlencode.title",
+            "external": false,
+            "urlname": "urlencode",
+            "icon": Globe,
+            "category": "encodings",
+            "hidden": false,
+            "keywords": "URL, urlencode, urldecode, URI, uriencode, uridecode, encoding, decoding, encoder, decoder, tool"
         }
     ]