fix: replaced remaining Selects with Search in Settings Tab - optimised with useMemo and standardised the no unit found

client/src/Components/Inputs/Search/index.jsx

@@ -24,6 +24,7 @@ import { useTranslation } from "react-i18next";
  * @param {Function} props.handleChange - Function to call when the input changes
  * @param {Function} Prop.onBlur - Function to call when the input is blured
  * @param {Object} props.sx - Additional styles to apply to the component
+ * @param {string} props.unit - Label to identify type of options
  * @returns {JSX.Element} The rendered Search component
  */
 
@@ -68,6 +69,7 @@ const Search = ({
 	startAdornment,
 	endAdornment,
 	onBlur,
+	unit = "option",
 }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -186,7 +188,12 @@ const Search = ({
 				);
 
 				if (filtered.length === 0) {
-					return [{ [filteredBy]: "No monitors found", noOptions: true }];
+					return [
+						{
+							[filteredBy]: t("general.noOptionsFound", { unit: unit }),
+							noOptions: true,
+						},
+					];
 				}
 				return filtered;
 			}}

client/src/Pages/Settings/SettingsTimeZone.jsx

@@ -2,16 +2,37 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import ConfigBox from "../../Components/ConfigBox";
-import Select from "../../Components/Inputs/Select";
+import Search from "../../Components/Inputs/Search";
 import timezones from "../../Utils/timezones.json";
 
 // Utils
 import { useTheme } from "@emotion/react";
 import { PropTypes } from "prop-types";
 import { useTranslation } from "react-i18next";
+import { useCallback, useMemo, useState } from "react";
 const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const [rawInput, setRawInput] = useState("");
+
+	const selectedTimezone = useMemo(
+		() => timezones.find((tz) => tz._id === timezone) ?? null,
+		[timezone, timezones]
+	);
+
+	const handleTimezoneChange = useCallback(
+		(newValue) => {
+			setRawInput("");
+			handleChange({
+				target: {
+					name: "timezone",
+					value: newValue?._id ?? "",
+				},
+			});
+		},
+		[handleChange]
+	);
+
 	return (
 		<ConfigBox>
 			<Box>
@@ -28,12 +49,17 @@ const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => {
 				</Typography>
 			</Box>
 			<Stack gap={theme.spacing(20)}>
-				<Select
-					label={t("settingsPage.timezoneSettings.label")}
-					name="timezone"
-					value={timezone}
-					onChange={handleChange}
-					items={timezones}
+				<Search
+					id="timezone"
+					label={t("settingsDisplayTimezone")}
+					options={timezones}
+					filteredBy="name"
+					value={selectedTimezone}
+					inputValue={rawInput}
+					handleInputChange={(val) => setRawInput(val)}
+					handleChange={handleTimezoneChange}
+					isAdorned={false}
+					unit="timezone"
 				/>
 			</Stack>
 		</ConfigBox>

client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx

@@ -14,7 +14,7 @@ import { useTheme } from "@emotion/react";
 import timezones from "../../../../../Utils/timezones.json";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import { useMemo, useState, useCallback } from "react";
 
 const TabSettings = ({
 	isCreate,
@@ -29,7 +29,25 @@ const TabSettings = ({
 	// Utils
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const [timezoneValue, setTimezoneValue] = useState("");
+	const [rawInput, setRawInput] = useState("");
+
+	const selectedTimezone = useMemo(
+		() => timezones.find((tz) => tz._id === form.timezone) ?? null,
+		[form.timezone, timezones]
+	);
+
+	const handleTimezoneChange = useCallback(
+		(newValue) => {
+			setRawInput("");
+			handleFormChange({
+				target: {
+					name: "timezone",
+					value: newValue?._id ?? "",
+				},
+			});
+		},
+		[handleFormChange]
+	);
 
 	return (
 		<TabPanel value={tabValue}>
@@ -108,16 +126,12 @@ const TabSettings = ({
 							label={t("settingsDisplayTimezone")}
 							options={timezones}
 							filteredBy="name"
-							value={timezones.find((tz) => tz._id === form.timezone) || null}
-							inputValue={timezoneValue}
-							handleInputChange={(newVal) => setTimezoneValue(newVal)}
-							handleChange={(newValue) => {
-								setTimezoneValue("");
-								handleFormChange({
-									target: { name: "timezone", value: newValue?._id || "" },
-								});
-							}}
+							value={selectedTimezone}
+							inputValue={rawInput}
+							handleInputChange={(newVal) => setRawInput(newVal)}
+							handleChange={handleTimezoneChange}
 							isAdorned={false}
+							unit="timezone"
 						/>
 					</Stack>
 				</ConfigBox>

client/src/locales/en.json

@@ -224,6 +224,9 @@
 			"unknownError": "Unknown error"
 		}
 	},
+	"general": {
+		"noOptionsFound": "No {{unit}} found"
+	},
 	"commonSave": "Save",
 	"commonSaving": "Saving...",
 	"companyName": "Company name",
@@ -505,7 +508,6 @@
 		"failureAddDemoMonitors": "Failed to add demo monitors",
 		"successAddDemoMonitors": "Successfully added demo monitors"
 	},
-
 	"monitorState": {
 		"active": "Active",
 		"paused": "Paused",