Implementing prettier formatting through external file

.eslintignore

@@ -0,0 +1,5 @@
+/node_modules
+/build
+/public/build
+/mysql-data
+/img

.eslintrc.js

@@ -1,15 +1,15 @@
 /** @type {import('@types/eslint').Linter.BaseConfig} */
 module.exports = {
   extends: [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "@remix-run/eslint-config/jest-testing-library",
-    "prettier",
+    '@remix-run/eslint-config',
+    '@remix-run/eslint-config/node',
+    '@remix-run/eslint-config/jest-testing-library',
+    'prettier',
   ],
   env: {
-    "cypress/globals": true,
+    'cypress/globals': true,
   },
-  plugins: ["cypress"],
+  plugins: ['cypress'],
   // We're using vitest which has a very similar API to jest
   // (so the linting plugins work nicely), but we have to
   // set the jest version explicitly.

.github/dependabot.yml

@@ -1,15 +1,18 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
-      day: "saturday"
-      timezone: "America/Toronto"
+      interval: 'weekly'
+      day: 'saturday'
+      timezone: 'America/Toronto'
 
     labels:
-      - "dependencies"
+      - 'dependencies'
+
+    reviewers:
+      - 'Seneca-CDOT/osd700-dps911-winter-2023'
 
     open-pull-requests-limit: 5
     # disable auto rebasing
-    rebase-strategy: "disabled"
+    rebase-strategy: 'disabled'

.github/workflows/ci.yaml

@@ -2,13 +2,12 @@ name: CI
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
   pull_request:
-    branches: ["main"]
+    branches: ['main']
 
 jobs:
   Build:
-    permissions: write-all
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -37,10 +36,6 @@ jobs:
       - name: Run build
         run: npm run build
 
-      - name: Cancel build if failure
-        if: failure()
-        uses: andymckay/cancel-action@0.2
-
       - name: Cache node_modules
         uses: actions/cache@v3
         with:
@@ -50,7 +45,6 @@ jobs:
           key: ${{ steps.node_modules-cache-restore.outputs.cache-primary-key }}
 
   Prettier:
-    permissions: write-all
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -61,12 +55,7 @@ jobs:
         with:
           prettier_options: --check .
 
-      - name: Cancel build if failure
-        if: failure()
-        uses: andymckay/cancel-action@0.2
-
   Test:
-    permissions: write-all
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -95,10 +84,6 @@ jobs:
       - name: Run tests
         run: npm test
 
-      - name: Cancel build if failure
-        if: failure()
-        uses: andymckay/cancel-action@0.2
-
       - name: Cache node_modules
         uses: actions/cache@v3
         with:
@@ -108,7 +93,6 @@ jobs:
           key: ${{ steps.node_modules-cache-restore.outputs.cache-primary-key }}
 
   ESlint:
-    permissions: write-all
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -137,10 +121,6 @@ jobs:
       - name: eslint check
         run: npm run lint
 
-      - name: Cancel build if failure
-        if: failure()
-        uses: andymckay/cancel-action@0.2
-
       - name: Cache node_modules
         uses: actions/cache@v3
         with:
@@ -150,7 +130,6 @@ jobs:
           key: ${{ steps.node_modules-cache-restore.outputs.cache-primary-key }}
 
   Typecheck:
-    permissions: write-all
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -179,10 +158,6 @@ jobs:
       - name: Run typecheck
         run: npm run typecheck
 
-      - name: Cancel build if failure
-        if: failure()
-        uses: andymckay/cancel-action@0.2
-
       - name: Cache node_modules
         uses: actions/cache@v3
         with:

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -3,10 +3,5 @@ node_modules
 /build
 /public/build
 .env
-
-/cypress/screenshots
-/cypress/videos
-/postgres-data
-
-/app/styles/tailwind.css
-./mysql-data/
+/mysql-data
+/img

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "embeddedLanguageFormatting": "auto",
+  "endOfLine": "lf",
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "quoteProps": "consistent",
+  "requirePragma": false
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false
+}

app/context.tsx

@@ -1,19 +1,15 @@
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export interface ServerStyleContextData {
   key: string;
   ids: Array<string>;
   css: string;
 }
 
-export const ServerStyleContext = createContext<
-  ServerStyleContextData[] | null
->(null);
+export const ServerStyleContext = createContext<ServerStyleContextData[] | null>(null);
 
 export interface ClientStyleContextData {
   reset: () => void;
 }
 
-export const ClientStyleContext = createContext<ClientStyleContextData | null>(
-  null
-);
+export const ClientStyleContext = createContext<ClientStyleContextData | null>(null);

app/createEmotionCache.ts

@@ -1,7 +1,7 @@
-import createCache from "@emotion/cache";
+import createCache from '@emotion/cache';
 
 export const defaultCache = createEmotionCache();
 
 export default function createEmotionCache() {
-  return createCache({ key: "cha" });
+  return createCache({ key: 'cha' });
 }

app/db.server.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from "@prisma/client";
-import invariant from "tiny-invariant";
+import { PrismaClient } from '@prisma/client';
+import invariant from 'tiny-invariant';
 
 let prisma: PrismaClient;
 
@@ -11,7 +11,7 @@ declare global {
 // the server with every change, but we want to make sure we don't
 // create a new connection to the DB with every change either.
 // in production we'll have a single connection to the DB.
-if (process.env.NODE_ENV === "production") {
+if (process.env.NODE_ENV === 'production') {
   prisma = getClient();
 } else {
   if (!global.__db__) {
@@ -22,7 +22,7 @@ if (process.env.NODE_ENV === "production") {
 
 function getClient() {
   const { DATABASE_URL } = process.env;
-  invariant(typeof DATABASE_URL === "string", "DATABASE_URL env var not set");
+  invariant(typeof DATABASE_URL === 'string', 'DATABASE_URL env var not set');
 
   const databaseUrl = new URL(DATABASE_URL);
 

app/entry.client.tsx

@@ -1,10 +1,10 @@
-import { CacheProvider } from "@emotion/react";
-import { RemixBrowser } from "@remix-run/react";
-import React, { startTransition, StrictMode, useState } from "react";
-import { hydrateRoot } from "react-dom/client";
+import { CacheProvider } from '@emotion/react';
+import { RemixBrowser } from '@remix-run/react';
+import React, { startTransition, StrictMode, useState } from 'react';
+import { hydrateRoot } from 'react-dom/client';
 
-import { ClientStyleContext } from "./context";
-import createEmotionCache, { defaultCache } from "./createEmotionCache";
+import { ClientStyleContext } from './context';
+import createEmotionCache, { defaultCache } from './createEmotionCache';
 
 interface ClientCacheProviderProps {
   children: React.ReactNode;

app/entry.server.tsx

@@ -1,12 +1,12 @@
-import { PassThrough } from "stream";
-import type { EntryContext } from "@remix-run/node";
-import { Response } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
-import createEmotionServer from "@emotion/server/create-instance";
-import { CacheProvider } from "@emotion/react";
-import createEmotionCache from "./createEmotionCache";
+import { PassThrough } from 'stream';
+import type { EntryContext } from '@remix-run/node';
+import { Response } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import isbot from 'isbot';
+import { renderToPipeableStream } from 'react-dom/server';
+import createEmotionServer from '@emotion/server/create-instance';
+import { CacheProvider } from '@emotion/react';
+import createEmotionCache from './createEmotionCache';
 
 const ABORT_DELAY = 5000;
 
@@ -16,9 +16,7 @@ export default function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const callbackName = isbot(request.headers.get("user-agent"))
-    ? "onAllReady"
-    : "onShellReady";
+  const callbackName = isbot(request.headers.get('user-agent')) ? 'onAllReady' : 'onShellReady';
 
   return new Promise((resolve, reject) => {
     let didError = false;
@@ -36,7 +34,7 @@ export default function handleRequest(
           const bodyWithStyles = emotionServer.renderStylesToNodeStream();
           body.pipe(bodyWithStyles);
 
-          responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set('Content-Type', 'text/html');
 
           resolve(
             new Response(body, {

app/lib/lets-encrypt.server.ts

@@ -1,6 +1,6 @@
-import acme from "acme-client";
-import type { Client as AcmeClient } from "acme-client";
-import { secrets } from "docker-secret";
+import acme from 'acme-client';
+import type { Client as AcmeClient } from 'acme-client';
+import { secrets } from 'docker-secret';
 
 const { LETS_ENCRYPT_ACCOUNT_PRIVATE_KEY_PEM } = secrets ?? {};
 
@@ -12,11 +12,9 @@ class LetsEncrypt {
   #accountKey?: string;
 
   initialize = async () => {
-    if (process.env.NODE_ENV === "production") {
+    if (process.env.NODE_ENV === 'production') {
       if (!LETS_ENCRYPT_ACCOUNT_PRIVATE_KEY_PEM)
-        throw new Error(
-          "The docker secret LETS_ENCRYPT_ACCOUNT_PRIVATE_KEY_PEM is missing"
-        );
+        throw new Error('The docker secret LETS_ENCRYPT_ACCOUNT_PRIVATE_KEY_PEM is missing');
 
       this.#accountKey = LETS_ENCRYPT_ACCOUNT_PRIVATE_KEY_PEM;
       this.#directoryUrl = acme.directory.letsencrypt.production;

app/models/user.server.ts

@@ -1,17 +1,17 @@
-import type { User } from "@prisma/client";
+import type { User } from '@prisma/client';
 
-import { prisma } from "~/db.server";
+import { prisma } from '~/db.server';
 
-export type { User } from "@prisma/client";
+export type { User } from '@prisma/client';
 
-export async function getUserByUsername(username: User["username"]) {
+export async function getUserByUsername(username: User['username']) {
   return prisma.user.findUnique({ where: { username } });
 }
 
 export async function createUser(
-  username: User["username"],
-  name: User["name"],
-  email: User["email"]
+  username: User['username'],
+  name: User['name'],
+  email: User['email']
 ) {
   return prisma.user.create({
     data: {
@@ -22,6 +22,6 @@ export async function createUser(
   });
 }
 
-export async function deleteUserByEmail(email: User["email"]) {
+export async function deleteUserByEmail(email: User['email']) {
   return prisma.user.delete({ where: { email } });
 }