fix(lint): clear eslint-loader unused Skeleton and anonymous page exports

TROUBLESHOOTING.md

@@ -304,6 +304,21 @@ Given `npm install` / `npm ci` floods the terminal with `npm warn deprecated …
 3. Prefer fixing/removing those roots over adding an `override` per leaf package;
 4. Keep using Node 18 + `npm install --legacy-peer-deps` for this stack.
 
+## Gatsby HMR eslint-loader: unused vars / anonymous page exports
+
+Given the browser console (or terminal) shows eslint-loader module warnings such as:
+
+```
+'Skeleton' is defined but never used  no-unused-vars
+Anonymous arrow functions cause Fast Refresh to not preserve local component state.
+  no-anonymous-exports-page-templates
+```
+
+1. Remove unused imports (and dead commented-out usage) — e.g. `Skeleton` in `LocationStep` when only referenced inside comments;
+2. Name page default exports like `src/pages/index.js` (`const NamedPage = () => …; export default NamedPage`);
+3. Re-run / hard-refresh `gatsby develop` so eslint-loader clears the warnings;
+4. See #453.
+
 ## Gatsby HMR: bundle has N errors / ENOENT in node_modules
 
 Given the browser console (with `gatsby develop` running) shows:

src/components/LocationStep/index.js

@@ -5,7 +5,6 @@ import Alert from "@material-ui/lab/Alert"
 import AlertTitle from "@material-ui/lab/AlertTitle"
 import FormControl from "@material-ui/core/FormControl"
 import EmbedGoogleMap from "../../containers/EmbedGoogleMap"
-import Skeleton from "@material-ui/lab/Skeleton"
 import Fade from "@material-ui/core/Fade"
 import FormHelperText from "@material-ui/core/FormHelperText"
 import Divider from "@material-ui/core/Divider"
@@ -84,15 +83,6 @@ const LocationStep = (props) => {
       <Divider />
       {currentPosition && (
         <div style={{ position: "relative" }}>
-          {/*loadingMap && (
-            <Skeleton
-              style={{ position: "absolute", zIndex: 2 }}
-              variant="rect"
-              width={"100%"}
-              height={157}
-            />
-        )*/}
-
           {!googleMapsJsToggle && (
             <EmbedGoogleMap
               coordinates={`${currentPosition.coords.latitude},${currentPosition.coords.longitude}`}

src/components/LocationStep/index.test.js

@@ -18,6 +18,15 @@ describe("LocationStep", () => {
     expect(tree).toMatchSnapshot()
   })
 
+  it("does not import unused Skeleton (eslint no-unused-vars)", () => {
+    // Skeleton was only referenced in a commented-out block; keep the import gone.
+    const source = require("fs").readFileSync(
+      require("path").join(__dirname, "index.js"),
+      "utf8"
+    )
+    expect(source).not.toMatch(/import Skeleton from/)
+  })
+
   it("should render warning panel", () => {
     props.isLocationValid = false
     render(<LocationStep {...props} />)

src/pages/ajuda/index.js

@@ -1,4 +1,6 @@
 import React from "react"
 import HelpTemplate from "../../templates/help"
 
-export default () => <HelpTemplate />
+const AjudaPage = () => <HelpTemplate />
+
+export default AjudaPage

src/pages/consultar/index.js

@@ -1,4 +1,6 @@
 import React from "react"
 import CheckTemplate from "../../templates/check"
 
-export default (props) => <CheckTemplate {...props} />
+const ConsultarPage = (props) => <CheckTemplate {...props} />
+
+export default ConsultarPage

src/pages/denunciar/index.js

@@ -1,4 +1,6 @@
 import React from "react"
 import ReportingTemplate from "../../templates/reporting"
 
-export default () => <ReportingTemplate />
+const DenunciarPage = () => <ReportingTemplate />
+
+export default DenunciarPage

src/pages/pages.test.js

@@ -0,0 +1,30 @@
+jest.mock("../templates/help", () => () => null)
+jest.mock("../templates/check", () => () => null)
+jest.mock("../templates/reporting", () => () => null)
+jest.mock("../templates/privacy", () => () => null)
+jest.mock("../templates/about", () => () => null)
+jest.mock("../templates/terms", () => () => null)
+jest.mock("../templates", () => () => null)
+
+import AjudaPage from "./ajuda"
+import ConsultarPage from "./consultar"
+import DenunciarPage from "./denunciar"
+import PrivacidadePage from "./privacidade"
+import SobrePage from "./sobre"
+import TermosPage from "./termos"
+import IndexPage from "./index"
+
+describe("Gatsby page default exports", () => {
+  it.each([
+    ["AjudaPage", AjudaPage],
+    ["ConsultarPage", ConsultarPage],
+    ["DenunciarPage", DenunciarPage],
+    ["PrivacidadePage", PrivacidadePage],
+    ["SobrePage", SobrePage],
+    ["TermosPage", TermosPage],
+    ["IndexPage", IndexPage],
+  ])("%s is a named function (Fast Refresh / eslint-loader)", (name, page) => {
+    expect(typeof page).toBe("function")
+    expect(page.name).toBe(name)
+  })
+})

src/pages/privacidade/index.js

@@ -1,4 +1,6 @@
 import React from "react"
 import PrivacyTemplate from "../../templates/privacy"
 
-export default () => <PrivacyTemplate />
+const PrivacidadePage = () => <PrivacyTemplate />
+
+export default PrivacidadePage

src/pages/sobre/index.js

@@ -1,6 +1,6 @@
 import React from "react"
 import AboutTemplate from "../../templates/about"
 
-export default () => {
-  return <AboutTemplate />
-}
+const SobrePage = () => <AboutTemplate />
+
+export default SobrePage

src/pages/termos/index.js

@@ -1,4 +1,6 @@
 import React from "react"
 import TermsTemplate from "../../templates/terms"
 
-export default () => <TermsTemplate />
+const TermosPage = () => <TermsTemplate />
+
+export default TermosPage