plainlab · manhtai · Jul 25, 2021 · Jul 25, 2021 · Jul 25, 2021
diff --git a/README.md b/README.md
@@ -10,9 +10,15 @@
 - [x] Markdown to HTML Converter
 - [x] HTML Preview
 - [x] QRCode Generator
-- [x] Base64 Encoder / Decoder
+- [x] Base64 Encode/Decode
 - [x] Text Diff
-- [x] SQL formatter
+- [x] JSON Formatter
+- [x] SQL Formatter
+- [ ] JWT Debugger
+- [ ] Number Base Converter
+- [ ] URL Encode/Decode
+- [ ] HTML Entity Encode/Decode
+- [ ] Regex Tester
 
 ## Installation
 

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -10,6 +10,7 @@ import QrCodeGenerator from './qrcode/QrCodeGenerator';
 import Base64 from './base64/Base64';
 import DiffText from './diff/TextDiff';
 import SqlFormatter from './sql/SqlFormatter';
+import JsonFormatter from './json/JsonFormatter';
 
 const Main = () => {
   const routes = [
@@ -49,6 +50,12 @@ const Main = () => {
       name: 'Text Diff',
       Component: DiffText,
     },
+    {
+      icon: <FontAwesomeIcon icon={['fab', 'js-square']} />,
+      path: '/json-formatter',
+      name: 'JSON Formatter',
+      Component: JsonFormatter,
+    },
     {
       icon: <FontAwesomeIcon icon="database" />,
       path: '/sql-formatter',
@@ -72,7 +79,7 @@ const Main = () => {
               <NavLink
                 to={path}
                 key={path}
-                className="rounded-lg px-3 py-1 mb-1 space-x-1 items-center justify-start flex"
+                className="flex items-center justify-start px-3 py-1 mb-1 space-x-1 rounded-lg"
                 activeClassName="bg-blue-400 text-white"
               >
                 <span className="w-6">{icon}</span>
@@ -84,7 +91,7 @@ const Main = () => {
 
         {/* Main content */}
         <section className="relative flex flex-col w-full bg-gray-200">
-          <div className="h-full overflow-x-hidden overflow-y-auto px-6 my-6">
+          <div className="h-full px-6 my-6 overflow-x-hidden overflow-y-auto">
             {routes.map(({ path, name, Component }) => (
               <Route key={path} exact path={path}>
                 <Component />

diff --git a/src/components/base64/Base64.tsx b/src/components/base64/Base64.tsx
@@ -46,7 +46,7 @@ const Base64 = () => {
   }, [input, encode]);
 
   return (
-    <div className="min-h-full flex flex-col">
+    <div className="flex flex-col min-h-full">
       <div className="flex justify-between mb-1">
         <span className="flex space-x-2">
           <button type="button" className="btn" onClick={handleClipboardInput}>
@@ -60,7 +60,7 @@ const Base64 = () => {
           >
             Open...
           </button>
-          <div className="flex space-x-2 items-center">
+          <div className="flex items-center space-x-2">
             <label htmlFor="string" className="flex items-center space-x-1">
               <input
                 type="radio"
@@ -86,7 +86,7 @@ const Base64 = () => {
           </div>
         </span>
         <span className="flex space-x-4">
-          <div className="flex space-x-4 items-center">
+          <div className="flex items-center space-x-4">
             <label htmlFor="encoder" className="flex items-center space-x-1">
               <input
                 type="radio"
@@ -120,16 +120,16 @@ const Base64 = () => {
           </button>
         </span>
       </div>
-      <div className="flex min-h-full flex-1">
+      <div className="flex flex-1 min-h-full">
         <textarea
           onChange={handleChangeInput}
-          className="flex-1 min-h-full bg-white p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-white rounded-md"
           value={input}
           disabled={opening}
         />
         <div className="mx-1" />
         <textarea
-          className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
           value={output}
           readOnly
         />

diff --git a/src/components/diff/TextDiff.tsx b/src/components/diff/TextDiff.tsx
@@ -58,7 +58,7 @@ const TextDiff = () => {
   }, [left, right, diffType]);
 
   return (
-    <div className="min-h-full flex flex-col">
+    <div className="flex flex-col min-h-full">
       <div className="flex justify-between mb-1">
         <span className="flex space-x-2">
           <button type="button" className="btn" onClick={handleClipboardLeft}>
@@ -76,22 +76,22 @@ const TextDiff = () => {
           </button>
         </span>
       </div>
-      <section className="flex flex-1 flex-col space-y-2 min-h-full">
-        <div className="flex min-h-full flex-1 space-x-2">
+      <section className="flex flex-col flex-1 min-h-full space-y-2">
+        <div className="flex flex-1 min-h-full space-x-2">
           <textarea
             onChange={handleChangeLeft}
-            className="flex-1 min-h-full bg-white p-4 rounded-md"
+            className="flex-1 min-h-full p-4 bg-white rounded-md"
             value={left}
           />
           <textarea
             onChange={handleChangeRight}
-            className="flex-1 min-h-full bg-white p-4 rounded-md"
+            className="flex-1 min-h-full p-4 bg-white rounded-md"
             value={right}
           />
         </div>
 
-        <div className="flex flex-0 space-x-4 items-center justify-between">
-          <div className="flex flex-0 space-x-4 items-center">
+        <div className="flex items-center justify-between space-x-4 flex-0">
+          <div className="flex items-center space-x-4 flex-0">
             {diffTypes.map((dt) => (
               <label
                 htmlFor={dt}
@@ -116,7 +116,7 @@ const TextDiff = () => {
         </div>
 
         <section
-          className="w-full min-h-full bg-gray-100 p-4 flex-1 rounded-md"
+          className="flex-1 w-full min-h-full p-4 bg-gray-100 rounded-md"
           dangerouslySetInnerHTML={{ __html: diff }}
         />
       </section>

diff --git a/src/components/html/HtmlPreview.tsx b/src/components/html/HtmlPreview.tsx
@@ -24,7 +24,7 @@ const HtmlPreview = () => {
   };
 
   return (
-    <div className="min-h-full flex flex-col">
+    <div className="flex flex-col min-h-full">
       <div className="flex justify-start mb-1 space-x-2">
         <button type="button" className="btn" onClick={handleClipboard}>
           Clipboard
@@ -41,12 +41,12 @@ const HtmlPreview = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full bg-white p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-white rounded-md"
           value={html}
           disabled={opening}
         />
         <section
-          className="flex-1 min-h-full bg-gray-100 p-4 prose rounded-md"
+          className="flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md"
           dangerouslySetInnerHTML={{ __html: html }}
         />
       </div>

diff --git a/src/components/json/JsonFormatter.tsx b/src/components/json/JsonFormatter.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { ipcRenderer, clipboard } from 'electron';
+
+const JsonFormatter = () => {
+  const [input, setInput] = useState(
+    '{"name":"PlainBelt","url":"https://github.com/plainbelt/plainbelt"}'
+  );
+  const [output, setOutput] = useState('');
+  const [opening, setOpening] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [seperator, setSeperator] = useState('4 ⎵');
+
+  const handleChangeInput = (evt: { target: { value: string } }) =>
+    setInput(evt.target.value);
+
+  const handleOpenInput = async () => {
+    setOpening(true);
+    const content = await ipcRenderer.invoke('open-file', []);
+    setInput(Buffer.from(content).toString());
+    setOpening(false);
+  };
+
+  const handleClipboardInput = () => {
+    setInput(clipboard.readText());
+  };
+
+  const handleCopyOutput = () => {
+    setCopied(true);
+    clipboard.write({ text: output });
+    setTimeout(() => setCopied(false), 500);
+  };
+
+  const seperators = ['4 ⎵', '2 ⎵', '1 Tab', 'Minified'];
+
+  useEffect(() => {
+    let sep: string | number | undefined = '\t';
+    if (seperator === '4 ⎵') {
+      sep = 4;
+    } else if (seperator === '2 ⎵') {
+      sep = 2;
+    } else if (seperator === 'Minified') {
+      sep = undefined;
+    }
+
+    try {
+      const out = JSON.stringify(JSON.parse(input), null, sep);
+      setOutput(out);
+    } catch (e) {
+      setOutput(e.message);
+    }
+  }, [input, seperator]);
+
+  return (
+    <div className="flex flex-col min-h-full">
+      <div className="flex justify-between mb-1">
+        <span className="flex space-x-2">
+          <button type="button" className="btn" onClick={handleClipboardInput}>
+            Clipboard
+          </button>
+          <button
+            type="button"
+            className="btn"
+            onClick={handleOpenInput}
+            disabled={opening}
+          >
+            Open...
+          </button>
+        </span>
+        <span className="flex space-x-4">
+          {seperators.map((sep) => (
+            <label
+              htmlFor={sep}
+              className="flex items-center space-x-1"
+              key={sep}
+            >
+              <input
+                type="radio"
+                className="btn"
+                name="seperator"
+                id={sep}
+                checked={seperator === sep}
+                onChange={() => setSeperator(sep)}
+              />
+              <p>{sep}</p>
+            </label>
+          ))}
+          <button
+            type="button"
+            className="w-16 btn"
+            onClick={handleCopyOutput}
+            disabled={copied}
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        </span>
+      </div>
+      <div className="flex flex-1 min-h-full space-x-2">
+        <textarea
+          onChange={handleChangeInput}
+          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          value={input}
+          disabled={opening}
+        />
+        <textarea
+          className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
+          value={output}
+          readOnly
+        />
+      </div>
+    </div>
+  );
+};
+
+export default JsonFormatter;
diff --git a/src/components/markdown/MarkdownToHtml.tsx b/src/components/markdown/MarkdownToHtml.tsx
@@ -33,7 +33,7 @@ const Md2Html = () => {
   };
 
   return (
-    <div className="min-h-full flex flex-col">
+    <div className="flex flex-col min-h-full">
       <div className="flex justify-between mb-1">
         <span className="flex space-x-2">
           <button type="button" className="btn" onClick={handleClipboard}>
@@ -66,21 +66,21 @@ const Md2Html = () => {
           </button>
         </span>
       </div>
-      <div className="flex min-h-full flex-1 space-x-2">
+      <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full bg-white p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-white rounded-md"
           value={md}
           disabled={opening}
         />
         {preview ? (
           <section
-            className="flex-1 min-h-full bg-gray-100 p-4 prose w-full rounded-md"
+            className="flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md"
             dangerouslySetInnerHTML={{ __html: marked(md) }}
           />
         ) : (
           <textarea
-            className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
+            className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
             value={marked(md)}
             readOnly
           />

diff --git a/src/components/qrcode/QrCodeGenerator.tsx b/src/components/qrcode/QrCodeGenerator.tsx
@@ -45,7 +45,7 @@ const HtmlPreview = () => {
   };
 
   return (
-    <div className="min-h-full flex flex-col">
+    <div className="flex flex-col min-h-full">
       <div className="flex justify-between mb-1">
         <span className="flex space-x-2">
           <button type="button" className="btn" onClick={handleClipboard}>
@@ -73,10 +73,10 @@ const HtmlPreview = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full bg-white p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-white rounded-md"
           value={content}
         />
-        <section className="flex-1 min-h-full flex items-center p-4 prose bg-gray-100 rounded-md">
+        <section className="flex items-center flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md">
           {qrCode && <img src={qrCode} alt={content} />}
         </section>
       </div>

diff --git a/src/components/sql/SqlFormatter.tsx b/src/components/sql/SqlFormatter.tsx
@@ -33,7 +33,7 @@ const SqlFormatter = () => {
   }, [input]);
 
   return (
-    <div className="min-h-full flex flex-col">
+    <div className="flex flex-col min-h-full">
       <div className="flex justify-between mb-1">
         <span className="flex space-x-2">
           <button type="button" className="btn" onClick={handleClipboardInput}>
@@ -59,16 +59,15 @@ const SqlFormatter = () => {
           </button>
         </span>
       </div>
-      <div className="flex min-h-full flex-1">
+      <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChangeInput}
-          className="flex-1 min-h-full bg-white p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-white rounded-md"
           value={input}
           disabled={opening}
         />
-        <div className="mx-1" />
         <textarea
-          className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
+          className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
           value={output}
           readOnly
         />