Added notification and refactored code

PrathmeshSadake · Jun 10, 2023 · aa83377 · aa83377
1 parent 9f03912
commit aa83377
Show file tree

Hide file tree

Showing 39 changed files with 454 additions and 364 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>