Clean up header implementation (#102)

* Update: cleaned up header and added its own router
* introduce fixed & custom state in `subLogSelectedTimeRange`

---------

Co-authored-by: adel-ak <[email protected]>

src/@types/parseable/api/query.ts

@@ -32,3 +32,8 @@ export type Log = {
 	p_tags: string;
 	[key: string]: string | number | null | Date;
 };
+
+export type LogSelectedTimeRange = {
+	state : "fixed"| "custom";
+	value : string;
+};

src/components/Header/HeaderBreadcrumbs.tsx

@@ -0,0 +1,53 @@
+import useMountedState from '@/hooks/useMountedState';
+import { useHeaderContext } from '@/layouts/MainLayout/Context';
+import { Breadcrumbs, Text } from '@mantine/core';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { useLogQueryStyles } from './styles';
+
+type HeaderBreadcrumbs = {
+	crumbs: string[];
+};
+
+const HeaderBreadcrumbs: FC<HeaderBreadcrumbs> = (props) => {
+	const { crumbs } = props;
+	const {
+		state: { subLogQuery },
+	} = useHeaderContext();
+	const [streamName, setStreamName] = useMountedState(subLogQuery.get().streamName);
+
+	useEffect(() => {
+		const listener = subLogQuery.subscribe((state) => {
+			setStreamName(state.streamName);
+		});
+		return () => listener();
+	}, []);
+
+	return (
+		<Breadcrumbs separator=">">
+			<HomeIcon />
+			{crumbs.map((crumb) => {
+				if (crumb === 'streamName') {
+					return <Text key={crumb}>{streamName}</Text>;
+				}
+
+				return <Text key={crumb}>{crumb}</Text>;
+			})}
+		</Breadcrumbs>
+	);
+};
+
+const HomeIcon: FC = () => {
+	const { classes } = useLogQueryStyles();
+	const { homeIcon } = classes;
+	return (
+		<svg className={homeIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+			<path
+				d="M9.99998 19V14H14V19C14 19.55 14.45 20 15 20H18C18.55 20 19 19.55 19 19V12H20.7C21.16 12 21.38 11.43 21.03 11.13L12.67 3.6C12.29 3.26 11.71 3.26 11.33 3.6L2.96998 11.13C2.62998 11.43 2.83998 12 3.29998 12H4.99998V19C4.99998 19.55 5.44998 20 5.99998 20H8.99998C9.54998 20 9.99998 19.55 9.99998 19Z"
+				fill="#211F1F"
+			/>
+		</svg>
+	);
+};
+
+export default HeaderBreadcrumbs;

src/components/Header/Layout.tsx

@@ -0,0 +1,30 @@
+import logoInvert from '@/assets/images/brand/logo-invert.svg';
+import { HOME_ROUTE } from '@/constants/routes';
+import { HEADER_HEIGHT } from '@/constants/theme';
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { Box, Image, Header as MantineHeader } from '@mantine/core';
+import { FC } from 'react';
+import { Link, Outlet } from 'react-router-dom';
+import { useHeaderStyles } from './styles';
+
+type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
+
+const HeaderLayout: FC<HeaderProps> = (props) => {
+	const { classes } = useHeaderStyles();
+	const { container, logoContainer, navContainer, imageSty } = classes;
+
+	return (
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
+			<Box className={logoContainer}>
+				<Link to={HOME_ROUTE}>
+					<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
+				</Link>
+			</Box>
+			<Box className={navContainer}>
+				<Outlet />
+			</Box>
+		</MantineHeader>
+	);
+};
+
+export default HeaderLayout;

src/components/Header/RefreshInterval.tsx

@@ -0,0 +1,62 @@
+import useMountedState from '@/hooks/useMountedState';
+import { REFRESH_INTERVALS, useHeaderContext } from '@/layouts/MainLayout/Context';
+import { Button, Menu, Text, px } from '@mantine/core';
+import { IconRefresh, IconRefreshOff } from '@tabler/icons-react';
+import ms from 'ms';
+import type { FC } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useLogQueryStyles } from './styles';
+
+const RefreshInterval: FC = () => {
+	const {
+		state: { subRefreshInterval },
+	} = useHeaderContext();
+
+	const [selectedInterval, setSelectedInterval] = useMountedState<number | null>(subRefreshInterval.get());
+
+	useEffect(() => {
+		const listener = subRefreshInterval.subscribe((interval) => {
+			setSelectedInterval(interval);
+		});
+
+		return () => listener();
+	}, []);
+
+	const Icon = useMemo(() => (selectedInterval ? IconRefresh : IconRefreshOff), [selectedInterval]);
+
+	const onSelectedInterval = (interval: number | null) => {
+		subRefreshInterval.set(interval);
+	};
+
+	const { classes } = useLogQueryStyles();
+	const { intervalBtn } = classes;
+
+	return (
+		<Menu withArrow>
+			<Menu.Target>
+				<Button className={intervalBtn} rightIcon={<Icon size={px('1.2rem')} stroke={1.5} />}>
+					<Text>{selectedInterval ? ms(selectedInterval) : 'Off'}</Text>
+				</Button>
+			</Menu.Target>
+			<Menu.Dropdown>
+				{REFRESH_INTERVALS.map((interval) => {
+					if (interval === selectedInterval) return null;
+
+					return (
+						<Menu.Item key={interval} onClick={() => onSelectedInterval(interval)}>
+							<Text>{ms(interval)}</Text>
+						</Menu.Item>
+					);
+				})}
+
+				{selectedInterval !== null && (
+					<Menu.Item onClick={() => onSelectedInterval(null)}>
+						<Text>Off</Text>
+					</Menu.Item>
+				)}
+			</Menu.Dropdown>
+		</Menu>
+	);
+};
+
+export default RefreshInterval;

src/components/Header/RefreshNow.tsx

@@ -0,0 +1,33 @@
+import { useHeaderContext } from '@/layouts/MainLayout/Context';
+import { Button, px } from '@mantine/core';
+import { IconReload } from '@tabler/icons-react';
+import dayjs from 'dayjs';
+import type { FC } from 'react';
+import { useLogQueryStyles } from './styles';
+
+const RefreshNow: FC = () => {
+	const {
+		state: { subLogQuery, subLogSelectedTimeRange },
+	} = useHeaderContext();
+
+	const onRefresh = () => {
+		if (subLogSelectedTimeRange.get().state==='fixed') {
+			const now = dayjs();
+			const timeDiff = subLogQuery.get().endTime.getTime() - subLogQuery.get().startTime.getTime();
+			subLogQuery.set((state) => {
+				state.startTime = now.subtract(timeDiff).toDate();
+				state.endTime = now.toDate();
+			});
+		}
+	};
+	const { classes } = useLogQueryStyles();
+	const { refreshNowBtn } = classes;
+
+	return (
+		<Button className={refreshNowBtn} onClick={onRefresh}>
+			<IconReload size={px('1.2rem')} stroke={1.5} />
+		</Button>
+	);
+};
+
+export default RefreshNow;

src/components/Header/Search.tsx

@@ -0,0 +1,58 @@
+import useMountedState from '@/hooks/useMountedState';
+import { useHeaderContext } from '@/layouts/MainLayout/Context';
+import { Box, TextInput, px } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import type { ChangeEvent, FC, KeyboardEvent } from 'react';
+import { useEffect } from 'react';
+import { useLogQueryStyles } from './styles';
+
+const Search: FC = () => {
+	const {
+		state: { subLogSearch },
+	} = useHeaderContext();
+
+	const [searchValue, setSearchValue] = useMountedState('');
+
+	useEffect(() => {
+		const listener = subLogSearch.subscribe((interval) => {
+			setSearchValue(interval.search);
+		});
+		return () => {
+			listener();
+		};
+	}, []);
+
+	const { classes } = useLogQueryStyles();
+	const { searchContainer, searchInput } = classes;
+
+	const onSearchValueChange = (event: ChangeEvent<HTMLInputElement>) => {
+		setSearchValue(event.currentTarget.value);
+	};
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === 'Enter') {
+			if (subLogSearch.get().search !== searchValue) {
+				const trimmedValue = event.currentTarget.value.trim();
+				subLogSearch.set((query) => {
+					query.search = trimmedValue;
+				});
+				setSearchValue(trimmedValue);
+			}
+		}
+	};
+
+	return (
+		<Box className={searchContainer}>
+			<TextInput
+				className={searchInput}
+				value={searchValue}
+				onKeyDown={handleKeyDown}
+				onChange={onSearchValueChange}
+				placeholder="Search"
+				icon={<IconSearch size={px('1.2rem')} stroke={1.5} />}
+			/>
+		</Box>
+	);
+};
+
+export default Search;