rannes.dev/local-weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set up pages router and moved actions.ts
All checks were successful
Docker Build & Publish / Build Docker (push) Successful in 1m7s
Details

Browse Source 
This might have been the problem all along.
I thought server components would fix it, but in
order to not expose my api key i have to create
an API.
This commit is contained in:
ChrQR 2024-05-18 01:12:41 +02:00
parent 329ee7afa5
commit ec5d7fe8f7
3 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/LocationSearch.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useContext, useState } from "react"; import React, { useContext, useState } from "react";
import { getLocation } from "@/app/actions"; import { getLocation } from "@/pages/api/actions";
import { LocationContext } from "@/context/LocationContext"; import { LocationContext } from "@/context/LocationContext";
export default function LocationSearch() { export default function LocationSearch() {
@ -25,18 +25,18 @@ export default function LocationSearch() {
}; };
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<input <input
className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md max-w-md" className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md max-w-md"
id="location" id="location"
name="locationSearch" name="locationSearch"
type="text" type="text"
placeholder="Enter a location to get the weather" placeholder="Enter a location to get the weather"
value={searchLocation} value={searchLocation}
onChange={handleChange} onChange={handleChange}
disabled={pending} disabled={pending}
aria-label="Enter location to query the weather" aria-label="Enter location to query the weather"
/> />
</form> </form>
); );
} }

5
components/WeatherNow.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { getHourlyForecast } from "@/app/actions"; import { getHourlyForecast } from "@/pages/api/actions";
import Temperature from "./Temperature"; import Temperature from "./Temperature";
import { Forecast, WeatherContextType } from "@/types/types"; import { Forecast, WeatherContextType } from "@/types/types";
import { createContext, useContext, useEffect, useState } from "react"; import { createContext, useContext, useEffect, useState } from "react";
@ -15,7 +15,6 @@ export const WeatherContext = createContext<WeatherContextType>({
setWeather: () => {}, // Default function, does nothing setWeather: () => {}, // Default function, does nothing
}); });
export default function WeatherNow() { export default function WeatherNow() {
const { geoLocation } = useContext(LocationContext); const { geoLocation } = useContext(LocationContext);
const [weather, setWeather] = useState<Forecast>(defaultHourlyForecast); const [weather, setWeather] = useState<Forecast>(defaultHourlyForecast);
@ -44,7 +43,7 @@ export default function WeatherNow() {
<WeatherHero /> <WeatherHero />
<Temperature /> <Temperature />
<h2 className="mt-2 text-xl">And the forecast for the coming week</h2> <h2 className="mt-2 text-xl">And the forecast for the coming week</h2>
<CardContainer weather={weather}/> <CardContainer weather={weather} />
</WeatherContext.Provider> </WeatherContext.Provider>
</div> </div>
); );

2
app/actions.ts → pages/api/actions.ts
View File

@ -10,7 +10,7 @@ export async function getLocation(searchLocation: string): Promise<coordType> {
} }
const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${searchLocation}&key=${placesKey}`; const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${searchLocation}&key=${placesKey}`;
console.log(`Fetching URL: ${url}`); console.log(`Fetching location`);
try { try {
const res = await fetch(url); const res = await fetch(url);