Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Bug navbar navigation #85

Merged
merged 3 commits into from
Jul 18, 2023
Merged

Bug navbar navigation #85

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be6ebe5
minor fix
kartik-gupta-ij Jul 17, 2023
244c89c
Bug fixed
kartik-gupta-ij Jul 18, 2023
ffe47bc
deepsouce
kartik-gupta-ij Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 18 additions & 25 deletions src/components/Navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { NavbarProps as MantineNavbarProps } from '@mantine/core';
import { Navbar as MantineNavbar, NavLink, Select ,Anchor,Card, Box, Modal ,Text ,Image} from '@mantine/core';
import { IconNews, IconCodeCircle2, IconCheck, IconFileAlert, IconReload, IconHelpCircle, IconLogout, IconUser } from '@tabler/icons-react';
import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image } from '@mantine/core';
import { IconNews, IconCodeCircle2, IconCheck, IconFileAlert, IconReload, IconHelpCircle, IconLogout, IconUser } from '@tabler/icons-react';
import { FC, useEffect, useState } from 'react';
import docImage from '@/assets/images/doc.webp';
import githubLogo from '@/assets/images/github-logo.webp';
Expand Down Expand Up @@ -31,9 +31,10 @@ const Navbar: FC<NavbarProps> = (props) => {
const [activeStream, setActiveStream] = useState("");
const [searchValue, setSearchValue] = useState("");
const { classes } = useNavbarStyles();
const [currentPage, setCurrentPage] = useState("/logs");
const { container, linkBtnActive, linkBtn,
selectStreambtn ,streamsBtn ,lowerContainer ,
actionBtn, helpTitle, helpDescription ,userBtn} = classes;
selectStreambtn, streamsBtn, lowerContainer,
actionBtn, helpTitle, helpDescription, userBtn } = classes;
const { streamName } = useParams();
const nav = useNavigate();
const [, , removeCredentials] = useLocalStorage({ key: 'credentials' });
Expand Down Expand Up @@ -70,39 +71,31 @@ const Navbar: FC<NavbarProps> = (props) => {
if (streamName) {
setActiveStream(streamName);
setSearchValue(streamName);
if (streamName !== subLogQuery.get().streamName) {
if (currentPage !== location.pathname) {
const now = dayjs();
subLogQuery.set((state) => {
state.streamName = streamName || '';
state.startTime = now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate();
state.endTime = now.toDate();
});
subLogSelectedTimeRange.set(DEFAULT_FIXED_DURATIONS.name);
subLogSearch.set((state) => {
state.search = '';
state.filters = {};
});
subRefreshInterval.set(null);
setCurrentPage(location.pathname);
}
}
else if (streams && Boolean(streams.length)) {
navigate(`/${streams[0].name}/logs`);
}
}, [streams ,location]);
}, [streams, location]);

const handleChange = (value: string) => {
setActiveStream(value);
setSearchValue(value);
navigate(`/${value}/logs`);
if (value !== subLogQuery.get().streamName) {
const now = dayjs();
subLogQuery.set((state) => {
state.streamName = value || '';
state.startTime = now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate();
state.endTime = now.toDate();
});
subLogSelectedTimeRange.set(DEFAULT_FIXED_DURATIONS.name);
subLogSearch.set((state) => {
state.search = '',
state.filters = {}
});
subRefreshInterval.set(null);
}
};

useEffect(() => {
Expand Down Expand Up @@ -142,12 +135,12 @@ const Navbar: FC<NavbarProps> = (props) => {


return (
<MantineNavbar {...props} withBorder zIndex={1} hiddenBreakpoint={window.outerWidth+20} hidden={isSubNavbarOpen}>
<MantineNavbar {...props} withBorder zIndex={1} hiddenBreakpoint={window.outerWidth + 20} hidden={isSubNavbarOpen}>
<MantineNavbar.Section grow className={container}>
<NavLink label="Streams" icon={<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M19 5C19 7.21 14.97 9 10 9C5.03 9 1 7.21 1 5M19 5C19 2.79 14.97 1 10 1C5.03 1 1 2.79 1 5M19 5V10M1 5V10M19 10C19 12.21 14.97 14 10 14C5.03 14 1 12.21 1 10M19 10V15C19 17.21 14.97 19 10 19C5.03 19 1 17.21 1 15V10" stroke="#211F1F" strokeLinecap="round" strokeLinejoin='round'/>
<path d="M19 5C19 7.21 14.97 9 10 9C5.03 9 1 7.21 1 5M19 5C19 2.79 14.97 1 10 1C5.03 1 1 2.79 1 5M19 5V10M1 5V10M19 10C19 12.21 14.97 14 10 14C5.03 14 1 12.21 1 10M19 10V15C19 17.21 14.97 19 10 19C5.03 19 1 17.21 1 15V10" stroke="#211F1F" strokeLinecap="round" strokeLinejoin='round' />
</svg>
} className={streamsBtn} />
} className={streamsBtn} />
<Select
placeholder="Pick one"
onChange={(value) => handleChange(value || "")}
Expand All @@ -168,7 +161,7 @@ const Navbar: FC<NavbarProps> = (props) => {
label={link.label}
icon={<link.icon size="1rem" stroke={1.5} />}
sx={{ paddingLeft: 53 }}
onClick={() => navigate(`/${activeStream}${link.pathname}`)}
onClick={() => { navigate(`/${activeStream}${link.pathname}`); }}
key={link.label}
className={link.pathname ? window.location.pathname.includes(link.pathname) ? linkBtnActive : linkBtn : linkBtn}
/>
Expand All @@ -178,7 +171,7 @@ const Navbar: FC<NavbarProps> = (props) => {
{error && <NavLink label="Retry" icon={<IconReload size="1rem" stroke={1.5} />} component="button" onClick={getData} sx={{ paddingLeft: 0 }} />}
</MantineNavbar.Section>
<MantineNavbar.Section className={lowerContainer}>
<NavLink label={username} icon={<IconUser size="1.5rem" stroke={1.5} />} className={userBtn} component="a" />
<NavLink label={username} icon={<IconUser size="1.5rem" stroke={1.5} />} className={userBtn} component="a" />
<NavLink label="Help" icon={<IconHelpCircle size="1.5rem" stroke={1.5} />} className={actionBtn} component="a" onClick={open} />
<NavLink label="Log out" icon={<IconLogout size="1.5rem" stroke={1.5} />} className={actionBtn} component="a" onClick={onSignOut} />
</MantineNavbar.Section>
Expand Down