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

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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
];

97
components/WeatherHero.tsx
View File

@ -1,91 +1,22 @@
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 { WeatherContext } from "./WeatherNow";
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;
}
};
import { weatherIcons } from "@/app/weatherIcons";
export default function WeatherHero() {
const { weather } = useContext(WeatherContext);
const weatherCode = weather.current.weather_code;
return(
const { weather } = useContext(WeatherContext);
const weatherCode = weather.current.weather_code;
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"
/>
</>
)
};
);
}

98
components/WeatherIcon.tsx
View File

@ -1,88 +1,20 @@
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'
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;
}
};
import { weatherIcons } from "@/app/weatherIcons";
// 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}) {
const weatherCode = props.weatherCode
return (
export default function WeatherIcon(props: { weatherCode: number }) {
const currentWeather = weatherIcons.filter((weather) => {
return weather.code === props.weatherCode;
});
return (
<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>
)
};
);
}

9
types/types.ts
View File

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