moved weathericon logic out of components as it
All checks were successful
Docker Build & Publish / Build Docker (push) Successful in 1m4s

was needed in multiple places.
This commit is contained in:
ChrQR 2024-05-17 22:55:48 +02:00
parent 8907c4c479
commit dc6882cf71
4 changed files with 80 additions and 169 deletions

43
app/weatherIcons.ts Normal file
View File

@ -0,0 +1,43 @@
import cloudAndLightening from "../public/cloud-and-lightening.svg";
import cloudAndMoon from "../public/cloud-and-moon.svg";
import cloudAndRain from "../public/cloud-and-rain.svg";
import cloudAndSnow from "../public/cloud-and-snow.svg";
import cloudAndWind from "../public/cloud-and-wind.svg";
import cloudSnowRain from "../public/cloud-snow-rain.svg";
import cloudAndSun from "../public/cloud-and-sun.svg";
import cloudWindRain from "../public/cloud-wind-rain.svg";
import cloud from "../public/cloud.svg";
import moon from "../public/moon.svg";
import sun from "../public/sun.svg";
import { WeatherIconType } from "@/types/types";
export const weatherIcons: WeatherIconType[] = [
{ code: 0, url: sun }, // clear sky
{ code: 1, url: cloudAndSun }, // clear mainly
{ code: 2, url: cloud }, // partly cloudy
{ code: 3, url: cloud }, // overcast
{ code: 45, url: cloud }, // fog
{ code: 48, url: cloud }, // fog rime
{ code: 51, url: cloudAndRain }, // drizzle light
{ code: 53, url: cloudAndRain }, // drizzle moderate
{ code: 55, url: cloudAndRain }, // drizzle dense
{ code: 56, url: cloudSnowRain }, // drizzle light freezing
{ code: 57, url: cloudSnowRain }, // drizzle dense freezing
{ code: 61, url: cloudAndRain }, // rain slight
{ code: 63, url: cloudAndRain }, // rain moderate
{ code: 65, url: cloudAndRain }, // rain heavy
{ code: 66, url: cloudWindRain }, // rain light freezing
{ code: 67, url: cloudWindRain }, // rain dense freezing
{ code: 71, url: cloudAndSnow }, // snow slight
{ code: 73, url: cloudAndSnow }, // snow moderate
{ code: 75, url: cloudAndSnow }, // snow heavy
{ code: 77, url: cloudAndSnow }, // snow grains
{ code: 80, url: cloudAndRain }, // rain showers slight
{ code: 81, url: cloudAndRain }, // rain showers moderate
{ code: 82, url: cloudAndRain }, // rain showers violent
{ code: 85, url: cloudAndSnow }, // snow showers slight
{ code: 86, url: cloudAndSnow }, // snow showers heavy
{ code: 95, url: cloudAndLightening }, // thunderstorm
{ code: 96, url: cloudAndLightening }, // thunderstorm hail slight
{ code: 99, url: cloudAndLightening }, // thunderstorm hail heavy
];

View File

@ -1,91 +1,22 @@
import Image from "next/image"; import Image from "next/image";
import cloudAndLightening from '../public/cloud-and-lightening.svg'
import cloudAndMoon from '../public/cloud-and-moon.svg'
import cloudAndRain from '../public/cloud-and-rain.svg'
import cloudAndSnow from '../public/cloud-and-snow.svg'
import cloudAndWind from '../public/cloud-and-wind.svg'
import cloudSnowRain from '../public/cloud-snow-rain.svg'
import cloudAndSun from '../public/cloud-and-sun.svg'
import cloudWindRain from '../public/cloud-wind-rain.svg'
import cloud from '../public/cloud.svg'
import moon from '../public/moon.svg'
import sun from '../public/sun.svg'
import { useContext } from "react"; import { useContext } from "react";
import { WeatherContext } from "./WeatherNow"; import { WeatherContext } from "./WeatherNow";
import { weatherIcons } from "@/app/weatherIcons";
function getCurrentWeatherIcon(weatherCode: number) {
switch (weatherCode) {
default:
return sun;
case 0: // clear sky
return sun;
case 1: // clear mainly
return cloudAndSun;
case 2: // partly cloudy
return cloud;
case 3: // overcast
return cloud;
case 45: // fog
return cloud;
case 48: // fog rime
return cloud;
case 51: // drizzle light
return cloudAndRain;
case 53: // drizzle moderate
return cloudAndRain;
case 55: // drizzle dense
return cloudAndRain;
case 56: // drizzle light freezing
return cloudSnowRain;
case 57: // drizzle dense freezing
return cloudSnowRain;
case 61: // rain slight
return cloudAndRain;
case 63: // rain moderate
return cloudAndRain;
case 65: // rain heavy
return cloudAndRain;
case 66: // rain light freezing
return cloudWindRain;
case 67: // rain dense freezing
return cloudWindRain;
case 71: // snow slight
return cloudAndSnow;
case 73: // snow moderate
return cloudAndSnow;
case 75: // snow heavy
return cloudAndSnow;
case 77: // snow grains
return cloudAndSnow;
case 80: // rain showers slight
return cloudAndRain;
case 81: // rain showers moderate
return cloudAndRain;
case 82: // rain showers violent
return cloudAndRain;
case 85: // snow showers slight
return cloudAndSnow;
case 86: // snow showers heavy
return cloudAndSnow;
case 95: // thunderstorm
return cloudAndLightening;
case 96: //thunderstorm hail slight
return cloudAndLightening;
case 99: //thunderstorm hail heavy
return cloudAndLightening;
}
};
export default function WeatherHero() { export default function WeatherHero() {
const { weather } = useContext(WeatherContext); const { weather } = useContext(WeatherContext);
const weatherCode = weather.current.weather_code; const weatherCode = weather.current.weather_code;
return( const currentWeather = weatherIcons.filter((weather) => {
return weather.code === weatherCode;
});
return (
<> <>
<Image className="h-44 w-auto mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/> <Image
className="h-44 w-auto mx-auto"
src={currentWeather[0].url}
alt="Weather icon"
/>
</> </>
) );
}; }

View File

@ -1,88 +1,20 @@
import Image from "next/image"; import Image from "next/image";
import cloudAndLightening from '../public/cloud-and-lightening.svg' import { weatherIcons } from "@/app/weatherIcons";
import cloudAndMoon from '../public/cloud-and-moon.svg'
import cloudAndRain from '../public/cloud-and-rain.svg'
import cloudAndSnow from '../public/cloud-and-snow.svg'
import cloudAndWind from '../public/cloud-and-wind.svg'
import cloudSnowRain from '../public/cloud-snow-rain.svg'
import cloudAndSun from '../public/cloud-and-sun.svg'
import cloudWindRain from '../public/cloud-wind-rain.svg'
import cloud from '../public/cloud.svg'
import moon from '../public/moon.svg'
import sun from '../public/sun.svg'
function getCurrentWeatherIcon(weatherCode: number) {
switch (weatherCode) {
default:
return sun;
case 0: // clear sky
return sun;
case 1: // clear mainly
return cloudAndSun;
case 2: // partly cloudy
return cloud;
case 3: // overcast
return cloud;
case 45: // fog
return cloud;
case 48: // fog rime
return cloud;
case 51: // drizzle light
return cloudAndRain;
case 53: // drizzle moderate
return cloudAndRain;
case 55: // drizzle dense
return cloudAndRain;
case 56: // drizzle light freezing
return cloudSnowRain;
case 57: // drizzle dense freezing
return cloudSnowRain;
case 61: // rain slight
return cloudAndRain;
case 63: // rain moderate
return cloudAndRain;
case 65: // rain heavy
return cloudAndRain;
case 66: // rain light freezing
return cloudWindRain;
case 67: // rain dense freezing
return cloudWindRain;
case 71: // snow slight
return cloudAndSnow;
case 73: // snow moderate
return cloudAndSnow;
case 75: // snow heavy
return cloudAndSnow;
case 77: // snow grains
return cloudAndSnow;
case 80: // rain showers slight
return cloudAndRain;
case 81: // rain showers moderate
return cloudAndRain;
case 82: // rain showers violent
return cloudAndRain;
case 85: // snow showers slight
return cloudAndSnow;
case 86: // snow showers heavy
return cloudAndSnow;
case 95: // thunderstorm
return cloudAndLightening;
case 96: //thunderstorm hail slight
return cloudAndLightening;
case 99: //thunderstorm hail heavy
return cloudAndLightening;
}
};
// this component takes WeatherIconPropType as props and shows the weather icon for the hour index it is given in timeIndex prop. // this component takes WeatherIconPropType as props and shows the weather icon for the hour index it is given in timeIndex prop.
export default function WeatherIcon(props: {weatherCode: number}) { export default function WeatherIcon(props: { weatherCode: number }) {
const weatherCode = props.weatherCode const currentWeather = weatherIcons.filter((weather) => {
return ( return weather.code === props.weatherCode;
});
return (
<div className="h-12"> <div className="h-12">
<Image className="mt-2 max-h-12 mx-auto w-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/> <Image
className="mt-2 max-h-12 mx-auto w-auto"
src={currentWeather[0].url}
alt="Weather icon"
width={100}
height={100}
/>
</div> </div>
) );
}; }

View File

@ -147,7 +147,8 @@ export interface coordType {
name: string; name: string;
geo: { geo: {
lat: number; lat: number;
lng: number;} lng: number;
};
} }
export type EffectCallback = () => void | (() => void | undefined); export type EffectCallback = () => void | (() => void | undefined);
@ -161,7 +162,6 @@ export interface TempInfo {
humidity: number; humidity: number;
} }
export interface LocationContextType { export interface LocationContextType {
geoLocation: coordType; geoLocation: coordType;
setGeoLocation: React.Dispatch<React.SetStateAction<coordType>>; setGeoLocation: React.Dispatch<React.SetStateAction<coordType>>;
@ -181,4 +181,9 @@ export interface DailyCardPropType {
temperature: number; temperature: number;
weatherCode: number; weatherCode: number;
time: string; time: string;
} }
export interface WeatherIconType {
code: number;
url: string;
}