Skip to content

Commit

Permalink
[front] - fix(navigation): tabs switch glitch (#8579)
Browse files Browse the repository at this point in the history 
* [front] - refactor: streamline state management in NavigationSidebar

 - Remove useState and useEffect for activePath and currentTab in favor of useMemo
 - Simplify tab and navigation item rendering logic with direct mapping from navs
 - Ensure a default value for the Tabs component when no currentTab is identified
 - Remove redundant conditionals and nested fragment structures for navigation rendering

* [front] - refactor: clean up import statements and fix JSX format in NavigationSidebar

 - Simplify import statement for SidebarNavigation type
 - Ensure proper formatting with space in self-closing Logo JSX tag

* [front] - docs: add TODO for fixing AppLayout issue

 - Added a comment to address the AppLayout changing issue between pages at a future date
  • Loading branch information
@JulesBelveze
JulesBelveze authored Nov 12, 2024
1 parent 9b4b84e commit 56f988e
Showing 1 changed file with 59 additions and 82 deletions.
141 changes: 59 additions & 82 deletions front/components/navigation/NavigationSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
NavigationListItem,
NavigationListLabel,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@dust-tt/sparkle";
Expand All @@ -13,11 +14,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { useCallback, useEffect, useMemo, useState } from "react";

import type {
AppLayoutNavigation,
SidebarNavigation,
TabAppLayoutNavigation,
} from "@app/components/navigation/config";
import type { SidebarNavigation } from "@app/components/navigation/config";
import { getTopNavigationTabs } from "@app/components/navigation/config";
import { UserMenu } from "@app/components/UserMenu";
import WorkspacePicker from "@app/components/WorkspacePicker";
Expand All @@ -42,39 +39,19 @@ export const NavigationSidebar = React.forwardRef<
const router = useRouter();
const { user } = useUser();
const [activePath, setActivePath] = useState("");
const [currentTab, setCurrentTab] = useState<
TabAppLayoutNavigation | undefined
>(undefined);

useEffect(() => {
if (router.isReady && router.route) {
setActivePath(router.route);
}
}, [router.route, router.isReady]);

const nav = useMemo(() => getTopNavigationTabs(owner), [owner]);

const [navs, setNavs] = useState<AppLayoutNavigation[]>([]);

// TODO(2024-06-19 flav): Fix issue with AppLayout changing between pages
useEffect(() => {
setNavs((prevNavs) => {
const newNavs = nav.map((n) => {
const current = n.isCurrent(activePath);
return { ...n, current };
});

const isSameCurrent =
prevNavs.length === newNavs.length &&
prevNavs.every((prevNav, index) => {
return prevNav.current === newNavs[index].current;
});

const activeTab = nav.filter((n) => n.isCurrent(activePath))[0];
setCurrentTab(activeTab);
return isSameCurrent ? prevNavs : newNavs;
});
}, [nav, activePath]);
// TODO(2024-06-19 flav): Fix issue with AppLayout changing between pagesg
const navs = useMemo(() => getTopNavigationTabs(owner), [owner]);
const currentTab = useMemo(
() => navs.find((n) => n.isCurrent(activePath)),
[navs, activePath]
);

return (
<div
Expand Down Expand Up @@ -115,9 +92,9 @@ export const NavigationSidebar = React.forwardRef<
<SubscriptionEndBanner endDate={subscription.endDate} />
)}
{subscription.paymentFailingSince && <SubscriptionPastDueBanner />}
{nav.length > 1 && (
{navs.length > 1 && (
<div className="pt-2">
<Tabs value={currentTab?.id}>
<Tabs value={currentTab?.id ?? "conversations"}>
<TabsList className="px-2">
{navs.map((tab) => (
<TabsTrigger
Expand All @@ -134,58 +111,58 @@ export const NavigationSidebar = React.forwardRef<
/>
))}
</TabsList>
</Tabs>
</div>
)}
{subNavigation && (
<>
{subNavigation && (
<>
{subNavigation.map((nav) => (
<div key={nav.id} className="px-2">
<NavigationList>
{nav.label && (
<NavigationListLabel
label={nav.label}
variant={nav.variant}
/>
)}
{nav.menus.map((menu) => (
<React.Fragment key={menu.id}>
<NavigationListItem
selected={menu.current}
label={menu.label}
icon={menu.icon}
href={menu.href}
target={menu.target}
/>
{menu.subMenuLabel && (
<div className="grow pb-3 pl-14 pr-4 pt-2 text-sm uppercase text-slate-400">
{menu.subMenuLabel}
</div>
)}
{menu.subMenu && (
<div className="mb-2 flex flex-col">
{menu.subMenu.map((nav) => (
{navs.map((tab) => (
<TabsContent key={tab.id} value={tab.id}>
{subNavigation && tab.isCurrent(activePath) && (
<>
{subNavigation.map((nav) => (
<div key={nav.id} className="px-2">
<NavigationList>
{nav.label && (
<NavigationListLabel
label={nav.label}
variant={nav.variant}
/>
)}
{nav.menus.map((menu) => (
<React.Fragment key={menu.id}>
<NavigationListItem
key={nav.id}
selected={nav.current}
label={nav.label}
icon={nav.icon}
className="grow pl-14 pr-4"
href={nav.href ? nav.href : undefined}
selected={menu.current}
label={menu.label}
icon={menu.icon}
href={menu.href}
target={menu.target}
/>
))}
</div>
)}
</React.Fragment>
{menu.subMenuLabel && (
<div className="grow pb-3 pl-14 pr-4 pt-2 text-sm uppercase text-slate-400">
{menu.subMenuLabel}
</div>
)}
{menu.subMenu && (
<div className="mb-2 flex flex-col">
{menu.subMenu.map((nav) => (
<NavigationListItem
key={nav.id}
selected={nav.current}
label={nav.label}
icon={nav.icon}
className="grow pl-14 pr-4"
href={nav.href ? nav.href : undefined}
/>
))}
</div>
)}
</React.Fragment>
))}
</NavigationList>
</div>
))}
</NavigationList>
</div>
))}
</>
)}
</>
</>
)}
</TabsContent>
))}
</Tabs>
</div>
)}
</div>
<div className="flex grow flex-col">{children}</div>
Expand Down

0 comments on commit 56f988e

Please sign in to comment.