From 52ff61635b1cbd4b024ae882b606cfb64d6cc897 Mon Sep 17 00:00:00 2001
From: Ben Woodward <ben@bdw.to>
Date: Sun, 4 Jul 2021 16:48:10 -0700
Subject: Prettier formatting (#33)

* Add prettier

* Format code
---
 .github/workflows/master_push.yml  | 12 +++-----
 .github/workflows/pull_request.yml |  9 ++----
 .prettierrc.json                   |  5 ++++
 Dockerfile                         |  1 +
 README.md                          |  2 +-
 package.json                       |  5 +++-
 public/index.html                  | 10 +++----
 src/App.js                         | 20 ++++++++------
 src/components/Card.js             | 56 ++++++++++++++++++++++++++------------
 src/components/style.css           |  5 ++--
 yarn.lock                          |  5 ++++
 11 files changed, 81 insertions(+), 49 deletions(-)
 create mode 100644 .prettierrc.json

diff --git a/.github/workflows/master_push.yml b/.github/workflows/master_push.yml
index 7c56fec..b1ad41b 100644
--- a/.github/workflows/master_push.yml
+++ b/.github/workflows/master_push.yml
@@ -6,18 +6,14 @@ jobs:
   build-and-publish:
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Checkout
+      - name: Checkout
         uses: actions/checkout@v2
-      -
-        name: Set up Docker
+      - name: Set up Docker
         uses: docker/setup-buildx-action@v1
-      -
-        name: Login to DockerHub
+      - name: Login to DockerHub
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      -
-        name: Build and publish
+      - name: Build and publish
         run: make build publish
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 5a2ee16..65cffee 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -4,12 +4,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Checkout
+      - name: Checkout
         uses: actions/checkout@v2
-      -
-        name: Set up Docker
+      - name: Set up Docker
         uses: docker/setup-buildx-action@v1
-      -
-        name: Build
+      - name: Build
         run: make build
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..0dbf448
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/Dockerfile b/Dockerfile
index 5a5f92f..7d640ca 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,7 @@ FROM mhart/alpine-node:14 as builder
 WORKDIR /tmp
 COPY . .
 
+RUN npx prettier --check . '!**/*.min.{css,js}'
 RUN yarn && yarn build
 
 ###
diff --git a/README.md b/README.md
index 0df9331..40120d8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ![ci](https://github.com/bndw/wifi-card/workflows/ci/badge.svg)
 
-# 📶  WiFi Card
+# 📶 WiFi Card
 
 Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.
 
diff --git a/package.json b/package.json
index 27a0c47..af43a10 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
   "main": "index.js",
   "repository": "git@github.com:bndw/wifi-card.git",
   "author": "bndw <ben@bdw.to>",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "prettier": "2.3.2"
+  }
 }
diff --git a/public/index.html b/public/index.html
index 6685a59..52cbc44 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,10 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Print a card for your WiFi login"
-    />
+    <meta name="description" content="Print a card for your WiFi login" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,7 +22,10 @@
     <title>📡 WiFi Card</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app. Feel free to view the <a href="https://github.com/bndw/wifi-card">source code</a>.</noscript>
+    <noscript
+      >You need to enable JavaScript to run this app. Feel free to view the
+      <a href="https://github.com/bndw/wifi-card">source code</a>.</noscript
+    >
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.js b/src/App.js
index ef4859c..0895668 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,29 @@
 import React from 'react';
-import Card from './components/Card';
+import { Card } from './components/Card';
 import './style.css';
 
 function App() {
   return (
     <div className="App">
-
-      <h1><span role="img" aria-label="antenna-bars">📶</span>&nbsp; WiFi Card</h1>
+      <h1>
+        <span role="img" aria-label="antenna-bars">
+          📶
+        </span>
+        &nbsp; WiFi Card
+      </h1>
 
       <p className="tag">
-        Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.
+        Print a simple card with your WiFi login details. Tape it to the fridge,
+        keep it in your wallet, etc.
       </p>
 
       <p className="tag">
-        Your WiFi information is never sent to the server.
-        No tracking, analytics, or fingerprinting are used on this website.
-        View the <a href="https://github.com/bndw/wifi-card">source code</a>.
+        Your WiFi information is never sent to the server. No tracking,
+        analytics, or fingerprinting are used on this website. View the{' '}
+        <a href="https://github.com/bndw/wifi-card">source code</a>.
       </p>
 
       <Card />
-
     </div>
   );
 }
diff --git a/src/components/Card.js b/src/components/Card.js
index 6c2c745..16f94a4 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -2,14 +2,16 @@ import React, { useState, useEffect } from 'react';
 import QRCode from 'qrcode.react';
 import './style.css';
 
-const Card = () => {
-  const [ssid, setSsid] = useState('');
-  const [password, setPassword] = useState('');
+export const Card = () => {
+  const [network, setNetwork] = useState({
+    ssid: '',
+    password: '',
+  });
   const [qrvalue, setQrvalue] = useState('');
 
   const escape = (v) => {
     const needsEscape = ['"', ';', ',', ':', '\\'];
-    
+
     let escaped = '';
     for (let i = 0; i < v.length; i++) {
       let c = v[i];
@@ -20,14 +22,13 @@ const Card = () => {
     }
 
     return escaped;
-  }
+  };
 
   useEffect(() => {
-    let _ssid = escape(ssid),
-        _password = escape(password);
-
-    setQrvalue(`WIFI:T:WPA;S:${_ssid};P:${_password};;`);
-  }, [ssid, password]);
+    const ssid = escape(network.ssid);
+    const password = escape(network.password);
+    setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
+  }, [network]);
 
   return (
     <div>
@@ -35,26 +36,45 @@ const Card = () => {
         <legend></legend>
 
         <h1>WiFi Login</h1>
-        <hr/>
+        <hr />
 
         <div className="details">
           <QRCode className="qrcode" value={qrvalue} size={175} />
 
           <div className="text">
             <label>Network name</label>
-            <input id="ssid" type="text" maxLength="32" placeholder="WiFi Network name" value={ssid} onChange={event => setSsid(event.target.value)} />
+            <input
+              id="ssid"
+              type="text"
+              maxLength="32"
+              placeholder="WiFi Network name"
+              value={network.ssid}
+              onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
+            />
             <label>Password</label>
-            <input id="password" type="text" maxLength="63" placeholder="Password" value={password} onChange={event => setPassword(event.target.value)} />
+            <input
+              id="password"
+              type="text"
+              maxLength="63"
+              placeholder="Password"
+              value={network.password}
+              onChange={(e) =>
+                setNetwork({ ...network, password: e.target.value })
+              }
+            />
           </div>
         </div>
 
-        <p><span role="img" aria-label="mobile-phone">📸📱</span>Point your phone's camera at the QR Code to connect automatically</p>
+        <p>
+          <span role="img" aria-label="mobile-phone">
+            📸📱
+          </span>
+          Point your phone's camera at the QR Code to connect automatically
+        </p>
       </fieldset>
       <div className="print-btn">
         <button onClick={window.print}>Print</button>
       </div>
     </div>
-  )
-}
-
-export default Card;
+  );
+};
diff --git a/src/components/style.css b/src/components/style.css
index 0f98052..d1440e2 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -8,7 +8,7 @@
   display: flex;
   padding: 1em;
 }
-.details .text{
+.details .text {
   margin: 0;
 }
 .details .text * {
@@ -36,7 +36,8 @@
   body * {
     visibility: hidden;
   }
-  #print-area, #print-area * {
+  #print-area,
+  #print-area * {
     visibility: visible;
   }
   #print-area input {
diff --git a/yarn.lock b/yarn.lock
index f325f8d..1b746e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8811,6 +8811,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
+  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+
 pretty-bytes@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
-- 
cgit v1.2.3