Run prettier, eslint and TS check in CI (#71)

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "ignoreRestSiblings": true }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "indent": "off", // Let prettier handle indentation
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
+    "semi": ["error", "always"],
+    "react/no-unescaped-entities": "off"
+  }
+}

.github/workflows/yarn.yml

@@ -6,7 +6,7 @@ name: Yarn CI & CD
 on:
   # runs on all pull requests against main
   pull_request:
-    branches: [ main ]
+    branches: [main]
   workflow_call:
     inputs:
       release:
@@ -15,7 +15,6 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-20.04
     strategy:
       matrix:
@@ -25,30 +24,36 @@ jobs:
       sha_short: ${{ steps.vars.outputs.sha_short }}
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - name: Install production-level yarn dependencies
-      uses: Borales/actions-yarn@v3.0.0
-      with:
-          cmd: install --frozen-lockfile --production
-    - name: Build output for prod
-      uses: Borales/actions-yarn@v3.0.0
-      with:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - name: Install production-level yarn dependencies
+        uses: Borales/actions-yarn@v3.0.0
+        with:
+          cmd: install --frozen-lockfile
+      - name: Prettier check
+        run: yarn prettier
+      - name: eslint check
+        run: yarn lint
+      - name: TS check
+        run: yarn ts
+      - name: Build output for prod
+        uses: Borales/actions-yarn@v3.0.0
+        with:
           cmd: build
-    - name: tar files together before artifact creation
-      run: tar -cvf build.tar build/
-    - name: Upload build.zip artifact for release
-      uses: actions/upload-artifact@v3
-      with:
-        name: build
-        path: build.tar
-    - name: Set variables for tag generation
-      id: vars
-      run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+      - name: tar files together before artifact creation
+        run: tar -cvf build.tar build/
+      - name: Upload build.zip artifact for release
+        uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: build.tar
+      - name: Set variables for tag generation
+        id: vars
+        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
 
   # CD-specific job
   release:
@@ -61,16 +66,16 @@ jobs:
         node-version: [16.x]
 
     steps:
-    - name: Download artifact from build
-      uses: actions/download-artifact@v3
-      with:
-        name: build
-    - name: Generate release
-      uses: ncipollo/release-action@v1
-      with:
-        allowUpdates: false
-        artifactErrorsFailBuild: true
-        artifacts: "build.tar"
-        # don't use {{ github.sha }} here since that's the full SHA
-        tag: 1.0.0-${{ needs.build.outputs.sha_short }}
-        token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Download artifact from build
+        uses: actions/download-artifact@v3
+        with:
+          name: build
+      - name: Generate release
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: false
+          artifactErrorsFailBuild: true
+          artifacts: "build.tar"
+          # don't use {{ github.sha }} here since that's the full SHA
+          tag: 1.0.0-${{ needs.build.outputs.sha_short }}
+          token: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -37,14 +37,22 @@
     "@types/node": "^12.0.0",
     "@types/react": "^18.0.9",
     "@types/react-redux": "^7.1.7",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "prettier": "^3.1.1",
     "typescript": "^4.6.3"
   },
   "scripts": {
     "start": "REACT_APP_API_URL=http://127.0.0.1:8000 react-scripts start",
     "build": "react-scripts build",
     "build-next": "PUBLIC_URL=\"/next/\" react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "prettier:fix": "prettier --write 'src/**/*.{ts,tsx}'",
+    "prettier": "prettier --check 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint --fix src",
+    "lint": "eslint src",
+    "ts": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": "react-app"

src/apiClient/auth.ts

@@ -11,6 +11,8 @@ export interface LogInQuery {
   password: string;
 }
 
+type EmptyObject = Record<string, never>;
+
 async function loggedIn(): Promise<LoggedInResponse> {
   return request("/auth/logged-in/", "GET");
 }
@@ -22,26 +24,28 @@ async function logIn(query: LogInQuery): Promise<User | APIErrorType> {
 async function checkResetPasswordToken(query: {
   email: string;
   token: string;
-}): Promise<{}> {
+}): Promise<EmptyObject> {
   return request("/auth/reset-password/check-token/", "GET", query);
 }
 
-async function requestResetPassword(query: { email: string }): Promise<{}> {
+async function requestResetPassword(query: {
+  email: string;
+}): Promise<EmptyObject> {
   return request("/auth/reset-password/request/", "POST", query);
 }
 
 async function confirmResetPassword(query: {
   email: string;
   password: string;
   token: string;
-}): Promise<{}> {
+}): Promise<EmptyObject> {
   return request("/auth/reset-password/confirm/", "POST", query);
 }
 
 async function changePassword(query: {
   oldPassword: string;
   newPassword: string;
-}): Promise<{}> {
+}): Promise<EmptyObject> {
   return request("/auth/change-password/", "POST", query);
 }
 

src/apiClient/client.ts

@@ -10,7 +10,7 @@ export async function request(
   path: string,
   method: string,
   data?: Data,
-  maxRetry: number = 3
+  maxRetry: number = 3,
 ): Promise<any> {
   if (maxRetry <= 0) {
     return;

src/apiClient/gear.ts

@@ -66,7 +66,7 @@ export interface GearLocation {
 
 async function getGearRentalHistory(
   id: string,
-  page?: number
+  page?: number,
 ): Promise<ListWrapper<GearRental>> {
   return request(`/gear/${id}/rentals/`, "GET", { ...(page && { page }) });
 }
@@ -120,7 +120,7 @@ export type CreateGearArgs = {
 };
 
 async function createGear(
-  args: CreateGearArgs
+  args: CreateGearArgs,
 ): Promise<{ items: GearSummary[] }> {
   return request(`/gear/`, "POST", args);
 }

src/apiClient/officeHours.ts

@@ -11,7 +11,7 @@ export async function cancelSignUp(signupId: string) {
 export async function requestOfficeHourCredit(
   signupId: number,
   duration: string,
-  note?: string
+  note?: string,
 ) {
   const formattedDuration = duration + ":00";
   return request(`/office-hour-signups/${signupId}/request-credit/`, "POST", {
@@ -24,7 +24,7 @@ export async function requestOtherEventCredit(
   eventType: string,
   date: string,
   duration: string,
-  note?: string
+  note?: string,
 ) {
   const formattedDuration = duration + ":00";
   return request(`/office-hour-signups/`, "POST", {
@@ -37,7 +37,7 @@ export async function requestOtherEventCredit(
 export async function approveCredit(
   signupId: number,
   duration: string,
-  credit: number
+  credit: number,
 ) {
   const formattedDuration = duration + ":00";
   return request(`/office-hour-signups/${signupId}/approve/`, "POST", {

src/apiClient/people.ts

@@ -100,7 +100,7 @@ async function archiveNote(personId: string, noteId: string) {
 
 async function getPersonRentalHistory(
   id: string,
-  page?: number
+  page?: number,
 ): Promise<ListWrapper<Rental>> {
   return request(`/people/${id}/rentals/`, "GET", { ...(page && { page }) });
 }
@@ -114,7 +114,7 @@ async function returnGear(
   gear: GearToReturn[],
   purchases: string[] = [],
   checkNumber: string = "",
-  useMitocCredit?: number
+  useMitocCredit?: number,
 ) {
   return request(`/people/${personID}/return/`, "POST", {
     gear,
@@ -129,7 +129,7 @@ async function editPerson(
   firstName: string,
   lastName: string,
   email: string,
-  altEmails: string[]
+  altEmails: string[],
 ) {
   return request(`/people/${id}/`, "PATCH", {
     firstName,

src/components/Buttons.tsx

@@ -13,7 +13,7 @@ export function ArchiveButton(props: Omit<Props, "children">) {
 }
 
 export function ToggleExpandButton(
-  props: Omit<Props, "children"> & { isOpen: boolean }
+  props: Omit<Props, "children"> & { isOpen: boolean },
 ) {
   const content = props.isOpen ? "－" : "＋";
   return <SquareButton {...props}>{content}</SquareButton>;

src/components/GearLocationSelect.tsx

@@ -14,7 +14,10 @@ type Props = {
   onChange: (groups: GearLocation[]) => void;
 };
 
-export function GearLocationSelect({ locations, onChange: onChangeProps }: Props) {
+export function GearLocationSelect({
+  locations,
+  onChange: onChangeProps,
+}: Props) {
   const { data: allGearLocations } = useGetGearLocationsQuery();
   const gearLocationOptions =
     allGearLocations?.map((allGearLocations) => ({
@@ -23,12 +26,12 @@ export function GearLocationSelect({ locations, onChange: onChangeProps }: Props
       ...allGearLocations,
     })) ?? [];
   const values = gearLocationOptions.filter((opt) =>
-      locations.includes(opt.id)
+    locations.includes(opt.id),
   );
   const onChange = useCallback(
     (options: MultiValue<GearLocationOption>) =>
       onChangeProps(options.map(parseOption)),
-    [onChangeProps]
+    [onChangeProps],
   );
 
   return (

src/components/GearTypeSelect.tsx

@@ -54,7 +54,7 @@ export function GearTypeMultiSelect({
   const onChange = useCallback(
     (options: MultiValue<GearTypeOption>) =>
       onChangeProps(options.map(parseOption)),
-    [onChangeProps]
+    [onChangeProps],
   );
 
   return (

src/components/GroupSelect.tsx

@@ -27,7 +27,7 @@ export function GroupSelect({ groupIds, onChange: onChangeProps }: Props) {
   const onChange = useCallback(
     (options: MultiValue<GroupOption>) =>
       onChangeProps(options.map(parseOption)),
-    [onChangeProps]
+    [onChangeProps],
   );
 
   return (

src/components/Inputs/LabeledInput.tsx

@@ -24,15 +24,15 @@ type InputProps = InputHTMLAttributes<HTMLInputElement>;
 
 export type Props<
   TFieldValues extends FieldValues,
-  TName extends Path<TFieldValues>
+  TName extends Path<TFieldValues>,
 > = InputProps & {
   as?: any;
   renderComponent?: (props: {
     value: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
     invalid?: boolean;
     name: TName;
     onChange: (
-      value: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>
+      value: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>,
     ) => void;
     onBlur: Noop;
     ref: RefCallBack;
@@ -50,7 +50,7 @@ export type Props<
  */
 export function LabeledInput<
   TFieldValues extends FieldValues,
-  TName extends Path<TFieldValues>
+  TName extends Path<TFieldValues>,
 >(props: Props<TFieldValues, TName>) {
   const {
     register,
@@ -137,7 +137,7 @@ export function LabeledInput<
 
 export function makeLabeledInput<TFormValues extends FieldValues>() {
   return function TypedLabeledInput<TName extends Path<TFormValues>>(
-    props: Props<TFormValues, TName>
+    props: Props<TFormValues, TName>,
   ) {
     return LabeledInput(props);
   };

src/components/Inputs/NumberField.tsx

@@ -18,8 +18,8 @@ export function NumberField({
   const Component = small
     ? SmallNumberInput
     : integer
-    ? InputWithArrows
-    : ArrowLessInput;
+      ? InputWithArrows
+      : ArrowLessInput;
   const actualClassName = `form-control ${className ?? ""} ${small && "sm"}`;
   return (
     <Component