From aa833775ff26c65acab526c2f4bd8758b9d6f5c4 Mon Sep 17 00:00:00 2001
From: Prathmesh Sadake <prathmeshsadake@gmail.com>
Date: Sat, 10 Jun 2023 09:40:45 +0530
Subject: [PATCH] Added notification and refactored code

---
 components/Form.tsx                      | 24 +------
 components/Header.tsx                    |  8 +--
 components/Input.tsx                     | 18 +----
 components/Layout.tsx                    | 11 ++-
 components/Modal.tsx                     | 53 ++------------
 components/NotificationsFeed.tsx         | 38 ++++++++++
 components/layout/SidebarItem.tsx        | 32 +--------
 components/layout/SidebarLogo.tsx        | 12 +---
 components/layout/SidebarTweetButton.tsx | 41 +----------
 components/modals/LoginModal.tsx         |  6 +-
 components/modals/RegisterModal.tsx      |  6 +-
 components/posts/CommentItem.tsx         | 26 +------
 components/posts/PostItem.tsx            | 51 ++------------
 components/users/UserBio.tsx             | 11 +--
 hooks/useUser.ts                         |  4 +-
 hooks/useUsers.ts                        |  4 +-
 libs/prismadb.ts                         | 11 +--
 libs/serverAuth.ts                       |  4 +-
 pages/_app.tsx                           | 37 ++++------
 pages/_document.tsx                      | 13 ----
 pages/api/auth/[...nextauth].ts          |  3 +-
 pages/api/comments.ts                    | 66 ++++++++++++++++++
 pages/api/current.ts                     |  7 +-
 pages/api/edit.ts                        | 12 +++-
 pages/api/follow.ts                      | 48 +++++++++++--
 pages/api/like.ts                        | 89 ++++++++++++++++++++++++
 pages/api/notifications/[userId].ts      | 43 ++++++++++++
 pages/api/posts/[postId].ts              |  3 +-
 pages/api/posts/index.ts                 | 16 ++++-
 pages/api/register.ts                    | 17 +++--
 pages/api/users/[userId].ts              | 13 ++--
 pages/api/users/index.ts                 |  6 +-
 pages/index.tsx                          | 15 ++--
 pages/notifications.tsx                  | 35 ++++++++++
 pages/search.tsx                         | 11 +++
 public/thirteen.svg                      |  1 +
 styles/globals.css                       |  8 ++-
 tailwind.config.js                       | 14 ++--
 tsconfig.json                            |  1 +
 39 files changed, 454 insertions(+), 364 deletions(-)
 create mode 100644 components/NotificationsFeed.tsx
 delete mode 100644 pages/_document.tsx
 create mode 100644 pages/api/comments.ts
 create mode 100644 pages/api/like.ts
 create mode 100644 pages/api/notifications/[userId].ts
 create mode 100644 pages/notifications.tsx
 create mode 100644 pages/search.tsx
 create mode 100644 public/thirteen.svg

diff --git a/components/Form.tsx b/components/Form.tsx
index 5d91a45..ea43e58 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -59,30 +59,10 @@ const Form: React.FC<FormProps> = ({ placeholder, isComment, postId }) => {
               disabled={isLoading}
               onChange={(event) => setBody(event.target.value)}
               value={body}
-              className='
-                disabled:opacity-80
-                peer
-                resize-none 
-                mt-3 
-                w-full 
-                bg-black 
-                ring-0 
-                outline-none 
-                text-[20px] 
-                placeholder-neutral-500 
-                text-white
-              '
+              className='disabled:opacity-80 peer resize-none mt-3 w-full bg-black ring-0 outline-none text-[20px] placeholder-neutral-500 text-white'
               placeholder={placeholder}
             ></textarea>
-            <hr
-              className='
-                opacity-0 
-                peer-focus:opacity-100 
-                h-[1px] 
-                w-full 
-                border-neutral-800 
-                transition'
-            />
+            <hr className='opacity-0 peer-focus:opacity-100 h-[1px] w-full border-neutral-800 transition' />
             <div className='mt-4 flex flex-row justify-end'>
               <Button
                 disabled={isLoading || !body}
diff --git a/components/Header.tsx b/components/Header.tsx
index 08d0094..a2c82ff 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -22,14 +22,10 @@ const Header: React.FC<HeaderProps> = ({ showBackArrow, label }) => {
             onClick={handleBack}
             color='white'
             size={20}
-            className='
-              cursor-pointer 
-              hover:opacity-70 
-              transition
-          '
+            className='cursor-pointer hover:opacity-70 transition'
           />
         )}
-        <h1 className='text-white text-xl font-medium'>{label}</h1>
+        <h1 className='text-white text-xl font-semibold'>{label}</h1>
       </div>
     </div>
   );
diff --git a/components/Input.tsx b/components/Input.tsx
index 9db12e1..514d04e 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -26,23 +26,7 @@ const Input: React.FC<InputProps> = ({
         value={value}
         placeholder={placeholder}
         type={type}
-        className='
-            w-full
-            p-4 
-            text-lg 
-            bg-black 
-            border-2
-            border-neutral-800 
-            rounded-md
-            outline-none
-            text-white
-            focus:border-sky-500
-            focus:border-2
-            transition
-            disabled:bg-neutral-900
-            disabled:opacity-70
-            disabled:cursor-not-allowed
-          '
+        className='w-full p-4 text-lg bg-black border-2 border-neutral-800 rounded-md outline-none text-white focus:border-sky-500 focus:border-2 transition disabled:bg-neutral-900 disabled:opacity-70 disabled:cursor-not-allowed'
       />
     </div>
   );
diff --git a/components/Layout.tsx b/components/Layout.tsx
index ae5d127..d3884cf 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,18 +1,15 @@
 import React from "react";
-import Sidebar from "./layout/Sidebar";
-import FollowBar from "./layout/FollowBar";
 
-interface LayoutProps {
-  children: React.ReactNode;
-}
+import FollowBar from "@/components/layout/FollowBar";
+import Sidebar from "@/components/layout/Sidebar";
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <div className='h-screen bg-black'>
       <div className='container h-full mx-auto xl:px-30 max-w-6xl'>
         <div className='grid grid-cols-4 h-full'>
           <Sidebar />
-          <div className='col-span-3 lg:col-span-2 border-[1px] border-gray-800'>
+          <div className='col-span-3 lg:col-span-2 border-x-[1px] border-neutral-800'>
             {children}
           </div>
           <FollowBar />
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 0c5fd26..6f37418 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -45,60 +45,15 @@ const Modal: React.FC<ModalProps> = ({
 
   return (
     <>
-      <div
-        className='
-          justify-center 
-          items-center 
-          flex 
-          overflow-x-hidden 
-          overflow-y-auto 
-          fixed 
-          inset-0 
-          z-50 
-          outline-none 
-          focus:outline-none
-          bg-neutral-800
-          bg-opacity-70
-        '
-      >
+      <div className='justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none bg-neutral-800 bg-opacity-70'>
         <div className='relative w-full lg:w-3/6 my-6 mx-auto lg:max-w-3xl h-full lg:h-auto'>
           {/*content*/}
-          <div
-            className='
-            h-full
-            lg:h-auto
-            border-0 
-            rounded-lg 
-            shadow-lg 
-            relative 
-            flex 
-            flex-col 
-            w-full 
-            bg-black 
-            outline-none 
-            focus:outline-none
-            '
-          >
+          <div className='h-full lg:h-auto border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-black outline-none focus:outline-none'>
             {/*header*/}
-            <div
-              className='
-              flex 
-              items-center 
-              justify-between 
-              p-10 
-              rounded-t
-              '
-            >
+            <div className='flex items-center justify-between p-10 rounded-t'>
               <h3 className='text-3xl font-semibold text-white'>{title}</h3>
               <button
-                className='
-                  p-1 
-                  ml-auto
-                  border-0 
-                  text-white 
-                  hover:opacity-70
-                  transition
-                '
+                className='p-1 ml-auto border-0 text-white hover:opacity-70 transition'
                 onClick={handleClose}
               >
                 <AiOutlineClose size={20} />
diff --git a/components/NotificationsFeed.tsx b/components/NotificationsFeed.tsx
new file mode 100644
index 0000000..861cfa5
--- /dev/null
+++ b/components/NotificationsFeed.tsx
@@ -0,0 +1,38 @@
+import { BsTwitter } from "react-icons/bs";
+
+import useNotifications from "@/hooks/useNotifications";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { useEffect } from "react";
+
+const NotificationsFeed = () => {
+  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
+          key={notification.id}
+          className='flex flex-row items-center p-6 gap-4 border-b-[1px] border-neutral-800'
+        >
+          <BsTwitter color='white' size={32} />
+          <p className='text-white'>{notification.body}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NotificationsFeed;
diff --git a/components/layout/SidebarItem.tsx b/components/layout/SidebarItem.tsx
index ae152c3..4b45e12 100644
--- a/components/layout/SidebarItem.tsx
+++ b/components/layout/SidebarItem.tsx
@@ -41,41 +41,13 @@ const SidebarItem: React.FC<SidebarItemProps> = ({
 
   return (
     <div onClick={handleClick} className='flex flex-row items-center'>
-      <div
-        className='
-        relative
-        h-14
-        w-14
-        flex
-        items-center
-        justify-center 
-        p-4
-        hover:bg-slate-200 
-        hover:bg-opacity-10 
-        cursor-pointer 
-        lg:hidden
-      '
-      >
+      <div className='relative h-14 w-14 flex items-center justify-center p-4 hover:bg-slate-200 hover:bg-opacity-10 cursor-pointer lg:hidden'>
         <Icon size={20} color='white' />
         {alert ? (
           <BsDot className='text-sky-500 absolute -top-4 left-0' size={70} />
         ) : null}
       </div>
-      <div
-        className='
-        w-full
-        relative
-        hidden 
-        lg:flex 
-        items-row 
-        gap-4 
-        p-4 
-        hover:bg-slate-200 
-        hover:bg-opacity-10 
-        cursor-pointer
-        items-center
-      '
-      >
+      <div className='w-full relativehidden lg:flex items-row gap-4 p-4 hover:bg-slate-200 hover:bg-opacity-10 cursor-pointer items-center'>
         <Icon size={20} color='white' />
         <p className='hidden lg:block text-white text-lg'>{label}</p>
         {alert ? (
diff --git a/components/layout/SidebarLogo.tsx b/components/layout/SidebarLogo.tsx
index de387e9..b989b65 100644
--- a/components/layout/SidebarLogo.tsx
+++ b/components/layout/SidebarLogo.tsx
@@ -7,17 +7,7 @@ const SidebarLogo = () => {
   return (
     <div
       onClick={() => router.push("/")}
-      className='
-        h-14
-        w-14
-        p-4 
-        flex 
-        items-center 
-        justify-center 
-        hover:bg-blue-300 
-        hover:bg-opacity-10 
-        cursor-pointer
-    '
+      className='rounded-full h-14 w-14 p-4 flex items-center justify-center hover:bg-blue-300 hover:bg-opacity-10 cursor-pointer'
     >
       <BsTwitter size={28} color='white' />
     </div>
diff --git a/components/layout/SidebarTweetButton.tsx b/components/layout/SidebarTweetButton.tsx
index e016fb8..94367ce 100644
--- a/components/layout/SidebarTweetButton.tsx
+++ b/components/layout/SidebarTweetButton.tsx
@@ -20,46 +20,11 @@ const SidebarTweetButton = () => {
 
   return (
     <div onClick={onClick}>
-      <div
-        className='
-        mt-6
-        lg:hidden 
-        h-14
-        w-14
-        p-4
-        flex
-        items-center
-        justify-center 
-        bg-sky-500 
-        hover:bg-opacity-80 
-        transition 
-        cursor-pointer
-      '
-      >
+      <div className='mt-6 lg:hidden h-14 w-14 p-4 flex items-center justify-center bg-sky-500 hover:bg-opacity-80 transition cursor-pointer'>
         <FaFeather size={24} color='white' />
       </div>
-      <div
-        className='
-        mt-6
-        hidden 
-        lg:block 
-        px-4
-        py-2
-        bg-sky-500
-        hover:bg-opacity-90 
-        cursor-pointer
-      '
-      >
-        <p
-          className='
-            hidden 
-            lg:block 
-            text-center
-            font-semibold
-            text-white 
-            text-[20px]
-        '
-        >
+      <div className='mt-6 hidden lg:block px-4 py-2 bg-sky-500 hover:bg-opacity-90 cursor-pointer'>
+        <p className='hidden lg:block text-center font-semibold text-white text-[20px]'>
           Tweet
         </p>
       </div>
diff --git a/components/modals/LoginModal.tsx b/components/modals/LoginModal.tsx
index bbd9c4b..ae77f46 100644
--- a/components/modals/LoginModal.tsx
+++ b/components/modals/LoginModal.tsx
@@ -64,11 +64,7 @@ const LoginModal = () => {
         First time using Twitter?
         <span
           onClick={onToggle}
-          className='
-            text-white 
-            cursor-pointer 
-            hover:text-gray-200
-          '
+          className='text-white cursor-pointer hover:underline'
         >
           {" "}
           Create an account
diff --git a/components/modals/RegisterModal.tsx b/components/modals/RegisterModal.tsx
index 17cb7e7..0bd4140 100644
--- a/components/modals/RegisterModal.tsx
+++ b/components/modals/RegisterModal.tsx
@@ -93,11 +93,7 @@ const RegisterModal = () => {
         Already have an account?
         <span
           onClick={onToggle}
-          className='
-            text-white 
-            cursor-pointer 
-            hover:text-gray-200
-          '
+          className='text-white cursor-pointer hover:underline'
         >
           {" "}
           Sign in
diff --git a/components/posts/CommentItem.tsx b/components/posts/CommentItem.tsx
index 6e0b9d1..ca39be1 100644
--- a/components/posts/CommentItem.tsx
+++ b/components/posts/CommentItem.tsx
@@ -29,40 +29,20 @@ const CommentItem: React.FC<CommentItemProps> = ({ data = {} }) => {
   }, [data.createdAt]);
 
   return (
-    <div
-      className='
-        border-b-[1px] 
-        border-neutral-800 
-        p-5 
-        cursor-pointer 
-        hover:bg-neutral-900 
-        transition
-      '
-    >
+    <div className='border-b-[1px] border-neutral-800 p-5 cursor-pointer hover:bg-neutral-900 transition'>
       <div className='flex flex-row items-start gap-3'>
         <Avatar userId={data.user.id} />
         <div>
           <div className='flex flex-row items-center gap-2'>
             <p
               onClick={goToUser}
-              className='
-                text-white 
-                font-semibold 
-                cursor-pointer 
-                hover:underline
-            '
+              className='text-white font-semibold cursor-pointer hover:underline'
             >
               {data.user.name}
             </p>
             <span
               onClick={goToUser}
-              className='
-                text-neutral-500
-                cursor-pointer
-                hover:underline
-                hidden
-                md:block
-            '
+              className='text-neutral-500 cursor-pointer hover:underline hidden md:block'
             >
               @{data.user.username}
             </span>
diff --git a/components/posts/PostItem.tsx b/components/posts/PostItem.tsx
index d6df9ba..1cba7ec 100644
--- a/components/posts/PostItem.tsx
+++ b/components/posts/PostItem.tsx
@@ -58,42 +58,23 @@ const PostItem: React.FC<PostItemProps> = ({ data = {}, userId }) => {
   return (
     <div
       onClick={goToPost}
-      className='
-        border-b-[1px] 
-        border-neutral-800 
-        p-5 
-        cursor-pointer 
-        hover:bg-neutral-900 
-        transition
-      '
+      className='border-b-[1px] border-neutral-800 p-5 cursor-pointer hover:bg-neutral-900 transition'
     >
       <div className='flex flex-row items-start gap-3'>
         <div>
-          <Avatar userId={data.user?.id} />
+          <Avatar userId={data.user.id} />
         </div>
-
         <div>
           <div className='flex flex-row items-center gap-2'>
             <p
               onClick={goToUser}
-              className='
-                text-white 
-                font-semibold 
-                cursor-pointer 
-                hover:underline
-            '
+              className='text-white font-semibold cursor-pointer hover:underline'
             >
               {data.user.name}
             </p>
             <span
               onClick={goToUser}
-              className='
-                text-neutral-500
-                cursor-pointer
-                hover:underline
-                hidden
-                md:block
-            '
+              className='text-neutral-500 cursor-pointer hover:underline hidden md:block'
             >
               @{data.user.username}
             </span>
@@ -101,33 +82,13 @@ const PostItem: React.FC<PostItemProps> = ({ data = {}, userId }) => {
           </div>
           <div className='text-white mt-1'>{data.body}</div>
           <div className='flex flex-row items-center mt-3 gap-10'>
-            <div
-              className='
-                flex 
-                flex-row 
-                items-center 
-                text-neutral-500 
-                gap-2 
-                cursor-pointer 
-                transition 
-                hover:text-sky-500
-            '
-            >
+            <div className='flex flex-row items-center text-neutral-500 gap-2 cursor-pointer transition hover:text-sky-500'>
               <AiOutlineMessage size={20} />
               <p>{data.comments?.length || 0}</p>
             </div>
             <div
               onClick={onLike}
-              className='
-                flex 
-                flex-row 
-                items-center 
-                text-neutral-500 
-                gap-2 
-                cursor-pointer 
-                transition 
-                hover:text-red-500
-            '
+              className='flex flex-row items-center text-neutral-500 gap-2 cursor-pointer transition hover:text-red-500'
             >
               <LikeIcon color={hasLiked ? "red" : ""} size={20} />
               <p>{data.likedIds.length}</p>
diff --git a/components/users/UserBio.tsx b/components/users/UserBio.tsx
index 4ccc448..703ab2c 100644
--- a/components/users/UserBio.tsx
+++ b/components/users/UserBio.tsx
@@ -52,16 +52,7 @@ const UserBio: React.FC<UserBioProps> = ({ userId }) => {
         </div>
         <div className='flex flex-col mt-4'>
           <p className='text-white'>{fetchedUser?.bio}</p>
-          <div
-            className='
-              flex 
-              flex-row 
-              items-center 
-              gap-2 
-              mt-4 
-              text-neutral-500
-          '
-          >
+          <div className='flex flex-row items-center gap-2 mt-4 text-neutral-500'>
             <BiCalendar size={24} />
             <p>Joined {createdAt}</p>
           </div>
diff --git a/hooks/useUser.ts b/hooks/useUser.ts
index 56adabd..35d64f0 100644
--- a/hooks/useUser.ts
+++ b/hooks/useUser.ts
@@ -2,7 +2,7 @@ import useSWR from "swr";
 
 import fetcher from "@/libs/fetcher";
 
-const useCurrentUser = (userId: string) => {
+const useUser = (userId: string) => {
   const { data, error, isLoading, mutate } = useSWR(
     userId ? `/api/users/${userId}` : null,
     fetcher
@@ -16,4 +16,4 @@ const useCurrentUser = (userId: string) => {
   };
 };
 
-export default useCurrentUser;
+export default useUser;
diff --git a/hooks/useUsers.ts b/hooks/useUsers.ts
index 097f1ff..4276205 100644
--- a/hooks/useUsers.ts
+++ b/hooks/useUsers.ts
@@ -2,7 +2,7 @@ import useSWR from "swr";
 
 import fetcher from "@/libs/fetcher";
 
-const useCurrentUser = () => {
+const useUsers = () => {
   const { data, error, isLoading, mutate } = useSWR("/api/users", fetcher);
 
   return {
@@ -13,4 +13,4 @@ const useCurrentUser = () => {
   };
 };
 
-export default useCurrentUser;
+export default useUsers;
diff --git a/libs/prismadb.ts b/libs/prismadb.ts
index f2f82bf..1e77578 100644
--- a/libs/prismadb.ts
+++ b/libs/prismadb.ts
@@ -1,9 +1,10 @@
 import { PrismaClient } from "@prisma/client";
 
-const globalForPrisma = global as unknown as {
-  prisma: PrismaClient | undefined;
-};
+declare global {
+  var prisma: PrismaClient | undefined;
+}
 
-export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+const client = globalThis.prisma || new PrismaClient();
+if (process.env.NODE_ENV !== "production") globalThis.prisma = client;
 
-if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
+export default client;
diff --git a/libs/serverAuth.ts b/libs/serverAuth.ts
index 505493d..a6bff8a 100644
--- a/libs/serverAuth.ts
+++ b/libs/serverAuth.ts
@@ -1,10 +1,12 @@
 import { NextApiRequest, NextApiResponse } from "next";
+
+import prisma from "@/libs/prismadb";
 import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import { getServerSession } from "next-auth";
-import { prisma } from "./prismadb";
 
 const serverAuth = async (req: NextApiRequest, res: NextApiResponse) => {
   const session = await getServerSession(req, res, authOptions);
+
   if (!session?.user?.email) {
     throw new Error("Not signed in");
   }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7971fab..83e4b05 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,36 +1,23 @@
-import Head from "next/head";
 import type { AppProps } from "next/app";
-import { Poppins } from "next/font/google";
+import { Toaster } from "react-hot-toast";
+import { SessionProvider } from "next-auth/react";
 
-import Layout from "../components/Layout";
+import Layout from "@/components/Layout";
+import EditModal from "@/components/modals/EditModal";
 import LoginModal from "@/components/modals/LoginModal";
-
-import "@/styles/globals.css";
 import RegisterModal from "@/components/modals/RegisterModal";
-import { SessionProvider } from "next-auth/react";
-import { Toaster } from "react-hot-toast";
-import EditModal from "@/components/modals/EditModal";
-
-const poppins = Poppins({
-  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-});
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <SessionProvider session={pageProps.session}>
-      <main className={poppins.className}>
-        <Head>
-          <title>twittergram</title>
-        </Head>
-        <Toaster />
-        <EditModal />
-        <LoginModal />
-        <RegisterModal />
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </main>
+      <Toaster />
+      <RegisterModal />
+      <LoginModal />
+      <EditModal />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </SessionProvider>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
deleted file mode 100644
index 7e49d91..0000000
--- a/pages/_document.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from "next/document";
-
-export default function Document() {
-  return (
-    <Html lang='en'>
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
index 1850b68..a4ab1e1 100644
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@@ -2,7 +2,8 @@ import bcrypt from "bcrypt";
 import NextAuth, { AuthOptions } from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 import { PrismaAdapter } from "@auth/prisma-adapter";
-import { prisma } from "@/libs/prismadb";
+
+import prisma from "@/libs/prismadb";
 
 export const authOptions: AuthOptions = {
   adapter: PrismaAdapter(prisma) as any,
diff --git a/pages/api/comments.ts b/pages/api/comments.ts
new file mode 100644
index 0000000..eeb3c21
--- /dev/null
+++ b/pages/api/comments.ts
@@ -0,0 +1,66 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import serverAuth from "@/libs/serverAuth";
+import prisma from "@/libs/prismadb";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).end();
+  }
+
+  try {
+    const { currentUser } = await serverAuth(req, res);
+    const { body } = req.body;
+    const { postId } = req.query;
+
+    if (!postId || typeof postId !== "string") {
+      throw new Error("Invalid ID");
+    }
+
+    const comment = await prisma.comment.create({
+      data: {
+        body,
+        userId: currentUser.id,
+        postId,
+      },
+    });
+
+    // NOTIFICATION PART START
+    try {
+      const post = await prisma.post.findUnique({
+        where: {
+          id: postId,
+        },
+      });
+
+      if (post?.userId) {
+        await prisma.notification.create({
+          data: {
+            body: "Someone replied on your tweet!",
+            userId: post.userId,
+          },
+        });
+
+        await prisma.user.update({
+          where: {
+            id: post.userId,
+          },
+          data: {
+            hasNotification: true,
+          },
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+    // NOTIFICATION PART END
+
+    return res.status(200).json(comment);
+  } catch (error) {
+    console.log(error);
+    return res.status(400).end();
+  }
+}
diff --git a/pages/api/current.ts b/pages/api/current.ts
index d5df1c6..a65408b 100644
--- a/pages/api/current.ts
+++ b/pages/api/current.ts
@@ -1,15 +1,18 @@
-import serverAuth from "@/libs/serverAuth";
 import { NextApiRequest, NextApiResponse } from "next";
 
-export default async function handle(
+import serverAuth from "@/libs/serverAuth";
+
+export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
   if (req.method !== "GET") {
     return res.status(405).end();
   }
+
   try {
     const { currentUser } = await serverAuth(req, res);
+
     return res.status(200).json(currentUser);
   } catch (error) {
     console.log(error);
diff --git a/pages/api/edit.ts b/pages/api/edit.ts
index c5f2962..929beae 100644
--- a/pages/api/edit.ts
+++ b/pages/api/edit.ts
@@ -1,7 +1,8 @@
-import { prisma } from "@/libs/prismadb";
-import serverAuth from "@/libs/serverAuth";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import serverAuth from "@/libs/serverAuth";
+import prisma from "@/libs/prismadb";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
@@ -9,12 +10,16 @@ export default async function handler(
   if (req.method !== "PATCH") {
     return res.status(405).end();
   }
+
   try {
     const { currentUser } = await serverAuth(req, res);
+
     const { name, username, bio, profileImage, coverImage } = req.body;
+
     if (!name || !username) {
-      throw new Error(`Missing fields`);
+      throw new Error("Missing fields");
     }
+
     const updatedUser = await prisma.user.update({
       where: {
         id: currentUser.id,
@@ -27,6 +32,7 @@ export default async function handler(
         coverImage,
       },
     });
+
     return res.status(200).json(updatedUser);
   } catch (error) {
     console.log(error);
diff --git a/pages/api/follow.ts b/pages/api/follow.ts
index c37adc1..733a756 100644
--- a/pages/api/follow.ts
+++ b/pages/api/follow.ts
@@ -1,31 +1,67 @@
-import { prisma } from "@/libs/prismadb";
-import serverAuth from "@/libs/serverAuth";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import prisma from "@/libs/prismadb";
+import serverAuth from "@/libs/serverAuth";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  if (req.method !== "POST" && req.method !== "DELETE")
+  if (req.method !== "POST" && req.method !== "DELETE") {
     return res.status(405).end();
+  }
 
   try {
     const { userId } = req.body;
+
     const { currentUser } = await serverAuth(req, res);
-    if (!userId || typeof userId !== "string") throw new Error("Invalid ID");
+
+    if (!userId || typeof userId !== "string") {
+      throw new Error("Invalid ID");
+    }
+
     const user = await prisma.user.findUnique({
       where: {
         id: userId,
       },
     });
 
-    if (!user) throw new Error("Invalid ID");
+    if (!user) {
+      throw new Error("Invalid ID");
+    }
+
     let updatedFollowingIds = [...(user.followingIds || [])];
+
     if (req.method === "POST") {
       updatedFollowingIds.push(userId);
+
+      // NOTIFICATION PART START
+      try {
+        await prisma.notification.create({
+          data: {
+            body: "Someone followed you!",
+            userId,
+          },
+        });
+
+        await prisma.user.update({
+          where: {
+            id: userId,
+          },
+          data: {
+            hasNotification: true,
+          },
+        });
+      } catch (error) {
+        console.log(error);
+      }
+      // NOTIFICATION PART END
     }
+
     if (req.method === "DELETE") {
-      updatedFollowingIds = updatedFollowingIds.filter((id) => id !== userId);
+      updatedFollowingIds = updatedFollowingIds.filter(
+        (followingId) => followingId !== userId
+      );
     }
 
     const updatedUser = await prisma.user.update({
diff --git a/pages/api/like.ts b/pages/api/like.ts
new file mode 100644
index 0000000..f900c06
--- /dev/null
+++ b/pages/api/like.ts
@@ -0,0 +1,89 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import prisma from "@/libs/prismadb";
+import serverAuth from "@/libs/serverAuth";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST" && req.method !== "DELETE") {
+    return res.status(405).end();
+  }
+
+  try {
+    const { postId } = req.body;
+
+    const { currentUser } = await serverAuth(req, res);
+
+    if (!postId || typeof postId !== "string") {
+      throw new Error("Invalid ID");
+    }
+
+    const post = await prisma.post.findUnique({
+      where: {
+        id: postId,
+      },
+    });
+
+    if (!post) {
+      throw new Error("Invalid ID");
+    }
+
+    let updatedLikedIds = [...(post.likedIds || [])];
+
+    if (req.method === "POST") {
+      updatedLikedIds.push(currentUser.id);
+
+      // NOTIFICATION PART START
+      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);
+      }
+      // NOTIFICATION PART END
+    }
+
+    if (req.method === "DELETE") {
+      updatedLikedIds = updatedLikedIds.filter(
+        (likedId) => likedId !== currentUser?.id
+      );
+    }
+
+    const updatedPost = await prisma.post.update({
+      where: {
+        id: postId,
+      },
+      data: {
+        likedIds: updatedLikedIds,
+      },
+    });
+
+    return res.status(200).json(updatedPost);
+  } catch (error) {
+    console.log(error);
+    return res.status(400).end();
+  }
+}
diff --git a/pages/api/notifications/[userId].ts b/pages/api/notifications/[userId].ts
new file mode 100644
index 0000000..5a6f4b8
--- /dev/null
+++ b/pages/api/notifications/[userId].ts
@@ -0,0 +1,43 @@
+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();
+  }
+}
diff --git a/pages/api/posts/[postId].ts b/pages/api/posts/[postId].ts
index 9d89e30..0d84d99 100644
--- a/pages/api/posts/[postId].ts
+++ b/pages/api/posts/[postId].ts
@@ -1,6 +1,7 @@
-import { prisma } from "@/libs/prismadb";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import prisma from "@/libs/prismadb";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
diff --git a/pages/api/posts/index.ts b/pages/api/posts/index.ts
index e81620b..5821cf2 100644
--- a/pages/api/posts/index.ts
+++ b/pages/api/posts/index.ts
@@ -1,7 +1,8 @@
-import { prisma } from "@/libs/prismadb";
-import serverAuth from "@/libs/serverAuth";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import serverAuth from "@/libs/serverAuth";
+import prisma from "@/libs/prismadb";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
@@ -14,8 +15,12 @@ export default async function handler(
     if (req.method === "POST") {
       const { currentUser } = await serverAuth(req, res);
       const { body } = req.body;
+
       const post = await prisma.post.create({
-        data: { body, userId: currentUser.id },
+        data: {
+          body,
+          userId: currentUser.id,
+        },
       });
 
       return res.status(200).json(post);
@@ -23,7 +28,11 @@ export default async function handler(
 
     if (req.method === "GET") {
       const { userId } = req.query;
+
+      console.log({ userId });
+
       let posts;
+
       if (userId && typeof userId === "string") {
         posts = await prisma.post.findMany({
           where: {
@@ -48,6 +57,7 @@ export default async function handler(
           },
         });
       }
+
       return res.status(200).json(posts);
     }
   } catch (error) {
diff --git a/pages/api/register.ts b/pages/api/register.ts
index 08442a5..20e3231 100644
--- a/pages/api/register.ts
+++ b/pages/api/register.ts
@@ -1,8 +1,9 @@
-import { prisma } from "@/libs/prismadb";
 import bcrypt from "bcrypt";
 import { NextApiRequest, NextApiResponse } from "next";
 
-export default async function handle(
+import prisma from "@/libs/prismadb";
+
+export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
@@ -12,11 +13,19 @@ export default async function handle(
 
   try {
     const { email, username, name, password } = req.body;
+
     const hashedPassword = await bcrypt.hash(password, 12);
+
     const user = await prisma.user.create({
-      data: { email, username, name, hashedPassword },
+      data: {
+        email,
+        username,
+        name,
+        hashedPassword,
+      },
     });
-    res.status(200).json(user);
+
+    return res.status(200).json(user);
   } catch (error) {
     console.log(error);
     return res.status(400).end();
diff --git a/pages/api/users/[userId].ts b/pages/api/users/[userId].ts
index cf9c085..4fd4665 100644
--- a/pages/api/users/[userId].ts
+++ b/pages/api/users/[userId].ts
@@ -1,6 +1,7 @@
-import { prisma } from "@/libs/prismadb";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import prisma from "@/libs/prismadb";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
@@ -11,14 +12,17 @@ export default async function handler(
 
   try {
     const { userId } = req.query;
+
     if (!userId || typeof userId !== "string") {
       throw new Error("Invalid ID");
     }
-    const user = await prisma.user.findUnique({
+
+    const existingUser = await prisma.user.findUnique({
       where: {
-        id: userId as string,
+        id: userId,
       },
     });
+
     const followersCount = await prisma.user.count({
       where: {
         followingIds: {
@@ -26,7 +30,8 @@ export default async function handler(
         },
       },
     });
-    return res.status(200).json({ ...user, followersCount });
+
+    return res.status(200).json({ ...existingUser, followersCount });
   } catch (error) {
     console.log(error);
     return res.status(400).end();
diff --git a/pages/api/users/index.ts b/pages/api/users/index.ts
index 2b81f69..1de9ac2 100644
--- a/pages/api/users/index.ts
+++ b/pages/api/users/index.ts
@@ -1,6 +1,7 @@
-import { prisma } from "@/libs/prismadb";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import prisma from "@/libs/prismadb";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
@@ -15,7 +16,8 @@ export default async function handler(
         createdAt: "desc",
       },
     });
-    res.status(200).json(users);
+
+    return res.status(200).json(users);
   } catch (error) {
     console.log(error);
     return res.status(400).end();
diff --git a/pages/index.tsx b/pages/index.tsx
index 7d90799..1d39f1a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,16 +1,13 @@
-import React from "react";
-import Header from "../components/Header";
-import Form from "@/components/Form";
 import PostFeed from "@/components/posts/PostFeed";
+import Header from "@/components/Header";
+import Form from "@/components/Form";
 
-const Home = () => {
+export default function Home() {
   return (
-    <div>
+    <>
       <Header label='Home' />
       <Form placeholder="What's happening?" />
       <PostFeed />
-    </div>
+    </>
   );
-};
-
-export default Home;
+}
diff --git a/pages/notifications.tsx b/pages/notifications.tsx
new file mode 100644
index 0000000..bfd492c
--- /dev/null
+++ b/pages/notifications.tsx
@@ -0,0 +1,35 @@
+import Header from "@/components/Header";
+import NotificationsFeed from "@/components/NotificationsFeed";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { NextPageContext } from "next";
+import { getSession } from "next-auth/react";
+
+export async function getServerSideProps(context: NextPageContext) {
+  const session = await getSession(context);
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {
+      session,
+    },
+  };
+}
+
+const Notifications = () => {
+  return (
+    <>
+      <Header showBackArrow label='Notifications' />
+      <NotificationsFeed />
+    </>
+  );
+};
+
+export default Notifications;
diff --git a/pages/search.tsx b/pages/search.tsx
new file mode 100644
index 0000000..e72ba8b
--- /dev/null
+++ b/pages/search.tsx
@@ -0,0 +1,11 @@
+import Header from "@/components/Header";
+
+const Search = () => {
+  return (
+    <>
+      <Header label='Search' />
+    </>
+  );
+};
+
+export default Search;
diff --git a/public/thirteen.svg b/public/thirteen.svg
new file mode 100644
index 0000000..8977c1b
--- /dev/null
+++ b/public/thirteen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 0722366..1cc09c4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,8 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body,
 :root {
-  background-color: black;
+  @apply h-full bg-black;
+}
+
+body {
+  @apply h-full bg-black;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 8c4d1b2..75167b6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,18 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
+    extend: {},
   },
   plugins: [],
 }
diff --git a/tsconfig.json b/tsconfig.json
index 8b8e581..f4ab65f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }