String updates

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}