Added basic and not finished qr-code generation

package.json

@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^12.1.10",
     "intl-pluralrules": "^1.2.2",
     "iso-639-1": "^2.1.9",
+    "qrcode": "^1.4.4",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",

src/index.css

@@ -216,6 +216,7 @@ textarea {
   resize: vertical;
   padding-bottom: var(--basis_x2);
   min-height: 20px; /* TODO: Find out why this is value works. */
+  box-sizing: border-box;
 }
 
 button,

src/index.js

@@ -9,10 +9,10 @@ import 'intl-pluralrules'
 import { AppLocalizationProvider, locales } from './fluent/l10n.js'
 
 window.domains = {
-  frontend: 'https://qrcode.volt.link',
-  // frontend: 'http://localhost:3000/',
-  backend: 'https://volt.link/',
-  // backend: 'http://localhost:4000/',
+  // frontend: 'https://qrcode.volt.link',
+  frontend: 'http://localhost:3000/',
+  // backend: 'https://volt.link/',
+  backend: 'http://localhost:4000/',
 }
 
 function AppLanguageWrapper() {

src/locales/de.ftl

@@ -1,4 +1,11 @@
 default_locale = de
 
+website_title = Volt QR-Code Generator
+
 contact = Kontakt
 source_code = Quellcode
+
+text_content_input_placeholder = https:// …  oder Text
+
+filetype_headline = Als Vektor (VSG) oder Pixel (PNG) laden
+error_correction_level_headline = Fehlerresistenz

src/locales/en.ftl

@@ -1,4 +1,12 @@
 default_locale = en
 
+website_title = Volt QR-Code Generator
+
 contact = Contact
 source_code = Source Code
+
+content_placeholder = https:// …  or Text
+
+filetype_headline = Choose between Vector (VSG) or Pixel (PNG) Image.
+error_correction_level_headline = Error Resistance
+

src/pages/App.js

@@ -1,10 +1,12 @@
 import classes from './App.module.css'
 
 import Localized from '../fluent/Localized.js'
+import Generator from './Generator.js'
 
 function App() {
   return (<>
     <div className={classes.app}>
+      <Generator />
     </div>
     <footer>
       <a href="mailto:thomas.rosen@volteuropa.org"><Localized id="contact" /></a>

src/pages/Generator.js

@@ -0,0 +1,150 @@
+import React, { useState, useCallback } from 'react'
+import classes from './Generator.module.css'
+
+import { withLocalization, Localized } from '../fluent/Localized.js'
+import MultiButton from '../components/MultiButton.js'
+
+import QRCode from 'qrcode'
+
+function trigger_download(name, data) {
+  const a = document.createElement('a')
+  document.body.appendChild(a)
+  // a.target = '_blank'
+  a.download = name
+  a.href = data
+  a.click()
+  a.remove()
+}
+
+function Generator({ getString }) {
+  const [errorCorrectionLevel, setErrorCorrectionLevel] = useState('m')
+  const [filetype, setFiletype] = useState('svg')
+  const [qrcode, setQrcode] = useState(null)
+
+  console.log('errorCorrectionLevel', errorCorrectionLevel)
+  console.log('filetype', filetype)
+
+  const handleContentChange = useCallback(event => {
+    const value = event.target.value
+
+    // // With promises
+    // QRCode.toDataURL(value)
+    //   .then(url => {
+    //     console.log(url)
+    //   })
+    //   .catch(err => {
+    //     console.error(err)
+    //   })
+
+    if (filetype === 'svg') {
+      QRCode.toString(value, {
+        errorCorrectionLevel: errorCorrectionLevel,
+        type: 'svg',
+        scale: 1,
+        margin: 1,
+        color: {
+          light: '#ffffff',
+          dark: '#502379',
+        }
+      }, function (err, url) {
+        if (err) {
+          console.error(err)
+          setQrcode(null)
+        } else {
+          setQrcode(url)
+        }
+      })
+    } else {
+      setQrcode(null)
+    }
+  }, [filetype, setQrcode, errorCorrectionLevel])
+
+  const handleDownload = useCallback(() => {
+    if (filetype === 'svg') {
+      const b64 = 'data:image/svg+xml;base64,' + btoa(qrcode)
+      trigger_download('volt-qrcode.svg', b64)
+    } else {
+      const b64 = 'data:image/png;base64,'
+      trigger_download('volt-qrcode.png', b64)
+    }
+    // window.umami.trackEvent('F: ' + filetype)
+  }, [
+    filetype,
+    qrcode
+  ])
+
+  return <div className={classes.qrcodeWrapper}>
+    <h1><Localized id="website_title" /></h1>
+
+    <textarea
+      className={classes.qrcodeContentInput}
+      placeholder={getString('text_content_input_placeholder')}
+      onChange={handleContentChange}
+    ></textarea>
+
+    <h2>
+      <Localized id="filetype_headline" />
+    </h2>
+    <MultiButton
+      onChange={setFiletype}
+      ariaLabel={getString('filetype_headline')}
+      defaultValue={filetype}
+      items={[
+        {
+          value: 'svg',
+          title: 'SVG'
+        },
+        {
+          value: 'png',
+          title: 'PNG'
+        },
+      ]}
+    />
+    <br />
+    <br />
+
+    <h2>
+      <Localized id="error_correction_level_headline" />
+    </h2>
+    <MultiButton
+      onChange={setErrorCorrectionLevel}
+      ariaLabel={getString('error_correction_level_headline')}
+      defaultValue={errorCorrectionLevel}
+      items={[
+        {
+          value: 'L', // low',
+          title: 'Low ~7%'
+        },
+        {
+          value: 'M', // edium',
+          title: 'Medium ~15%'
+        },
+        {
+          value: 'Q', // uartile',
+          title: 'Quartile ~25%'
+        },
+        {
+          value: 'H', // igh',
+          title: 'High ~30%'
+        },
+      ]}
+    />
+    <br />
+    <br />
+
+    {
+      qrcode === null
+        ? null
+        : <>
+          {
+            filetype === 'svg'
+              ? <span className={classes.svgWrapper} dangerouslySetInnerHTML={{__html: qrcode}}></span>
+              : <img src={qrcode} alt=""/>
+          }
+          <button onClick={handleDownload} className={'green ' + classes.downloadButton}>Download</button>
+          </>
+    }
+  </div>
+}
+
+export default withLocalization(Generator)

src/pages/Generator.module.css

@@ -0,0 +1,17 @@
+
+.qrcodeWrapper {
+  margin: 32px auto;
+  width: 400px;
+  max-width: 100%;
+}
+
+.qrcodeContentInput {
+  display: block;
+  margin: 32px auto;
+  width: 400px;
+  max-width: 100%;
+}
+.downloadButton {
+  margin: 32px 0;
+  width: 100%;
+}