quality of life update, post liking bug fix

tomyRomero · May 15, 2024 · 317aeec · 317aeec
1 parent e19014e
commit 317aeec
Show file tree

Hide file tree

Showing 18 changed files with 50 additions and 44 deletions.
diff --git a/app/(root)/activity/page.tsx b/app/(root)/activity/page.tsx
@@ -23,7 +23,7 @@ async function Page({
     //Page Number
     searchParams.page ? + searchParams.page : 1, 
     //Page Size
-    8);
+    7);
 
   const activity = results.activity
 

diff --git a/app/(root)/chat/page.tsx b/app/(root)/chat/page.tsx
@@ -48,7 +48,7 @@ async function Page({
   }
 
   return (
-    <section className='w-full flex flex-1 flex-col bg-black rounded-xl h-max-screen'>
+    <section className='max-sm:-mt-6 w-full flex flex-1 flex-col bg-black rounded-xl h-max-screen'>
       <div className="flex">
         <h1 className='text-heading1-bold text-light-1 ml-4 mt-2'>Chat</h1>
         <Image 
@@ -61,7 +61,7 @@ async function Page({
       </div>
       <div className="w-11/12 mx-auto m-1 p-1 border-b-2 border-white" />
 
-      <div className="p-4">
+      <div className="p-2 max-sm:p-0.5">
         <Searchbar routeType='chat' />
       </div>
 
@@ -74,7 +74,7 @@ async function Page({
       </div>
 
       <br></br>
-      <h2 className="text-left ml-4 text-heading3-bold text-light-1">Recent Chats..</h2>
+      <h2 className="text-left ml-4 text-heading3-bold max-sm:text-heading4-medium text-light-1">Recent Chats..</h2>
      <Chatbox chats= {chats}/>
   </section>
 );

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -51,7 +51,7 @@ export default async function RootLayout({
           <main className='flex flex-row'>
             <LeftSidebar userid={userid} /> 
             <section className='main-container'>
-              <div className='w-full max-w-4xl'>{children}</div>
+              <div className='w-full max-w-4xl mt-6'>{children}</div>
             </section>
             <RightBar userid={userid}/>
           </main>

diff --git a/app/(root)/search-post/page.tsx b/app/(root)/search-post/page.tsx
@@ -27,10 +27,6 @@ const page = async (
 
     const result = await searchPosts({ searchQuery, pageNumber, pageSize });
 
-    const scrollToTop = () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
-
   return (
     <>
     <h1 className='head-text text-left text-black mb-4'>Search for Posts...</h1>

diff --git a/components/Chatbox.tsx b/components/Chatbox.tsx
@@ -59,7 +59,7 @@ const Chatbox = ({ chats }: any) => {
           ))}
         </>
       )}
-      <div className="pagination">
+      <div className="pagination max-sm:mt-2.5">
         <Button
           onClick={() => handleNavigation('prev')}
           disabled={page === 0}

diff --git a/components/InfiniteFeed.tsx b/components/InfiniteFeed.tsx
@@ -9,7 +9,7 @@ import { Button } from './ui/button';
 
 const InfiniteFeed = ({user}: {user: string}) => {
 
-    const {title, scrollPosition, setScrollPosition} = useAppContext();
+    const {title} = useAppContext();
     const [posts, setPosts] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
@@ -64,7 +64,7 @@ const InfiniteFeed = ({user}: {user: string}) => {
         window.scrollTo(0, parseInt(storedScrollY, 10));
       }
     }, []);
-
+ 
     useEffect(() => {
       const handleBeforeUnload = () => {
         localStorage.setItem('infiniteFeedScrollPosition', window.scrollY.toString());
@@ -81,13 +81,13 @@ const InfiniteFeed = ({user}: {user: string}) => {
   return (
       <>
         <section ref={containerRef} className='mt-9 flex flex-col gap-10'>
-          {posts.length === 0 && !isLoading ? (
+          {!isLoading && posts.length === 0 ? (
             <p className='no-result'>No posts found</p>
           ) : (
             <>
               {posts.map((post: any) => (
                 <Post
-                  key={post.idpost * Math.random()}
+                  key={post.idpost}
                   id={post.idpost}
                   currentUserId={user}
                   parentId={post.parent_Id}
@@ -135,4 +135,4 @@ const InfiniteFeed = ({user}: {user: string}) => {
     );
 }
 
-export default InfiniteFeed;
+export default React.memo(InfiniteFeed);
diff --git a/components/cards/Post.tsx b/components/cards/Post.tsx
@@ -363,8 +363,9 @@ function Post({
           <Image 
           src="/assets/edit.png"
           alt="edit icon"
-          width={22}
-          height={22}
+          width={30}
+          height={30}
+          className="transition-transform duration-300 transform hover:scale-110"
           />
           </button>     
 

diff --git a/components/forms/DeletePost.tsx b/components/forms/DeletePost.tsx
@@ -62,9 +62,9 @@ const handleDelete = async () => {
     <Image
       src='/assets/delete.svg'
       alt='delete'
-      width={24}
-      height={24}
-      className='cursor-pointer object-contain'
+      width={32}
+      height={32}
+      className='cursor-pointer object-contain transition-transform duration-300 transform hover:scale-110'
       onClick={handleDelete}
     />
   );

diff --git a/components/shared/FilterBox.tsx b/components/shared/FilterBox.tsx
@@ -113,7 +113,7 @@ const FilterBox = ()=> {
     <div className=" w-72">
       <Listbox value={selected} onChange={setSelected}>
         <div className="relative mt-1">
-          <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left z-20 shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+          <Listbox.Button className="text-white relative w-full cursor-pointer rounded-lg bg-black py-2 pl-3 pr-10 text-left z-20 shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
             <span className="block truncate">{selected.name}</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
               <ChevronUpDownIcon

diff --git a/components/shared/LeftBar.tsx b/components/shared/LeftBar.tsx
@@ -100,7 +100,7 @@ function LeftSidebar({userid}: any)
 
     return(
         <section className="custom-scrollbar leftsidebar">
-            <div className="flex w-full flex-1 flex-col gap-6 px-9">
+            <div className="mt-3 flex w-full flex-1 flex-col gap-6 px-14">
                 {
 
                     sidebarLinks.map(( link)=> {
@@ -119,15 +119,15 @@ function LeftSidebar({userid}: any)
                             <Image 
                             src={link.imgURL}
                             alt={link.label}
-                            width={25}
-                            height={25}
+                            width={35}
+                            height={35}
                             />
-                            <p className="text-light-1 max-lg:hidden">
+                            <p className="self-center text-light-1 max-lg:hidden">
                             {link.label}
                             </p>
                             {
                             messageNoti && link.label === "Message" && (
-                            <div className="pt-0.5">
+                            <div className="self-center">
                             <Image 
                                 src={"/assets/alert.svg"}
                                 alt={"alert"}
@@ -139,7 +139,7 @@ function LeftSidebar({userid}: any)
                             }
                             {
                             activityNoti && link.label === "Activity" && (
-                            <div className="pt-0.5">
+                            <div className="self-center">
                             <Image 
                                 src={"/assets/alert.svg"}
                                 alt={"alert"}

diff --git a/components/shared/SearchButton.tsx b/components/shared/SearchButton.tsx
@@ -1,25 +1,40 @@
 "use client"
 
-import React from 'react'
+import React, { useState } from 'react'
 import { Button } from '../ui/button'
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
 
 const SearchButton = () => {
     const router = useRouter();
+    const [isHovered, setIsHovered] = useState(false);
 
   return (
     <Button className='bg-black border border-black text-white hover:bg-transparent hover:text-black' 
+    onMouseEnter={() => setIsHovered(true)}
+    onMouseLeave={() => setIsHovered(false)}
     onClick={()=> {
       router.push('/search-post')
     }}>
       <div className='flex gap-1'>
+      {isHovered ? 
+      ( 
       <Image 
-      src="/assets/search.svg"
+      src="/assets/searchblack.png"
       alt="search icon"
       width={24}
       height={24}
       />
+    )
+    : 
+    ( <Image 
+        src="/assets/search.png"
+        alt="search icon"
+        width={24}
+        height={24}
+    />
+    )
+    }
       Search Posts
       </div>
     </Button>

diff --git a/components/shared/Searchbar.tsx b/components/shared/Searchbar.tsx
@@ -31,18 +31,18 @@ function Searchbar({ routeType }: Props) {
   return (
     <div className='searchbar'>
       <Image
-        src='/assets/search.svg'
+        src='/assets/search.png'
         alt='search'
-        width={24}
-        height={24}
+        width={40}
+        height={40}
         className='object-contain'
       />
       <Input
         id='text'
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         placeholder={`Start Typing To Begin Searching`}
-        className='no-focus searchbar_input'
+        className='searchbar_input'
       />
     </div>
   );

diff --git a/components/shared/TopBar.tsx b/components/shared/TopBar.tsx
@@ -42,10 +42,10 @@ function Topbar({ userId } : any)
             <Link href="/" className="flex items-center gap-4">
              <Image src="/assets/logo.svg"
              alt="logo"
-             width={28}
-             height={28}
+             width={38}
+             height={38}
              />
-            <p className="font-agbalumo text-heading3-bold"><span className="teal_gradient">SPARKS</span></p>
+            <p className="font-agbalumo text-heading2-bold"><span className="teal_gradient">SPARKS</span></p>
             </Link>
 
             <div className={`md:hidden lg:hidden xl:hidden flex ml-auto hover:bg-primary-500 rounded-lg p-1 mr-2 ${isActive() ? 'bg-primary-500 ' : ''}`}>

diff --git a/constants/index.ts b/constants/index.ts
@@ -15,7 +15,7 @@ export const sidebarLinks = [
       label: "Activity",
     },
     {
-      imgURL: "/assets/search.svg",
+      imgURL: "/assets/search.png",
       route: "/search",
       label: "Search",
     },
@@ -43,7 +43,7 @@ export const sidebarLinks = [
       label: "Activity",
     },
     {
-      imgURL: "/assets/search.svg",
+      imgURL: "/assets/search.png",
       route: "/search",
       label: "Search",
     },

diff --git a/lib/AppContext.tsx b/lib/AppContext.tsx
@@ -34,8 +34,6 @@ type AppContextProps = {
   activityNoti: any;
   setActivityNoti: React.Dispatch<React.SetStateAction<any>>;
 
-  scrollPosition: any;
-  setScrollPosition: React.Dispatch<React.SetStateAction<any>>;
 };
 
 // Create the AppContext with an initial value of undefined
@@ -68,9 +66,6 @@ export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   //For global activity notifcation
   const [activityNoti, setActivityNoti] = useState(false);
 
-  //For scroll position
-  const [scrollPosition, setScrollPosition] = useState(0);
-
   //Client Pusher Instance Logic
   const pusher = pusherClient;
   const [pusherChannel, setPusherChannel] = useState(pusher.subscribe('sparks'));
@@ -110,7 +105,6 @@ export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
     setTitle, title,
     messageNoti, setMessageNoti,
     activityNoti, setActivityNoti,
-    scrollPosition, setScrollPosition
   };
 
   // Set up event listeners for user activity (adjust as needed based on your application)

diff --git a/public/assets/search.png b/public/assets/search.png
diff --git a/public/assets/searchblack.png b/public/assets/searchblack.png
diff --git a/public/assets/sparks-home.png b/public/assets/sparks-home.png