From 0fb7fc0c635f829fe2a1b4d60b6280fc288ae988 Mon Sep 17 00:00:00 2001
From: Kevin-Umali <kevinumali0999@gmail.com>
Date: Fri, 7 Jun 2024 23:29:13 +0800
Subject: [PATCH] Fix wrong path link

---
 .../generate/_components/project-tabs.tsx     |  2 +-
 .../(account)/_components/avatar-control.tsx  |  5 +++-
 client/app/(account)/_components/navbar.tsx   | 25 ++++++++++++-------
 .../(routes)/community/community.tsx          | 20 ++++++++-------
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/client/app/(account)/(routes)/generate/_components/project-tabs.tsx b/client/app/(account)/(routes)/generate/_components/project-tabs.tsx
index b87fbd1..25e8889 100644
--- a/client/app/(account)/(routes)/generate/_components/project-tabs.tsx
+++ b/client/app/(account)/(routes)/generate/_components/project-tabs.tsx
@@ -56,7 +56,7 @@ const ProjectTabs: React.FC<ProjectTabsProps> = ({ projects, className }) => {
           <Separator className="my-2 md:block" />
           <div className="mt-3 flex flex-col items-start space-y-2 md:flex-row md:items-center md:space-x-2 md:space-y-0">
             <Label className="sm:text-md mb-2 text-lg md:mb-0">Like this idea?</Label>
-            <Link href={{ pathname: "/project-detail", query: { ...project } }} as={`/project-detail/${project.title}`} passHref>
+            <Link href={{ pathname: "/project-detail", query: { ...project } }} passHref>
               <Button className="flex w-full items-center justify-center space-x-1 text-xs md:w-auto md:text-sm">
                 <BookOpen className="size-4" aria-label="Book icon" />
                 <span>Provide Detailed Steps</span>
diff --git a/client/app/(account)/_components/avatar-control.tsx b/client/app/(account)/_components/avatar-control.tsx
index 3a513c4..8728cc6 100644
--- a/client/app/(account)/_components/avatar-control.tsx
+++ b/client/app/(account)/_components/avatar-control.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from "next/navigation";
 import { HelpCircle, LogOut, Settings } from "lucide-react";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -8,6 +9,8 @@ interface AvatarControlProps {
 }
 
 const AvatarControl: React.FC<AvatarControlProps> = ({ logout }) => {
+  const router = useRouter();
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -18,7 +21,7 @@ const AvatarControl: React.FC<AvatarControlProps> = ({ logout }) => {
       <DropdownMenuContent className="w-50">
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onClick={() => router.push("/settings")}>
           <span className="flex items-center space-x-2">
             <Settings size={20} />
             <span>Settings</span>
diff --git a/client/app/(account)/_components/navbar.tsx b/client/app/(account)/_components/navbar.tsx
index 02edcb1..954820d 100644
--- a/client/app/(account)/_components/navbar.tsx
+++ b/client/app/(account)/_components/navbar.tsx
@@ -3,6 +3,7 @@
 import { useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useAuth } from "@/context/authContext";
 import { useCurrency } from "@/context/currencyContext";
 import { useRoutes } from "@/context/routesContext";
@@ -21,6 +22,7 @@ import AvatarControl from "./avatar-control";
 const Navbar: React.FC = () => {
   const [open, setOpen] = useState(false);
 
+  const router = useRouter(); // Get the router instance
   const { theme, setTheme } = useTheme();
   const { currency, setCurrency, currencyList } = useCurrency();
   const { routes, activePath } = useRoutes();
@@ -31,6 +33,11 @@ const Navbar: React.FC = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
 
+  const handleNavigation = (path: string) => {
+    setOpen(!open);
+    router.push(path);
+  };
+
   const currencyItems = useMemo(
     () =>
       currencyList.map((value) => (
@@ -38,7 +45,7 @@ const Navbar: React.FC = () => {
           {value}
         </SelectItem>
       )),
-    [],
+    [currencyList],
   );
 
   return (
@@ -52,21 +59,21 @@ const Navbar: React.FC = () => {
         </SheetTrigger>
         <SheetContent side="left" className="flex flex-col">
           <nav className="grid gap-2 text-lg font-medium">
-            <Link href="#" as={"/"} className="flex items-center gap-2 text-lg font-semibold">
+            <Button variant="ghost" onClick={() => handleNavigation("#")} className="flex items-center gap-2 text-lg font-semibold">
               <Image src="/android-chrome-512x512.png" alt="Logo" width={32} height={32} priority={true} />
               <span className="text-md sm:text-xl lg:text-xl">DIYspire</span>
-            </Link>
-            {routes?.map(({ label, path, icon: IconComponent }, index) => (
-              <Link
+            </Button>
+            {routes?.map(({ label, path, icon: IconComponent, disabled }, index) => (
+              <Button
+                disabled={disabled}
+                variant="ghost"
                 key={index + path}
-                href={path}
-                as={path}
                 className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground", activePath && path.includes(activePath) ? "text-primary" : "text-muted-foreground")}
-                onClick={() => setOpen(!open)}
+                onClick={() => handleNavigation(path)}
               >
                 {IconComponent && <IconComponent size={20} />}
                 <span className="text-md sm:text-xl lg:text-xl">{label}</span>
-              </Link>
+              </Button>
             ))}
           </nav>
           <div className="mt-auto">
diff --git a/client/app/(landing)/(routes)/community/community.tsx b/client/app/(landing)/(routes)/community/community.tsx
index edd7d96..bd431be 100644
--- a/client/app/(landing)/(routes)/community/community.tsx
+++ b/client/app/(landing)/(routes)/community/community.tsx
@@ -79,23 +79,24 @@ export default function CommunityGeneratedIdeaList() {
         </Label>
       </div>
       {isLoading ? renderLoadingSkeleton() : isSuccess && communityData.data.totalCount > 0 ? renderProjectCards() : renderNoDataDisplay()}
-      {isSuccess && (
+      {isSuccess && totalPages > 1 && (
         <Pagination className="mt-8 flex items-center justify-center">
           <PaginationContent>
             <PaginationItem>
               <PaginationPrevious onClick={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))} aria-disabled={currentPage === 1} />
             </PaginationItem>
-
             <PaginationItem>
               <PaginationLink isActive={currentPage === 1} onClick={() => setCurrentPage(1)}>
                 1
               </PaginationLink>
             </PaginationItem>
+
             {currentPage > 3 && (
               <PaginationItem>
                 <PaginationEllipsis />
               </PaginationItem>
             )}
+
             {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
               const page = currentPage - 2 + i;
               if (page > 1 && page < totalPages) {
@@ -109,18 +110,19 @@ export default function CommunityGeneratedIdeaList() {
               }
               return null;
             }).filter(Boolean)}
+
             {currentPage < totalPages - 2 && (
               <PaginationItem>
                 <PaginationEllipsis />
               </PaginationItem>
             )}
-            {totalPages > 1 && (
-              <PaginationItem>
-                <PaginationLink isActive={currentPage === totalPages} onClick={() => setCurrentPage(totalPages)}>
-                  {totalPages}
-                </PaginationLink>
-              </PaginationItem>
-            )}
+
+            <PaginationItem>
+              <PaginationLink isActive={currentPage === totalPages} onClick={() => setCurrentPage(totalPages)}>
+                {totalPages}
+              </PaginationLink>
+            </PaginationItem>
+
             <PaginationItem>
               <PaginationNext onClick={() => setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages))} aria-disabled={currentPage === totalPages} />
             </PaginationItem>