Notifications

Author: alejo9010

components/Avatar.tsx

@@ -21,8 +21,9 @@ function Avatar({ userId, isLarge, hasBorder }: Props) {
     [router, userId]
   );
   return (
-    <div
-      className={`
+    <div>
+      <div
+        className={`
   ${hasBorder ? 'border-4 border-black' : ''}
   ${isLarge ? 'h-32' : 'h-12'}
   ${isLarge ? 'w-32' : 'w-12'}
@@ -32,13 +33,14 @@ function Avatar({ userId, isLarge, hasBorder }: Props) {
   cursor-pointer
   relative
   `}>
-      <Image
-        fill
-        style={{ objectFit: 'cover', borderRadius: '100%' }}
-        onClick={onClick}
-        alt='Avatar'
-        src={fetchedUser?.profileImage || '/images/placeholder.png'}
-      />
+        <Image
+          fill
+          style={{ objectFit: 'cover', borderRadius: '100%' }}
+          onClick={onClick}
+          alt='Avatar'
+          src={fetchedUser?.profileImage || '/images/placeholder.png'}
+        />
+      </div>
     </div>
   );
 }

components/NotificationsFeed.tsx

@@ -0,0 +1,33 @@
+import useCurrentUser from '@/hooks/useCurrentUser';
+import useNotifications from '@/hooks/useNotifications';
+import { useEffect } from 'react';
+import { BsTwitter } from 'react-icons/bs';
+
+type Props = {};
+
+function NotificationsFeed({}: Props) {
+  const { data: currentUser, mutate: mutateCurrentUser } = useCurrentUser();
+  const { data: fetchedNotifications = [] } = useNotifications(currentUser?.id);
+
+  useEffect(() => {
+    mutateCurrentUser();
+  }, [mutateCurrentUser]);
+  if (fetchedNotifications.length === 0) {
+    return <div className='text-neutral-600 text-center p-6 text-xl'>No notifications</div>;
+  }
+
+  return (
+    <div className='flex flex-col'>
+      {fetchedNotifications.map((notification: Record<string, any>) => (
+        <div
+          className='flex flex-row items-center p-6 gap-4 border-b-[1px] border-neutral-800'
+          key={notification.id}>
+          <BsTwitter color='white' size={32} />
+          <p className='text-white'>{notification.body}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default NotificationsFeed;

components/layout/Sidebar.tsx

@@ -20,6 +20,7 @@ function Sidebar({}: Props) {
       href: '/notifications',
       icon: BsBellFill,
       auth: true,
+      alert: currentUser?.hasNotification,
     },
     {
       label: 'Profile',
@@ -40,6 +41,7 @@ function Sidebar({}: Props) {
               label={item.label}
               icon={item.icon}
               auth={item.auth}
+              alert={item.alert}
             />
           ))}
           {currentUser && <SidebarItem onClick={() => signOut()} icon={BiLogOut} label='Logout' />}

components/layout/SidebarItem.tsx

@@ -3,16 +3,17 @@ import useLoginModal from '@/hooks/useLoginModal';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 import { IconType } from 'react-icons';
-
+import { BsDot } from 'react-icons/bs';
 interface SidebarItemProps {
   label: string;
   href?: string;
   icon: IconType;
   onClick?: () => void;
   auth?: boolean;
+  alert?: boolean;
 }
 
-function SidebarItem({ label, href, icon: Icon, onClick, auth }: SidebarItemProps) {
+function SidebarItem({ label, href, icon: Icon, onClick, auth, alert }: SidebarItemProps) {
   const { data: currentUser } = useCurrentUser();
   const loginModal = useLoginModal();
   const router = useRouter();
@@ -25,14 +26,19 @@ function SidebarItem({ label, href, icon: Icon, onClick, auth }: SidebarItemProp
       router.push(href);
     }
   }, [auth, currentUser, href, loginModal, onClick, router]);
+
   return (
     <div onClick={handleClick} className='flex flex-row items-center'>
       <div className='relative rounded-full h-14 w-14 flex items-center justify-center p-4 hover:bg-slate-300 hover:bg-opacity-10 cursor-pointer lg:hidden'>
         <Icon size={28} color='white' />
+        {alert ? <BsDot size={70} className='text-sky-500 absolute -top-4 left-0' /> : null}
+
+        <p className='hidden lg:block text-white text-xl'>{label}</p>
       </div>
       <div className='relative hidden lg:flex gap-4 p-4 rounded-full items-center hover:bg-slate-300 hover:bg-opacity-10 cursor-pointer'>
         <Icon size={24} color='white' />
         <p className='hidden lg:block text-white text-xl'>{label}</p>
+        {alert ? <BsDot size={70} className='text-sky-500 absolute -top-4 left-0' /> : null}
       </div>
     </div>
   );

components/layout/SidebarTweetButton.tsx

@@ -3,15 +3,18 @@ import { useRouter } from 'next/router';
 import { FaFeather } from 'react-icons/fa';
 import useLoginModal from '@/hooks/useLoginModal';
 import LoginModal from '../modals/LoginModal';
+import useCurrentUser from '@/hooks/useCurrentUser';
 
 type Props = {};
 
 function SidebarTweetButton({}: Props) {
   const router = useRouter();
   const loginModal = useLoginModal();
+  const { data: currentUser } = useCurrentUser();
   const onClick = useCallback(() => {
-    loginModal.onOpen();
-  }, []);
+    if (!currentUser) loginModal.onOpen();
+    router.push('/');
+  }, [currentUser, loginModal, router]);
 
   return (
     <div onClick={onClick}>

hooks/useFollow.ts

@@ -25,9 +25,9 @@ const useFollow = (userId: string) => {
       if (isFollowing) {
         console.log('unfollow');
 
-        request = () => axios.delete('/api/follow', { data: { userId } });
+        request = () => axios.delete(`/api/follow?userId=${userId}`);
       } else {
-        request = () => axios.post('/api/follow', { userId });
+        request = () => axios.post(`/api/follow?userId=${userId}`);
       }
 
       await request();

hooks/useNotifications.ts

@@ -0,0 +1,11 @@
+import useSWR from 'swr';
+import fetcher from '@/libs/fetcher';
+
+const useNotifications = (userId: string) => {
+  const url = userId ? `/api/notifications/${userId}` : null;
+  const { data, isLoading, error, mutate } = useSWR(url, fetcher);
+
+  return { data, isLoading, error, mutate };
+};
+
+export default useNotifications;

pages/api/comments.ts

@@ -24,6 +24,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       },
     });
 
+    try {
+      const post = await prisma.post.findUnique({ where: { id: postId } });
+
+      if (post?.userId) {
+        await prisma.notification.create({
+          data: {
+            body: `Someone replied to your tweet`,
+            userId: post.userId,
+          },
+        });
+
+        await prisma.user.update({
+          where: { id: post.userId },
+          data: {
+            hasNotification: true,
+          },
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+
     return res.status(200).json(comment);
   } catch (error) {
     console.log(error);

pages/api/like.ts

@@ -30,6 +30,27 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     if (req.method === 'POST') {
       updatedLikesIds.push(currentUser.id);
+      try {
+        const post = await prisma.post.findUnique({ where: { id: postId } });
+
+        if (post?.userId) {
+          await prisma.notification.create({
+            data: {
+              body: `Someone liked your tweet`,
+              userId: post.userId,
+            },
+          });
+
+          await prisma.user.update({
+            where: { id: post.userId },
+            data: {
+              hasNotification: true,
+            },
+          });
+        }
+      } catch (error) {
+        console.log(error);
+      }
     }
 
     if (req.method === 'DELETE') {

pages/api/notifications/[userId].ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import prisma from '@/libs/prismadb';
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'GET') {
+    return res.status(405).end();
+  }
+
+  try {
+    const { userId } = req.query;
+
+    if (!userId || typeof userId !== 'string') {
+      throw new Error('Invalid ID');
+    }
+
+    const notifications = await prisma.notification.findMany({
+      where: { userId },
+      orderBy: { createdAt: 'desc' },
+    });
+
+    await prisma.user.update({
+      where: { id: userId },
+      data: { hasNotification: false },
+    });
+
+    return res.status(200).json(notifications);
+  } catch (error) {
+    console.log(error);
+    return res.status(400).end();
+  }
+}

pages/notifications.tsx

@@ -0,0 +1,35 @@
+import Header from '@/components/Header';
+import { NextPageContext } from 'next';
+import React from 'react';
+import { getSession } from 'next-auth/react';
+import NotificationsFeed from '@/components/NotificationsFeed';
+
+type Props = {};
+
+export async function getServerSideProps(context: NextPageContext) {
+  const session = await getSession(context);
+  if (!session) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      },
+    };
+  }
+  return {
+    props: {
+      session,
+    },
+  };
+}
+
+function Notifications({}: Props) {
+  return (
+    <>
+      <Header label='Notifications' showBackArrow />
+      <NotificationsFeed />
+    </>
+  );
+}
+
+export default Notifications;