Skip to content

Commit 5235799

Browse files
manhtaimanhtai
authored
Merge pull request #1 from plainbelt/unix_converter
Unix converter
2 parents 25ef696 + befd0a0 commit 5235799

File tree

5 files changed

+224
-39
lines changed

5 files changed

+224
-39
lines changed

‎src/components/html-preview/HtmlPreview.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable react/no-danger */
2-
import { ipcRenderer } from 'electron';
2+
import { clipboard, ipcRenderer } from 'electron';
33
import React, { useState } from 'react';
44

55
const HtmlPreview = () => {
@@ -19,9 +19,16 @@ const HtmlPreview = () => {
1919
setOpening(false);
2020
};
2121

22+
const handleClipboard = () => {
23+
setHtml(clipboard.readText());
24+
};
25+
2226
return (
2327
<div className="min-h-full flex flex-col">
24-
<div className="flex justify-start mb-1">
28+
<div className="flex justify-start mb-1 space-x-2">
29+
<button type="button" className="btn" onClick={handleClipboard}>
30+
Clipboard
31+
</button>
2532
<button
2633
type="button"
2734
className="btn"

‎src/components/md-to-html/MarkdownToHtml.tsx

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/no-danger */
22
import React, { useState } from 'react';
33
import marked from 'marked';
4-
import { ipcRenderer } from 'electron';
4+
import { ipcRenderer, clipboard } from 'electron';
55

66
const Md2Html = () => {
77
const [md, setMd] = useState('# Hello\n> This is a quote');
@@ -21,24 +21,42 @@ const Md2Html = () => {
2121
setOpening(false);
2222
};
2323

24+
const handleClipboard = () => {
25+
setMd(clipboard.readText());
26+
};
27+
28+
const handleCopy = () => {
29+
clipboard.write({ text: marked(md) });
30+
};
31+
2432
return (
2533
<div className="min-h-full flex flex-col">
2634
<div className="flex justify-between mb-1">
27-
<button
28-
type="button"
29-
className="btn"
30-
onClick={handleOpen}
31-
disabled={opening}
32-
>
33-
Open...
34-
</button>
35-
<button
36-
type="button"
37-
className="btn"
38-
onClick={() => setPreview(!preview)}
39-
>
40-
{preview ? 'Raw HTML' : 'Preview'}
41-
</button>
35+
<span className="flex space-x-2">
36+
<button type="button" className="btn" onClick={handleClipboard}>
37+
Clipboard
38+
</button>
39+
<button
40+
type="button"
41+
className="btn"
42+
onClick={handleOpen}
43+
disabled={opening}
44+
>
45+
Open...
46+
</button>
47+
</span>
48+
<span className="flex space-x-2">
49+
<button
50+
type="button"
51+
className="btn"
52+
onClick={() => setPreview(!preview)}
53+
>
54+
{preview ? 'Raw HTML' : 'Preview'}
55+
</button>
56+
<button type="button" className="btn" onClick={handleCopy}>
57+
Copy
58+
</button>
59+
</span>
4260
</div>
4361
<div className="flex min-h-full flex-1">
4462
<textarea
@@ -50,7 +68,7 @@ const Md2Html = () => {
5068
<div className="mx-1" />
5169
{preview ? (
5270
<section
53-
className="flex-1 min-h-full bg-blue-50 p-4 prose rounded-md"
71+
className="flex-1 min-h-full bg-blue-50 p-4 prose w-full rounded-md"
5472
dangerouslySetInnerHTML={{ __html: marked(md) }}
5573
/>
5674
) : (

‎src/components/qrcode/QrCode.tsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ipcRenderer } from 'electron';
1+
import { clipboard, ipcRenderer } from 'electron';
22
import React, { useState } from 'react';
33
import { useDebouncedEffect } from '../../helpers/effectHooks';
44

@@ -40,17 +40,27 @@ const HtmlPreview = () => {
4040
setSaving(false);
4141
};
4242

43+
const handleClipboard = () => {
44+
setContent(clipboard.readText());
45+
};
46+
4347
return (
4448
<div className="min-h-full flex flex-col">
4549
<div className="flex justify-between mb-1">
46-
<button
47-
type="button"
48-
className="btn"
49-
onClick={handleOpen}
50-
disabled={opening}
51-
>
52-
Open...
53-
</button>
50+
<span className="flex space-x-2">
51+
<button type="button" className="btn" onClick={handleClipboard}>
52+
Clipboard
53+
</button>
54+
<button
55+
type="button"
56+
className="btn"
57+
onClick={handleOpen}
58+
disabled={opening}
59+
>
60+
Open...
61+
</button>
62+
</span>
63+
5464
<button
5565
type="button"
5666
className="btn"

‎src/components/unix-timestamp/UnixTimestamp.tsx

Lines changed: 159 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,27 @@ import dayjs from 'dayjs';
22
import React, { useState, useEffect } from 'react';
33
import { clipboard } from 'electron';
44

5+
import relativeTime from 'dayjs/plugin/relativeTime';
6+
import dayOfYear from 'dayjs/plugin/dayOfYear';
7+
import weekOfYear from 'dayjs/plugin/weekOfYear';
8+
import isLeapYear from 'dayjs/plugin/isLeapYear';
9+
import weekday from 'dayjs/plugin/weekday';
10+
import buddhistEra from 'dayjs/plugin/buddhistEra';
11+
12+
dayjs.extend(relativeTime);
13+
dayjs.extend(dayOfYear);
14+
dayjs.extend(weekOfYear);
15+
dayjs.extend(isLeapYear);
16+
dayjs.extend(weekday);
17+
dayjs.extend(buddhistEra);
18+
519
const UnixTimestampConverter = () => {
620
const [date, setDate] = useState(dayjs());
721
const [copied, setCopied] = useState(false);
822

23+
const [epoch, setEpoch] = useState(dayjs().unix());
24+
const [dateStr, setDateStr] = useState(dayjs().toISOString());
25+
926
useEffect(() => {
1027
const timerID = setInterval(() => setDate(dayjs()), 1000);
1128

@@ -14,30 +31,163 @@ const UnixTimestampConverter = () => {
1431
};
1532
});
1633

34+
const handleClipboard = () => {
35+
const cl = parseInt(clipboard.readText(), 10) || dayjs().unix();
36+
setEpoch(cl);
37+
};
38+
1739
const handleCopy = () => {
1840
clipboard.write({ text: `${date.unix()}` });
1941
setCopied(true);
2042
setTimeout(() => setCopied(false), 1_000);
2143
};
2244

45+
const handleChangeEpoch = (evt: { target: { value: string } }) => {
46+
const val = parseInt(evt.target.value, 10) || 0;
47+
setEpoch(val);
48+
};
49+
50+
const handleChangeDate = (evt: { target: { value: string } }) => {
51+
const val = evt.target.value;
52+
setDateStr(val);
53+
};
54+
55+
const handleConvertFromDate = () => {
56+
if (dayjs(dateStr).isValid()) {
57+
setEpoch(dayjs(dateStr).unix());
58+
}
59+
};
60+
61+
useEffect(() => {
62+
setDateStr(dayjs.unix(epoch).toISOString());
63+
}, [epoch]);
64+
2365
return (
2466
<div className="min-h-full flex flex-col">
25-
<div className="flex justify-start mb-1">
67+
<section className="mb-4 space-y-1 flex items-center space-x-2 border-b pb-4">
68+
<p>The current Unix epoch time is</p>
69+
<span className="text-base bg-blue-200 px-2 py-1 rounded font-mono">
70+
{date.unix()}
71+
</span>
2672
<button
2773
type="button"
2874
className="btn"
2975
onClick={handleCopy}
3076
disabled={copied}
3177
>
32-
{copied ? 'Copied' : 'Copy'}
78+
Copy
3379
</button>
34-
</div>
35-
<div className="flex-1 min-h-full">
36-
The current Unix epoch time is
37-
<span className="text-base bg-blue-200 mx-2 px-2 py-1 rounded inline-flex items-center content-center font-mono">
38-
{date.unix()}
39-
</span>
40-
</div>
80+
</section>
81+
82+
<section className="flex justify-start space-x-2 mb-4">
83+
<p>Input:</p>
84+
<button type="button" className="btn" onClick={handleClipboard}>
85+
Clipboard
86+
</button>
87+
<button
88+
type="button"
89+
className="btn"
90+
onClick={() => setEpoch(dayjs().unix())}
91+
>
92+
Now
93+
</button>
94+
<button type="button" className="btn" onClick={() => setEpoch(0)}>
95+
Epoch
96+
</button>
97+
</section>
98+
99+
<section className="flex items-center justify-between space-x-4 mb-4 pb-4">
100+
<label htmlFor="epoch" className="flex-1">
101+
<span>Unix timestamp:</span>
102+
<input
103+
value={epoch}
104+
onChange={handleChangeEpoch}
105+
type="number"
106+
id="epoch"
107+
className="flex w-full p-1 rounded"
108+
/>
109+
</label>
110+
<label htmlFor="iso" className="flex-1">
111+
<span>ISO date:</span>
112+
<input
113+
value={dateStr}
114+
onChange={handleChangeDate}
115+
onBlur={handleConvertFromDate}
116+
type="text"
117+
id="iso"
118+
className="flex w-full p-1 rounded"
119+
/>
120+
</label>
121+
</section>
122+
123+
<section className="flex flex-col space-y-4 w-full p-4 pb-8 rounded-md bg-gray-200 border">
124+
<section className="flex items-center justify-between space-x-4">
125+
<label htmlFor="local" className="flex-1">
126+
<span>Local:</span>
127+
<input
128+
value={dayjs.unix(epoch).toDate().toLocaleString()}
129+
type="text"
130+
id="local"
131+
className="flex w-full p-1 rounded"
132+
readOnly
133+
/>
134+
</label>
135+
<label htmlFor="rel" className="flex-1">
136+
<span>Relative:</span>
137+
<input
138+
value={dayjs.unix(epoch).fromNow()}
139+
type="text"
140+
id="rel"
141+
className="flex w-full p-1 rounded"
142+
readOnly
143+
/>
144+
</label>
145+
</section>
146+
<section className="flex items-center justify-between space-x-4">
147+
<label htmlFor="dayyear" className="flex-1">
148+
<span>Day of year:</span>
149+
<input
150+
value={dayjs.unix(epoch).dayOfYear()}
151+
type="text"
152+
id="dayyear"
153+
className="flex w-full p-1 rounded"
154+
readOnly
155+
/>
156+
</label>
157+
<label htmlFor="weekyear" className="flex-1">
158+
<span>Week of year:</span>
159+
<input
160+
value={dayjs.unix(epoch).week()}
161+
type="text"
162+
id="weekyear"
163+
className="flex w-full p-1 rounded"
164+
readOnly
165+
/>
166+
</label>
167+
</section>
168+
<section className="flex items-center justify-between space-x-4">
169+
<label htmlFor="leap" className="flex-1">
170+
<span>Is leap year:</span>
171+
<input
172+
value={`${dayjs.unix(epoch).isLeapYear()}`}
173+
type="text"
174+
id="leap"
175+
className="flex w-full p-1 rounded"
176+
readOnly
177+
/>
178+
</label>
179+
<label htmlFor="be" className="flex-1">
180+
<span> Buddhist Era (B.E.):</span>
181+
<input
182+
value={dayjs.unix(epoch).format('BBBB')}
183+
type="text"
184+
id="be"
185+
className="flex w-full p-1 rounded"
186+
readOnly
187+
/>
188+
</label>
189+
</section>
190+
</section>
41191
</div>
42192
);
43193
};

‎src/helpers/fontAwesome.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { library } from '@fortawesome/fontawesome-svg-core';
22
import { fab, faMarkdown, faHtml5 } from '@fortawesome/free-brands-svg-icons';
3-
import { faClock, faQrcode } from '@fortawesome/free-solid-svg-icons';
3+
import { faClock, faCopy, faQrcode } from '@fortawesome/free-solid-svg-icons';
44

5-
library.add(fab, faMarkdown, faClock, faHtml5, faQrcode);
5+
library.add(fab, faMarkdown, faClock, faHtml5, faQrcode, faCopy);

0 commit comments

Comments
 (0)