github-personal/firezone
1
0
Fork 0
mirror of https://github.com/outbackdingo/firezone.git synced 2026-01-27 10:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(gui-client): introduce custom ReactRouterSidebarItem (#9508)

Browse Source 
This cleans up some changes left over from #9505 by using a custom
component.
This commit is contained in:
Jamil
2025-06-15 10:41:24 -07:00
committed by GitHub
parent 3660f53150
commit 2a96102db4
2 changed files with 48 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
rust/gui-client/src-frontend/components/App.tsx
View File

@@ -12,17 +12,17 @@ import { listen } from "@tauri-apps/api/event";
import {
Sidebar,
SidebarCollapse,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from "flowbite-react";
import React, { useEffect, useState } from "react";
import { Route, Routes, useNavigate, useLocation } from "react-router";
import { Route, Routes } from "react-router";
import { AdvancedSettingsViewModel } from "../generated/AdvancedSettingsViewModel";
import { FileCount } from "../generated/FileCount";
import { SessionViewModel } from "../generated/SessionViewModel";
import About from "./AboutPage";
import AdvancedSettingsPage from "./AdvancedSettingsPage";
import ReactRouterSidebarItem from "./ReactRouterSidebarItem";
import ColorPalette from "./ColorPalettePage";
import Diagnostics from "./DiagnosticsPage";
import GeneralSettingsPage from "./GeneralSettingsPage";
@@ -37,19 +37,6 @@ export default function App() {
let [advancedSettings, setAdvancedSettings] =
useState<AdvancedSettingsViewModel | null>(null);
const location = useLocation();
const navigate = useNavigate();
// Custom navigation handler for SidebarItems to avoid full page reloads
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
const target = event.currentTarget;
const href = target.getAttribute("href");
if (href) {
navigate(href);
}
};
useEffect(() => {
const sessionChanged = listen<SessionViewModel>("session_changed", (e) => {
let session = e.payload;
@@ -104,59 +91,35 @@ export default function App() {
>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
active={location.pathname.startsWith("/overview")}
icon={HomeIcon}
href="/overview"
onClick={handleClick}
>
<ReactRouterSidebarItem icon={HomeIcon} href="/overview">
Overview
</SidebarItem>
</ReactRouterSidebarItem>
<SidebarCollapse label="Settings" open={true} icon={Bars3Icon}>
<SidebarItem
active={location.pathname.startsWith("/general-settings")}
icon={CogIcon}
href="/general-settings"
onClick={handleClick}
>
<ReactRouterSidebarItem icon={CogIcon} href="/general-settings">
General
</SidebarItem>
<SidebarItem
active={location.pathname.startsWith("/advanced-settings")}
</ReactRouterSidebarItem>
<ReactRouterSidebarItem
icon={WrenchScrewdriverIcon}
href="/advanced-settings"
onClick={handleClick}
>
Advanced
</SidebarItem>
</ReactRouterSidebarItem>
</SidebarCollapse>
<SidebarItem
active={location.pathname.startsWith("/diagnostics")}
<ReactRouterSidebarItem
icon={DocumentMagnifyingGlassIcon}
href="/diagnostics"
onClick={handleClick}
>
Diagnostics
</SidebarItem>
<SidebarItem
active={location.pathname.startsWith("/about")}
icon={InformationCircleIcon}
href="/about"
onClick={handleClick}
>
</ReactRouterSidebarItem>
<ReactRouterSidebarItem icon={InformationCircleIcon} href="/about">
About
</SidebarItem>
</ReactRouterSidebarItem>
</SidebarItemGroup>
{isDev && (
<SidebarItemGroup>
<SidebarItem
active={location.pathname.startsWith("/colour-palette")}
icon={SwatchIcon}
href="/colour-palette"
onClick={handleClick}
>
<ReactRouterSidebarItem icon={SwatchIcon} href="/colour-palette">
Color Palette
</SidebarItem>
</ReactRouterSidebarItem>
</SidebarItemGroup>
)}
</SidebarItems>

34
rust/gui-client/src-frontend/components/ReactRouterSidebarItem.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from "react";
import type { FC, ComponentProps } from "react";
import { useNavigate, useLocation } from "react-router";
import { SidebarItem } from "flowbite-react";
export default function ReactRouterSidebarItem({
href,
icon,
children,
}: {
href: string;
icon: FC<ComponentProps<"svg">>;
children: React.ReactNode;
}) {
const location = useLocation();
const navigate = useNavigate();
// Custom navigation handler for SidebarItems to avoid full page reloads
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
navigate(href);
};
return (
<SidebarItem
active={location.pathname.startsWith(href)}
href={href}
icon={icon}
onClick={handleClick}
>
{children}
</SidebarItem>
);
}