Format everything and add format check to CI

Signed-off-by: Johannes Loher <[email protected]>

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "daily"
+      interval: 'daily'

.github/workflows/checks.yml

@@ -21,6 +21,7 @@ jobs:
           node-version: ${{ env.node-version }}
           cache: 'npm'
       - run: npm ci --prefer-offline
+      - run: npm run checkformat
       - run: npm run lint
       - run: npm run build
       - run: npm test

.github/workflows/codeql.yml

@@ -9,14 +9,14 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "master" ]
+    branches: ['master']
   schedule:
     - cron: '24 2 * * 3'
 
@@ -38,45 +38,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby', 'swift' ]
         # Use only 'java' to analyze code written in Java, Kotlin or both
         # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
+      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: '/language:${{matrix.language}}'

package.json

@@ -43,9 +43,12 @@
     "eject": "react-scripts eject",
     "server": "node --unhandled-rejections=warn --es-module-specifier-resolution=node build-server/server/server.js",
     "preserver": "npm run build:server",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.cjs .",
-    "fixlint": "eslint --fix --ext .js,.jsx,.ts,.tsx,.cjs .",
-    "format": "prettier --write \"./**/*.(js|jsx|ts|tsx|json|yml)\""
+    "lint": "npm run eslint",
+    "fixlint": "npm run eslint -- --fix",
+    "eslint": "eslint --ext .js,.jsx,.ts,.tsx,.cjs .",
+    "format": "npm run prettier -- --write",
+    "checkformat": "npm run prettier -- --check",
+    "prettier": "prettier \"./**/*.(js|jsx|ts|tsx|json|yml)\""
   },
   "eslintConfig": {
     "extends": "react-app"

src/client/components/banner/banner.test.tsx

@@ -3,13 +3,13 @@ import { render, screen } from '@testing-library/react';
 import Banner from './banner';
 
 describe('Banner', () => {
-  const envBackup = process.env
+  const envBackup = process.env;
+
+  afterEach(() => (process.env = envBackup));
 
-  afterEach(() => process.env = envBackup);
-
   it('should render link if env var is defined', async () => {
     // given
-    process.env.REACT_APP_EOP_BANNER_TEXT = 'This is a banner text'
+    process.env.REACT_APP_EOP_BANNER_TEXT = 'This is a banner text';
     render(<Banner />);
 
     // when
@@ -21,7 +21,7 @@ describe('Banner', () => {
 
   it('should not render link if env var is not defined', async () => {
     // given
-    process.env.REACT_APP_EOP_BANNER_TEXT = "";
+    process.env.REACT_APP_EOP_BANNER_TEXT = '';
     render(<Banner />);
 
     // when

src/client/components/banner/banner.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import type { FC } from 'react';
 import './banner.css';
 
-
 const Banner: FC = () => {
   if (process.env.REACT_APP_EOP_BANNER_TEXT) {
     return (
-      <div className='banner'>{process.env.REACT_APP_EOP_BANNER_TEXT}</div>
-      );
+      <div className="banner">{process.env.REACT_APP_EOP_BANNER_TEXT}</div>
+    );
   }
   return null;
-}
+};
 
 export default Banner;

src/client/components/downloadbutton/downloadbutton.tsx

@@ -42,8 +42,7 @@ const DownloadButton: FC<DownloadButtonProps> = ({
     try {
       const res = await fetch(apiEndpointUrl, {
         headers: {
-          Authorization:
-            'Basic ' + btoa(playerID + ':' + secret),
+          Authorization: 'Basic ' + btoa(playerID + ':' + secret),
         },
       });
       if (!res.ok) {

src/client/components/footer/footer.tsx

@@ -7,7 +7,6 @@ import Imprint from './imprint';
 import './footer.css';
 import Privacy from './privacy';
 
-
 type FooterProps = {
   short?: boolean;
 };
@@ -24,15 +23,14 @@ const Footer: FC<FooterProps> = ({ short }) => (
           <FontAwesomeIcon icon={faHeart} style={{ color: '#00cc00' }} /> at
           Careem and{' '}
           <a href="https://www.tngtech.com/en/">TNG Technology Consulting</a> -
-          Elevation of Privilege was originally invented at Microsoft, Cornucopia
-          was developed at OWASP, Cumulus was started at{' '}
+          Elevation of Privilege was originally invented at Microsoft,
+          Cornucopia was developed at OWASP, Cumulus was started at{' '}
           <a href="https://www.tngtech.com/en/">TNG Technology Consulting</a>.
         </span>
-        <div className='footer-container'>
-        <Imprint />
-        <Privacy />
+        <div className="footer-container">
+          <Imprint />
+          <Privacy />
         </div>
-
       </>
     )}
   </small>

src/client/components/footer/imprint.test.tsx

@@ -5,7 +5,7 @@ import Imprint from './imprint';
 describe('Imprint', () => {
   it('should render link if env var is defined', async () => {
     // given
-    process.env.REACT_APP_EOP_IMPRINT = 'https://example.tld/imprint/'
+    process.env.REACT_APP_EOP_IMPRINT = 'https://example.tld/imprint/';
     render(<Imprint />);
 
     // when
@@ -17,7 +17,7 @@ describe('Imprint', () => {
 
   it('should not render link if env var is not defined', async () => {
     // given
-    process.env.REACT_APP_EOP_IMPRINT = "";
+    process.env.REACT_APP_EOP_IMPRINT = '';
     render(<Imprint />);
 
     // when

src/client/components/footer/imprint.tsx

@@ -3,12 +3,9 @@ import type { FC } from 'react';
 
 const Imprint: FC = () => {
   if (process.env.REACT_APP_EOP_IMPRINT) {
-    return (
-      <a href={process.env.REACT_APP_EOP_IMPRINT}>Imprint</a>
-    );
+    return <a href={process.env.REACT_APP_EOP_IMPRINT}>Imprint</a>;
   }
   return null;
-
-}
+};
 
 export default Imprint;

src/client/components/footer/privacy.test.tsx

@@ -5,7 +5,7 @@ import Privacy from './privacy';
 describe('Privacy', () => {
   it('should render link if env var is defined', async () => {
     // given
-    process.env.REACT_APP_EOP_PRIVACY = 'https://example.tld/privacy/'
+    process.env.REACT_APP_EOP_PRIVACY = 'https://example.tld/privacy/';
     render(<Privacy />);
 
     // when
@@ -17,7 +17,7 @@ describe('Privacy', () => {
 
   it('should not render link if env var is not defined', async () => {
     // given
-    process.env.REACT_APP_EOP_PRIVACY = "";
+    process.env.REACT_APP_EOP_PRIVACY = '';
     render(<Privacy />);
 
     // when

src/client/components/footer/privacy.tsx

@@ -3,11 +3,9 @@ import type { FC } from 'react';
 
 const Privacy: FC = () => {
   if (process.env.REACT_APP_EOP_PRIVACY) {
-    return (
-      <a href={process.env.REACT_APP_EOP_PRIVACY}>Privacy</a>
-    );
-    }
-    return null;
-}
+    return <a href={process.env.REACT_APP_EOP_PRIVACY}>Privacy</a>;
+  }
+  return null;
+};
 
 export default Privacy;

src/client/components/imagemodel/imagemodel.tsx

@@ -26,9 +26,7 @@ const ImageModel: FC<ImageModelProps> = ({
   const updateImage = useCallback(async () => {
     const res = await fetch(`${apiBase}/game/${matchID}/image`, {
       headers: {
-        Authorization:
-          'Basic ' +
-          btoa(playerID + ':' + credentials),
+        Authorization: 'Basic ' + btoa(playerID + ':' + credentials),
       },
     });
     if (!res.ok) {

src/client/components/license/licenseAttribution.tsx

@@ -43,7 +43,8 @@ const LicenseAttribution: React.FC<LicenseAttributionProps> = ({
     case GameMode.CUMULUS:
       return (
         <div className="license-attribution">
-          The card game <a href="https://owasp.org/www-project-cumulus/">OWASP Cumulus</a> by{' '}
+          The card game{' '}
+          <a href="https://owasp.org/www-project-cumulus/">OWASP Cumulus</a> by{' '}
           <a href="https://www.tngtech.com/en/index.html">
             TNG Technology Consulting
           </a>{' '}

src/client/components/timer/timer.tsx

@@ -53,7 +53,7 @@ const Timer: FC<TimerProps> = ({ active = true, duration, targetTime }) => {
         colorsTime={[0.625, 0.25, 0.125]}
         onComplete={() => ({
           shouldRepeat: false,
-          newInitialRemainingTime: 0 
+          newInitialRemainingTime: 0,
         })}
       >
         {renderTime}