finish edit page, fix navigation, other ui fixes

mowblox · Nov 19, 2023 · 2420603 · 2420603
1 parent 58927ec
commit 2420603
Show file tree

Hide file tree

Showing 9 changed files with 255 additions and 186 deletions.
diff --git a/frontend/nextjs/src/app/dapp/_components/page-links.ts b/frontend/nextjs/src/app/dapp/_components/page-links.ts
@@ -0,0 +1,12 @@
+export const CREATE_A_POST_PAGE = "/dapp/p/create"
+export const PROFILE_EDIT_PAGE = "/dapp/profile/edit"
+export const HOME_PAGE = "/dapp"
+export const MARKETPLACE_PAGE = "/dapp/marketplace"
+export const BOOKINGS_PAGE = "/dapp/bookings"
+export const PROFILE_PAGE = (username:string) => `/dapp/profile/${username}`
+export const NOTIFICATIONS_PAGE = "/dapp/notifications"
+
+export const WELCOME_PAGE = "/welcome"
+export const FAQ_PAGE = "/faq"
+export const HELP_PAGE = "/help"
+export const PRIVACY_POLICY_PAGE = "/privacy-policy"
diff --git a/frontend/nextjs/src/app/dapp/_components/sidebar.tsx b/frontend/nextjs/src/app/dapp/_components/sidebar.tsx
@@ -1,66 +1,110 @@
+"use client"
+import { useState, useEffect } from "react"
 import Link from "next/link"
+import { usePathname } from 'next/navigation'
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import {HiOutlineHome, HiOutlineUser, HiOutlineUsers, HiOutlineCalendarDays, HiOutlineEnvelope} from 'react-icons/hi2'
+import {HiOutlineHome, HiOutlineUser, HiOutlineUsers, HiOutlineCalendarDays, HiOutlineEnvelope, HiChevronLeft} from 'react-icons/hi2'
+import { HOME_PAGE, MARKETPLACE_PAGE, BOOKINGS_PAGE, PROFILE_PAGE, NOTIFICATIONS_PAGE, PROFILE_EDIT_PAGE, CREATE_A_POST_PAGE, WELCOME_PAGE, FAQ_PAGE, HELP_PAGE, PRIVACY_POLICY_PAGE } from "./page-links"
+
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 
 }
 
-const CREATE_A_POST_LINK = "/dapp/p/create"
-
 const primaryNavigationLinks = [
     {
         title: "Home",
         icon: HiOutlineHome,
         isActive: false,
-        href: "/dapp"
+        href: HOME_PAGE
     },
     {
         title: "Marketplace",
         icon: HiOutlineUsers,
         isActive: false,
-        href: "/dapp/marketplace"
+        href: MARKETPLACE_PAGE
     },
     {
         title: "Bookings",
         icon: HiOutlineCalendarDays,
         isActive: false,
-        href: "/dapp/bookings"
+        href: BOOKINGS_PAGE
     },
     {
         title: "My Profile",
         icon: HiOutlineUser,
         isActive: false,
-        href: `/dapp/profile/naval`
+        href: PROFILE_PAGE
     },
     {
         title: "Notifications",
         icon: HiOutlineEnvelope,
         isActive: false,
-        href: "/dapp/notifications"
+        href: NOTIFICATIONS_PAGE
     }
 ]
 
+const resourcesLinks = [
+    {
+        title: "Welcome",
+        href: WELCOME_PAGE
+    },
+    {
+        title: "FAQ",
+        href: FAQ_PAGE
+    },
+    {
+        title: "Help",
+        href: HELP_PAGE
+    },
+    {
+        title: "Privacy Policy",
+        href: PRIVACY_POLICY_PAGE
+    },
+]
+
+const hasBackButtonList = [
+    PROFILE_EDIT_PAGE,
+    CREATE_A_POST_PAGE
+]
+
 
 export function Sidebar({ className }: SidebarProps) {
+    const [hasBackButton, setHasBackButton] = useState(false)
+    const pathname = usePathname()
+
+    useEffect(() => {
+      if(hasBackButtonList.includes(pathname!) ) {
+        setHasBackButton(true)
+      } else {
+        setHasBackButton(false)
+      }
+    }, [pathname])
+
     return (
         <div className={cn("pb-12", className)}>
-            <div className="space-y-4 py-4">
+            {hasBackButton && <div className="space-y-4 py-4 px-3">
+                <Button variant="ghost" className="w-full mt-4" asChild>
+                    <Link href={HOME_PAGE}>
+                        <HiChevronLeft className="mr-2 -ml-4 h-4 w-4 text-accent-2" /> 
+                        Go Back
+                    </Link>
+                </Button></div>}
+            {!hasBackButton && <div className="space-y-4 py-4">
                 <div className="px-3 py-2">
                     <div className="space-y-1">
                         {primaryNavigationLinks.map((link, key)=> (
                             <Button variant="ghost" key={`primary-nav-${key}`} className="w-full justify-start" asChild>
-                                <Link href={link.href}>
+                                <Link href={typeof(link.href)==="function" ? link.href("naval") : link.href}>
                                     <link.icon className="mr-2 h-4 w-4 text-accent-2" />
                                     {link.title}
                                 </Link>
                             </Button>
                         ))}
                     </div>
                     <Button variant="gradient" className="w-full mt-4" asChild>
-                        <Link href={CREATE_A_POST_LINK}>Create a Post</Link>
+                        <Link href={CREATE_A_POST_PAGE}>Create a Post</Link>
                     </Button>
                 </div>
                 <div className="px-3 py-2">
@@ -69,23 +113,18 @@ export function Sidebar({ className }: SidebarProps) {
                         Resources
                     </h2>
                     <div className="space-y-0">
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/notifications"> Welcome </Link>
-                        </Button>
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/faq"> FAQ </Link>
-                        </Button>
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/help"> Help </Link>
-                        </Button>
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/privacy-policy"> Privacy Policy </Link>
-                        </Button>
+                            {resourcesLinks.map((link, key) => (
+                                <Button variant="link" key={`primary-nav-${key}`} className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                                    <Link href={link.href}>
+                                        {link.title}
+                                    </Link>
+                                </Button>
+                            ))}
                     </div>
                     </div>
 
                 </div>
-            </div>
+            </div>}
         </div>
     )
 }
diff --git a/frontend/nextjs/src/app/dapp/page.tsx b/frontend/nextjs/src/app/dapp/page.tsx
@@ -127,7 +127,6 @@ const topCreatorList = [
 export default function RootLayout() {
   const { EMTMarketPlace, ExpertToken, MentorToken } = useContracts();
   const {user, updateUser, isLoading} = useUser();
-  console.log('u', user)
 
   // return (
   //   <div className="flex flex-col">