Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import { Box, styled, Typography } from "@mui/material";
import LocationAutocomplete from "components/LocationAutocomplete";
import { Coordinates } from "features/search/utils/constants";
import { DASHBOARD } from "i18n/namespaces";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { HostingStatus } from "proto/api_pb";
import { useTransition } from "react";
import { useForm } from "react-hook-form";
import { routeToSearch } from "routes";
import { GeocodeResult } from "utils/hooks";
import { useIsNativeEmbed } from "utils/nativeLink";
import HeroLinks from "./HeroLinks";
const StyledSearchBoxContainer = styled("form")(({ theme }) => ({
padding: theme.spacing(4, 6, 6, 6),
borderRadius: "var(--mui-shape-borderRadius)",
backgroundColor: "var(--mui-palette-background-paper)",
margin: theme.spacing(4, 0),
[theme.breakpoints.down("md")]: {
margin: theme.spacing(3, 2),
},
[theme.breakpoints.down("sm")]: {
padding: theme.spacing(3, 2, 4, 2),
},
}));
export default function HeroSearch() {
const { t } = useTranslation(DASHBOARD);
const router = useRouter();
const searchInputId = "hero-search-input";
const isNativeEmbed = useIsNativeEmbed();
const [, startTransition] = useTransition();
const {
control,
formState: { errors },
} = useForm<{ location: GeocodeResult }>({ mode: "onChange" });
return (
<StyledSearchBoxContainer>
<HeroLinks />
<Typography
variant="h2"
component="label"
display="block"
htmlFor={searchInputId}
sx={{
marginBottom: "16px",
textAlign: "center",
}}
>
{t("search_input_label")}
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
marginTop: 1,
}}
>
<LocationAutocomplete
control={control}
name="location"
id={searchInputId}
variant="outlined"
placeholder={t("search_input_placeholder")}
defaultValue={""}
onChange={(value) => {
Iif (value && value.bbox && value.simplifiedName) {
const newBbox: Coordinates = [
value.bbox[2],
value.bbox[3],
value.bbox[0],
value.bbox[1],
];
const searchRouteWithSearchQuery = routeToSearch({
location: value.simplifiedName,
hostingStatus: [
HostingStatus.HOSTING_STATUS_CAN_HOST,
HostingStatus.HOSTING_STATUS_MAYBE,
],
bbox: newBbox,
showEmptyProfile: false,
});
// Use startTransition in WebView to allow autocomplete to complete before navigation
if (isNativeEmbed) {
startTransition(() => {
router.push(searchRouteWithSearchQuery);
});
} else {
router.push(searchRouteWithSearchQuery);
}
}
}}
fieldError={errors.location?.message}
disableRegions
autocompleteContext="hero-search"
sx={{
"& .MuiOutlinedInput-root": {
maxHeight: "40px",
},
width: "100%",
maxWidth: "650px",
}}
/>
</Box>
</StyledSearchBoxContainer>
);
}
|