Skip to content

Commit ee271da

Browse files
manhtaimanhtai
authored
Json formatter (#4)
* Json formatter * Reformat
1 parent bacb938 commit ee271da

File tree

11 files changed

+173
-41
lines changed

11 files changed

+173
-41
lines changed

‎README.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,15 @@
1010
- [x] Markdown to HTML Converter
1111
- [x] HTML Preview
1212
- [x] QRCode Generator
13-
- [x] Base64 Encoder / Decoder
13+
- [x] Base64 Encode/Decode
1414
- [x] Text Diff
15-
- [x] SQL formatter
15+
- [x] JSON Formatter
16+
- [x] SQL Formatter
17+
- [ ] JWT Debugger
18+
- [ ] Number Base Converter
19+
- [ ] URL Encode/Decode
20+
- [ ] HTML Entity Encode/Decode
21+
- [ ] Regex Tester
1622

1723
## Installation
1824

‎src/components/Main.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import QrCodeGenerator from './qrcode/QrCodeGenerator';
1010
import Base64 from './base64/Base64';
1111
import DiffText from './diff/TextDiff';
1212
import SqlFormatter from './sql/SqlFormatter';
13+
import JsonFormatter from './json/JsonFormatter';
1314

1415
const Main = () => {
1516
const routes = [
@@ -49,6 +50,12 @@ const Main = () => {
4950
name: 'Text Diff',
5051
Component: DiffText,
5152
},
53+
{
54+
icon: <FontAwesomeIcon icon={['fab', 'js-square']} />,
55+
path: '/json-formatter',
56+
name: 'JSON Formatter',
57+
Component: JsonFormatter,
58+
},
5259
{
5360
icon: <FontAwesomeIcon icon="database" />,
5461
path: '/sql-formatter',
@@ -72,7 +79,7 @@ const Main = () => {
7279
<NavLink
7380
to={path}
7481
key={path}
75-
className="rounded-lg px-3 py-1 mb-1 space-x-1 items-center justify-start flex"
82+
className="flex items-center justify-start px-3 py-1 mb-1 space-x-1 rounded-lg"
7683
activeClassName="bg-blue-400 text-white"
7784
>
7885
<span className="w-6">{icon}</span>
@@ -84,7 +91,7 @@ const Main = () => {
8491

8592
{/* Main content */}
8693
<section className="relative flex flex-col w-full bg-gray-200">
87-
<div className="h-full overflow-x-hidden overflow-y-auto px-6 my-6">
94+
<div className="h-full px-6 my-6 overflow-x-hidden overflow-y-auto">
8895
{routes.map(({ path, name, Component }) => (
8996
<Route key={path} exact path={path}>
9097
<Component />

‎src/components/base64/Base64.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Base64 = () => {
4646
}, [input, encode]);
4747

4848
return (
49-
<div className="min-h-full flex flex-col">
49+
<div className="flex flex-col min-h-full">
5050
<div className="flex justify-between mb-1">
5151
<span className="flex space-x-2">
5252
<button type="button" className="btn" onClick={handleClipboardInput}>
@@ -60,7 +60,7 @@ const Base64 = () => {
6060
>
6161
Open...
6262
</button>
63-
<div className="flex space-x-2 items-center">
63+
<div className="flex items-center space-x-2">
6464
<label htmlFor="string" className="flex items-center space-x-1">
6565
<input
6666
type="radio"
@@ -86,7 +86,7 @@ const Base64 = () => {
8686
</div>
8787
</span>
8888
<span className="flex space-x-4">
89-
<div className="flex space-x-4 items-center">
89+
<div className="flex items-center space-x-4">
9090
<label htmlFor="encoder" className="flex items-center space-x-1">
9191
<input
9292
type="radio"
@@ -120,16 +120,16 @@ const Base64 = () => {
120120
</button>
121121
</span>
122122
</div>
123-
<div className="flex min-h-full flex-1">
123+
<div className="flex flex-1 min-h-full">
124124
<textarea
125125
onChange={handleChangeInput}
126-
className="flex-1 min-h-full bg-white p-4 rounded-md"
126+
className="flex-1 min-h-full p-4 bg-white rounded-md"
127127
value={input}
128128
disabled={opening}
129129
/>
130130
<div className="mx-1" />
131131
<textarea
132-
className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
132+
className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
133133
value={output}
134134
readOnly
135135
/>

‎src/components/diff/TextDiff.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const TextDiff = () => {
5858
}, [left, right, diffType]);
5959

6060
return (
61-
<div className="min-h-full flex flex-col">
61+
<div className="flex flex-col min-h-full">
6262
<div className="flex justify-between mb-1">
6363
<span className="flex space-x-2">
6464
<button type="button" className="btn" onClick={handleClipboardLeft}>
@@ -76,22 +76,22 @@ const TextDiff = () => {
7676
</button>
7777
</span>
7878
</div>
79-
<section className="flex flex-1 flex-col space-y-2 min-h-full">
80-
<div className="flex min-h-full flex-1 space-x-2">
79+
<section className="flex flex-col flex-1 min-h-full space-y-2">
80+
<div className="flex flex-1 min-h-full space-x-2">
8181
<textarea
8282
onChange={handleChangeLeft}
83-
className="flex-1 min-h-full bg-white p-4 rounded-md"
83+
className="flex-1 min-h-full p-4 bg-white rounded-md"
8484
value={left}
8585
/>
8686
<textarea
8787
onChange={handleChangeRight}
88-
className="flex-1 min-h-full bg-white p-4 rounded-md"
88+
className="flex-1 min-h-full p-4 bg-white rounded-md"
8989
value={right}
9090
/>
9191
</div>
9292

93-
<div className="flex flex-0 space-x-4 items-center justify-between">
94-
<div className="flex flex-0 space-x-4 items-center">
93+
<div className="flex items-center justify-between space-x-4 flex-0">
94+
<div className="flex items-center space-x-4 flex-0">
9595
{diffTypes.map((dt) => (
9696
<label
9797
htmlFor={dt}
@@ -116,7 +116,7 @@ const TextDiff = () => {
116116
</div>
117117

118118
<section
119-
className="w-full min-h-full bg-gray-100 p-4 flex-1 rounded-md"
119+
className="flex-1 w-full min-h-full p-4 bg-gray-100 rounded-md"
120120
dangerouslySetInnerHTML={{ __html: diff }}
121121
/>
122122
</section>

‎src/components/html/HtmlPreview.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const HtmlPreview = () => {
2424
};
2525

2626
return (
27-
<div className="min-h-full flex flex-col">
27+
<div className="flex flex-col min-h-full">
2828
<div className="flex justify-start mb-1 space-x-2">
2929
<button type="button" className="btn" onClick={handleClipboard}>
3030
Clipboard
@@ -41,12 +41,12 @@ const HtmlPreview = () => {
4141
<div className="flex flex-1 min-h-full space-x-2">
4242
<textarea
4343
onChange={handleChange}
44-
className="flex-1 min-h-full bg-white p-4 rounded-md"
44+
className="flex-1 min-h-full p-4 bg-white rounded-md"
4545
value={html}
4646
disabled={opening}
4747
/>
4848
<section
49-
className="flex-1 min-h-full bg-gray-100 p-4 prose rounded-md"
49+
className="flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md"
5050
dangerouslySetInnerHTML={{ __html: html }}
5151
/>
5252
</div>

‎src/components/json/JsonFormatter.tsx

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React, { useEffect, useState } from 'react';
2+
import { ipcRenderer, clipboard } from 'electron';
3+
4+
const JsonFormatter = () => {
5+
const [input, setInput] = useState(
6+
'{"name":"PlainBelt","url":"https://github.com/plainbelt/plainbelt"}'
7+
);
8+
const [output, setOutput] = useState('');
9+
const [opening, setOpening] = useState(false);
10+
const [copied, setCopied] = useState(false);
11+
const [seperator, setSeperator] = useState('4 ⎵');
12+
13+
const handleChangeInput = (evt: { target: { value: string } }) =>
14+
setInput(evt.target.value);
15+
16+
const handleOpenInput = async () => {
17+
setOpening(true);
18+
const content = await ipcRenderer.invoke('open-file', []);
19+
setInput(Buffer.from(content).toString());
20+
setOpening(false);
21+
};
22+
23+
const handleClipboardInput = () => {
24+
setInput(clipboard.readText());
25+
};
26+
27+
const handleCopyOutput = () => {
28+
setCopied(true);
29+
clipboard.write({ text: output });
30+
setTimeout(() => setCopied(false), 500);
31+
};
32+
33+
const seperators = ['4 ⎵', '2 ⎵', '1 Tab', 'Minified'];
34+
35+
useEffect(() => {
36+
let sep: string | number | undefined = '\t';
37+
if (seperator === '4 ⎵') {
38+
sep = 4;
39+
} else if (seperator === '2 ⎵') {
40+
sep = 2;
41+
} else if (seperator === 'Minified') {
42+
sep = undefined;
43+
}
44+
45+
try {
46+
const out = JSON.stringify(JSON.parse(input), null, sep);
47+
setOutput(out);
48+
} catch (e) {
49+
setOutput(e.message);
50+
}
51+
}, [input, seperator]);
52+
53+
return (
54+
<div className="flex flex-col min-h-full">
55+
<div className="flex justify-between mb-1">
56+
<span className="flex space-x-2">
57+
<button type="button" className="btn" onClick={handleClipboardInput}>
58+
Clipboard
59+
</button>
60+
<button
61+
type="button"
62+
className="btn"
63+
onClick={handleOpenInput}
64+
disabled={opening}
65+
>
66+
Open...
67+
</button>
68+
</span>
69+
<span className="flex space-x-4">
70+
{seperators.map((sep) => (
71+
<label
72+
htmlFor={sep}
73+
className="flex items-center space-x-1"
74+
key={sep}
75+
>
76+
<input
77+
type="radio"
78+
className="btn"
79+
name="seperator"
80+
id={sep}
81+
checked={seperator === sep}
82+
onChange={() => setSeperator(sep)}
83+
/>
84+
<p>{sep}</p>
85+
</label>
86+
))}
87+
<button
88+
type="button"
89+
className="w-16 btn"
90+
onClick={handleCopyOutput}
91+
disabled={copied}
92+
>
93+
{copied ? 'Copied' : 'Copy'}
94+
</button>
95+
</span>
96+
</div>
97+
<div className="flex flex-1 min-h-full space-x-2">
98+
<textarea
99+
onChange={handleChangeInput}
100+
className="flex-1 min-h-full p-4 bg-white rounded-md"
101+
value={input}
102+
disabled={opening}
103+
/>
104+
<textarea
105+
className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
106+
value={output}
107+
readOnly
108+
/>
109+
</div>
110+
</div>
111+
);
112+
};
113+
114+
export default JsonFormatter;

‎src/components/markdown/MarkdownToHtml.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const Md2Html = () => {
3333
};
3434

3535
return (
36-
<div className="min-h-full flex flex-col">
36+
<div className="flex flex-col min-h-full">
3737
<div className="flex justify-between mb-1">
3838
<span className="flex space-x-2">
3939
<button type="button" className="btn" onClick={handleClipboard}>
@@ -66,21 +66,21 @@ const Md2Html = () => {
6666
</button>
6767
</span>
6868
</div>
69-
<div className="flex min-h-full flex-1 space-x-2">
69+
<div className="flex flex-1 min-h-full space-x-2">
7070
<textarea
7171
onChange={handleChange}
72-
className="flex-1 min-h-full bg-white p-4 rounded-md"
72+
className="flex-1 min-h-full p-4 bg-white rounded-md"
7373
value={md}
7474
disabled={opening}
7575
/>
7676
{preview ? (
7777
<section
78-
className="flex-1 min-h-full bg-gray-100 p-4 prose w-full rounded-md"
78+
className="flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md"
7979
dangerouslySetInnerHTML={{ __html: marked(md) }}
8080
/>
8181
) : (
8282
<textarea
83-
className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
83+
className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
8484
value={marked(md)}
8585
readOnly
8686
/>

‎src/components/qrcode/QrCodeGenerator.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const HtmlPreview = () => {
4545
};
4646

4747
return (
48-
<div className="min-h-full flex flex-col">
48+
<div className="flex flex-col min-h-full">
4949
<div className="flex justify-between mb-1">
5050
<span className="flex space-x-2">
5151
<button type="button" className="btn" onClick={handleClipboard}>
@@ -73,10 +73,10 @@ const HtmlPreview = () => {
7373
<div className="flex flex-1 min-h-full space-x-2">
7474
<textarea
7575
onChange={handleChange}
76-
className="flex-1 min-h-full bg-white p-4 rounded-md"
76+
className="flex-1 min-h-full p-4 bg-white rounded-md"
7777
value={content}
7878
/>
79-
<section className="flex-1 min-h-full flex items-center p-4 prose bg-gray-100 rounded-md">
79+
<section className="flex items-center flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md">
8080
{qrCode && <img src={qrCode} alt={content} />}
8181
</section>
8282
</div>

‎src/components/sql/SqlFormatter.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const SqlFormatter = () => {
3333
}, [input]);
3434

3535
return (
36-
<div className="min-h-full flex flex-col">
36+
<div className="flex flex-col min-h-full">
3737
<div className="flex justify-between mb-1">
3838
<span className="flex space-x-2">
3939
<button type="button" className="btn" onClick={handleClipboardInput}>
@@ -59,16 +59,15 @@ const SqlFormatter = () => {
5959
</button>
6060
</span>
6161
</div>
62-
<div className="flex min-h-full flex-1">
62+
<div className="flex flex-1 min-h-full space-x-2">
6363
<textarea
6464
onChange={handleChangeInput}
65-
className="flex-1 min-h-full bg-white p-4 rounded-md"
65+
className="flex-1 min-h-full p-4 bg-white rounded-md"
6666
value={input}
6767
disabled={opening}
6868
/>
69-
<div className="mx-1" />
7069
<textarea
71-
className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
70+
className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
7271
value={output}
7372
readOnly
7473
/>

0 commit comments

Comments
 (0)