vicr123 · vicr123 · Jul 5, 2024 · Jun 30, 2024 · Jun 30, 2024 · Jul 5, 2024
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -23,7 +23,7 @@ jobs:
           if_true: false
           if_false: true
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           submodules: 'recursive'
 

diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
@@ -0,0 +1,20 @@
+name: Lint Frontend
+on:
+    push:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: 'recursive'
+      - name: Restore npm dependencies
+        working-directory: Parlance.ClientApp
+        run: |
+          npm ci
+      - name: Lint
+        working-directory: Parlance.ClientApp
+        run: |
+          npm run lint
diff --git a/Parlance.ClientApp/.prettierignore b/Parlance.ClientApp/.prettierignore
@@ -0,0 +1,3 @@
+dist
+obj
+public/resources/translations
diff --git a/Parlance.ClientApp/.prettierrc b/Parlance.ClientApp/.prettierrc
@@ -0,0 +1,4 @@
+{
+    "arrowParens": "avoid",
+    "endOfLine": "auto"
+}
diff --git a/Parlance.ClientApp/README.md b/Parlance.ClientApp/README.md
diff --git a/Parlance.ClientApp/genlangindex.js b/Parlance.ClientApp/genlangindex.js
@@ -4,4 +4,7 @@ import fs from "fs/promises";
 
 let availableTranslations = await fs.readdir("public/resources/translations");
 availableTranslations = availableTranslations.filter(x => x !== "index.json");
-await fs.writeFile("public/resources/translations/index.json", JSON.stringify(availableTranslations));
+await fs.writeFile(
+    "public/resources/translations/index.json",
+    JSON.stringify(availableTranslations),
+);
diff --git a/Parlance.ClientApp/index.html b/Parlance.ClientApp/index.html
@@ -1,22 +1,23 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
-    <base href="/"/>
-    <!--
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+            name="viewport"
+        />
+        <base href="/" />
+        <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link href="/favicon.png" rel="shortcut icon">
-    <title>Parlance</title>
-</head>
-<body>
-<noscript>
-    You need to enable JavaScript to run this app.
-</noscript>
-<div id="root"></div>
-<div id="modalContainer"></div>
-<script type="module" src="/src/index.jsx"></script>
-</body>
+        <link href="/favicon.png" rel="shortcut icon" />
+        <title>Parlance</title>
+    </head>
+    <body>
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+        <div id="root"></div>
+        <div id="modalContainer"></div>
+        <script type="module" src="/src/index.jsx"></script>
+    </body>
 </html>
diff --git a/Parlance.ClientApp/package-lock.json b/Parlance.ClientApp/package-lock.json
diff --git a/Parlance.ClientApp/package.json b/Parlance.ClientApp/package.json
@@ -57,12 +57,13 @@
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.0.8",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.1.6"
+    "prettier": "3.3.2",
+    "typescript": "^5.1.6",
+    "vite": "^5.0.8"
   },
   "overrides": {
     "autoprefixer": "10.4.5",
@@ -75,7 +76,7 @@
   "scripts": {
     "dev": "node genlangindex.js && vite",
     "build": "node genlangindex.js && vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "prettier . --check",
     "preview": "vite preview"
   },
   "eslintConfig": {

diff --git a/Parlance.ClientApp/public/mail/mail.css b/Parlance.ClientApp/public/mail/mail.css
@@ -1,6 +1,7 @@
 @font-face {
-    font-family: 'Contemporary';
+    font-family: "Contemporary";
     font-style: normal;
     font-weight: 400;
-    src: local('Contemporary'), local('Contemporary-Regular'), url('https://vicr123.com/typeface/Contemporary-Regular.ttf');
+    src: local("Contemporary"), local("Contemporary-Regular"),
+        url("https://vicr123.com/typeface/Contemporary-Regular.ttf");
 }
diff --git a/Parlance.ClientApp/src/App.jsx b/Parlance.ClientApp/src/App.jsx
@@ -1,19 +1,21 @@
-import React, {Component} from 'react';
-import {Route, Routes} from 'react-router-dom';
-import AppRoutes from './AppRoutes';
-import Layout from './components/Layout';
-import './custom.css';
-import Styles from './App.module.css';
-import {useTranslation} from "react-i18next";
+import React, { Component } from "react";
+import { Route, Routes } from "react-router-dom";
+import AppRoutes from "./AppRoutes";
+import Layout from "./components/Layout";
+import "./custom.css";
+import Styles from "./App.module.css";
+import { useTranslation } from "react-i18next";
 import i18n from "./helpers/i18n";
-import {ServerInformationProvider} from "./context/ServerInformationContext";
+import { ServerInformationProvider } from "./context/ServerInformationContext";
 
-function ErrorIndicator({error}) {
-    const {t} = useTranslation();
+function ErrorIndicator({ error }) {
+    const { t } = useTranslation();
 
-    return <div className={Styles.errorContainer}>
-        {t("Sorry, an error occurred.")}
-    </div>
+    return (
+        <div className={Styles.errorContainer}>
+            {t("Sorry, an error occurred.")}
+        </div>
+    );
 }
 
 export default class App extends Component {
@@ -24,19 +26,19 @@ export default class App extends Component {
 
         this.state = {
             error: null,
-            dir: i18n.dir()
-        }
+            dir: i18n.dir(),
+        };
 
         i18n.on("languageChanged", () => {
             this.setState({
-                dir: i18n.dir()
+                dir: i18n.dir(),
             });
         });
     }
 
     render() {
         if (this.state.error) {
-            return <ErrorIndicator error={this.state.error}/>
+            return <ErrorIndicator error={this.state.error} />;
         }
 
         return (
@@ -45,8 +47,14 @@ export default class App extends Component {
                     <Layout dir={this.state.dir}>
                         <Routes>
                             {AppRoutes.map((route, index) => {
-                                const {element, ...rest} = route;
-                                return <Route key={index} {...rest} element={element}/>;
+                                const { element, ...rest } = route;
+                                return (
+                                    <Route
+                                        key={index}
+                                        {...rest}
+                                        element={element}
+                                    />
+                                );
                             })}
                         </Routes>
                     </Layout>
@@ -58,7 +66,7 @@ export default class App extends Component {
     componentDidCatch(error, errorInfo) {
         console.log(error);
         this.setState({
-            error: error
+            error: error,
         });
     }
 }
diff --git a/Parlance.ClientApp/src/App.module.css b/Parlance.ClientApp/src/App.module.css
@@ -6,4 +6,4 @@
 
     width: 100dvw;
     height: 100dvh;
-}
+}
diff --git a/Parlance.ClientApp/src/App.test.jsx b/Parlance.ClientApp/src/App.test.jsx
@@ -1,14 +1,15 @@
-import React from 'react';
-import {createRoot} from 'react-dom/client';
-import {MemoryRouter} from 'react-router-dom';
-import App from './App';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { MemoryRouter } from "react-router-dom";
+import App from "./App";
 
-it('renders without crashing', async () => {
-    const div = document.createElement('div');
+it("renders without crashing", async () => {
+    const div = document.createElement("div");
     const root = createRoot(div);
     root.render(
         <MemoryRouter>
-            <App/>
-        </MemoryRouter>);
+            <App />
+        </MemoryRouter>,
+    );
     await new Promise(resolve => setTimeout(resolve, 1000));
 });