Backslash encoder (#28)

* Backslash

* bump version

Author: manhtai

README.md

@@ -28,6 +28,7 @@
 - [x] 13. Js Console
 - [x] 14. HTML Entity Encode / Decode
 - [x] 15. URL Encode / Decode
+- [x] 16. Backslash Encode / Decode
 
 ## Demo
 

src/components/Main.tsx

@@ -21,6 +21,7 @@ import CronEditor from './cron/Cron';
 import JsConsole from './notebook/JavaScript';
 import HtmlEntityCodec from './html/HtmlEntityCodec';
 import UrlCodec from './url/UrlCodec';
+import BackSlashCodec from './text/BackSlash';
 
 interface MenuItem {
   path: string;
@@ -143,6 +144,13 @@ const defaultRoutes: MenuItem[] = [
     show: false,
     Component: UrlCodec,
   },
+  {
+    icon: <FontAwesomeIcon icon="slash" transform={{ rotate: 42 }} />,
+    path: '/back-slash-encoder',
+    name: 'Backslash Encoder',
+    show: false,
+    Component: BackSlashCodec,
+  },
 ];
 
 const Main = () => {

src/components/common/1-to-1.tsx

@@ -2,21 +2,25 @@ import { clipboard } from 'electron';
 import React, { useState } from 'react';
 
 interface OneToOneProps {
-  fromDefault: string;
-  fromFunc: (f: string) => string;
+  defaultInput: string;
+  forwardFunc: (f: string) => string;
   inverseFunc: (r: string) => string;
 }
 
-const OneToOne = ({ fromDefault, fromFunc, inverseFunc }: OneToOneProps) => {
-  const [from, setFrom] = useState(fromDefault);
-  const [to, setTo] = useState(fromFunc(from));
+const OneToOne = ({
+  defaultInput,
+  forwardFunc,
+  inverseFunc,
+}: OneToOneProps) => {
+  const [from, setFrom] = useState(defaultInput);
+  const [to, setTo] = useState(forwardFunc(from));
 
   const [fromCopied, setFromCopied] = useState(false);
   const [toCopied, setToCopied] = useState(false);
 
   const changeFrom = (value: string) => {
     setFrom(value);
-    setTo(fromFunc(value));
+    setTo(forwardFunc(value));
   };
 
   const changeTo = (value: string) => {

src/components/html/HtmlEntityCodec.tsx

@@ -5,8 +5,8 @@ import OneToOne from '../common/1-to-1';
 const HtmlEntityCodec = () => {
   return (
     <OneToOne
-      fromDefault='<script>alert("Hello");</script>'
-      fromFunc={escape}
+      defaultInput='<script>alert("Hello");</script>'
+      forwardFunc={escape}
       inverseFunc={unescape}
     />
   );

src/components/text/BackSlash.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import OneToOne from '../common/1-to-1';
+
+const addSlashes = (string: string) => {
+  return (
+    string
+      .replace(/\\/g, '\\\\')
+      // eslint-disable-next-line no-control-regex
+      .replace(/\u0008/g, '\\b')
+      .replace(/\t/g, '\\t')
+      .replace(/\n/g, '\\n')
+      .replace(/\f/g, '\\f')
+      .replace(/\r/g, '\\r')
+      .replace(/'/g, "\\'")
+      .replace(/"/g, '\\"')
+  );
+};
+
+const removeSlashes = (string: string) => {
+  return string
+    .replace(/\\"/g, '"')
+    .replace(/\\'/g, "'")
+    .replace(/\\r/g, '\r')
+    .replace(/\\f/g, '\f')
+    .replace(/\\n/g, '\n')
+    .replace(/\\t/g, '\t')
+    .replace(/\\b/, '\u0008')
+    .replace(/\\\\/g, '\\');
+};
+
+const BackSlashCodec = () => {
+  return (
+    <OneToOne
+      defaultInput="Hello\nworld!"
+      forwardFunc={removeSlashes}
+      inverseFunc={addSlashes}
+    />
+  );
+};
+
+export default BackSlashCodec;

src/components/url/UrlCodec.tsx

@@ -4,8 +4,8 @@ import OneToOne from '../common/1-to-1';
 const UrlCodec = () => {
   return (
     <OneToOne
-      fromDefault="https://plainlab.github.io/?q=plainbelt"
-      fromFunc={encodeURIComponent}
+      defaultInput="https://plainlab.github.io/?q=plainbelt"
+      forwardFunc={encodeURIComponent}
       inverseFunc={decodeURIComponent}
     />
   );

src/helpers/fontAwesome.ts

@@ -25,6 +25,7 @@ import {
   faCheck,
   faLink,
   faFileCode,
+  faSlash,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -50,5 +51,6 @@ library.add(
   faSlidersH,
   faLink,
   faFileCode,
+  faSlash,
   faCheck
 );

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plainbelt",
   "productName": "PlainBelt",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "A plain toolbelt for developers",
   "main": "./main.prod.js",
   "author": {