Updating AppFetch, useAppFetch

Fixing various eslint errors

Author: Benoit Ngo

apps/back/src/Controller/HealthCheckController.php

@@ -13,13 +13,13 @@ class HealthCheckController
     #[Route('/healthcheck', name: 'app_health_check')]
     public function index(): JsonResponse
     {
-        return new JsonResponse(['success' => true]);
+        return new JsonResponse(['success' => 'ok']);
     }
 
     #[Route('/healthcheck/logged', name: 'app_health_check_logged')]
     #[IsGranted('IS_AUTHENTICATED_FULLY')]
     public function logged(): JsonResponse
     {
-        return new JsonResponse(['success' => true]);
+        return new JsonResponse(['success' => 'ok']);
     }
 }

apps/back/src/Entity/User.php

@@ -100,6 +100,7 @@ public function jsonSerialize(): mixed
     {
         return [
             'email' => $this->getEmail(),
+            'username' => $this->getUsername(),
         ];
     }
 }

apps/front/.eslintrc.cjs

@@ -2,13 +2,10 @@ require("@rushstack/eslint-patch/modern-module-resolution")
 module.exports = {
     root: true,
     extends: [
-        "plugin:vue/vue3-recommended",
-        "@nuxtjs/eslint-config-typescript",
-        "@vue/eslint-config-airbnb-with-typescript"
+        "@nuxt/eslint-config",
+     //   "plugin:vue/vue3-recommended"
     ],
     rules: {
-        'semi': ["error", "always"],
-        'comma-dangle': "off", // covered by eslint-config-airbnb-with-typescript
-        'space-before-function-paren': "off" // covered by eslint-config-airbnb-with-typescript
+        'semi': ["error", "always"]
     }
 };

apps/front/nuxt.config.ts

@@ -2,10 +2,10 @@
 export default defineNuxtConfig({
   srcDir: 'src/',
   modules: [
-    '@pinia/nuxt',
+    '@pinia/nuxt'
   ],
   runtimeConfig: {
-    API_URL: process.env.API_URL || '',
+    API_URL: process.env.API_URL || ''
   },
   app: {
 
@@ -17,21 +17,21 @@ export default defineNuxtConfig({
       meta: [
         // <meta name="description" content="My amazing site">
         //  { name: 'description', content: 'My amazing site.' }
-      ],
-    },
+      ]
+    }
   },
   css: [
-    '@/assets/styles/main.scss',
+    '@/assets/styles/main.scss'
   ],
   vite: {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@import "@/assets/styles/_functions.scss";@import "@/assets/styles/_variables.scss";@import "@/assets/styles/_mixins.scss";',
-        },
-      },
-    },
-  },
+          additionalData: '@import "@/assets/styles/_functions.scss";@import "@/assets/styles/_variables.scss";@import "@/assets/styles/_mixins.scss";'
+        }
+      }
+    }
+  }
   // ssr: false
 
 });

apps/front/package.json

@@ -6,7 +6,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "lint": "eslint nuxt.config.ts --fix ; eslint ./src/"
+    "lint": "eslint nuxt.config.ts --fix ; nuxi typecheck ; eslint ./src/"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
@@ -15,15 +15,15 @@
     "@types/http-proxy": "^1.17.11",
     "@types/lodash": "^4.14.195",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@vue/eslint-config-prettier": "^7.1.0",
     "eslint": "^8.41.0",
-    "eslint-plugin-vue": "^9.14.1",
     "pino-pretty": "^10.0.0",
     "typescript": "^5.0.4",
     "vue-tsc": "^1.6.5"
   },
   "dependencies": {
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "bootstrap": "^5.2.3",
+    "defu": "^6.1.2",
     "h3": "^1.6.6",
     "nitropack": "^2.4.1",
     "nuxt": "3.5.1",

apps/front/src/components/layout/menu/AppMenu.vue

@@ -2,7 +2,10 @@
   <div
     class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top"
   >
-    <NuxtLink to="/" class="d-block p-3 link-dark text-decoration-none">
+    <NuxtLink
+      to="/"
+      class="d-block p-3 link-dark text-decoration-none"
+    >
       <icons1-square-fill />
     </NuxtLink>
     <ul

apps/front/src/components/layout/menu/MenuItem.vue

@@ -1,6 +1,9 @@
 <template>
   <li class="nav-item">
-    <NuxtLink v-bind="$attrs" class="nav-link py-3 px-2">
+    <NuxtLink
+      v-bind="$attrs"
+      class="nav-link py-3 px-2"
+    >
       <slot />
     </NuxtLink>
   </li>

apps/front/src/composables/api/auth/useLogin.ts

@@ -1,14 +1,14 @@
 import { Me } from './useMe';
 
-export default function useLogin(): (email: string, password: string | undefined) => Promise<Me> {
+export default function useLogin (): (email: string, password: string | undefined) => Promise<Me> {
   const { $appFetch } = useNuxtApp();
   return async (email: string, password: string | undefined) => {
     const response = await $appFetch<Me>('/api/1.0/auth/sso/saml2/login', {
       method: 'post',
       body: {
         username: email,
-        password,
-      },
+        password
+      }
     });
     if (!response) {
       throw createError('/api/1.0/auth/sso/saml2/login has an empty body, the profile (me) should be returned');

apps/front/src/composables/api/auth/useMe.ts

@@ -2,7 +2,7 @@ export interface Me {
   username: string;
 }
 
-export default function useMe(): () => Promise<Me> {
+export default function useMe (): () => Promise<Me> {
   const { $appFetch } = useNuxtApp();
   return async () => {
     const res = await $appFetch<Me>('/api/1.0/auth/me');

apps/front/src/composables/api/healthCheck/useHealthCheckFetch.ts

@@ -0,0 +1,12 @@
+import { FetchError } from 'ofetch';
+import { AsyncData } from '#app';
+import useAppFetch from '~/composables/useAppFetch';
+
+interface LoggedHealthCheckResponse {
+  success: string
+}
+export function useHealthCheckFetch (): AsyncData<LoggedHealthCheckResponse | null, FetchError | null> {
+  return useAppFetch<LoggedHealthCheckResponse>(
+    () => '/api/1.0/healthcheck/logged'
+  );
+}