refactor: change next auth implementation and remove notification cou…

…nt api route

package.json

@@ -65,6 +65,7 @@
     "next-auth": "^4.23.1",
     "nookies": "^2.5.2",
     "react": "18.2.0",
+    "react-confetti-explosion": "^2.1.2",
     "react-day-picker": "^8.8.1",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",

src/app/(app)/layout.tsx

@@ -4,10 +4,10 @@ import { ReactNode } from 'react'
 
 export default function AppLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-screen bg-background">
+    <>
       <Header />
       <main className="wrapper">{children}</main>
       <Footer />
-    </div>
+    </>
   )
 }

src/app/(app)/me/[slug]/page.tsx

@@ -1,8 +1,15 @@
+import { redirect } from 'next/navigation'
+import { prisma } from '@/libs/prisma'
+import Link from 'next/link'
+
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
+import { AvatarGroupAnimated } from './components/avatar-group-animated'
+import { AvatarGroup } from '@/components/avatar-group'
+
 import {
   Github,
   Linkedin,
@@ -11,11 +18,29 @@ import {
   MoreHorizontal,
   Star,
 } from 'lucide-react'
-import Link from 'next/link'
-import { AvatarGroupAnimated } from './components/avatar-group-animated'
-import { AvatarGroup } from '@/components/avatar-group'
 
-export default function Me() {
+interface MeProps {
+  params: {
+    slug: string
+  }
+}
+async function getUser({ slug }: { slug: string }) {
+  const user = await prisma.user.findUnique({
+    where: {
+      slugProfile: slug,
+    },
+  })
+
+  if (!user) {
+    return redirect('/')
+  }
+
+  return { user }
+}
+
+export default async function Me({ params }: MeProps) {
+  const { user } = await getUser({ slug: params.slug })
+
   return (
     <div className="grid grid-cols-[1fr_minmax(18.75rem,25rem)] gap-6 page-container">
       <div>
@@ -28,7 +53,7 @@ export default function Me() {
 
             <div className="absolute -bottom-[44px] left-6">
               <Avatar size="xl" className="ring-2 ring-black">
-                <AvatarImage src="https://www.github.com/brunosllz.png" />
+                <AvatarImage src={user.avatarUrl} />
                 <AvatarFallback />
               </Avatar>
             </div>
@@ -66,27 +91,31 @@ export default function Me() {
               </div>
 
               <div className="space-x-3">
-                <Button
-                  variant="outline"
-                  className="relative h-[42px] w-[42px] rounded-full px-3 text-secondary-foreground"
-                  size="sm"
-                  asChild
-                >
-                  <a href="https://github.com" target="_blank">
-                    <Linkedin size={18} />
-                  </a>
-                </Button>
-
-                <Button
-                  variant="outline"
-                  className="relative h-[42px] w-[42px] rounded-full px-3 text-secondary-foreground"
-                  size="sm"
-                  asChild
-                >
-                  <a href="https://github.com" target="_blank">
-                    <Github size={18} />
-                  </a>
-                </Button>
+                {user.linkedinLink && (
+                  <Button
+                    variant="outline"
+                    className="relative h-[42px] w-[42px] rounded-full px-3 text-secondary-foreground"
+                    size="sm"
+                    asChild
+                  >
+                    <a href={user.linkedinLink} target="_blank">
+                      <Linkedin size={18} />
+                    </a>
+                  </Button>
+                )}
+
+                {user.githubLink && (
+                  <Button
+                    variant="outline"
+                    className="relative h-[42px] w-[42px] rounded-full px-3 text-secondary-foreground"
+                    size="sm"
+                    asChild
+                  >
+                    <a href={user.githubLink} target="_blank">
+                      <Github size={18} />
+                    </a>
+                  </Button>
+                )}
               </div>
             </div>
 

src/app/(app)/me/project/new/page.tsx

@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 
 export default function NewProject() {
   return (
-    <div>
+    <div className="page-container">
       <div className="flex items-center justify-between">
         <div className="space-y-1">
           <h1 className="text-3xl font-semibold">New project</h1>

src/app/(app)/notifications/page.tsx

@@ -1,11 +1,28 @@
 import { Separator } from '@/components/ui/separator'
 import { NotificationList } from './components/notification-list'
-import { api } from '@/libs/axios'
 import { redirect } from 'next/navigation'
+import { prisma } from '@/libs/prisma'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/app/api/auth/[...nextauth]/route'
+
+async function verifyIfHasAvailableNotifications() {
+  const session = await getServerSession(authOptions)
+
+  if (session) {
+    const countNotificationsFromUser = await prisma.notification.count({
+      where: {
+        authorId: session.user.uId,
+      },
+    })
+
+    return countNotificationsFromUser
+  }
+
+  return 0
+}
 
 export default async function Notifications() {
-  const { data } = await api.get('/notifications/count')
-  const { count } = data
+  const count = await verifyIfHasAvailableNotifications()
 
   const hasNotifications = count > 0
 

src/app/api/auth/[...nextauth]/route.ts

@@ -7,7 +7,7 @@ import { Adapter } from 'next-auth/adapters'
 import { CustomPrismaAdapter } from '@/libs/next-auth/prisma-adapter'
 import { env } from '@/env'
 
-export const handler: NextAuthOptions = NextAuth({
+export const authOptions: NextAuthOptions = {
   adapter: CustomPrismaAdapter(prisma) as Adapter,
   providers: [
     GitHubProvider({
@@ -64,6 +64,7 @@ export const handler: NextAuthOptions = NextAuth({
     signIn: '/auth/sign-in',
     error: '/auth/error',
   },
-})
+}
+const handler = NextAuth(authOptions)
 
 export { handler as GET, handler as POST }

src/app/globals.css

@@ -8,7 +8,7 @@
   }
 
   body {
-    @apply bg-background text-foreground min-w-full;
+    @apply bg-background text-foreground min-w-full min-h-screen;
   }
 
   :root {

src/components/file-input.tsx

@@ -3,9 +3,9 @@
 import {
   HTMLAttributes,
   createContext,
-  useContext,
+  // useContext,
   useId,
-  ChangeEvent,
+  // ChangeEvent,
   InputHTMLAttributes,
   forwardRef,
   ReactNode,
@@ -27,7 +27,7 @@ interface FileInputContextType {
 
 const FileInputContext = createContext({} as FileInputContextType)
 
-const useFileInput = () => useContext(FileInputContext)
+// const useFileInput = () => useContext(FileInputContext)
 
 function FileInputRoot({ id, ...props }: RootProps) {
   const customId = useId()
@@ -44,12 +44,18 @@ function FileInputRoot({ id, ...props }: RootProps) {
 }
 
 interface FileInputControlProps extends InputHTMLAttributes<HTMLInputElement> {
-  uploadPrefix?: 'projects' | 'avatar'
+  // uploadPrefix?: 'projects' | 'avatar'
   onValueChange?: ChangeHandler
 }
 
 const FileInputControl = forwardRef<HTMLInputElement, FileInputControlProps>(
-  ({ uploadPrefix = 'projects', ...props }, ref) => {
+  (
+    {
+      //  uploadPrefix = 'projects',
+      ...props
+    },
+    ref,
+  ) => {
     /**
      * we using dropzone for control this input
      */
@@ -91,17 +97,15 @@ function FileInputImagePreview() {
 
   if (previewUrl === null) {
     return (
-      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary">
+      <div className="flex h-16 w-16 items-center justify-center rounded-md bg-secondary">
         <User className="h-8 w-8 text-foreground " />
       </div>
     )
   } else {
     return (
-      <img
-        className="h-16 w-16 rounded-full bg-violet-50 object-cover dark:bg-zinc-800"
-        src={previewUrl}
-        alt=""
-      />
+      <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-md">
+        <img className="h-gull w-full object-cover" src={previewUrl} alt="" />
+      </div>
     )
   }
 }

src/components/ui/dialog.tsx

@@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

src/components/ui/select.tsx

@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={twMerge(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
       className,
     )}
     {...props}

src/components/ui/toast.tsx

@@ -57,7 +57,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={twMerge(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-1 focus:ring-ring group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
     {...props}
@@ -72,7 +72,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={twMerge(
-      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-1 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
       className,
     )}
     toast-close=""

src/env.ts

@@ -4,6 +4,7 @@ import { z } from 'zod'
 const nodeEnv = z.enum(['development', 'production', 'test'])
 
 function requiredOnEnv(env: z.infer<typeof nodeEnv>) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (value: any) => {
     if (env === process.env.NODE_ENV && !value) {
       return false