Skip to content

Commit

Permalink
feat: You can now see up to 48 hours hourly into the future
Browse files Browse the repository at this point in the history
  • Loading branch information
@FleetAdmiralJakob
FleetAdmiralJakob committed Feb 23, 2024
1 parent e3bdf8b commit 6133271
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 77 deletions.
147 changes: 80 additions & 67 deletions apps/web/src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,48 +150,57 @@ const InternalHome = observer(() => {
type WeatherStateType = string | React.ReactNode | undefined;

type TimeType =
| { hour: number; day?: undefined; icons: boolean }
| { hour?: undefined; day: number; icons: boolean };
| { hourIndex: number; dayIndex?: undefined; icons: boolean }
| { hourIndex?: undefined; dayIndex: number; icons: boolean };

const weatherState = ({ hour, day, icons }: TimeType): WeatherStateType => {
if (hour !== undefined && hour !== null) {
if (weatherData.data?.hourlyForecast[hour]?.showers) {
if (weatherData.data.hourlyForecast[hour]!.showers! > 0) {
const weatherState = ({
hourIndex,
dayIndex,
icons,
}: TimeType): WeatherStateType => {
let hour: number | undefined;

if (hourIndex && weatherData.data?.hourlyForecast[hourIndex]?.time) {
hour = new Date(
weatherData.data.hourlyForecast[hourIndex]!.time!,
).getHours();
}

if (hourIndex !== undefined && hourIndex !== null) {
if (weatherData.data?.hourlyForecast[hourIndex]?.showers) {
if (weatherData.data.hourlyForecast[hourIndex]!.showers! > 0) {
if (icons) {
return <FaCloudShowersHeavy className="h-full w-full" />;
}
return translationHome("weather state stormy");
}
}
if (weatherData.data?.hourlyForecast[hour]?.snowfall) {
if (weatherData.data.hourlyForecast[hour]!.snowfall! > 0) {
if (weatherData.data?.hourlyForecast[hourIndex]?.snowfall) {
if (weatherData.data.hourlyForecast[hourIndex]!.snowfall! > 0) {
if (icons) {
return <FaCloudMeatball className="h-full w-full" />;
}
return translationHome("weather state snowy");
}
}
if (weatherData.data?.hourlyForecast[hour]?.rain) {
if (weatherData.data.hourlyForecast[hour]!.rain! > 0) {
if (weatherData.data?.hourlyForecast[hourIndex]?.rain) {
if (weatherData.data.hourlyForecast[hourIndex]!.rain! > 0) {
if (icons) {
return <FaCloudRain className="h-full w-full" />;
}
return translationHome("weather state rainy");
}
}
if (weatherData.data?.hourlyForecast[hour]?.cloudcover) {
if (weatherData.data.hourlyForecast[hour]!.cloudcover! > 40) {
if (weatherData.data.hourlyForecast[hour]!.cloudcover! > 60) {
if (weatherData.data?.hourlyForecast[hourIndex]?.cloudcover) {
if (weatherData.data.hourlyForecast[hourIndex]!.cloudcover! > 40) {
if (weatherData.data.hourlyForecast[hourIndex]!.cloudcover! > 60) {
if (icons) {
return <FaCloud className="h-full w-full" />;
}
return translationHome("weather state very cloudy");
} else {
if (weatherData.data) {
if (
weatherData.data.hourlyForecast[hour]!.time < 19 &&
weatherData.data.hourlyForecast[hour]!.time > 6
) {
if (hour) {
if (hour < 19 && hour > 6) {
if (icons) {
return <FaCloudSun className="h-full w-full" />;
}
Expand All @@ -205,43 +214,43 @@ const InternalHome = observer(() => {
}
}
}
if (weatherData.data?.dailyForecast[hour]?.windSpeed) {
if (weatherData.data.dailyForecast[hour]!.windSpeed! >= 20) {
if (weatherData.data?.dailyForecast[hourIndex]?.windSpeed) {
if (weatherData.data.dailyForecast[hourIndex]!.windSpeed! >= 20) {
if (icons) {
return <FaWind className="h-full w-full" />;
}
return translationHome("weather state windy");
}
}
}
} else if (day !== undefined && day !== null) {
if (weatherData.data?.dailyForecast[day]?.showers) {
if (weatherData.data.dailyForecast[day]!.showers! > 0) {
} else if (dayIndex !== undefined && dayIndex !== null) {
if (weatherData.data?.dailyForecast[dayIndex]?.showers) {
if (weatherData.data.dailyForecast[dayIndex]!.showers! > 0) {
if (icons) {
return <FaCloudShowersHeavy className="h-full w-full" />;
}
return translationHome("weather state stormy");
}
}
if (weatherData.data?.dailyForecast[day]?.snowfall) {
if (weatherData.data.dailyForecast[day]!.snowfall! > 0) {
if (weatherData.data?.dailyForecast[dayIndex]?.snowfall) {
if (weatherData.data.dailyForecast[dayIndex]!.snowfall! > 0) {
if (icons) {
return <FaCloudMeatball className="h-full w-full" />;
}
return translationHome("weather state snowy");
}
}
if (weatherData.data?.dailyForecast[day]?.rain) {
if (weatherData.data.dailyForecast[day]!.rain! > 0) {
if (weatherData.data?.dailyForecast[dayIndex]?.rain) {
if (weatherData.data.dailyForecast[dayIndex]!.rain! > 0) {
if (icons) {
return <FaCloudRain className="h-full w-full" />;
}
return translationHome("weather state rainy");
}
}
if (weatherData.data?.dailyForecast[day]?.cloudcover) {
if (weatherData.data.dailyForecast[day]!.cloudcover! > 40) {
if (weatherData.data.dailyForecast[day]!.cloudcover! > 60) {
if (weatherData.data?.dailyForecast[dayIndex]?.cloudcover) {
if (weatherData.data.dailyForecast[dayIndex]!.cloudcover! > 40) {
if (weatherData.data.dailyForecast[dayIndex]!.cloudcover! > 60) {
if (icons) {
return <FaCloud className="h-full w-full" />;
}
Expand All @@ -254,28 +263,25 @@ const InternalHome = observer(() => {
}
}
}
if (weatherData.data?.dailyForecast[day]?.windSpeed) {
if (weatherData.data.dailyForecast[day]!.windSpeed! >= 20) {
if (weatherData.data?.dailyForecast[dayIndex]?.windSpeed) {
if (weatherData.data.dailyForecast[dayIndex]!.windSpeed! >= 20) {
if (icons) {
return <FaWind className="h-full w-full" />;
}
return translationHome("weather state windy");
}
}
}
if (icons && day === undefined) {
if (weatherData.data) {
if (
weatherData.data.hourlyForecast[hour]!.time < 19 &&
weatherData.data.hourlyForecast[hour]!.time > 6
) {
if (icons && dayIndex === undefined) {
if (hour) {
if (hour < 19 && hour > 6) {
// console.log("Sunny", hour, day)
return <FaSun className="h-full w-full" />;
} else {
return <FaMoon className="h-full w-full" />;
}
}
} else if (icons && hour === undefined) {
} else if (icons && hourIndex === undefined) {
// console.log("Sunny", hour, day);
return <FaSun className="h-full w-full" />;
}
Expand Down Expand Up @@ -307,7 +313,7 @@ const InternalHome = observer(() => {
</h1>
<p className="mt-3 text-xl">
{weatherData.data ? (
weatherState({ hour: 0, icons: false })
weatherState({ hourIndex: 0, icons: false })
) : (
<Skeleton className="h-9 w-36" />
)}
Expand Down Expand Up @@ -445,57 +451,64 @@ const InternalHome = observer(() => {
(hourlyForecast: IHourlyForecast, index: number) => {
let time;
let sunEvent = "";
const currentHour = new Date().getHours();
const currentHour = dayjs()
.tz(dayjs.tz.guess())
.format("YYYY-MM-DDTHH:00");

let hour: number | undefined;

if (hourlyForecast.time) {
hour = new Date(hourlyForecast.time).getHours();
}

if (
weatherData.data.sunset &&
dayjs(weatherData.data.sunset).hour() ===
weatherData.data.sunset.slice(0, -11) + "00" ===
hourlyForecast.time
) {
sunEvent = translationHome("sunset");
} else if (
weatherData.data.sunrise &&
dayjs(weatherData.data.sunrise).hour() ===
weatherData.data.sunrise.slice(0, -11) + "00" ===
hourlyForecast.time
) {
sunEvent = translationHome("sunrise");
}
let moonEvent = "";
if (
weatherData.data.moonrise &&
dayjs(weatherData.data.moonrise).hour() ===
weatherData.data.moonrise.slice(0, -11) + "00" ===
hourlyForecast.time
) {
moonEvent = translationHome("moonrise");
} else if (
weatherData.data.moonset &&
dayjs(weatherData.data.moonset).hour() ===
weatherData.data.moonset.slice(0, -11) + "00" ===
hourlyForecast.time
) {
moonEvent = translationHome("moonset");
}

if (index === 0) {
if (hourlyForecast.time === currentHour) {
if (hour !== undefined) {
if (index === 0) {
if (hourlyForecast.time === currentHour) {
time = translationHome("this hour");
} else {
// Don't render this hour if it's already passed
return null;
}
} else if (hourlyForecast.time === currentHour) {
time = translationHome("this hour");
} else if (hour === 12) {
time = "12" + translationHome("late hour time ending");
} else if (hour > 12) {
time =
hour - 12 + translationHome("late hour time ending");
} else if (hour === 0) {
time = "12" + translationHome("early hour time ending");
} else {
// Don't render this hour if it's already passed
return null;
time = hour + translationHome("early hour time ending");
}
} else if (hourlyForecast.time === currentHour) {
time = translationHome("this hour");
} else if (hourlyForecast.time === 12) {
time = "12" + translationHome("late hour time ending");
} else if (hourlyForecast.time > 12) {
time =
hourlyForecast.time -
12 +
translationHome("late hour time ending");
} else if (hourlyForecast.time === 0) {
time = "12" + translationHome("early hour time ending");
} else {
time =
hourlyForecast.time +
translationHome("early hour time ending");
}
return (
<div
Expand All @@ -510,7 +523,7 @@ const InternalHome = observer(() => {
<div className="mt-1.5 text-center">{moonEvent}</div>
)}
<div className="flex h-12 w-12 justify-center">
{weatherState({ hour: index, icons: true })}
{weatherState({ hourIndex: index, icons: true })}
</div>
{hourlyForecast.temperature ? (
<div>
Expand Down Expand Up @@ -555,7 +568,7 @@ const InternalHome = observer(() => {
>
<div className="mt-1.5 font-semibold">{day}</div>
<div className="h-12 w-12">
{weatherState({ day: index, icons: true })}
{weatherState({ dayIndex: index, icons: true })}
</div>
{dailyForecast.temperatureDay ? (
<div>
Expand Down Expand Up @@ -643,7 +656,7 @@ const InternalHome = observer(() => {
{day}
</div>
<div className="mt-2 w-1/5 xl:pl-1 xl:pr-4">
{weatherState({ day: index, icons: true })}
{weatherState({ dayIndex: index, icons: true })}
</div>
<div className="flex w-1/5 flex-col items-center justify-around xl:w-2/5 xl:flex-row">
{dailyForecast.temperatureDay ? (
Expand Down
6 changes: 2 additions & 4 deletions packages/api/src/routers/weather.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ export const weatherRouter = createTRPCRouter({
const hourlyForecast: IHourlyForecast[] = [];

const currentHour = dayjs().tz(input.timezone).hour();
for (let i = currentHour; i < currentHour + 15; i++) {
for (let i = currentHour; i < currentHour + 48; i++) {
const temperature = hourlyAndDailyData?.hourly.temperature_2m[i];
const apparentTemperature =
hourlyAndDailyData?.hourly.apparent_temperature[i];
Expand All @@ -345,10 +345,8 @@ export const weatherRouter = createTRPCRouter({
const windSpeed = hourlyAndDailyData?.hourly.windspeed_10m[i];
// console.log(cloudcover);

const time = i % 24;

hourlyForecast.push({
time,
time: hourlyAndDailyData?.hourly.time[i],
temperature:
temperature !== undefined ? temperature + 273.15 : undefined,
apparentTemperature:
Expand Down
2 changes: 1 addition & 1 deletion packages/city-data/convex/_generated/api.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* THIS CODE IS AUTOMATICALLY GENERATED.
*
* Generated by [email protected].0.
* Generated by [email protected].1.
* To regenerate, run `npx convex dev`.
* @module
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/city-data/convex/_generated/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* THIS CODE IS AUTOMATICALLY GENERATED.
*
* Generated by [email protected].0.
* Generated by [email protected].1.
* To regenerate, run `npx convex dev`.
* @module
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/city-data/convex/_generated/dataModel.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* THIS CODE IS AUTOMATICALLY GENERATED.
*
* Generated by [email protected].0.
* Generated by [email protected].1.
* To regenerate, run `npx convex dev`.
* @module
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/city-data/convex/_generated/server.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* THIS CODE IS AUTOMATICALLY GENERATED.
*
* Generated by [email protected].0.
* Generated by [email protected].1.
* To regenerate, run `npx convex dev`.
* @module
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/city-data/convex/_generated/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* THIS CODE IS AUTOMATICALLY GENERATED.
*
* Generated by [email protected].0.
* Generated by [email protected].1.
* To regenerate, run `npx convex dev`.
* @module
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/types/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export interface IHourlyForecast {
// Hour of current day
time: number;
time: string | undefined;
// In Kelvin
temperature: number | undefined;
// In Kelvin
Expand Down

0 comments on commit 6133271

Please sign in to comment.