Qrcode generator

Author: manhtai

package.json

@@ -177,6 +177,7 @@
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
+    "@types/qrcode": "^1.4.1",
     "autoprefixer": "^10.3.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.1.0",
@@ -254,6 +255,7 @@
     "electron-updater": "^4.3.4",
     "history": "^5.0.0",
     "marked": "^2.1.3",
+    "qrcode": "^1.4.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

src/components/Main.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MarkdownToHtml from './md-to-html/MarkdownToHtml';
 import UnixTimestamp from './unix-timestamp/UnixTimestamp';
 import HtmlPreview from './html-preview/HtmlPreview';
+import QrCode from './qrcode/QrCode';
 
 const Main = () => {
   const routes = [
@@ -25,6 +26,12 @@ const Main = () => {
       name: 'HTML Preview',
       Component: HtmlPreview,
     },
+    {
+      icon: <FontAwesomeIcon icon="qrcode" />,
+      path: '/qrcode-generator',
+      name: 'QRCode generator',
+      Component: QrCode,
+    },
   ];
 
   return (

src/components/qrcode/QrCode.tsx

@@ -0,0 +1,77 @@
+import { ipcRenderer } from 'electron';
+import React, { useEffect, useState } from 'react';
+
+const HtmlPreview = () => {
+  const [content, setContent] = useState('https://plainbelt.github.io');
+  const [qrCode, setQrCode] = useState();
+  const [opening, setOpening] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    ipcRenderer
+      .invoke('generate-qrcode', { content })
+      .then((qr) => setQrCode(qr))
+      .catch(() => {});
+  });
+
+  const handleChange = async (evt: { target: { value: string } }) => {
+    setContent(evt.target.value);
+    const qr = await ipcRenderer.invoke('generate-qrcode', { content });
+    setQrCode(qr);
+  };
+
+  const handleOpen = async () => {
+    setOpening(true);
+    const filters = [{ name: 'Text Files', extensions: ['txt'] }];
+    const data = await ipcRenderer.invoke('open-file', filters);
+    setContent(data);
+    setOpening(false);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    await ipcRenderer.invoke('save-file', {
+      content: qrCode,
+      defaultPath: 'qrcode.png',
+    });
+    setSaving(false);
+  };
+
+  return (
+    <div className="min-h-full flex flex-col">
+      <div className="flex justify-between mb-1">
+        <button
+          type="button"
+          className="btn"
+          onClick={handleOpen}
+          disabled={opening}
+        >
+          Open...
+        </button>
+        <button
+          type="button"
+          className="btn"
+          onClick={handleSave}
+          disabled={saving}
+        >
+          Save...
+        </button>
+      </div>
+      <div className="flex min-h-full">
+        <textarea
+          onChange={handleChange}
+          className="flex-1 min-h-full bg-white p-4"
+          value={content}
+        />
+        <div className="mx-1" />
+        {qrCode && (
+          <section className="flex-1 min-h-full flex items-center p-4 prose bg-white">
+            <img src={qrCode} alt={content} className="w-full h-full" />
+          </section>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HtmlPreview;

src/helpers/fontAwesome.ts

@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab, faMarkdown, faHtml5 } from '@fortawesome/free-brands-svg-icons';
-import { faClock } from '@fortawesome/free-solid-svg-icons';
+import { faClock, faQrcode } from '@fortawesome/free-solid-svg-icons';
 
-library.add(fab, faMarkdown, faClock, faHtml5);
+library.add(fab, faMarkdown, faClock, faHtml5, faQrcode);

src/main.dev.ts

@@ -16,6 +16,7 @@ import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import { FileFilter, IpcMainInvokeEvent } from 'electron/main';
 import fs from 'fs';
+import QRCode from 'qrcode';
 import { promisify } from 'util';
 import MenuBuilder from './menu';
 
@@ -134,6 +135,26 @@ ipcMain.handle(
   }
 );
 
+ipcMain.handle(
+  'generate-qrcode',
+  async (_event: IpcMainInvokeEvent, { content }) => {
+    return QRCode.toDataURL(content, { width: 1024 });
+  }
+);
+
+ipcMain.handle(
+  'save-file',
+  async (_event: IpcMainInvokeEvent, { defaultPath, content }) => {
+    const file = await dialog.showSaveDialog({
+      defaultPath,
+    });
+
+    if (!file || !file.filePath) return;
+
+    await promisify(fs.writeFile)(file.filePath, content);
+  }
+);
+
 /**
  * Add event listeners...
  */

yarn.lock

@@ -1766,6 +1766,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/qrcode@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@types/qrcode/-/qrcode-1.4.1.tgz#0689f400c3a95d2db040c99c99834faa09ee9dc1"
+  integrity sha512-vxMyr7JM7tYPxu8vUE83NiosWX5DZieCyYeJRoOIg0pAkyofCBzknJ2ycUZkPGDFis2RS8GN/BeJLnRnAPxeCA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/react-dom@^16.9.9":
   version "16.9.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.9.tgz#d2d0a6f720a0206369ccbefff752ba37b9583136"
@@ -3022,6 +3029,19 @@ [email protected]:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -3032,7 +3052,12 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.0.tgz#59616b498304d556abd466966b22eeda3eca5fbe"
   integrity sha1-WWFrSYME1Var1GaWayLu2j7KX74=
 
-buffer-from@^1.0.0:
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
+buffer-from@^1.0.0, buffer-from@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
@@ -3056,7 +3081,7 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.1.0:
+buffer@^5.1.0, buffer@^5.4.3:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -4394,6 +4419,11 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dijkstrajs@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
+  integrity sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
+
 dir-compare@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/dir-compare/-/dir-compare-2.4.0.tgz#785c41dc5f645b34343a4eafc50b79bac7f11631"
@@ -7044,6 +7074,11 @@ [email protected], isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -9317,6 +9352,11 @@ plist@^3.0.1:
     xmlbuilder "^9.0.7"
     xmldom "^0.5.0"
 
+pngjs@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -9852,6 +9892,19 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qrcode@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
+  integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
+  dependencies:
+    buffer "^5.4.3"
+    buffer-alloc "^1.2.0"
+    buffer-from "^1.1.1"
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^13.2.4"
+
 [email protected]:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -12596,7 +12649,7 @@ yargs-parser@^20.2.2:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
   integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
 
-yargs@^13.3.0, yargs@^13.3.2:
+yargs@^13.2.4, yargs@^13.3.0, yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==