Feature/bsm upgrade packages

apps/app/components/molecules/SearchModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ParsedContent } from "../../../../node_modules/@nuxt/content/dist/runtime/types";
+import { useDebounceFn } from "@vueuse/core";
 
 import { useMagicKeys } from "@vueuse/core";
 const { escape } = useMagicKeys();
@@ -23,7 +24,7 @@ function resetNavigatedIndex() {
 }
 
 const searchModalStore = useSearchModalStore();
-
+const loading = ref(false);
 const search = ref(null);
 
 const { data: coursesAndCategories } = await useAsyncData(
@@ -62,6 +63,11 @@ function resetSearch() {
   });
 }
 
+const searchDebounce = useDebounceFn(() => {
+  searchContent();
+  loading.value = false;
+}, 1000);
+
 async function searchContent() {
   resetNavigatedIndex();
   if (String(search.value).length <= 0) {
@@ -130,11 +136,18 @@ watch(searchModalStore, async (newValue) => {
             ref="searchInput"
             type="search"
             v-model="search"
-            @input="searchContent"
+            @input="
+              loading = true;
+              searchDebounce();
+            "
             autocomplete="off"
             placeholder="Pesquise aulas ou escreva um comando..."
             class="mb-3 block w-full pt-2 text-base font-medium text-zinc-950 !outline-none placeholder:text-zinc-500"
           />
+          <MSpinner
+            v-if="loading"
+            class="absolute top-[24px] right-[24px] w-[14px] h-[14px] border-zinc-400"
+          />
           <div class="flex items-center text-sm">
             <div class="flex flex-1 items-center gap-2 text-zinc-700">
               <Command icon="arrow-up" />

apps/app/components/molecules/TopBar.vue

@@ -3,11 +3,6 @@ const router = useRouter();
 const sessionStore = useSessionStore();
 const userStore = useUserStore();
 const defaultAsideStore = useDefaultAsideStore();
-
-function signOut() {
-  sessionStore.signOut();
-  router.push("/sign-in");
-}
 </script>
 
 <template>
@@ -58,11 +53,9 @@ function signOut() {
               <NuxtLink to="/profile">
                 <DropdownItem icon="circle-user" name="Perfil" />
               </NuxtLink>
-              <DropdownItem
-                icon="arrow-right-from-bracket"
-                name="Sair"
-                @click="signOut"
-              />
+              <NuxtLink to="/sign-out">
+                <DropdownItem icon="arrow-right-from-bracket" name="Sair" />
+              </NuxtLink>
             </div>
           </template>
         </VDropdown>

apps/app/components/organisms/DefaultAside.vue

@@ -7,7 +7,7 @@ const queryBuilder = computed(() => {
   return queryContent(`/${route.params?.slug ? route.params.slug[0] : ""}`);
 });
 
-const { data: navigation } = await useAsyncData(
+const { data: navigation, refresh } = await useAsyncData(
   route.params?.slug ? route.params.slug[0] : "navigation",
   () => fetchContentNavigation(queryBuilder.value),
   {
@@ -18,6 +18,10 @@ const { data: navigation } = await useAsyncData(
 const isLesson = computed(() => {
   return !!route.meta?.lesson;
 });
+
+watch(isLesson, async () => {
+  refresh();
+});
 </script>
 
 <template>

apps/app/composables/useCookieFetch.ts

@@ -0,0 +1,10 @@
+import { appendResponseHeader, H3Event } from "h3";
+
+export const useCookieFetch = async (event: H3Event, url: string) => {
+  const res = await $fetch.raw(url);
+  const cookies = (res.headers.get("set-cookie") || "").split(",");
+  for (const cookie of cookies) {
+    appendResponseHeader(event, "set-cookie", cookie);
+  }
+  return res._data;
+};

apps/app/layouts/default.vue

@@ -2,6 +2,7 @@
 const userStore = useUserStore();
 const sessionStore = useSessionStore();
 const defaultAsideStore = useDefaultAsideStore();
+sessionStore.refreshSession();
 
 const content = ref();
 

apps/app/middleware/session.global.ts

@@ -1,15 +1,15 @@
 export default defineNuxtRouteMiddleware(async (to) => {
-  if (to.query.oauth) return;
-
-  const sessionStore = useSessionStore();
   const userStore = useUserStore();
+  const serverUser = useCookie("m-user");
 
-  const userCookie: Ref<typeof userStore.user> = useCookie("m-user");
-  if (userCookie.value) {
-    userStore.user = userCookie.value;
+  if (serverUser) {
+    userStore.user = serverUser.value as typeof userStore.user;
   }
 
-  const serverHasSession = userCookie.value || sessionStore.hasSession();
+  if (to.query.oauth) return;
+
+  const sessionStore = useSessionStore();
+  const serverHasSession = !!serverUser.value || sessionStore.hasSession();
 
   if (["profile"].includes(String(to.name)) && !serverHasSession) {
     return navigateTo("/sign-in");

apps/app/modules/eslint-globals.ts

@@ -59,7 +59,7 @@ const autoImportEslint = defineNuxtModule({
         getContents,
         write: true,
       });
-      console.log(`globals file is generated at ${fullPath}`);
+      // console.log(`globals file is generated at ${fullPath}`);
     });
   },
 });

apps/app/nuxt.config.ts

@@ -97,7 +97,6 @@ export default defineNuxtConfig({
     "nuxt-schema-org",
     "@nuxtjs/fontaine",
     "@nuxt/content",
-    "@vueuse/nuxt",
     "@pinia/nuxt",
   ],
   vite: {

apps/app/package.json

@@ -10,10 +10,10 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.7.2",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxtjs/fontaine": "^0.2.5",
     "@types/node": "^20.4.6",
-    "nuxt": "3.5.3",
+    "nuxt": "^3.7.3",
     "nuxt-schema-org": "^2.1.3",
     "typescript": "^5.1.6"
   },
@@ -27,14 +27,15 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@nuxt/image-edge": "1.0.0-rc.2-28246613.7d120ca",
     "@pinia/nuxt": "^0.4.11",
-    "@vueuse/nuxt": "^10.3.0",
+    "@vueuse/core": "^10.3.0",
+    "@vueuse/integrations": "^10.3.0",
     "eslint-config-custom": "workspace:*",
     "floating-vue": "2.0.0-beta.24",
     "nuxt-simple-sitemap": "^3.1.4",
     "nuxt-umami": "^2.5.2",
     "pinia": "^2.1.6",
     "splitpanes": "^3.1.5",
     "tailwind-config": "workspace:*",
-    "unstorage": "^1.8.0"
+    "universal-cookie": "^4.0.4"
   }
 }

apps/app/pages/[...slug].vue

@@ -79,7 +79,10 @@ onMounted(async () => {
     />
     <TaskModal :current-lesson="currentLesson" @next="redirectToNextLesson" />
 
-    <div class="mb-10 flex flex-wrap items-center gap-6 px-6 sm:px-8">
+    <div
+      v-if="currentCourse"
+      class="mb-10 flex flex-wrap items-center gap-6 px-6 sm:px-8"
+    >
       <div
         class="h-[160px] w-[160px] min-w-[160px] overflow-hidden rounded shadow-lg"
       >

apps/app/pages/code.vue

@@ -23,8 +23,9 @@ async function sendCode() {
     await signUpStore.attemptEmailAddressVerification({
       code: code.join(""),
     });
-    await sessionStore.refreshSession();
     userStore.setUser();
+    await sessionStore.refreshSession();
+
     router.push("/");
   } catch (e) {
     toast?.error("Código incorreto ou expirado.");

apps/app/pages/sign-in.vue

@@ -100,7 +100,7 @@ async function clerkOAuth({ strategy }: { strategy: string }) {
       />
       <MTextField
         class="mb-6"
-        label="Password"
+        label="Senha"
         type="password"
         v-model="password"
         :rules="['password']"

apps/app/pages/sign-up.vue

@@ -95,7 +95,7 @@ async function clerkOAuth(strategy) {
       />
       <MTextField
         class="mb-6"
-        label="Password"
+        label="Senha"
         type="password"
         v-model="password"
         :rules="['password']"

apps/app/stores/clerk/session.ts

@@ -1,4 +1,6 @@
 import { defineStore } from "pinia";
+import { useCookies } from "@vueuse/integrations/useCookies";
+import { ClerkAPIError } from "@clerk/types";
 
 export const useSessionStore = defineStore("session", {
   state: (): { token: string | null; cleared: boolean } => ({
@@ -23,13 +25,23 @@ export const useSessionStore = defineStore("session", {
     },
     async refreshSession() {
       const clientSession = this.$clerk?.client?.sessions[0];
-      await this.$clerk.setSession(clientSession);
+      if (!clientSession) return;
+      try {
+        await this.$clerk.setSession(clientSession);
+      } catch (e) {
+        const clerkError: { errors: ClerkAPIError[] } | any = e;
+        if (clerkError.errors[0].code === "authentication_invalid") {
+          this.$router.push("/sign-out");
+        }
+
+        throw new Error((e as Error).message);
+      }
     },
     async signOut() {
-      const clerkToken = useCookie("__session");
-      const userCookie = useCookie("m-user");
-      userCookie.value = null;
-      clerkToken.value = null;
+      const clerkToken = useCookies([]);
+      const userCookie = useCookies([]);
+      userCookie.remove("m-user");
+      clerkToken.remove("__session");
       this.cleared = true;
 
       await this.$clerk.signOut();

apps/app/stores/clerk/user.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import type { UpdateUserParams, SetProfileImageParams } from "@clerk/types";
+import { useCookies } from "@vueuse/integrations/useCookies";
 
 export type user = {
   profileImageUrl: string;
@@ -35,11 +36,12 @@ export const useUserStore = defineStore("user", {
       const userData = this.$clerk.user
         ? this.$clerk.user
         : this.$clerk.client.sessions[0]?.user;
+
       if (!userData) return;
 
       this.user = userData;
-      const userCookie = useCookie("m-user");
-      userCookie.value = userData;
+      const userCookie = useCookies([]);
+      userCookie.set("m-user", userData);
     },
     async updateUser() {
       await this.$clerk.user.update<UpdateUserParams>({

apps/www/package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "@nuxtjs/fontaine": "^0.2.5",
     "@types/node": "^20.4.6",
-    "nuxt": "^3.6.5",
+    "nuxt": "^3.7.3",
     "nuxt-schema-org": "^2.2.0",
     "nuxt-simple-robots": "^3.1.0",
     "nuxt-simple-sitemap": "^3.1.4",