Before Calendar and availability

Author: JsnEvt

.eslintrc.json

@@ -2,5 +2,8 @@
   "extends": [
     "@rocketseat/eslint-config/react",
     "next/core-web-vitals"
-  ]
+  ],
+  "rules": {
+    "camelcase": "off"
+  }
 }

prisma/dev.db

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "user_time_intervals" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "week_day" INTEGER NOT NULL,
+    "time_start_in_minutes" INTEGER NOT NULL,
+    "time_end_in_minutes" INTEGER NOT NULL,
+    "user_id" TEXT NOT NULL,
+    CONSTRAINT "user_time_intervals_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);

prisma/migrations/20230427114408_create_user_time_intervals/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN "bio" TEXT;

prisma/migrations/20230427175510_add_bio_to_users/migration.sql

@@ -14,12 +14,14 @@ model User {
   id         String   @id @default(uuid())
   username   String   @unique
   name       String
+  bio        String?
   email      String?  @unique
   avatar_url String?
   created_at DateTime @default(now())
 
-  accounts Account[]
-  sessions Session[]
+  accounts      Account[]
+  sessions      Session[]
+  timeIntervals UserTimeInterval[]
 
   @@map("users")
 }
@@ -53,3 +55,15 @@ model Session {
 
   @@map("sessions")
 }
+
+model UserTimeInterval {
+  id                    String @id @default(uuid())
+  week_day              Int
+  time_start_in_minutes Int
+  time_end_in_minutes   Int
+
+  user    User   @relation(fields: [user_id], references: [id])
+  user_id String
+
+  @@map("user_time_intervals")
+}

prisma/schema.prisma

@@ -8,4 +8,8 @@ declare module 'next-auth' {
     username: string
     avatar_url: string
   }
+
+  interface Session {
+    user: User
+  }
 }

src/@types/next-auth.d.ts

@@ -1,11 +1,11 @@
 import { Adapter } from 'next-auth/adapters'
 import { prisma } from '../prisma'
-import { NextApiRequest, NextApiResponse } from 'next'
+import { NextApiRequest, NextApiResponse, NextPageContext } from 'next'
 import { parseCookies, destroyCookie } from 'nookies'
 
 export function PrismaAdapter(
-  req: NextApiRequest,
-  res: NextApiResponse,
+  req: NextApiRequest | NextPageContext['req'],
+  res: NextApiResponse | NextPageContext['res'],
 ): Adapter {
   return {
     async createUser(user) {

src/lib/auth/prisma-adapter.ts

@@ -1,11 +1,11 @@
 import { PrismaAdapter } from '@/lib/auth/prisma-adapter'
-import { NextApiRequest, NextApiResponse } from 'next'
+import { NextApiRequest, NextApiResponse, NextPageContext } from 'next'
 import NextAuth, { NextAuthOptions } from 'next-auth'
 import GoogleProvider, { GoogleProfile } from 'next-auth/providers/google'
 
 export function buildNextAuthOptions(
-  req: NextApiRequest,
-  res: NextApiResponse,
+  req: NextApiRequest | NextPageContext['req'],
+  res: NextApiResponse | NextPageContext['res'],
 ): NextAuthOptions {
   return {
     adapter: PrismaAdapter(req, res),

src/pages/api/auth/[...nextauth].api.ts

@@ -0,0 +1,40 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getServerSession } from 'next-auth'
+import { buildNextAuthOptions } from '../auth/[...nextauth].api'
+import { z } from 'zod'
+import { prisma } from '@/lib/prisma'
+
+const updateProfileBodySchema = z.object({
+  bio: z.string(),
+})
+
+export default async function hadler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== 'PUT') {
+    return res.status(405).end()
+  }
+  const session = await getServerSession(
+    req,
+    res,
+    buildNextAuthOptions(req, res),
+  )
+
+  if (!session) {
+    return res.status(401).end()
+  }
+
+  const { bio } = updateProfileBodySchema.parse(req.body)
+
+  await prisma.user.update({
+    where: {
+      id: session.user.id,
+    },
+    data: {
+      bio,
+    },
+  })
+
+  return res.status(204).end()
+}

src/pages/api/users/profile.api.ts

@@ -0,0 +1,52 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getServerSession } from 'next-auth'
+import { buildNextAuthOptions } from '../auth/[...nextauth].api'
+import { z } from 'zod'
+import { prisma } from '@/lib/prisma'
+
+const timeIntervalsBodySchema = z.object({
+  intervals: z.array(
+    z.object({
+      weekDay: z.number(),
+      startTimeInMinutes: z.number(),
+      endTimeInMinutes: z.number(),
+    }),
+  ),
+})
+
+export default async function hadler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== 'POST') {
+    return res.status(405).end()
+  }
+  const session = await getServerSession(
+    req,
+    res,
+    buildNextAuthOptions(req, res),
+  )
+
+  if (!session) {
+    return res.status(401).end()
+  }
+
+  const { intervals } = timeIntervalsBodySchema.parse(req.body)
+
+  await Promise.all(
+    intervals.map((interval) => {
+      return prisma.userTimeInterval.create({
+        data: {
+          week_day: interval.weekDay,
+          time_start_in_minutes: interval.startTimeInMinutes,
+          time_end_in_minutes: interval.endTimeInMinutes,
+          user_id: session.user?.id,
+        },
+      })
+    }),
+  )
+
+  return res.json({
+    session,
+  })
+}

src/pages/api/users/time-intervals.api.ts

@@ -16,6 +16,10 @@ export default function ConnectCalendar() {
     await signIn('google')
   }
 
+  async function handleNavigateToNextStep() {
+    await router.push('/register/time-intervals')
+  }
+
   return (
     <Container>
       <Header>
@@ -53,7 +57,11 @@ export default function ConnectCalendar() {
           </AuthError>
         )}
 
-        <Button type="submit" disabled={!isSignedIn}>
+        <Button
+          onClick={handleNavigateToNextStep}
+          type="submit"
+          disabled={!isSignedIn}
+        >
           Próximo passo
           <ArrowRight />
         </Button>

src/pages/register/connect-calendar/index.page.tsx

@@ -21,6 +21,8 @@ import { z } from 'zod'
 import { getWeekDays } from '@/utils/get-week-days'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { convertTimeStringToMinutes } from '@/utils/convert-time-in-minutes'
+import { api } from '@/lib/axios'
+import { useRouter } from 'next/router'
 
 const timeIntervalsFormSchema = z.object({
   intervals: z
@@ -85,6 +87,8 @@ export default function TimeIntervals() {
     },
   })
 
+  const router = useRouter()
+
   const weekDays = getWeekDays()
 
   const { fields } = useFieldArray({
@@ -94,8 +98,11 @@ export default function TimeIntervals() {
 
   const intervals = watch('intervals')
 
-  async function handleSetTimeIntervals(data: TimeIntervalsFormOutput) {
-    console.log(data)
+  async function handleSetTimeIntervals(data: any) {
+    const { intervals } = data as TimeIntervalsFormOutput
+    await api.post('users/time-intervals', { intervals })
+
+    await router.push('/register/update-profile')
   }
 
   return (

src/pages/register/time-intervals/index.page.tsx

@@ -0,0 +1,89 @@
+import {
+  Heading,
+  Text,
+  MultiStep,
+  Button,
+  TextArea,
+  Avatar,
+} from '@ignite-ui/react'
+import { ArrowRight } from 'phosphor-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Container, Header } from '../styles'
+import { FormAnnotation, ProfileBox } from './styles'
+import { getSession, useSession } from 'next-auth/react'
+import { api } from '@/lib/axios'
+import { useRouter } from 'next/router'
+import { GetServerSideProps } from 'next'
+
+const updateProfileSchema = z.object({
+  bio: z.string(),
+})
+
+type UpdateProfileData = z.infer<typeof updateProfileSchema>
+
+export default function UpdateProfile() {
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<UpdateProfileData>({
+    resolver: zodResolver(updateProfileSchema),
+  })
+
+  const session = useSession()
+  const router = useRouter()
+
+  async function handleUpdateProfile(data: UpdateProfileData) {
+    await api.put('/users/profile', {
+      bio: data.bio,
+    })
+    await router.push(`/schedule/${session.data?.user.username}`)
+  }
+
+  return (
+    <Container>
+      <Header>
+        <Heading as={'strong'}>Bem-vindo ao Ignite Call!</Heading>
+        <Text>
+          Precisamos de algumas informações para criar seu perfil! Ah, você pode
+          editar essas informações depois.
+        </Text>
+        <MultiStep size={4} currentStep={4} />
+      </Header>
+
+      <ProfileBox as="form" onSubmit={handleSubmit(handleUpdateProfile)}>
+        <label>
+          <Text>Foto de perfil</Text>
+          <Avatar
+            src={session.data?.user.avatar_url}
+            alt={session.data?.user.name}
+          />
+        </label>
+        <label>
+          <Text size={'sm'}>Sobre você</Text>
+          <TextArea {...register('bio')} />
+          <FormAnnotation size={'sm'}>
+            Fale um pouco sobre você. Isto será exibido em sua página pessoal.
+          </FormAnnotation>
+        </label>
+
+        <Button type="submit" disabled={isSubmitting}>
+          Finalizar
+          <ArrowRight />
+        </Button>
+      </ProfileBox>
+    </Container>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+  const session = await getSession({ req })
+
+  return {
+    props: {
+      session,
+    },
+  }
+}

src/pages/register/update-profile/index.page.tsx

@@ -0,0 +1,18 @@
+import { Box, styled, Text } from '@ignite-ui/react'
+
+export const ProfileBox = styled(Box, {
+  marginTop: '$6',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$4',
+
+  label: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '$2',
+  },
+})
+
+export const FormAnnotation = styled(Text, {
+  color: '$gray200',
+})