feat: setup prettier correctly with default options

.github/workflows/main.yml

@@ -12,15 +12,18 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
+
+            - name: Install dependencies
+              run: npm install
 
-            - name: Format
-              run: npm run prettier
+            - name: Check formatting rules
+              run: npx prettier . --check
 
-            - name: lint
+            - name: Check code-quality rules
               run: npm run lint
 
-            - name: typescript
-              run: npm run typescript
+            - name: Check typescript type validity
+              run: npm run ts-lint
 
-            - name: build
+            - name: Build the web client
               run: npm run build --if-present

.husky/pre-commit

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

.prettierignore

@@ -1,3 +1,5 @@
 node_modules
 build
 dist
+.github
+public

.prettierrc

@@ -0,0 +1 @@
+{}

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "ts-lint": "tsc -noEmit -incremental",
     "postinstall": "node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public",
     "prepare": "husky install"
   },
@@ -39,6 +40,7 @@
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --cache --fix",
-    "*.{js,ts,jsx,tsx,css,md}": "prettier --write"
+    "*.{js,ts,jsx,tsx,css,md}": "prettier --write",
+    "*.{ts, tsx}": "tsc-files --noEmit"
   }
 }

postcss.config.js

@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     autoprefixer: {},
   },
-}
+};

src/app/dashboard/jobmonitor/[id]/page.tsx

@@ -1,7 +1,3 @@
-export default function Page({
-    params
-}: {
-    params: {id: string}
-}) {
-    return <h1>Hello, Job Monitoring {params.id}  Page!</h1>
-  }
+export default function Page({ params }: { params: { id: string } }) {
+  return <h1>Hello, Job Monitoring {params.id} Page!</h1>;
+}

src/app/dashboard/jobmonitor/error.tsx

@@ -1,24 +1,22 @@
-'use client'
- 
-import { useEffect } from 'react'
- 
+"use client";
+
+import { useEffect } from "react";
+
 export default function Error({
   error,
   reset,
 }: {
-  error: Error
-  reset: () => void
+  error: Error;
+  reset: () => void;
 }) {
   useEffect(() => {
-    console.error(error)
-  }, [error])
- 
+    console.error(error);
+  }, [error]);
+
   return (
     <div>
       <h2>Something went wrong!</h2>
-      <button onClick={() => reset()}>
-        Try again
-      </button>
+      <button onClick={() => reset()}>Try again</button>
     </div>
-  )
-}
+  );
+}

src/app/dashboard/jobmonitor/layout.tsx

@@ -1,7 +1,7 @@
 export default function JobMonitorLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
-  return <section>{children}</section>
-}
+  return <section>{children}</section>;
+}

src/app/dashboard/jobmonitor/page.tsx

@@ -1,4 +1,4 @@
-import { JobDataGrid } from "@/app/components/JobDataGrid";
+import { JobDataGrid } from "@/components/JobDataGrid";
 
 export default async function Page() {
   return (

src/app/dashboard/layout.tsx

@@ -1,20 +1,17 @@
-import React from 'react';
-import DashboardAppBar from '../components/DashboardAppBar';
-import { OIDCSecure } from '../components/OIDCUtils';
-
+import React from "react";
+import DashboardAppBar from "@/components/DashboardAppBar";
+import { OIDCSecure } from "@/components/OIDCUtils";
 
 export default function DashboardLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-  <div>
-    <OIDCSecure>
-      <DashboardAppBar>
-        {children}
-      </DashboardAppBar>
-    </OIDCSecure>
-  </div>
+    <div>
+      <OIDCSecure>
+        <DashboardAppBar>{children}</DashboardAppBar>
+      </OIDCSecure>
+    </div>
   );
-}
+}

src/app/dashboard/page.tsx

@@ -1,9 +1,7 @@
 export default function Page() {
-    return (
-      <div>
-        <span>
-          Hello User
-        </span>
-      </div>
-    );
+  return (
+    <div>
+      <span>Hello User</span>
+    </div>
+  );
 }

src/app/error.tsx

@@ -1,18 +1,16 @@
-'use client'
- 
+"use client";
+
 export default function Error({
   error,
   reset,
 }: {
-  error: Error
-  reset: () => void
+  error: Error;
+  reset: () => void;
 }) {
   return (
     <div>
       <h2>Something went wrong!</h2>
-      <button onClick={() => reset()}>
-        Try again
-      </button>
+      <button onClick={() => reset()}>Try again</button>
     </div>
-  )
-}
+  );
+}

src/app/global-error.tsx

@@ -1,11 +1,11 @@
-'use client'
- 
+"use client";
+
 export default function GlobalError({
   error,
   reset,
 }: {
-  error: Error
-  reset: () => void
+  error: Error;
+  reset: () => void;
 }) {
   return (
     <html>
@@ -14,5 +14,5 @@ export default function GlobalError({
         <button onClick={() => reset()}>Try again</button>
       </body>
     </html>
-  )
-}
+  );
+}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
-import { OIDCProvider } from "./components/OIDCUtils";
+import { OIDCProvider } from "@/components/OIDCUtils";
+import { OidcConfiguration } from "@axa-fr/react-oidc";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -9,11 +10,11 @@ export const metadata = {
   description: "Distributed Infrastructure with Remote Agent Controller",
 };
 
-const configuration = {
-  client_id: process.env.DIRACX_CLIENT_ID,
-  redirect_uri: process.env.REDIRECT_URI,
-  scope: process.env.DEFAULT_SCOPE,
-  authority: process.env.NEXT_PUBLIC_DIRACX_URL,
+const configuration: OidcConfiguration = {
+  client_id: process.env.DIRACX_CLIENT_ID || "",
+  redirect_uri: process.env.REDIRECT_URI || "",
+  scope: process.env.DEFAULT_SCOPE || "",
+  authority: process.env.NEXT_PUBLIC_DIRACX_URL || "",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,4 +1,4 @@
-import ShowcaseAppBar from "./components/ShowcaseAppBar";
+import ShowcaseAppBar from "@/components/ShowcaseAppBar";
 
 const containerStyles = {
   marginLeft: "30%",

src/components/DashboardAppBar.tsx

@@ -21,8 +21,15 @@ import { DiracLogo } from "./DiracLogo";
 import { Dashboard, FolderCopy } from "@mui/icons-material";
 import { LoginButton } from "./LoginButton";
 
+interface DashboardAppBarProps {
+  children: React.ReactNode;
+}
+
 // Sections accessible to the users
-const userSections = {
+const userSections: Record<
+  string,
+  { icon: React.ComponentType; path: string }
+> = {
   Dashboard: { icon: Dashboard, path: "/dashboard" },
   "Job Monitor": { icon: MonitorIcon, path: "/dashboard/jobmonitor" },
   "File Catalog": { icon: FolderCopy, path: "/dashboard/filecatalog" },
@@ -35,21 +42,16 @@ const userSections = {
  * @param props - children
  * @return an dashboard layout
  */
-export default function DashboardAppBar(props: Props) {
-  const { window } = props;
-
+export default function DashboardAppBar(props: DashboardAppBarProps) {
   /** State management for mobile drawer */
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
 
   /** State management for selected section in the drawer */
-  const [selectedIndex, setSelectedIndex] = React.useState(true);
-  const handleListItemClick = (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    index: number,
-  ) => {
+  const [selectedIndex, setSelectedIndex] = React.useState<number>(0);
+  const handleListItemClick = (index: number) => {
     setSelectedIndex(index);
   };
 
@@ -63,13 +65,13 @@ export default function DashboardAppBar(props: Props) {
         <DiracLogo />
       </Toolbar>
       <List>
-        {Object.keys(userSections).map((title, index) => (
+        {Object.keys(userSections).map((title: string, index: number) => (
           <ListItem key={title} disablePadding>
             <ListItemButton
               component={NextLink}
               href={userSections[title]["path"]}
               selected={selectedIndex === index}
-              onClick={(event) => handleListItemClick(event, index)}
+              onClick={() => handleListItemClick(index)}
             >
               <ListItemIcon>
                 <Icon component={userSections[title]["icon"]} />
@@ -97,7 +99,7 @@ export default function DashboardAppBar(props: Props) {
   );
 
   const container =
-    window !== undefined ? () => window().document.body : undefined;
+    window !== undefined ? () => window.document.body : undefined;
 
   /** Return an App bar embedding the drawer */
   return (

src/components/DashboardButton.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
  * @returns a Button
  */
 export function DashboardButton() {
-  const { accessToken, accessTokenPayload } = useOidcAccessToken();
+  const { accessToken } = useOidcAccessToken();
 
   if (!accessToken) {
     return null;

src/components/JobDataGrid.tsx

@@ -19,7 +19,7 @@ export function JobDataGrid() {
   const { accessToken } = useOidcAccessToken();
 
   // TODO: move fetcher to make it usable from other places
-  const fetcher = (params) => {
+  const fetcher = (params: string[]) => {
     const [path] = params;
     return fetch(process.env.NEXT_PUBLIC_DIRACX_URL + path, {
       method: "POST",