Merge pull request #156 from Front-End-Coders-Mauritius/various-updates

eslint fixes

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-  "editor.formatOnSave": true
-}
+  "eslint.useFlatConfig": true,
+  "editor.formatOnSave": true,
+  "eslint.codeActionsOnSave.mode": "all"
+}

packages/frontendmu-nuxt/app.vue

@@ -2,4 +2,4 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
-</template> 
+</template>

packages/frontendmu-nuxt/auth-utils/useAuth.ts

@@ -1,21 +1,21 @@
 import { ref, computed, type Ref } from "vue";
 import { getCookieValue, DIRECTUS_URL, mapToValidUser, base64Url } from '@/utils/helpers';
-import { createDirectus, rest, readMe, staticToken, authentication, updateItem, createItem, updateMe, readItems } from '@directus/sdk';
+import { createDirectus, rest, readMe, staticToken, authentication, updateItem, updateMe, readItems } from '@directus/sdk';
 
 import type { Attendee, RSVPMetaData, RSVPResponse, SiteToast, User } from "../utils/types";
 import type { DirectusAstroUser } from './../utils/types';
-import type { AuthenticationData, DirectusClient, AuthenticationClient, RestClient, DirectusUser } from '@directus/sdk';
+import type { AuthenticationData, DirectusClient, AuthenticationClient, RestClient } from '@directus/sdk';
 
 const DIRECTUS_PROJECT_URL = DIRECTUS_URL()
 
-let isAuth = ref(false);
-let user = ref<User | null>(null);
-let rawUser = ref<DirectusAstroUser | null>(null);
-let responseFromServer = ref<any>(null);
-let isLoading = ref(false);
-let meetupAttendees: Ref<Record<string, Attendee[]>> = ref({});
+const isAuth = ref(false);
+const user = ref<User | null>(null);
+const rawUser = ref<DirectusAstroUser | null>(null);
+const responseFromServer = ref<any>(null);
+const isLoading = ref(false);
+const meetupAttendees: Ref<Record<string, Attendee[]>> = ref({});
 
-let toastMessage = ref<SiteToast>({
+const toastMessage = ref<SiteToast>({
     title: undefined,
     message: undefined,
     type: undefined,
@@ -128,7 +128,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
             await getCurrentUser()
             setAuth(true)
             if (!rawUser.value?.profile_picture) {
-                let picture = await cloudFunctionUpdateProfilePicture(rawUser.value?.id || '')
+                const picture = await cloudFunctionUpdateProfilePicture(rawUser.value?.id || '')
                 console.log(picture)
             }
 
@@ -261,7 +261,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
 
     async function createRsvp({ eventId, userId }: { eventId: string, userId: string }) {
 
-        let payload = {
+        const payload = {
             "Events": {
                 "create": [{ "directus_users_id": userId, "Events_id": { "id": eventId } }],
                 "update": [],
@@ -306,10 +306,10 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
 
             client = await client.with(staticToken(token))
 
-            let eventIds = currentEventsRSVP.value.map(event => event.Events_id);
-            let updatedEvents = currentEventsRSVP.value.filter(event => event.Events_id !== currentEventId);
+            const eventIds = currentEventsRSVP.value.map(event => event.Events_id);
+            const updatedEvents = currentEventsRSVP.value.filter(event => event.Events_id !== currentEventId);
 
-            let data = { Events: updatedEvents }
+            const data = { Events: updatedEvents }
 
             if (eventIds.includes(currentEventId)) {
                 const confirmNotAttending = confirm('You are already attending this event! Do you want to remove yourself from the list?');
@@ -362,7 +362,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
                 ]
             }
 
-            // @ts-expect-error
+            // @ts-expect-error Becauseitems is not typed
             const result = await client.request<RSVPResponse[]>(readItems('Events_directus_users', query_object));
             return result
 
@@ -394,7 +394,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
                 }
             }
 
-            // @ts-expect-error
+            // @ts-expect-error Becauseitems is not typed
             const primaryKeyQuery = await client.request(readItems('Events_directus_users', query_object));
 
             const updates = {
@@ -469,9 +469,9 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
         }
 
         try {
-            // @ts-expect-error
+            // @ts-expect-error Becauseitems is not typed
             const result = await client.request<Attendee[]>(readItems('Events_directus_users', query_object));
-            let attendees = filterAttendees(result);
+            const attendees = filterAttendees(result);
             meetupAttendees.value[currentEventId] = attendees
             return attendees
         } catch (err) {
@@ -481,7 +481,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
 
     }
 
-    async function updateUserVerification({ user_id, event_id, status }: { user_id: string, event_id: string, status: Boolean }) {
+    async function updateUserVerification({ user_id, event_id, status }: { user_id: string, event_id: string, status: boolean }) {
         try {
             isLoading.value = true;
             const token = getCookieValue('access_token')
@@ -504,7 +504,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
                 }
             }
 
-            // @ts-expect-error
+            // @ts-expect-error Becauseitems is not typed
             const primaryKeyQuery = await client.request(readItems('Events_directus_users', query_object));
 
             const updates = {

packages/frontendmu-nuxt/auth-utils/useAuthRedirect.ts

@@ -8,7 +8,7 @@ export default function useAuthRedirect() {
     });
 
     function setUrl() {
-        let url = window.location.href;
+        const url = window.location.href;
         // Store in session storage
         sessionStorage.setItem('redirectUrl', url);
     }
@@ -23,9 +23,9 @@ export default function useAuthRedirect() {
                 window.location.href = redirectUrl;
             } , duration.value);     
 
-            let intervalDelay = 10;
+            const intervalDelay = 10;
             // start the countdown such that the progress bar is updated every 100ms and and the countdown reaches 0 in duration ms
-            let interval = setInterval(() => {
+            const interval = setInterval(() => {
                 countdown.value -= intervalDelay;
                 if (countdown.value <= 0) {
                     clearInterval(interval);

packages/frontendmu-nuxt/components/OgImage/Speaker.vue

@@ -160,7 +160,7 @@ withDefaults(defineProps<{
               style="
                 border-radius: 50%;
               "
-            />
+            >
           </div>
           <div
             style="

packages/frontendmu-nuxt/components/auth/AttendeeQRCode.vue

@@ -48,6 +48,6 @@ async function getCoordinates() {
 <template>
   <div class=" bg-white rounded-lg shadow-lg p-4 z-[1000] relative w-full flex justify-center">
     <img class="w-full aspect-square object-contain max-w-4xl"
-      :src="`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${infoJsonString}`" alt="QR Code" />
+      :src="`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${infoJsonString}`" alt="QR Code">
   </div>
 </template>

packages/frontendmu-nuxt/components/auth/FormLabel.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
 <template>
     <div class="flex flex-col md:flex-row gap-1 md:gap-4">
         <label :class="[labelClass]">{{ props.label }}</label>
-        <input v-if="props.value" type="text" v-model="props.value" class="bg-transparent" :disabled="disabled" />
+        <input v-if="props.value" v-model="props.value" type="text" class="bg-transparent" :disabled="disabled" >
 
         <slot />
     </div>

packages/frontendmu-nuxt/components/auth/FormRadio.vue

@@ -16,9 +16,11 @@ defineProps<{
 </script>
 
 <template>
-  <RadioGroupOption as="template" v-for="option in options" :key="option.name" :disabled="disabled"
-    :value="returnValueOnly ? option.value : option" v-slot="{ active, checked }">
-    <div :class="[
+  <RadioGroupOption
+v-for="option in options" :key="option.name" v-slot="{ active, checked }" as="template"
+    :disabled="disabled" :value="returnValueOnly ? option.value : option">
+    <div
+:class="[
     active ? '' : '',
     checked
       ? 'transition-all duration-100 ring-slate-800 bg-white dark:ring-white dark:text-black ring-2  dark:hover:bg-slate-100'
@@ -30,7 +32,8 @@ defineProps<{
   ]">
       <RadioGroupLabel as="div" class="select-none text-center w-full">
         <Transition name="slide">
-          <Icon name="material-symbols:check-circle" v-if="checked"
+          <Icon
+v-if="checked" name="material-symbols:check-circle"
             class="bg-slate-800 dark:bg-white absolute -right-3 top-1/2 -translate-y-1/2 rounded-full w-5 h-5 text-green-600" />
         </Transition>
 

packages/frontendmu-nuxt/components/auth/LoggedUser.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import useAuth, { getClient } from '../../auth-utils/useAuth';
-const { user, logout, isLoggedIn, getCurrentUser, responseFromServer, checkIfLoggedIn, avatarUrl } = useAuth(getClient());
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ChevronDownIcon } from '@heroicons/vue/20/solid'
 import useAuthRedirect from '@/auth-utils/useAuthRedirect';
+const { user, logout, isLoggedIn, getCurrentUser, responseFromServer, checkIfLoggedIn, avatarUrl } = useAuth(getClient());
 
 const { setUrl } = useAuthRedirect()
 
@@ -17,11 +17,13 @@ onMounted(() => {
 <template>
   <div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
 
-    <BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium hidden md:block"
+    <BaseButton
+v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium hidden md:block"
       @click="setUrl()">
       Log In
     </BaseButton>
-    <BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium block md:hidden" size="sm"
+    <BaseButton
+v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium block md:hidden" size="sm"
       @click="setUrl()">
       Log In
     </BaseButton>
@@ -37,22 +39,25 @@ onMounted(() => {
           </MenuButton>
         </div>
 
-        <transition enter-active-class="transition ease-out duration-100"
+        <transition
+enter-active-class="transition ease-out duration-100"
           enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100"
           leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100"
           leave-to-class="transform opacity-0 scale-95">
           <MenuItems
             class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100/10 rounded-md bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
               <MenuItem v-slot="{ active }">
-              <NuxtLink href="/user/me"
+              <NuxtLink
+href="/user/me"
                 :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100', 'block px-4 py-2 text-sm']">
                 My
                 Profile</NuxtLink>
               </MenuItem>
               <MenuItem v-slot="{ active }">
-              <NuxtLink @click="logout()"
-                :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100', 'block px-4 py-2 text-sm cursor-pointer']">
+              <NuxtLink
+:class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100', 'block px-4 py-2 text-sm cursor-pointer']"
+                @click="logout()">
                 Logout</NuxtLink>
               </MenuItem>
             </div>

packages/frontendmu-nuxt/components/auth/LoginForm.vue

@@ -41,7 +41,7 @@ const developmentEnvironment = process.env.NODE_ENV === "development";
                     </div>
 
                     <div class="grid grid-cols-2 gap-4 w-full justify-evenly">
-                        <BaseButton @click="logout" color="neutral">
+                        <BaseButton color="neutral" @click="logout">
                             Logout
                         </BaseButton>
                         <BaseButton href="/user/me">
@@ -51,24 +51,28 @@ const developmentEnvironment = process.env.NODE_ENV === "development";
                 </div>
             </div>
             <div v-else>
-                <form class="space-y-6" @submit.prevent="login()" v-if="developmentEnvironment">
+                <form v-if="developmentEnvironment" class="space-y-6" @submit.prevent="login()">
                     <div>
-                        <label for="email"
+                        <label
+for="email"
                             class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">Email
                             address</label>
                         <div class="mt-2">
-                            <input v-model="email" id="email" name="email" type="email" autocomplete="email" required
-                                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6" />
+                            <input
+id="email" v-model="email" name="email" type="email" autocomplete="email" required
+                                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6" >
                         </div>
                     </div>
 
                     <div>
-                        <label for="password"
+                        <label
+for="password"
                             class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">Password</label>
                         <div class="mt-2">
-                            <input v-model="password" id="password" name="password" type="password"
+                            <input
+id="password" v-model="password" name="password" type="password"
                                 autocomplete="current-password" required
-                                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6" />
+                                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6" >
                         </div>
                     </div>
 
@@ -85,7 +89,8 @@ const developmentEnvironment = process.env.NODE_ENV === "development";
                     </div> -->
 
                     <div>
-                        <button type="submit"
+                        <button
+type="submit"
                             class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600">Sign
                             in</button>
                     </div>
@@ -103,16 +108,19 @@ const developmentEnvironment = process.env.NODE_ENV === "development";
                     </div>
 
                     <div class="mt-10 grid sm:grid-cols-2 gap-4">
-                        <a :href="oAuthLogin()"
+                        <a
+:href="oAuthLogin()"
                             class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]">
                             <Icon name="logos:google-icon" class="h-5 w-5" />
                             <span class="text-sm font-semibold leading-6">Google</span>
                         </a>
 
-                        <a href="#" disabled
+                        <a
+href="#" disabled
                             class="opacity-60 cursor-not-allowed flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]">
                             <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd"
+                                <path
+fill-rule="evenodd"
                                     d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
                                     clip-rule="evenodd" />
                             </svg>
@@ -122,9 +130,9 @@ const developmentEnvironment = process.env.NODE_ENV === "development";
                 </div>
             </div>
 
-            <div class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
-                :style="{ height: countDownPercentage }">
-            </div>
+            <div
+class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
+                :style="{ height: countDownPercentage }"/>
         </div>
     </div>
 </template>