update prettier

package.json

@@ -45,8 +45,9 @@
     "@types/uuid": "^7.0.8",
     "gh-pages": "^2.2.0",
     "husky": "^3.1.0",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.2",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "pretty-quick": "^4.0.0",
     "sass": "^1.71.0",
     "typescript": "^3.9.10"
   },
@@ -64,7 +65,8 @@
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "pretty": "prettier --write \"src/**/*.js\" --write \"src/**/*.jsx\" --write \"src/**/*.ts\" --write \"src/**/*.tsx\"",
+    "prettier": "prettier --cache --write 'src/**/*.{ts,js,tsx,jsx,css,scss}'",
+    "prettier:nocache": "prettier --write 'src/**/*.{ts,js,tsx,jsx,css,scss}'",
     "pretty-quick": "pretty-quick"
   },
   "eslintConfig": {

prettier.config.js

@@ -0,0 +1,7 @@
+// prettierrc.js
+
+module.exports = {
+  // ...
+  plugins: ["prettier-plugin-organize-imports"],
+  trailingComma: "es5",
+};

src/App.scss

@@ -2,7 +2,9 @@
 @import "~bootstrap/scss/bootstrap";
 
 .text-shadow {
-  text-shadow: 0 0 25px $dark, 0 0 5px $black;
+  text-shadow:
+    0 0 25px $dark,
+    0 0 5px $black;
 }
 
 .noselect {

src/App.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { render } from "@testing-library/react";
+import React from "react";
 import App from "./App";
 
 test("renders learn react link", () => {

src/App.tsx

@@ -1,9 +1,7 @@
 import React, { Component } from "react";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-
 import "./App.scss";
-
 import { Home } from "./pages/home";
 
 class App extends Component {
@@ -13,12 +11,12 @@ class App extends Component {
     displayText: false,
     displayImages: false,
     devTools: false,
-    displayGatherer: false
+    displayGatherer: false,
   };
 
   toggle = () => {
     this.setState({
-      isOpen: !this.state.isOpen
+      isOpen: !this.state.isOpen,
     });
   };
 

src/confirm/Confirm.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-
 import { Button, ButtonProps, Col, Modal } from "react-bootstrap";
 
 export type ConfirmProps = {
@@ -19,7 +18,7 @@ export const Confirm = ({
   headerText = "Confirm?",
   bodyText,
   confirmText = "Save",
-  confirmVariant = "primary"
+  confirmVariant = "primary",
 }: ConfirmProps) => {
   const [open, setOpen] = useState(false);
   const close = (confirmed: boolean = false) => {

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
 import App from "./App";
+import "./index.css";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 
 const element = document.getElementById("root")!;

src/pages/home/index.tsx

@@ -1,30 +1,23 @@
+import { faEdit, faTimes, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cloneDeep, isFunction, last, orderBy, remove, some } from "lodash";
+import assign from "lodash/assign";
+import set from "lodash/set";
 import React, { Component } from "react";
-import { Helmet } from "react-helmet-async";
 import {
   Button,
   ButtonGroup,
   Col,
   Form,
   InputGroup,
   Row,
-  Table
+  Table,
 } from "react-bootstrap";
-import {
-  assign,
-  set,
-  isFunction,
-  cloneDeep,
-  remove,
-  orderBy,
-  some,
-  last
-} from "lodash";
+import { Helmet } from "react-helmet-async";
 import store from "store/dist/store.modern";
 import { v4 as uuidv4 } from "uuid";
-import { Size, Brew } from "../../models/brew";
 import { Confirm } from "../../confirm/Confirm";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTrash, faEdit, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Brew, Size } from "../../models/brew";
 
 const INITIAL_SIZE: Size = {
   id: uuidv4(),
@@ -33,23 +26,23 @@ const INITIAL_SIZE: Size = {
   price: "",
   calculation: null,
   apv_calculation: null,
-  ppv_calculation: null
+  ppv_calculation: null,
 };
 
 const INITIAL_BREW: Brew = {
   id: uuidv4(),
   name: "",
   alcohol: "",
   alcohol_unit: "APV",
-  sizes: [cloneDeep(INITIAL_SIZE)]
+  sizes: [cloneDeep(INITIAL_SIZE)],
 };
 
 const INITIAL_STATE: {
   stored: Array<any>;
   brew: Brew;
 } = {
   stored: [],
-  brew: cloneDeep(INITIAL_BREW)
+  brew: cloneDeep(INITIAL_BREW),
 };
 
 export class Home extends Component {
@@ -81,7 +74,7 @@ export class Home extends Component {
     console.log(event, id);
     const { brew } = this.state;
     const { sizes } = this.state.brew;
-    sizes.map(v => {
+    sizes.map((v) => {
       if (v.id === id) {
         set(v, event.target.name, event.target.value);
       }
@@ -101,7 +94,7 @@ export class Home extends Component {
     const { brew, stored } = this.state;
 
     brew.id = uuidv4();
-    brew.sizes.forEach(size => {
+    brew.sizes.forEach((size) => {
       size.id = uuidv4();
       stored.push(this.buildBrewSize(brew, size));
     });
@@ -112,7 +105,7 @@ export class Home extends Component {
           stored,
           ["calculation", "apv_calculation", "ppv_calculation"],
           ["asc", "desc", "asc"]
-        )
+        ),
       })
     );
   };
@@ -178,7 +171,7 @@ export class Home extends Component {
       assign(size, {
         calculation: localCalculation,
         apv_calculation: localAPVCalculation,
-        ppv_calculation: localPPVCalculation
+        ppv_calculation: localPPVCalculation,
       });
     });
 
@@ -187,33 +180,33 @@ export class Home extends Component {
 
   reCalculateAll = () => {
     const { stored } = this.state;
-    stored.forEach(storedBrew => {
+    stored.forEach((storedBrew) => {
       assign(storedBrew, this.calculateCalculations(storedBrew));
     });
     this.persistState({
       stored: orderBy(
         stored,
         ["calculation", "apv_calculation", "ppv_calculation"],
         ["asc", "desc", "asc"]
-      )
+      ),
     });
   };
 
   removeActiveBrewSize = (sizeId: string) => {
     const { brew } = this.state;
-    remove(brew.sizes, size => size.id === sizeId);
+    remove(brew.sizes, (size) => size.id === sizeId);
     this.persistState({ brew });
   };
 
   removeBrewSize = (id: string) => {
     const { stored } = this.state;
-    remove(stored, storedBrew => storedBrew.id === id);
+    remove(stored, (storedBrew) => storedBrew.id === id);
     this.persistState({ stored });
   };
 
   removeBrew = (id: string) => {
     const { stored } = this.state;
-    remove(stored, storedBrew => storedBrew.brewId === id);
+    remove(stored, (storedBrew) => storedBrew.brewId === id);
     this.persistState({ stored });
   };
 
@@ -228,15 +221,15 @@ export class Home extends Component {
 
   rebuildBrew = (brewId: string): Brew => {
     const { stored } = this.state;
-    const sizes = stored.filter(brewSize => brewSize.brewId === brewId);
+    const sizes = stored.filter((brewSize) => brewSize.brewId === brewId);
     const brew: Brew = {
       id: brewId,
       name: sizes[0].name,
       alcohol: sizes[0].alcohol,
       alcohol_unit: sizes[0].alcohol_unit,
-      sizes
+      sizes,
     };
-    sizes.forEach(s => {
+    sizes.forEach((s) => {
       delete s.name;
       delete s.alcohol;
       delete s.alcohol_unit;
@@ -388,7 +381,7 @@ export class Home extends Component {
               name="volume"
               placeholder="Volume"
               value={v.volume}
-              onChange={e => this.handleVolumeChange(e, v.id)}
+              onChange={(e) => this.handleVolumeChange(e, v.id)}
               min={0}
             />
 
@@ -398,7 +391,7 @@ export class Home extends Component {
               value={v.volume_unit}
               className="form-select rounded-end"
               style={{ flexGrow: 0.15 }}
-              onChange={e => this.handleVolumeChange(e, v.id)}
+              onChange={(e) => this.handleVolumeChange(e, v.id)}
             >
               <option>Oz</option>
               <option>mL</option>
@@ -413,7 +406,7 @@ export class Home extends Component {
               name="price"
               placeholder="Price"
               value={v.price}
-              onChange={e => this.handleVolumeChange(e, v.id)}
+              onChange={(e) => this.handleVolumeChange(e, v.id)}
               min={0}
               step={0.01}
             />
@@ -509,7 +502,7 @@ export class Home extends Component {
 
   renderResults = () => {
     const { stored } = this.state;
-    const rows = stored.map(brewSize => {
+    const rows = stored.map((brewSize) => {
       return (
         <React.Fragment key={brewSize.id}>
           <tr>

src/service-worker.ts

@@ -10,7 +10,7 @@
 
 import { clientsClaim } from "workbox-core";
 import { ExpirationPlugin } from "workbox-expiration";
-import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
+import { createHandlerBoundToURL, precacheAndRoute } from "workbox-precaching";
 import { registerRoute } from "workbox-routing";
 import { StaleWhileRevalidate } from "workbox-strategies";
 
@@ -65,14 +65,14 @@ registerRoute(
     plugins: [
       // Ensure that once this runtime cache reaches a maximum size the
       // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 })
-    ]
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
   })
 );
 
 // This allows the web app to trigger skipWaiting via
 // registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener("message", event => {
+self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") {
     self.skipWaiting();
   }

src/serviceWorkerRegistration.ts

@@ -62,7 +62,7 @@ export function register(config?: Config) {
 function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -98,25 +98,25 @@ function registerValidSW(swUrl: string, config?: Config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error("Error during service worker registration:", error);
     });
 }
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { "Service-Worker": "script" }
+    headers: { "Service-Worker": "script" },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get("content-type");
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf("javascript") === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -136,10 +136,10 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
 export function unregister() {
   if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready
-      .then(registration => {
+      .then((registration) => {
         registration.unregister();
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error.message);
       });
   }