chore: 🔖 release new app version

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["superjson", "trpc", "TRPC"]
+  "cSpell.words": ["healthcheck", "Healthcheck", "superjson", "trpc", "TRPC"]
 }

src/contexts/create-new-deck/create-new-deck.context.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -149,6 +149,13 @@ export function CreateNewDeckContextProvider(
     },
   )
 
+  /**
+   * Healthcheck to wake up the generate flash cards API
+   */
+  useEffect(() => {
+    fetch(`${env.NEXT_PUBLIC_BRISKLY_GENERATE_FLASH_CARDS_API_URL}/healthcheck`)
+  }, [])
+
   const addTopic = (topic: string) => {
     setTopics(topics => [
       ...topics.filter(({ title }) => title !== topic),

src/modules/decks/components/study-session-card.component.tsx

@@ -26,12 +26,14 @@ export const StudySessionCard = (props: { deckId: string }) => {
   const createStudySessionMutation = api.studySession.create.useMutation({
     onSuccess: () => {
       apiContext.decks.toBeReviewed.invalidate()
+      apiContext.decks.withStudySession.invalidate()
       apiContext.studySession.getStudySessionBasicInfo.invalidate({ deckId })
     },
   })
   const deleteStudySessionMutation = api.studySession.delete.useMutation({
     onSuccess: () => {
       apiContext.decks.toBeReviewed.invalidate()
+      apiContext.decks.withStudySession.invalidate()
       apiContext.studySession.getStudySessionBasicInfo.invalidate({ deckId })
       notify.success('Sessão de estudo deletada com sucesso!')
     },

src/modules/decks/create/components/cards.component.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { PlusCircleIcon } from '@heroicons/react/24/outline'
 
@@ -14,6 +14,33 @@ type NewCardModalState = {
   cardIdx?: number
 }
 
+const loadingSteps = [
+  'Coletando informações',
+  'Analisando o contexto',
+  'Gerando os cards',
+]
+
+const CYCLE_INTERVAL = 3000
+
+export const AiPoweredFlashCardsLoader = () => {
+  const [currentLoadingStep, setCurrentLoadingStep] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentLoadingStep(state => (state + 1) % loadingSteps.length)
+    }, CYCLE_INTERVAL)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className='flex flex-col items-center justify-center gap-3'>
+      <Loader />
+      <p>{loadingSteps[currentLoadingStep]}</p>
+    </div>
+  )
+}
+
 export const Cards = () => {
   const {
     cards,
@@ -52,7 +79,7 @@ export const Cards = () => {
 
   const renderAiCardsButton = () => {
     const successContent = isGeneratingAiPoweredCards ? (
-      <Loader />
+      <AiPoweredFlashCardsLoader />
     ) : (
       <span className='text-4xl'>🤖</span>
     )
@@ -67,9 +94,7 @@ export const Cards = () => {
       <Card onClick={generateAiPoweredCards}>
         {hasErrorGeneratingAiPoweredCards ? errorContent : successContent}
         <div className='absolute right-0 top-0 p-3'>
-          <Tooltip
-            hint={`Além de criar seus próprios Flashcards manualmente você pode deixar que a nossa Inteligência Artificial os gere para você se baseando nos tópicos e título previamente cadastrados acima. Caso ocorra um erro ao gerar os Cards, você pode apenas tentar novamente!`}
-          />
+          <Tooltip hint='Além de criar seus próprios Flashcards manualmente você pode deixar que a nossa Inteligência Artificial os gere para você se baseando nos tópicos e título previamente cadastrados acima.' />
         </div>
       </Card>
     )

src/modules/profile/components/decks-with-study-session.component.tsx

@@ -0,0 +1,22 @@
+import { DeckCardList } from '~/components/deck-card-list'
+import { api } from '~/utils/api'
+
+type UserDecksProps = {
+  userId: string
+  isVisible: boolean
+}
+
+export function DecksWithStudySession(props: UserDecksProps) {
+  const { isVisible } = props
+
+  const { data, isLoading, isError, refetch } =
+    api.decks.withStudySession.useQuery(undefined, { enabled: isVisible })
+
+  if (isLoading) return <DeckCardList.Loading />
+
+  if (isError) {
+    return <DeckCardList.Error onRetryPress={refetch} />
+  }
+
+  return <DeckCardList decks={data} />
+}

src/modules/profile/constants/profile-menu-tabs.tsx

@@ -15,12 +15,23 @@ const UserFavoriteDecks = dynamic(() =>
   ),
 )
 
+const DecksWithStudySession = dynamic(() =>
+  import('../components/decks-with-study-session.component').then(
+    module => module.DecksWithStudySession,
+  ),
+)
+
 export const profileMenuTabs = [
   {
     name: 'Decks',
     content: UserDecks,
     isProfileOwnerOnly: false,
   },
+  {
+    name: 'Meus Estudos',
+    content: DecksWithStudySession,
+    isProfileOwnerOnly: true,
+  },
   {
     name: 'Para Revisar',
     content: DecksToBeReviewed,

src/pages/profile/[id].tsx

@@ -111,13 +111,13 @@ const ProfilePage: WithAuthentication<
 
         <section className='flex flex-col md:flex-[8]'>
           <Tab.Group>
-            <Tab.List className='flex space-x-1 p-1'>
+            <Tab.List className='flex space-x-1 overflow-x-auto p-1'>
               {tabs.map(tab => (
                 <Tab
                   key={tab.name}
                   className={({ selected }) =>
                     classNames(
-                      'border-b-2 py-2 px-5 text-base font-medium leading-5 text-primary-900 ring-primary-50 ring-opacity-60 ring-offset-2 ring-offset-primary-500 focus:outline-none focus:ring-2',
+                      'min-w-max border-b-2 py-2 px-5 text-base font-medium leading-5 text-primary-900 ring-primary-50 ring-opacity-60 ring-offset-2 ring-offset-primary-500 focus:outline-none focus:ring-2',
                       selected ? 'border-primary-900' : 'border-primary-50',
                     )
                   }

src/server/api/routers/decks/decks.router.ts

@@ -191,6 +191,32 @@ export const decksRouter = createTRPCRouter({
         nextCursor,
       }
     }),
+  withStudySession: protectedProcedure.query(async ({ ctx }) => {
+    const { user } = ctx.session
+
+    const decks = await ctx.prisma.deck.findMany({
+      where: {
+        studySessions: {
+          some: {
+            userId: user.id,
+          },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+      include: {
+        favorites: true,
+      },
+    })
+
+    return decks.map(deck => ({
+      ...deck,
+      image: getS3ImageUrl(deck.image),
+      favorites: deck.favorites.length,
+      isFavorite: deck.favorites
+        .map(favorite => favorite.userId)
+        .includes(user.id),
+    }))
+  }),
   byUser: protectedProcedure
     .input(z.object({ userId: z.string() }))
     .query(async ({ input: { userId }, ctx }) => {
@@ -218,6 +244,7 @@ export const decksRouter = createTRPCRouter({
           .includes(signedInUser.id),
       }))
     }),
+
   addFavorite: protectedProcedure
     .input(z.object({ deckId: z.string() }))
     .mutation(async ({ input: { deckId }, ctx }) => {