[CI] Type Check liberica

.github/workflows/ci.yaml

@@ -3,7 +3,7 @@ name: CI
 on:
   - pull_request
   - push
-      
+
 env:
   CARGO_TERM_COLOR: always
 
@@ -14,12 +14,12 @@ jobs:
     steps:
       - name: Checkout sources
         uses: actions/checkout@v4
-        
+
       - uses: actions/cache@v3
         with:
           path: target
           key: ${{ runner.os }}-robusta-mister-x
-          
+
       - name: 🔬 Rust fmt
         run: cargo fmt --check --all
 
@@ -30,20 +30,20 @@ jobs:
   liberica:
     name: ⚡ liberica Check
     runs-on: ubuntu-latest
-    
+
     defaults:
       run:
         working-directory: liberica
-        
+
     steps:
       - name: Checkout sources
         uses: actions/checkout@v4
-        
+
       - uses: actions/cache@v3
         with:
           path: liberica/node_modules
           key: ${{ runner.os }}-liberica-mister-x
-        
+
       - name: 🚧 Setup bun
         uses: oven-sh/setup-bun@v1
 

liberica/eslint.config.js

@@ -21,13 +21,28 @@ import eslintConfigPrettier from "eslint-config-prettier"
 /** @type {import("eslint").Config} */
 export default [
     { ignores: ["src/lib/bindings.ts", "node_modules", "dist"] },
-    { languageOptions: { globals: globals.browser } },
+    {
+        languageOptions: {
+            globals: globals.browser,
+            parserOptions: {
+                project: true,
+                tsconfigRootDir: import.meta.dirname
+            }
+        }
+    },
 
     eslintJs.configs.recommended,
 
     eslintPluginPrettier,
     eslintConfigPrettier, // disables some rules that cause conflicts
 
-    ...tseslint.configs.strict, // strict is a superset of recommended
+    ...tseslint.configs.strictTypeChecked, // strict is a superset of recommended
     ...tseslint.configs.stylistic,
+
+
+    {
+        rules: {
+            "@typescript-eslint/no-confusing-void-expression": "off"
+        }
+    }
 ];

liberica/src/components/InputElements.tsx

@@ -14,11 +14,12 @@ export const TextInput = ({
             placeholder="Lila Pause"
             onChange={(e) => {
                 const fn = {
-                    end: String.prototype.trimEnd,
-                    start: String.prototype.trimStart,
-                    all: String.prototype.trim,
+                    end: (s: string) => s.trimEnd(),
+                    start: (s: string) => s.trimStart(),
+                    all: (s: string) => s.trim(),
                 };
-                const value = trim && fn[trim].call(e.target.value);
+
+                const value = trim && fn[trim](e.target.value);
                 onTextChange(value || e.target.value);
             }}
             {...props}

liberica/src/components/Spinner.tsx

@@ -1,8 +1,8 @@
-export function Spinner(props: { className?: string; color?: string }) {
+export function Spinner(props: { color?: string }) {
     const color = props.color ?? "white";
     return (
         <svg
-            className={`mr-3 h-5 w-5 animate-spin text-white ${props.className}`}
+            className="mr-3 h-5 w-5 animate-spin text-white"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"

liberica/src/lib/api.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { Team, Stop, CreateTeam } from "lib/bindings";
 import { WebSocketApi } from "./websockets";
 
@@ -62,10 +62,10 @@ export const postCreateTeam = (team: CreateTeam): Promise<Team> =>
     AXIOS.post(ENDPOINTS.POST_CREATE_TEAM, team);
 
 export const getTeams = (): Promise<Team[]> =>
-    AXIOS.get(ENDPOINTS.GET_TEAMS).then((data) => data.data);
+    AXIOS.get(ENDPOINTS.GET_TEAMS).then((data) => data.data as Team[]);
 
 export const getStops = (): Promise<Stop[]> =>
-    AXIOS.get(ENDPOINTS.GET_STOPS).then((data) => data.data);
+    AXIOS.get(ENDPOINTS.GET_STOPS).then((data) => data.data as Stop[]);
 
 export const serverAlive = (): Promise<boolean> =>
     AXIOS.get(ENDPOINTS.GET_PING)
@@ -74,3 +74,15 @@ export const serverAlive = (): Promise<boolean> =>
 
 export const createWebSocketConnection = () =>
     new WebSocketApi(BASE_URLS.WEBSOCKET + ENDPOINTS.GET_WS);
+
+export const defaultErrorHandler = (err: unknown) => {
+    if (err instanceof AxiosError) {
+        if (err.response) console.error("Request Error", err.response);
+        return;
+    }
+
+    if (err instanceof Error) {
+        console.error(err.message);
+        return;
+    }
+};

liberica/src/lib/websockets.ts

@@ -45,7 +45,7 @@ export class WebSocketApi {
 
     public reconnect(force = false) {
         // Don't try to reconnect if there is a connection already
-        if (this.connection?.readyState === this.connection.OPEN && force)
+        if (this.connection.readyState === this.connection.OPEN && force)
             return;
 
         this.disconnect();
@@ -60,6 +60,7 @@ export class WebSocketApi {
         this.connection.onclose = (e) => this.metaHandlers["Disconnect"]?.(e);
         this.connection.onopen = () => this.metaHandlers["Connect"]?.();
         this.connection.onmessage = (e) => {
+            if (typeof e.data !== "string") return;
             const res = this.parseMsg(e.data);
             if (res) this.handleMessage(res);
         };
@@ -90,7 +91,7 @@ export class WebSocketApi {
     public register<T extends Keys<ServerMessage>>(
         type: T,
         handler: WSHandlerMap<ServerMessage>[T],
-    ): WebSocketApi {
+    ): this {
         this.handlers[type] = handler;
         return this;
     }

liberica/src/main.tsx

@@ -25,7 +25,11 @@ i18n.use(LanguageDetector)
             en: { translation: en_translation },
             de: { translation: de_translation },
         },
-    });
+    })
+    .catch(
+        (e: unknown) =>
+            e instanceof Error && console.error("i18n init error", e.message),
+    );
 
 const rootElement = document.getElementById("root") as HTMLElement;
 ReactDOM.createRoot(rootElement).render(

liberica/src/page/CreateTeam.tsx

@@ -1,5 +1,5 @@
 import { Button, DropDown, TextInput } from "components/InputElements";
-import { postCreateTeam } from "lib/api";
+import { defaultErrorHandler, postCreateTeam } from "lib/api";
 import { TeamKind } from "lib/bindings";
 import { FormEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -28,14 +28,9 @@ export function CreateTeam() {
 
         setLoading(true);
         postCreateTeam({ color, name, kind })
-            .then(() => {
-                setLoading(false);
-                navigate("/");
-            })
-            .catch((err) => {
-                setLoading(false);
-                alert(t(err.response.data));
-            });
+            .then(() => navigate("/"))
+            .catch(defaultErrorHandler)
+            .finally(() => setLoading(false));
     };
 
     return (

liberica/src/page/Game.tsx

@@ -12,21 +12,21 @@ export function Game() {
     const [ws, setWS] = useState<WebSocketApi>();
     const [gs, setGameState] = useState<GameState>({ teams: [], trains: [] });
     const [embarkedTrain, setEmbarkedTrain] = useState<Train>();
-    const team: Team = useLocation().state; // this is how Home passes the team
+    const team = useLocation().state as Team | undefined; // this is how Home passes the team
     const { t } = useTranslation();
 
     function disembark() {
-        if (team) {
-            setEmbarkedTrain(undefined);
-            ws?.send("DisembarkTrain");
-        }
+        if (!team) return;
+
+        setEmbarkedTrain(undefined);
+        ws?.send("DisembarkTrain");
     }
 
     function embark(train: Train) {
-        if (team) {
-            setEmbarkedTrain(train);
-            ws?.send({ EmbarkTrain: { train_id: train.line_id } });
-        }
+        if (!team) return;
+
+        setEmbarkedTrain(train);
+        ws?.send({ EmbarkTrain: { train_id: train.line_id } });
     }
 
     useEffect(() => {
@@ -49,9 +49,8 @@ export function Game() {
     }, []);
 
     useEffect(() => {
-        if (team) {
-            ws?.send({ JoinTeam: { team_id: team.id } });
-        }
+        if (!team) return;
+        ws?.send({ JoinTeam: { team_id: team.id } });
     }, [ws, team]);
 
     useEffect(() => {

liberica/src/page/Home.tsx

@@ -13,14 +13,15 @@ export function Home() {
     const { t } = useTranslation();
 
     useEffect(() => {
-        const updateTeams = () => getTeams().then(setTeams);
+        const updateTeams = () => void getTeams().then(setTeams);
 
         updateTeams();
+
         const interval = setInterval(updateTeams, 500);
         return () => clearInterval(interval);
     }, []);
 
-    const process = async () => {
+    const process = () => {
         if (selected === undefined) {
             return;
         }

liberica/src/page/Replay.tsx

@@ -183,19 +183,18 @@ export function Replay() {
                             if (file.size >= max_replay_size) {
                                 alert(t("ReplayTooBig"));
                             }
-                            file.text().then((data) => {
-                                try {
+                            file.text()
+                                .then((data) => {
                                     const state = parseCSV(data);
                                     if (state.length > 0) {
                                         startReplay(state);
                                     }
-                                } catch (e) {
-                                    alert(t("FailedParseReplay"));
+                                })
+                                .catch(() =>
                                     console.error(
-                                        `failed to parse replay file: ${e}`,
-                                    );
-                                }
-                            });
+                                        `failed to parse replay file`,
+                                    ),
+                                );
                         }
                         // invalid replay file
                         reset();