diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index 9d650c4..040fbc0 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -21,8 +21,8 @@ export function Homepage() { } = useQueryAPI({ endpoint: 'api/messages', }); - const [personalData, setPersonalData] = useState([]); - const [messages, setMessages] = useState([]); + const [personalData, setPersonalData] = useState(null); + const [messages, setMessages] = useState(null); const [displayedGreeting, setDisplayedGreeting] = useState(''); const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] = useDisclosure(false); diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx index 99507a5..4c476f1 100644 --- a/src/pages/homepage/components/Header/Header.tsx +++ b/src/pages/homepage/components/Header/Header.tsx @@ -83,8 +83,8 @@ function Header({ {greet .replace('$firstName', currentUser.firstName) .replace('$lastName', currentUser.lastName) - .replace('$firstName!', currentUser.firstName.toUpperCase()) - .replace('$lastName!', currentUser.lastName.toUpperCase())} + .replace('$firstName^', currentUser.firstName.toUpperCase()) + .replace('$lastName^', currentUser.lastName.toUpperCase())} ([]); + const { data: apps, isFetching: isAppsFetching } = useQueryAPI({ + endpoint: 'api/apps', + }); + const [applicationData, setApplicationData] = useState([]); const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = useDisclosure(false); const { @@ -30,6 +34,7 @@ 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 @@ -58,6 +63,11 @@ export default function Search({ open(`${providerURL}${subtext}`, '_self'); } else if (providerLabel === 'Show weather') { openWeatherModal(); + } else if (providerLabel.startsWith('Launch')) { + open( + `${applicationData?.find((app: any) => app.baseUrl.substr(1).toLowerCase() === item.target.value.substr(1)).url}`, + '_self', + ); } else if (urlPattern.test(item.target.value)) { if (/^(https?:\/\/).*/i.test(item.target.value)) window.location = item.target.value; @@ -74,6 +84,11 @@ export default function Search({ } }, [providers, providersIsFetched]); + useEffect(() => { + if (apps && !isAppsFetching) { + setApplicationData(apps); + } + }, [apps, isAppsFetching]); return ( + app.baseUrl.substr(1).toLowerCase() === item.target.value.substr(1), + ) + ) { + setProviderLabel(`Launch ${item.target.value.substr(1)}`); + } else { + setProviderLabel('Invalid function'); } } else { setProviderLabel('Google Search'); @@ -118,7 +144,11 @@ export default function Search({ } }} onKeyUp={(item: any) => { - if (providerLabel !== 'Invalid Search') { + if (item.code === 'Escape') { + setSearchValue(''); + setProviderLabel('Google Search'); + } + if (!providerLabel.startsWith('Invalid')) { handleKeyPress(item); } }} diff --git a/src/styles/TextInput.module.css b/src/styles/TextInput.module.css index 1371a5e..85dc414 100644 --- a/src/styles/TextInput.module.css +++ b/src/styles/TextInput.module.css @@ -38,6 +38,21 @@ padding-left: 1em; padding-right: 1em; text-align: center; + &[data-active="true"]{ + background-color: color-mix(in srgb,var(--color-search-background), transparent 50%); + border-color: var(--color-border); + outline: none; + color: var(--color-text-pri); + font-style: normal; + font-weight: 500; + font-size: 1.2em; + letter-spacing: .2em; + width:100%; + border-top-left-radius: .25em; + border-top-right-radius: .25em; + border-bottom-left-radius: .25em; + border-bottom-right-radius: .25em; + } } .section{ transition: opacity 0.1s 0s ease; @@ -52,7 +67,7 @@ background-color: var(--color-search-background); border-color: var(--color-border); outline: none; - color: var(--color-text-acc); + color: var(--color-text-pri); font-style: normal; font-weight: 500; font-size: 1.2em; @@ -62,6 +77,21 @@ border-top-right-radius: .25em; border-bottom-left-radius: .25em; border-bottom-right-radius: .25em; + &[data-active="true"]{ + background-color: var(--color-search-background); + border-color: var(--color-border); + outline: none; + color: var(--color-text-pri); + font-style: normal; + font-weight: 500; + font-size: 1.2em; + letter-spacing: .2em; + width:100%; + border-top-left-radius: .25em; + border-top-right-radius: .25em; + border-bottom-left-radius: .25em; + border-bottom-right-radius: .25em; + } } .section{ transition: opacity 0.4s 0.4s ease; @@ -71,20 +101,5 @@ opacity: 1; } } - .input[data-active="true"]{ - background-color: var(--color-search-background); - border-color: var(--color-border); - outline: none; - color: var(--color-text-acc); - font-style: normal; - font-weight: 500; - font-size: 1.2em; - letter-spacing: .2em; - width:100%; - border-top-left-radius: .25em; - border-top-right-radius: .25em; - border-bottom-left-radius: .25em; - border-bottom-right-radius: .25em; - } } }