chore: 🔖 release new app version

chore: 🔖 release new app version

README.md

@@ -1,3 +1,2 @@
 # Briskly
 
-- Melhorar a UX do fluxo de revisão de um deck

prisma/migrations/20230207235800_add_next_review_field_to_study_session_box/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `nextReview` to the `StudySessionBox` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "StudySessionBox" ADD COLUMN     "nextReview" TIMESTAMP(3) NOT NULL;

prisma/schema.prisma

@@ -114,6 +114,7 @@ model StudySessionBox {
   studySession         StudySession          @relation(fields: [studySessionId], references: [id], onDelete: Cascade)
   lastReview           DateTime?
   reviewGapInHours     Int
+  nextReview           DateTime
   studySessionBoxCards StudySessionBoxCard[]
 }
 

src/components/deck-card-list/deck-card-list.component.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 
+import { Feedback } from '~/components/feedback'
 import { Image } from '~/components/image'
 import { routes } from '~/utils/navigation'
 
@@ -8,6 +9,15 @@ import { Error } from './error.component'
 import { Loading } from './loading.component'
 
 export function DeckCardList({ decks }: DeckCardListProps) {
+  if (decks.length === 0 || true)
+    return (
+      <Feedback
+        shouldHideButton
+        title='Opsss,'
+        subtitle='parece que nenhum deck foi encontrado no momento. Por favor, volte mais tarde!'
+      />
+    )
+
   return (
     <div className='flex-w grid grid-cols-1 gap-5 sm:grid-cols-2'>
       {decks.map((deck, idx) => (

src/components/deck-card-list/error.component.tsx

@@ -1,18 +1,16 @@
-import { Button } from '../button'
+import { Feedback } from '~/components/feedback'
+
 import type { ErrorProps } from './deck-card-list.types'
 
 export function Error(props: ErrorProps) {
   const { onRetryPress } = props
 
   return (
-    <div className='m-auto flex max-w-xl flex-col items-center gap-10 p-10 sm:p-20'>
-      <h2 className='text-center text-xl text-primary-900'>
-        ❌ Ocorreu um erro ao buscas os seus Decks. Por favor, tente novamente
-        mais tarde!
-      </h2>
-      <Button onClick={onRetryPress} variant='secondary'>
-        Tentar Novamente
-      </Button>
-    </div>
+    <Feedback
+      title='Erro inesperado!'
+      subtitle='Ocorreu um erro ao buscar os seus Decks. Por favor, tente novamente mais tarde!'
+      buttonLabel='Tentar Novamente'
+      onButtonClick={onRetryPress}
+    />
   )
 }

src/components/feedback/feedback.component.tsx

@@ -0,0 +1,62 @@
+import { useRouter } from 'next/router'
+
+import { Button } from '~/components/button'
+import { Image } from '~/components/image'
+import { routes } from '~/utils/navigation'
+
+import type { FeedbackProps } from './feedback.types'
+
+const isString = (value: unknown): value is string => typeof value === 'string'
+
+export function Feedback(props: FeedbackProps) {
+  const {
+    title,
+    subtitle,
+    buttonLabel,
+    onButtonClick,
+    shouldHideButton,
+    customImageSrc,
+  } = props
+
+  const router = useRouter()
+
+  const handleClick = () => {
+    if (onButtonClick) {
+      onButtonClick()
+    } else {
+      router.push(routes.home())
+    }
+  }
+
+  const renderButton = () => {
+    if (shouldHideButton) return null
+
+    return (
+      <Button fullWidth onClick={handleClick}>
+        {buttonLabel || 'Voltar para a página inicial'}
+      </Button>
+    )
+  }
+
+  return (
+    <div className='mx-auto flex max-w-2xl flex-col items-center gap-10 p-2 md:p-5'>
+      <div className='flex flex-col items-center gap-10 md:flex-row'>
+        <div className='flex flex-col gap-2 text-center'>
+          <h1 className='text-2xl font-light text-primary-900 md:text-4xl'>
+            {isString(title) ? title : title()}
+          </h1>
+          <h2 className='text-xl font-extralight md:text-xl'>
+            {isString(subtitle) ? subtitle : subtitle()}
+          </h2>
+        </div>
+        <Image
+          width={300}
+          height={300}
+          alt={`${subtitle} illustration`}
+          src={customImageSrc || '/images/petting.svg'}
+        />
+      </div>
+      {renderButton()}
+    </div>
+  )
+}

src/components/feedback/feedback.types.ts

@@ -0,0 +1,8 @@
+export type FeedbackProps = {
+  title: (() => JSX.Element) | string
+  subtitle: (() => JSX.Element) | string
+  buttonLabel?: string
+  onButtonClick?: () => void
+  shouldHideButton?: boolean
+  customImageSrc?: string
+}

src/components/feedback/index.ts

@@ -0,0 +1 @@
+export { Feedback } from './feedback.component'

src/components/header/header.constants.ts

@@ -14,7 +14,7 @@ const MENU_OPTIONS = [
   {
     label: 'Para Revisar',
     icon: ClockIcon,
-    href: '#',
+    href: routes.toBeReviewed(),
     isAuthRequired: true,
   },
   {

src/components/image/image.component.tsx

@@ -13,7 +13,7 @@ const shimmer = `
 const MINIMUM_IMAGE_SIZE_WITH_BLUE = 40
 
 function BaseImage(props: ImageProps) {
-  const { width, height, ...otherProps } = props
+  const { width, height, style, ...otherProps } = props
 
   const blurProps: Pick<ImageProps, 'placeholder' | 'blurDataURL'> =
     useMemo(() => {
@@ -32,6 +32,11 @@ function BaseImage(props: ImageProps) {
       width={width}
       height={height}
       data-testid='image-component'
+      style={{
+        width: width,
+        height: height,
+        ...style,
+      }}
       {...blurProps}
       {...otherProps}
     />

src/pages/404.tsx

@@ -1,33 +1,10 @@
-import { useRouter } from 'next/router'
-
-import { Button } from '~/components/button'
-import { Image } from '~/components/image'
-import { routes } from '~/utils/navigation'
+import { Feedback } from '~/components/feedback'
 
 export default function FourOhFor() {
-  const router = useRouter()
-
   return (
-    <div className='mx-auto flex max-w-md flex-col items-center gap-10 p-5'>
-      <div className='flex flex-col gap-2 text-center'>
-        <h1 className='text-5xl font-extralight text-primary-900'>Desculpe,</h1>
-        <h2 className='text-2xl font-extralight'>
-          não foi possível encontrar esta página.
-        </h2>
-      </div>
-      <Image
-        src='/images/not-found-illustration.svg'
-        width={448}
-        height={297}
-        alt='404 illustration'
-      />
-      <Button
-        fullWidth
-        variant='secondary'
-        onClick={() => router.push(routes.home())}
-      >
-        Voltar para a Home
-      </Button>
-    </div>
+    <Feedback
+      title='Desculpe,'
+      subtitle='não foi possível encontrar esta página.'
+    />
   )
 }

src/pages/500.tsx

@@ -1,35 +1,10 @@
-import { useRouter } from 'next/router'
-
-import { Button } from '~/components/button'
-import { Image } from '~/components/image'
-import { routes } from '~/utils/navigation'
+import { Feedback } from '~/components/feedback'
 
 export default function FiveHundred() {
-  const router = useRouter()
-
   return (
-    <div className='mx-auto flex max-w-md flex-col items-center gap-10 p-5'>
-      <div className='flex flex-col gap-2 text-center'>
-        <h1 className='text-4xl font-extralight text-primary-900 md:text-5xl'>
-          Erro inesperado!
-        </h1>
-        <h2 className='text-xl font-extralight md:text-2xl'>
-          Desculpe, parece que houve um erro inesperado em nosso site.
-        </h2>
-      </div>
-      <Image
-        src='/images/lost-in-space.svg'
-        width={448}
-        height={297}
-        alt='404 illustration'
-      />
-      <Button
-        fullWidth
-        variant='secondary'
-        onClick={() => router.push(routes.home())}
-      >
-        Voltar para a Home
-      </Button>
-    </div>
+    <Feedback
+      title='Erro inesperado!'
+      subtitle='Desculpe, parece que houve um erro inesperado em nosso site.'
+    />
   )
 }

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import type { Session } from 'next-auth'
 import { SessionProvider } from 'next-auth/react'
 import type { AppType } from 'next/app'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
 
 import { Header } from '~/components/header'
 import type { WithAuthentication } from '~/types/auth'
@@ -45,6 +46,10 @@ const MyApp: AppType<{ session: Session | null }> = props => {
   return (
     <JotaiProvider>
       <SessionProvider session={session}>
+        <Head>
+          <title>Briskly</title>
+          <meta name='description' content='The perfect Flashcards app' />
+        </Head>
         <Header />
         <main className='min-h-screen w-full bg-primary-50'>
           <div className='m-auto w-full max-w-7xl p-3 md:p-5'>

src/pages/decks/[id].tsx

@@ -123,7 +123,6 @@ const DeckDetails: NextPage<
       <Head>
         <title>{deck.title}</title>
         <meta name='description' content={deck.description} />
-        <link rel='icon' href='/favicon.ico' />
       </Head>
       <div className='relative flex flex-col gap-5'>
         <div className='flex flex-col gap-5 sm:flex-row'>

src/pages/decks/create/[id].tsx

@@ -93,7 +93,6 @@ const DecksCrudContent = () => {
           name='description'
           content='Crie um novo Deck e comece a estudar'
         />
-        <link rel='icon' href='/favicon.ico' />
       </Head>
       <form className='flex flex-col gap-5' onSubmit={onSubmit}>
         <MainInfo />