#6: add eslint and fix its problems

.github/workflows/lint.yml

@@ -0,0 +1,29 @@
+name: Format and lint
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Generate code
+      run: make gen
+
+    - name: Run check
+      run: make check

.gitignore

@@ -24,3 +24,8 @@ dist-ssr
 *.sw?
 
 yarn.lock
+
+# code-generated files
+src/clients/backend
+src/clients/admin
+

eslint.config.ts

@@ -0,0 +1,58 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+export default tseslint.config(eslintConfigPrettier, {
+  extends: [eslint.configs.recommended, tseslint.configs.recommended],
+  ignores: ["src/clients/**"], // code-generated
+  rules: {
+    "@typescript-eslint/array-type": "error",
+    "array-callback-return": "error",
+    "no-await-in-loop": "error",
+    "no-constructor-return": "error",
+    "no-inner-declarations": "error",
+    "no-promise-executor-return": "error",
+    "no-self-compare": "error",
+    "no-template-curly-in-string": "error",
+    "no-unassigned-vars": "error",
+    "no-unreachable-loop": "error",
+    "no-use-before-define": "error",
+    "no-useless-assignment": "error",
+    "require-atomic-updates": "error",
+
+    // opinionated suggestion enforcements to make TypeScript a sane language
+    "arrow-body-style": "error",
+    "block-scoped-var": "error",
+    camelcase: ["error", { properties: "never" }], // code-generated client structures might not always adhere to camelcase
+    "consistent-return": "error",
+    "default-case": "error",
+    "default-case-last": "error",
+    "default-param-last": "error",
+    eqeqeq: "error",
+    "func-name-matching": "error",
+    "func-style": ["error", "declaration"],
+    "init-declarations": ["error", "always"],
+    "no-array-constructor": "error",
+    "no-caller": "error",
+    "no-delete-var": "error",
+    "no-else-return": "error",
+    "no-empty": "error",
+    "no-invalid-this": "error",
+    "no-label-var": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-loop-func": "error",
+    "no-octal": "error",
+    "no-octal-escape": "error",
+    "no-return-assign": "error",
+    "no-sequences": "error",
+    "no-throw-literal": "error",
+    "no-unneeded-ternary": "error",
+    "no-useless-rename": "error",
+    "no-useless-return": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "require-await": "error",
+    // 'sort-imports': 'error' // TODO: add code formatter
+  },
+});

makefile

@@ -6,6 +6,14 @@ run:
 build:
 	yarn build
 
+check:
+	yarn run prettier --check src
+	yarn eslint src
+
+fix:
+	yarn run prettier --write src
+	yarn eslint --fix src
+
 gen:
 	yarn run openapi-ts -i http://dm2.sao.ru:81/api/openapi.json -o ./src/clients/backend
 	yarn run openapi-ts -i http://dm2.sao.ru:81/admin/api/openapi.json -o ./src/clients/admin

package.json

@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "openapi-ts": "openapi-ts"
+    "openapi-ts": "openapi-ts",
+    "prettier": "prettier"
   },
   "dependencies": {
     "@hey-api/openapi-ts": "^0.80.10",
@@ -20,23 +21,24 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
-    "react-markdown": "^10.0.1",
     "react-router-dom": "^7.2.0",
-    "remark-gfm": "^4.0.1",
     "serve": "^14.2.4",
     "tailwindcss": "^4.0.9"
   },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
+    "@eslint/js": "^9.34.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
-    "eslint": "^9.21.0",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
+    "jiti": "^2.5.1",
+    "prettier": "3.6.2",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.41.0",
     "vite": "^6.2.0"
   }
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Footer } from "./components/ui/footer";
 import { HomePage } from "./pages/Home";
 import { SearchResultsPage } from "./pages/SearchResults";
@@ -56,7 +56,8 @@ function App() {
           element={
             <Layout>
               <NotFoundPage />
-            </Layout>}
+            </Layout>
+          }
         />
       </Routes>
     </BrowserRouter>

src/clients/backend.tsx

@@ -130,7 +130,7 @@ export class HyperLEDAClient {
     },
   });
 
-  private constructor() { }
+  private constructor() {}
 
   public static getInstance(): HyperLEDAClient {
     if (!HyperLEDAClient.instance) {
@@ -142,7 +142,7 @@ export class HyperLEDAClient {
   public async query(
     queryString: string,
     page: number = 0,
-    pageSize: number = 25
+    pageSize: number = 25,
   ): Promise<QueryResponse> {
     try {
       const response = await this.axiosInstance.get<APIResponse<QueryResponse>>(
@@ -153,7 +153,7 @@ export class HyperLEDAClient {
             page: page,
             page_size: pageSize,
           },
-        }
+        },
       );
       return {
         objects: response.data.data.objects || [],
@@ -176,10 +176,9 @@ export class HyperLEDAClient {
     page_size?: number;
   }): Promise<QuerySimpleResponse> {
     try {
-      const response = await this.axiosInstance.get<APIResponse<QuerySimpleResponse>>(
-        "/api/v1/query/simple",
-        { params }
-      );
+      const response = await this.axiosInstance.get<
+        APIResponse<QuerySimpleResponse>
+      >("/api/v1/query/simple", { params });
       return response.data.data;
     } catch (error) {
       console.error("Error in querySimple:", error);
@@ -190,19 +189,18 @@ export class HyperLEDAClient {
   public async queryByPGC(
     pgcNumbers: number[],
     page: number = 0,
-    pageSize: number = 25
+    pageSize: number = 25,
   ): Promise<QuerySimpleResponse> {
     try {
-      const response = await this.axiosInstance.get<APIResponse<QuerySimpleResponse>>(
-        "/api/v1/query/simple",
-        {
-          params: {
-            pgcs: pgcNumbers,
-            page: page,
-            page_size: pageSize,
-          },
-        }
-      );
+      const response = await this.axiosInstance.get<
+        APIResponse<QuerySimpleResponse>
+      >("/api/v1/query/simple", {
+        params: {
+          pgcs: pgcNumbers,
+          page: page,
+          page_size: pageSize,
+        },
+      });
       return response.data.data;
     } catch (error) {
       console.error("Error in queryByPGC:", error);

src/components/ui/aladin.tsx

@@ -44,13 +44,27 @@ export function AladinViewer({
     }
   }, [ra, dec, fov, survey, target]);
 
-  return (
-    <div ref={aladinDivRef} className={classNames("border", className)} />
-  );
+  return <div ref={aladinDivRef} className={classNames("border", className)} />;
 }
 
 declare global {
   interface Window {
-    A: any;
+    A: {
+      aladin: (
+        element: HTMLElement,
+        options?: {
+          survey?: string;
+          fov?: number;
+          showReticle?: boolean;
+          showZoomControl?: boolean;
+          showFullscreenControl?: boolean;
+          showLayersControl?: boolean;
+          showCooGridControl?: boolean;
+        },
+      ) => {
+        gotoObject: (target: string) => void;
+        gotoRaDec: (ra: number, dec: number) => void;
+      };
+    };
   }
 }

src/components/ui/button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import classNames from "classnames";
 
 interface ButtonProps {
@@ -9,24 +9,18 @@ interface ButtonProps {
   disabled?: boolean;
 }
 
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  onClick,
-  className,
-  type = "button",
-  disabled = false,
-}) => {
+export function Button(props: ButtonProps): ReactElement {
   return (
     <button
-      type={type}
-      onClick={onClick}
-      disabled={disabled}
+      type={props.type}
+      onClick={props.onClick}
+      disabled={props.disabled}
       className={classNames(
         "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white",
-        className,
+        props.className,
       )}
     >
-      {children}
+      {props.children}
     </button>
   );
-};
+}

src/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import classNames from "classnames";
 
 interface CardProps {
@@ -8,35 +8,31 @@ interface CardProps {
   title?: string;
 }
 
-export const Card: React.FC<CardProps> = ({
-  children,
-  className,
-  onClick,
-  title,
-}) => {
+export function Card(props: CardProps): ReactElement {
   return (
     <div
       className={classNames(
         "shadow-md rounded p-2 hover:shadow-lg transition-shadow border border-gray-200",
-        { "cursor-pointer": onClick },
-        className
+        { "cursor-pointer": props.onClick },
+        props.className,
       )}
-      onClick={onClick}
+      onClick={props.onClick}
     >
-      {title && <h3 className="text-lg font-semibold mb-1">{title}</h3>}
-      {children}
+      {props.title && (
+        <h3 className="text-lg font-semibold mb-1">{props.title}</h3>
+      )}
+      {props.children}
     </div>
   );
-};
+}
 
 interface CardContentProps {
   children: React.ReactNode;
   className?: string;
 }
 
-export const CardContent: React.FC<CardContentProps> = ({
-  children,
-  className,
-}) => {
-  return <div className={classNames("p-2", className)}>{children}</div>;
-};
+export function CardContent(props: CardContentProps): ReactElement {
+  return (
+    <div className={classNames("p-2", props.className)}>{props.children}</div>
+  );
+}