[linting] Fixing all linting errors with updated rules. (microwavenby#3)

* [linting] Fixing all linting errors with updated rules.

* [linting] Trying to switch targets for the build

* [linting] Trying to switch targets for the build

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     "@remix-run/eslint-config",
     "@remix-run/eslint-config/node",
   ],
+  ignorePatterns: ["**/storybook-static"],
   // Additional lint rules. These get layered onto the top-level rules.
   overrides: [
     {

.storybook/main.js

@@ -2,9 +2,7 @@ const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-  stories: [
-    "../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-  ],
+  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

app/components/TransLinks.tsx

@@ -11,8 +11,8 @@ export type TransLinkProps = {
 
 export const TransLinks = (props: TransLinkProps): ReactElement => {
   const { i18nTextKey, i18nLinkKey } = props;
-  let { t } = useTranslation();
-  const linkArray = t(i18nLinkKey, { returnObjects: true }) as Array<string>;
+  const { t } = useTranslation();
+  const linkArray: Array<string> = t(i18nLinkKey, { returnObjects: true });
   const linkAnchors: ReactElement[] = linkArray.map((link: string) => {
     if (/^\//.test(link)) {
       return (

app/entry.client.tsx

@@ -42,9 +42,11 @@ async function hydrate() {
 }
 
 if (window.requestIdleCallback) {
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
   window.requestIdleCallback(hydrate);
 } else {
   // Safari doesn't support requestIdleCallback
   // https://caniuse.com/requestidlecallback
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
   window.setTimeout(hydrate, 1);
 }

app/entry.server.tsx

@@ -19,13 +19,13 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  let callbackName = isbot(request.headers.get("user-agent"))
+  const callbackName = isbot(request.headers.get("user-agent"))
     ? "onAllReady"
     : "onShellReady";
 
-  let instance = createInstance();
-  let lng = await i18next.getLocale(request);
-  let ns = i18next.getRouteNamespaces(remixContext);
+  const instance = createInstance();
+  const lng = await i18next.getLocale(request);
+  const ns = i18next.getRouteNamespaces(remixContext);
 
   await instance
     .use(initReactI18next) // Tell our instance to use react-i18next
@@ -39,14 +39,14 @@ export default async function handleRequest(
 
   return new Promise((resolve, reject) => {
     let didError = false;
-
-    let { pipe, abort } = renderToPipeableStream(
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { pipe, abort } = renderToPipeableStream(
       <I18nextProvider i18n={instance}>
         <RemixServer context={remixContext} url={request.url} />
       </I18nextProvider>,
       {
         [callbackName]: () => {
-          let body = new PassThrough();
+          const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
 

app/i18next.server.ts

@@ -3,7 +3,7 @@ import { resolve } from "node:path";
 import { RemixI18Next } from "remix-i18next";
 import i18n from "~/i18n"; // your i18n configuration file
 
-let i18next = new RemixI18Next({
+const i18next = new RemixI18Next({
   detection: {
     supportedLanguages: i18n.supportedLngs,
     fallbackLanguage: i18n.fallbackLng,

app/root.tsx

@@ -18,20 +18,23 @@ import { camelCase, upperFirst } from "lodash";
 import { useEffect } from "react";
 
 export function useChangeLanguage(locale: string) {
-  let { i18n } = useTranslation();
+  const { i18n } = useTranslation();
   useEffect(() => {
-    i18n.changeLanguage(locale);
+    const changeLanguage = async () => {
+      await i18n.changeLanguage(locale);
+    };
+    changeLanguage().catch(console.error);
   }, [locale, i18n]);
 }
 
 export const meta: MetaFunction = ({ location }) => {
-  // eslint-disable-next-line -- This cannot be a component, it mutates headers
-  let { t } = useTranslation();
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- This cannot be a component, it mutates headers
+  const { t } = useTranslation();
   const route = location.pathname != "/" ? location.pathname : "index";
-  const titleKey = `${upperFirst(camelCase(route))}.title`;
+  const title = t(`${upperFirst(camelCase(route))}.title`);
   return {
     charset: "utf-8",
-    title: t(titleKey) as string,
+    title: title,
     viewport: "width=device-width,initial-scale=1",
   };
 };
@@ -45,16 +48,16 @@ export function links() {
 
 type LoaderData = { locale: string; demoMode: string; missingData: string };
 
-export let loader: LoaderFunction = async ({ request }) => {
-  let locale = await i18next.getLocale(request);
+export const loader: LoaderFunction = async ({ request }) => {
+  const locale = await i18next.getLocale(request);
   const demoMode = process.env.NEXT_PUBLIC_DEMO_MODE ?? "false";
   const url = new URL(request.url);
   const missingData =
     url.searchParams.get("missing-data") == "true" ? "true" : "false";
   return json<LoaderData>({ locale, demoMode, missingData });
 };
 
-export let handle = {
+export const handle = {
   // In the handle export, we can add a i18n key with namespaces our route
   // will need to load. This key can be a single string or an array of strings.
   // TIP: In most cases, you should set this to your defaultNS from your i18n config
@@ -64,8 +67,8 @@ export let handle = {
 
 export default function App() {
   // Get the locale from the loader
-  let { locale, demoMode, missingData } = useLoaderData<LoaderData>();
-  let { i18n } = useTranslation();
+  const { locale, demoMode, missingData } = useLoaderData<LoaderData>();
+  const { i18n } = useTranslation();
 
   // This hook will change the i18n instance language to the current locale
   // detected by the loader, this way, when we do something to change the

app/routes/healthcheck.tsx

@@ -1,12 +1,14 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
 import type { LoaderArgs } from "@remix-run/server-runtime";
 import db from "~/utils/db.connection";
+import invariant from "tiny-invariant";
 
 export async function loader({ request }: LoaderArgs) {
   const host =
     request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
 
   try {
+    invariant(host, "Unable to find host to HEAD");
     const url = new URL("/", `http://${host}`);
     // If we can connect to the database and make a simple query
     // and make a HEAD request to ourselves, then we're good.

app/routes/index.tsx

@@ -9,10 +9,10 @@ type imgObj = {
 };
 
 export default function Index() {
-  let { t } = useTranslation();
+  const { t } = useTranslation();
   const Griddify = (image_list: imgObj[]) => {
     const chunkSize = 4;
-    let content = [];
+    const content = [];
     for (let i = 0; i < image_list.length; i += chunkSize) {
       const chunk = image_list.slice(i, i + chunkSize);
       content.push(

app/utils/db.connection.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+// We cannot use a let or const in a global object
 import { PrismaClient } from "@prisma/client";
 let db: PrismaClient;
 declare global {

docker-compose.e2e.yml

@@ -3,7 +3,7 @@ version: "3.7"
 services:
   remix-migrate-reset:
     build:
-      target: test
+      target: dev
       context: .
     environment:
       DATABASE_URL: postgresql://postgres:incredible_local_secret_phrase@database-e2e:5432/postgres?schema=public

e2e/routes/index.spec.ts

@@ -28,5 +28,5 @@ test("Open the README link", async ({ page }) => {
 test("the index page sets no cookies", async ({ page }) => {
   await page.goto("/");
   const cookies = await page.context().cookies();
-  await expect(cookies).toHaveLength(0);
+  expect(cookies).toHaveLength(0);
 });

playwright.config.ts

@@ -114,7 +114,7 @@ const config: PlaywrightTestConfig = {
   /* Run your local dev server before starting the tests */
   /* This command is what gets run by playwright automatically
    * (and implicitly when you run `npm run e2e`)
-  */
+   */
   webServer: {
     command:
       "docker compose -f docker-compose.e2e.yml up database-e2e --wait && \

prisma/seed.ts

@@ -2,6 +2,8 @@ import { PrismaClient } from "@prisma/client";
 
 const prisma = new PrismaClient();
 
+// Any interactions with Prisma will be async
+// eslint-disable-next-line @typescript-eslint/require-await
 async function seed() {
   // Put the actions you need to take to seed the databse here.
   // You can access relations as normal here
@@ -10,10 +12,11 @@ async function seed() {
 }
 
 seed()
-  .catch((e) => {
-    console.error(e);
-    process.exit(1);
+  .then(async () => {
+    await prisma.$disconnect();
   })
-  .finally(async () => {
+  .catch(async (e) => {
+    console.error(e);
     await prisma.$disconnect();
+    process.exit(1);
   });

public/locales/es/common.json

@@ -1,5 +1,5 @@
 {
   "Index": {
     "title": "¡Bienvenidos!"
-  },
+  }
 }

remix.init/index.js

@@ -1,5 +1,4 @@
 const { execSync } = require("child_process");
-const crypto = require("crypto");
 const fs = require("fs/promises");
 const path = require("path");
 
@@ -115,17 +114,23 @@ const main = async ({ isTypeScript, packageManager, rootDirectory }) => {
   const DIR_NAME = path.basename(rootDirectory);
   const APP_NAME = DIR_NAME.replace(/[^a-zA-Z0-9-_]/g, "-");
 
-  const [readme, envfile, dockerfile, deployWorkflow, dockerComposeFile, packageJson] =
-    await Promise.all([
-      fs.readFile(README_PATH, "utf-8"),
-      fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
-      fs.readFile(DOCKERFILE_PATH, "utf-8"),
-      readFileIfNotTypeScript(isTypeScript, DEPLOY_WORKFLOW_PATH, (s) =>
-        YAML.parse(s)
-      ),
-      fs.readFile(DOCKER_COMPOSE_PATH, "utf-8"),
-      PackageJson.load(rootDirectory),
-    ]);
+  const [
+    readme,
+    envfile,
+    dockerfile,
+    deployWorkflow,
+    dockerComposeFile,
+    packageJson,
+  ] = await Promise.all([
+    fs.readFile(README_PATH, "utf-8"),
+    fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
+    fs.readFile(DOCKERFILE_PATH, "utf-8"),
+    readFileIfNotTypeScript(isTypeScript, DEPLOY_WORKFLOW_PATH, (s) =>
+      YAML.parse(s)
+    ),
+    fs.readFile(DOCKER_COMPOSE_PATH, "utf-8"),
+    PackageJson.load(rootDirectory),
+  ]);
 
   const newReadme = readme.replace(
     new RegExp(escapeRegExp(REPLACER), "g"),

tests/components/Layout.test.tsx

@@ -10,6 +10,8 @@ it("should match snapshot", () => {
   expect(container).toMatchSnapshot();
 });
 
+// eslint-disable-next-line jest/expect-expect
 it("should pass accessibility scan", async () => {
+  // testAccessibility does have an assertion (expect(results).toHaveNoViolations)
   await testAccessibility(<Layout children={<h1>'child'</h1>} />);
 });

tests/helpers/remixValidatedFormMock.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// As this is a mock for types we don't entirely control, disable no-explicit-any
+
 // This file is the Jest mock for supporting remix-validated-form
 // The useField hook will not work out of the box, and it returns a prop-getter -
 // so our mock needs to as well
@@ -20,7 +23,7 @@ type MinimalInputProps = {
 };
 
 export const getInputProps = <T extends MinimalInputProps>(
-  props = {} as any
+  props = {} as unknown
 ) => {
   return props as T;
 };

tests/helpers/setup.tsx

@@ -60,7 +60,8 @@ export const i18nwrapper = ({
         // on the browser, so we disable it
         caches: [],
       },
-    });
+    })
+    .catch(() => "Failed to initialize i18next in Jest Setup");
 
   return (
     <BrowserRouter>
@@ -98,6 +99,7 @@ export function setupUserEvent(): UserEventReturn {
 }
 
 export type FormObject = {
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   [inputName: string]: any;
 };
 
@@ -113,14 +115,18 @@ export type FormObject = {
  */
 export function createForm(obj: FormObject): FormData {
   const parsedForm = new FormData();
-  for (let key in obj) {
+  for (const key in obj) {
+    // -- We don't know what this object contains, so we can't type it
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     if (obj[key].forEach) {
       // This lets us pass in arrays or strings and build correct form data
-      obj[key].forEach((item: any) => {
+      // (we DO know that it has a forEach method)
+      // eslint-disable-next-line
+      obj[key].forEach((item: string) => {
         parsedForm.append(key, item);
       });
     } else {
-      parsedForm.append(key, obj[key]);
+      parsedForm.append(key, obj[key] as string);
     }
   }
   return parsedForm;

tests/utils/db.connection.test.ts

@@ -7,6 +7,7 @@ import db from "app/utils/db.connection";
 it("returns a 1 from a raw SELECT 1", async () => {
   prismaMock.$queryRaw.mockResolvedValue([{ connected: 1 }]);
   const result = await db.$queryRaw`SELECT 1 as CONNECTED`;
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   expect(prismaMock.$queryRaw).toHaveBeenCalledWith(["SELECT 1 as CONNECTED"]);
   expect(result).toStrictEqual([{ connected: 1 }]);
 });