smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Search updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-01-31 17:03:29 -06:00
parent cc46bb0402
commit fb26b37ba1
4 changed files with 67 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/homepage/Homepage.tsx
View File

@@ -21,8 +21,8 @@ export function Homepage() {
} = useQueryAPI({
endpoint: 'api/messages',
});
const [personalData, setPersonalData] = useState<any>([]);
const [messages, setMessages] = useState<any>([]);
const [personalData, setPersonalData] = useState<any>(null);
const [messages, setMessages] = useState<any>(null);
const [displayedGreeting, setDisplayedGreeting] = useState('');
const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
useDisclosure(false);

4
src/pages/homepage/components/Header/Header.tsx
View File

@@ -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())}
</Text>
</Stack>
<Stack

34
src/pages/homepage/components/Search/Search.tsx
View File

@@ -16,6 +16,10 @@ export default function Search({
endpoint: 'api/providers',
});
const [providerData, setProviderData] = useState<any>([]);
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
endpoint: 'api/apps',
});
const [applicationData, setApplicationData] = useState<any>([]);
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 (
<Stack
style={{
@@ -99,7 +114,9 @@ export default function Search({
if (
item.target.value === '/?' ||
item.target.value === '!help' ||
item.target.value === '!h'
item.target.value === '/help' ||
item.target.value === '!h' ||
item.target.value === '/h'
) {
setProviderLabel('Show help');
} else if (item.target.value.startsWith('/')) {
@@ -111,6 +128,15 @@ export default function Search({
} else if (item.target.value.startsWith('!')) {
if (item.target.value === '!w' || item.target.value === '!weather') {
setProviderLabel('Show weather');
} else if (
applicationData?.find(
(app: any) =>
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);
}
}}

47
src/styles/TextInput.module.css
View File

@@ -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;
}
}
}