More performance updates

src/components/Columns/SearchHistoryColumns.tsx

@@ -1,8 +1,9 @@
 import { ActionIcon, Box, Group, Text } from '@mantine/core';
 import { createColumnHelper } from '@tanstack/react-table';
 import { FaFilter, FaTrash } from 'react-icons/fa';
+import type { SearchHistoryItem } from 'types';
 
-const columnHelper = createColumnHelper<any>();
+const columnHelper = createColumnHelper<SearchHistoryItem>();
 export const SearchHistoryColumns = (
 	setSelectedItem: React.Dispatch<React.SetStateAction<any>>,
 	deleteItemOpen: () => void,
@@ -109,11 +110,11 @@ export const SearchHistoryColumns = (
 		id: 'dateTimeStamp',
 		cell: ({ cell }: any) => {
 			const m = new Date(cell.getValue());
-			const year = `${m.getUTCFullYear()}`.slice(-2);
-			const month = `0${m.getUTCMonth() + 1}`.slice(-2);
-			const day = `0${m.getUTCDate()}`.slice(-2);
-			const hours = `0${m.getUTCHours()}`.slice(-2);
-			const minutes = `0${m.getUTCMinutes()}`.slice(-2);
+			const year = `${m.getFullYear()}`.slice(-2);
+			const month = `0${m.getMonth() + 1}`.slice(-2);
+			const day = `0${m.getDate()}`.slice(-2);
+			const hours = `0${m.getHours()}`.slice(-2);
+			const minutes = `0${m.getMinutes()}`.slice(-2);
 			const dateString = `${month}/${day}/${year} ${hours}:${minutes}`;
 
 			return (

src/components/DataTable/DataTable.tsx

@@ -64,6 +64,7 @@ export function DataTable({
 			setColumnFilters([]);
 		}
 	}, [filtersEnabled]);
+
 	return (
 		<ScrollArea
 			className={scrollAreaClasses.default}

src/components/DataTable/components/Filter.tsx

@@ -53,15 +53,13 @@ export function Filter({
 		});
 	};
 	return filterVariant === 'range' ? (
-		<div>
-			<DatePickerInput
-				type='range'
-				clearable
-				classNames={datePickerInputClasses}
-				value={columnFilterValue as [Date, Date]}
-				onChange={(value) => column.setFilterValue(value)}
-			/>
-		</div>
+		<DatePickerInput
+			type='range'
+			clearable
+			classNames={datePickerInputClasses}
+			value={columnFilterValue as [Date, Date]}
+			onChange={(value) => column.setFilterValue(value)}
+		/>
 	) : filterVariant === 'select' ? (
 		<select
 			onChange={(e) => column.setFilterValue(e.target.value)}

src/components/DebouncedInput.tsx

@@ -13,10 +13,6 @@ export function DebouncedInput({
 } & Omit<TextInputProps, 'onChange'>) {
 	const [value, setValue] = useState(initialValue);
 
-	useEffect(() => {
-		setValue(initialValue);
-	}, [initialValue]);
-
 	useEffect(() => {
 		const timeout = setTimeout(() => {
 			onChange(value);

src/components/HelpModal/HelpModal.tsx

@@ -1,7 +1,7 @@
 import { Modal, Stack } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
-import type { Application, Provider } from 'types';
+import type { Application, GuacamoleClient, Provider } from 'types';
 import HelpSection from './HelpSection';
 
 export function HelpModal({
@@ -10,12 +10,14 @@ export function HelpModal({
 	closeProviderModal,
 	applicationData,
 	providerData,
+	clientData,
 }: {
 	handleResetSearch: () => void;
 	providerModalOpened: boolean;
 	closeProviderModal: () => void;
 	applicationData: Application[];
 	providerData: Provider[];
+	clientData: GuacamoleClient[];
 }) {
 	const { isMobile } = useCommonHooks();
 	return (
@@ -61,6 +63,16 @@ export function HelpModal({
 								};
 							})}
 						/>
+						<Stack my={'.5rem'} />
+						<HelpSection
+							name={'Available Clients'}
+							items={clientData.map((client: GuacamoleClient) => {
+								return {
+									name: `${client.clientName} (${client.clientIdentifier})`,
+									command: `>${client.clientName}`,
+								};
+							})}
+						/>
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>

src/components/WeatherModal/CurrentWeather.tsx

@@ -1,7 +1,5 @@
 import { Box, Card, Group, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-import { useSunStateAPI } from 'hooks/useAPI';
-import { useEffect, useState } from 'react';
+import { useCommonHooks, useSunStateAPI } from 'hooks';
 import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
 import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
 import { textClasses } from 'styles';
@@ -16,21 +14,15 @@ export default function CurrentWeather({ current }: { current: CW }) {
 		lon: currentLocation.lon,
 	});
 
-	const [sunStates, setSunStates] = useState<SunState[]>([]);
+	const sunStates: SunState[] =
+		sunStateData?.results.map((item: SunState) => {
+			return {
+				date: item.date,
+				sunrise: item.sunrise,
+				sunset: item.sunset,
+			};
+		}) || [];
 
-	useEffect(() => {
-		if (sunStateData) {
-			setSunStates(
-				sunStateData.results.map((item: SunState) => {
-					return {
-						date: item.date,
-						sunrise: item.sunrise,
-						sunset: item.sunset,
-					};
-				}),
-			);
-		}
-	}, [sunStateData]);
 	return (
 		<>
 			{current && (

src/components/WeatherModal/WeatherFeaturePill.tsx

@@ -7,7 +7,7 @@ function WeatherFeaturePill({
 }: {
 	leftSide: React.ReactNode;
 	rightSide: React.ReactNode;
-	highlight?: string;
+	highlight?: 'left' | 'right';
 }) {
 	return (
 		<Group

src/components/WeatherModal/WeatherModal.tsx

@@ -1,6 +1,5 @@
 import { Center, Group, Modal, Stack, Text } from '@mantine/core';
 import { useCommonHooks, useWeatherAPI } from 'hooks';
-import { useEffect, useState } from 'react';
 import { modalClasses } from 'styles';
 
 import type { CurrentWeather as CW, ExtendedForecast, HourlyForecast } from 'types';
@@ -28,13 +27,9 @@ export function WeatherModal({
 		x: currentLocation.x,
 		y: currentLocation.y,
 	});
-	const [hourlyForecast, setHourlyForecast] = useState<HourlyForecast[]>([]);
+	const hourlyForecast: HourlyForecast[] =
+		hourly?.properties?.periods?.slice(1, 25) || [];
 
-	useEffect(() => {
-		if (hourly) {
-			setHourlyForecast(hourly.properties.periods.slice(1, 25));
-		}
-	}, [hourly]);
 	return (
 		<Modal.Root
 			fullScreen={isMobile}