From 447c0125e51c504e7b2ffe515b4a3e68daa34bde Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Fri, 22 Mar 2024 14:25:17 -0500
Subject: [PATCH] added humidity & visibility component

---
 .../app/components/feelLike/FeelLike.tsx      | 41 ++++++++++++++++++
 .../app/components/humidity/Humidity.tsx      | 39 +++++++++++++++++
 .../app/components/visibility/Visibility.tsx  | 43 +++++++++++++++++++
 3 files changed, 123 insertions(+)
 create mode 100644 weather_app/app/components/feelLike/FeelLike.tsx
 create mode 100644 weather_app/app/components/humidity/Humidity.tsx
 create mode 100644 weather_app/app/components/visibility/Visibility.tsx

diff --git a/weather_app/app/components/feelLike/FeelLike.tsx b/weather_app/app/components/feelLike/FeelLike.tsx
new file mode 100644
index 0000000..ebf679b
--- /dev/null
+++ b/weather_app/app/components/feelLike/FeelLike.tsx
@@ -0,0 +1,41 @@
+"use client"
+import { useGlobalContext } from '@/app/context/globalContext';
+import { kelvinToFarenheit } from '@/app/utils/Misc';
+import { Skeleton } from '@/components/ui/skeleton';
+import React from 'react'
+import { BsThermometerHalf } from "react-icons/bs";
+
+const FeelLike = () => {
+  const {forecast} = useGlobalContext();
+  if(!forecast || !forecast?.main || !forecast?.main?.feels_like){
+    return <Skeleton className='h-[12 rem] w-full'/>
+  }
+  const {feels_like, temp_min, temp_max} = forecast?.main;
+  const feelLike = (feelsLike: number, mintemp: number, maxTemp: number) => {
+    const avgTemp = (mintemp + maxTemp) /2;
+    if(feelsLike < avgTemp - 3){
+      return "Wind is making it feel colder";
+    }
+    if(feelsLike > avgTemp - 3 && feelsLike <= avgTemp + 3){
+      return "Similar to the actual temperature";
+    }
+    if(feelsLike > avgTemp + 3){
+      return "Sun is making it feel warm";
+    }
+    return "Temperature feelinf is typical for this range"
+  };
+  const feelLikeDesc = feelLike(feels_like, temp_min, temp_max);
+
+
+  return (
+    <div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2  px-4 h-[12rem] border rounded-lg'>
+      <div>
+        <h2 className='flex items-center gap-2'>< BsThermometerHalf/> Feels Like</h2>
+        <p className='pt-4 text-2xl'>{kelvinToFarenheit(feels_like)} °F</p>
+      </div>
+      <p className='text-sm'>{feelLikeDesc}</p>
+    </div>
+  )
+}
+
+export default FeelLike
\ No newline at end of file
diff --git a/weather_app/app/components/humidity/Humidity.tsx b/weather_app/app/components/humidity/Humidity.tsx
new file mode 100644
index 0000000..1ac2ac2
--- /dev/null
+++ b/weather_app/app/components/humidity/Humidity.tsx
@@ -0,0 +1,39 @@
+"use client"
+import { useGlobalContext } from '@/app/context/globalContext';
+import { Skeleton } from '@/components/ui/skeleton';
+import React from 'react'
+import { WiHumidity } from "react-icons/wi";
+
+const Humidity = () => {
+    const {forecast} = useGlobalContext();
+    if(!forecast || !forecast?.main || !forecast?.main?.humidity){
+        return <Skeleton className='h-[12rem] w-full'/>
+    };
+    const {humidity} = forecast?.main;
+    const humidityData = (humidity: number) => {
+        if(humidity < 25)
+            return "Poor low humidity levels";
+        if(humidity >= 25 &&  humidity < 30)
+            return "Fair";
+        if(humidity >= 30 &&  humidity < 60)
+            return "Maintain your helthy levels";
+        if(humidity >= 60 &&  humidity < 70)
+            return "Fair";
+        if(humidity >= 70 )
+            return "Poor high humidity levels";
+        return "Humidaty data is not availiable at this moment"
+    };
+
+
+  return (
+    <div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2  px-4 h-[12rem] border rounded-lg'>
+        <div>
+            <h2 className='flex items-center gap-2'><WiHumidity /> Humidity</h2>
+            <p className='pt-4 text-2xl'>{humidity} %</p>
+        </div>
+        <p className='text-sm'>{humidityData(humidity)}</p>
+    </div>
+  )
+}
+
+export default Humidity
\ No newline at end of file
diff --git a/weather_app/app/components/visibility/Visibility.tsx b/weather_app/app/components/visibility/Visibility.tsx
new file mode 100644
index 0000000..311e21c
--- /dev/null
+++ b/weather_app/app/components/visibility/Visibility.tsx
@@ -0,0 +1,43 @@
+"use client"
+import { useGlobalContext } from '@/app/context/globalContext';
+import { Skeleton } from '@/components/ui/skeleton';
+import React from 'react'
+import { MdVisibility } from "react-icons/md";
+
+const Visibility = () => {
+    const {forecast} = useGlobalContext();
+    if(!forecast || !forecast?.visibility){
+        return <Skeleton className='h-[12rem] w-full'/>
+    }
+    const {visibility} = forecast;
+    
+    const visibilityData = (visibility: number) => {
+        const visibilityInMiles = Math.round((visibility / 1000) * 0.621);
+        if(visibilityInMiles <= 1 )
+            return "Thick fog"
+        if(visibilityInMiles <= 2 )
+            return "Haze"
+        if(visibilityInMiles <= 6 )
+            return "Light haze"
+        if(visibilityInMiles <= 12 )
+            return "Clear"
+        if(visibilityInMiles <= 31 )
+            return "Very Clear"
+        if(visibilityInMiles > 31 )
+            return "Exceptionally clear"
+        return "Pure Air"
+    }
+
+
+  return (
+    <div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2  px-4 h-[12rem] border rounded-lg'>
+        <div>
+            <h2 className='flex items-center gap-2'><MdVisibility/> Visibility</h2>
+            <p className='pt-4 text-2xl'>{Math.round((visibility / 1000) * 0.621)} mi</p>
+        </div>
+        <p className='text-sm'>{visibilityData(visibility)}</p>
+    </div>
+  )
+}
+
+export default Visibility
\ No newline at end of file