added uv index component

This commit is contained in:
Juthatip McDevitt 2024-03-21 23:00:19 -05:00
parent 84bb179392
commit f0a6ba7bc1
3 changed files with 71 additions and 8 deletions

View file

@ -12,8 +12,8 @@ const AirPollution = () => {
return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/> return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/>
} }
const airQualityIndex = airPollution.list[0].main.aqi * 10; const airQualityIndex = airPollution.list[0].main.aqi * 10;
console.log(airQualityIndex) //console.log(airQualityIndex)
//filter aqi //filter api
const filterAQI = air_QualityIndex.find((item) => { const filterAQI = air_QualityIndex.find((item) => {
return item.rating === airQualityIndex; return item.rating === airQualityIndex;
}) })

View file

@ -1,10 +1,64 @@
"use client" "use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { Skeleton } from '@/components/ui/skeleton';
import { Progress } from '@/components/ui/progress';
import React from 'react' import React from 'react'
import { TbUvIndex } from "react-icons/tb";
const UVI = () => { const UVI = () => {
const {uvIndex} = useGlobalContext();
if(!uvIndex || !uvIndex.daily){
return <Skeleton className='h-[12rem] w-full'/>
}
const {daily} = uvIndex;
const {uv_index_clearsky_max, uv_index_max} = daily;
const uvIndexMax = uv_index_max[0].toFixed(0);
const uvIndexScale = (uvIndex: number) => {
if(uvIndex <= 2){
return{
text: "Low",
desc: "No protection needed"
};
}
else if(uvIndex <= 5){
return{
text: "Moderate",
desc: "Some protection is required"
};
}
else if(uvIndex <= 7){
return{
text: "High",
desc: "Protection essential"
};
}
else if(uvIndex <= 10){
return{
text: "Very High",
desc: "Extra protection is needed"
};
}
else{
return{
text: "Extreme",
desc: "Stay inside"
};
}
}
const leftProgress = (uvIndexMax / 12) * 100;
return ( return (
<div className='flex flex-col gap-5 justify-center dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2 px-5 h-[12rem] border rounded-lg'> <div className='flex flex-col gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-6 px-4 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
UVI <div>
<h2 className='flex items-center gap-1 '><TbUvIndex />UV Index</h2>
<div className='flex items-center gap-1 pb-2 pt-6'>
<p>{uvIndexMax}</p>
<span className='text-xs'>({uvIndexScale(uvIndexMax).text})</span>
</div>
<Progress value={leftProgress} className='air-progress' max={12}/>
</div>
<p className='text-xs'>{uvIndexScale(uvIndexMax).desc}</p>
</div> </div>
) )
} }

View file

@ -3,8 +3,6 @@ import axios from "axios";
import React, { createContext, useContext, useEffect, useState } from "react" import React, { createContext, useContext, useEffect, useState } from "react"
const GlobalContext = createContext(); const GlobalContext = createContext();
const GlobalContextUpdate = createContext(); const GlobalContextUpdate = createContext();
@ -13,6 +11,7 @@ export const GlobalContextProvider = ({children}) => {
const [forecast, setForecast] = useState({}); const [forecast, setForecast] = useState({});
const [airPollution, setAirPollution] = useState({}); const [airPollution, setAirPollution] = useState({});
const [dailyForecast, setDailyForecast] = useState({}); const [dailyForecast, setDailyForecast] = useState({});
const [uvIndex, setUvIndex] = useState({});
const fetchForecast = async() => { const fetchForecast = async() => {
try { try {
@ -36,7 +35,16 @@ export const GlobalContextProvider = ({children}) => {
const res = await axios.get("api/dailyForecast") const res = await axios.get("api/dailyForecast")
setDailyForecast(res.data) setDailyForecast(res.data)
} catch (error) { } catch (error) {
console.log("Error fetching air pollution data:", error.message) console.log("Error fetching air forcast data:", error.message)
}
};
const fetchUVIndex = async() => {
try {
const res = await axios.get("api/uvIndex")
setUvIndex(res.data)
} catch (error) {
console.log("Error fetching air UVI data:", error.message)
} }
} }
@ -44,10 +52,11 @@ export const GlobalContextProvider = ({children}) => {
fetchForecast(); fetchForecast();
fetchAirPollution(); fetchAirPollution();
fetchDailyForecast(); fetchDailyForecast();
fetchUVIndex();
}, []); }, []);
return( return(
<GlobalContext.Provider value={{forecast, airPollution, dailyForecast}}> <GlobalContext.Provider value={{forecast, airPollution, dailyForecast, uvIndex}}>
<GlobalContextUpdate.Provider>{children}</GlobalContextUpdate.Provider> <GlobalContextUpdate.Provider>{children}</GlobalContextUpdate.Provider>
</GlobalContext.Provider> </GlobalContext.Provider>
) )