Merge pull request #9 from menthorlabs/feature/BSM-upgrade-packages

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",