local-weather/components/LocationSearch.tsx

70 lines
2.0 KiB
TypeScript
Raw Normal View History

2024-05-05 20:55:51 +00:00
"use client";
import React, { useContext, useState } from "react";
import { LocationContext } from "@/context/LocationContext";
2024-05-17 23:57:46 +00:00
import { coordType } from "@/types/types";
2024-05-04 21:04:30 +00:00
export default function LocationSearch() {
const [searchLocation, setSearchLocation] = useState("");
const { setGeoLocation } = useContext(LocationContext);
const [pending, setPending] = useState(false);
2024-05-17 23:57:46 +00:00
const [error, setError] = useState<string | null>(null);
2024-05-05 20:55:51 +00:00
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchLocation(e.target.value);
};
2024-05-07 19:18:51 +00:00
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setPending(true);
2024-05-17 23:57:46 +00:00
setError(null);
2024-05-07 19:18:51 +00:00
try {
const coordinates = await getLocation(searchLocation);
2024-05-17 23:57:46 +00:00
if (coordinates) {
setGeoLocation(coordinates);
}
2024-05-07 19:18:51 +00:00
} catch (error) {
console.error("Error fetching location:", error);
2024-05-17 23:57:46 +00:00
setError("Error fetching location");
} finally {
setPending(false);
}
};
const getLocation = async (
searchLocation: string
): Promise<coordType | null> => {
try {
const response = await fetch(
`/api/location?location=${encodeURIComponent(searchLocation)}`
);
if (!response.ok) {
throw new Error("Failed to fetch the location data");
}
const data = await response.json();
return data;
} catch (error: any) {
console.error("Error fetching location:", error);
setError(error.message);
return null;
2024-05-07 19:18:51 +00:00
}
2024-05-05 20:55:51 +00:00
};
2024-05-07 19:18:51 +00:00
2024-05-04 21:04:30 +00:00
return (
<form onSubmit={handleSubmit}>
<input
className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md max-w-md"
id="location"
name="locationSearch"
type="text"
placeholder="Enter a location to get the weather"
value={searchLocation}
onChange={handleChange}
disabled={pending}
aria-label="Enter location to query the weather"
/>
2024-05-17 23:57:46 +00:00
{error && <p className="text-red-500">{error}</p>}
</form>
2024-05-04 21:04:30 +00:00
);
}