String updates

src/hooks/helpers.ts

@@ -1,47 +0,0 @@
-export function date(isMobile: boolean) {
-	const currentDate = new Date();
-	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
-		? {
-				weekday: 'long',
-				year: 'numeric',
-				month: 'long',
-				day: 'numeric',
-			}
-		: {};
-	const date = currentDate.toLocaleDateString('en-US', dateOptions);
-	return date;
-}
-export function greet(list: any) {
-	const currentTime = new Date();
-	const greet = Math.floor(currentTime.getHours() / 6);
-	const easterEggChance = Math.floor(Math.random() * 100);
-	let timeBased: any = [];
-	let customGreetings: any = [];
-	for (const l of list) {
-		if (l.customGreeting === 0) {
-			timeBased = timeBased.concat(l);
-		} else {
-			customGreetings = customGreetings.concat(l);
-		}
-	}
-	if (easterEggChance > 10 || customGreetings.length === 0) {
-		return timeBased[greet].message;
-	}
-	return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
-}
-export function validURL(str: any) {
-	const pattern = new RegExp(
-		'^(https?:\\/\\/)?' + // protocol
-			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-			'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-			'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-			'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-			'(\\#[-a-z\\d_]*)?$',
-		'i',
-	); // fragment locator
-	return !!pattern.test(str);
-}
-export function containsProtocol(str: any) {
-	const pattern = /^(https?:\/\/).*/i;
-	return !!pattern.test(str);
-}

src/hooks/index.ts

@@ -1,3 +1,2 @@
 export { useQueryAPI, useWeatherAPI, useMutationAPI } from './useAPI';
-export { date, greet, validURL, containsProtocol } from './helpers';
 export { useCommonHooks } from './useCommonHooks';

src/pages/homepage/Homepage.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { date, greet, useCommonHooks } from 'hooks';
+import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { stackClasses } from 'styles';
 import type { CurrentWeather, OutlookWeather } from 'types';
@@ -21,6 +21,7 @@ export function Homepage() {
 		weather,
 		basicWeather,
 		forecast,
+		personal,
 	} = useCommonHooks();
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
@@ -47,9 +48,33 @@ export function Homepage() {
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);
 
+	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
+		? {
+				weekday: 'long',
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			}
+		: {};
+	const date = new Date().toLocaleDateString('en-US', dateOptions);
+
 	useEffect(() => {
 		if (messages) {
-			setDisplayedGreeting(greet(messages));
+			setDisplayedGreeting(() => {
+				if (Math.floor(Math.random() * 100) < 10 || messages.length === 0) {
+					switch (Math.floor(new Date().getHours() / 6)) {
+						case 0:
+							return `Good night, ${personal[0].firstName}!`;
+						case 1:
+							return `Good morning, ${personal[0].firstName}!`;
+						case 2:
+							return `Good afternoon, ${personal[0].firstName}!`;
+						case 3:
+							return `Good evening, ${personal[0].firstName}!`;
+					}
+				}
+				return messages[Math.floor(Math.random() * messages.length)].message;
+			});
 		}
 	}, [messages, isMessagesFetching]);
 
@@ -119,7 +144,7 @@ export function Homepage() {
 				openWeatherModal={openWeatherModal}
 			/>
 			<Header
-				date={date(isMobile)}
+				date={date}
 				greet={displayedGreeting}
 				current={current}
 				setCurrent={setCurrent}

src/pages/homepage/components/Header/Header.tsx

@@ -14,7 +14,7 @@ function Header({
 	closeWeatherModal,
 	openWeatherModal,
 }: any) {
-	const { isMobile, weather, basicWeather } = useCommonHooks();
+	const { isMobile, weather, basicWeather, personal } = useCommonHooks();
 	const [time, setTime] = useState(new Date());
 	function fixDigits(k: any) {
 		if (k < 10) {
@@ -54,7 +54,6 @@ function Header({
 			});
 		}
 	}, [weather, basicWeather]);
-
 	return (
 		<Stack
 			style={{
@@ -77,7 +76,11 @@ function Header({
 					classNames={textClasses}
 					fz={isMobile ? 24 : undefined}
 				>
-					{greet}
+					{greet
+						.replace('$firstName', personal?.[0].firstName)
+						.replace('$lastName', personal?.[0].lastName)
+						.replace('$firstName!', personal?.[0].firstName.toUpperCase())
+						.replace('$lastName!', personal?.[0].lastName.toUpperCase())}
 				</Text>
 			</Stack>
 			<Stack

src/pages/homepage/components/Search/Search.tsx

@@ -1,7 +1,7 @@
 import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { HelpModal, WeatherModal } from 'components';
-import { containsProtocol, useCommonHooks, validURL } from 'hooks';
+import { useCommonHooks } from 'hooks';
 import { textInputClasses } from 'styles';
 
 export default function Search({
@@ -27,6 +27,15 @@ export default function Search({
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
+		const urlPattern = new RegExp(
+			'^(https?:\\/\\/)?' + // protocol
+				'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+				'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+				'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+				'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+				'(\\#[-a-z\\d_]*)?$',
+			'i',
+		); // fragment locator
 		if (item.target.value.startsWith('/')) {
 			option =
 				item.target.value.substr(1, item.target.value.indexOf(' ') - 1) ||
@@ -46,8 +55,9 @@ export default function Search({
 				open(`${providerURL}${subtext}`, '_self');
 			} else if (providerLabel === 'Show weather') {
 				openWeatherModal();
-			} else if (validURL(item.target.value)) {
+			} else if (urlPattern.test(item.target.value)) {
-				if (containsProtocol(item.target.value)) window.location = item.target.value;
+				if (/^(https?:\/\/).*/i.test(item.target.value))
+					window.location = item.target.value;
 				else open(`https://${item.target.value}`, '_self');
 			} else {
 				open(`${providerURL}${subtext}`, '_self');

src/pages/homepage/components/SettingsButton.tsx

@@ -101,7 +101,7 @@ function SettingsButton() {
 							<Button
 								classNames={buttonClasses}
 								className={buttonClasses.wakeButton}
-								disabled={!wolClients?.length}
+								disabled={!wolClients?.length || selectedClient === null}
 								onClick={() => {
 									handleWakeRequest();
 									notify('Wake command sent');