Added weather deatils to the cities.

react-fm/.gitignore

@@ -1,25 +1,26 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dev-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dev-dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

react-fm/src/pages/matchQueues/Queue.tsx

@@ -112,11 +112,11 @@ function MatchQueue() {
           <Zoom in={true} key={city.cityId} style={{ transitionDelay: '300ms' }}>
             <div className={isPortrait ? styles.mobileContainer : styles.container}>
               <Cities
-                cityName={city.cityName}
-                cityId={city.cityId}
-                events={city.events}
-                dummyData={city.dummyData}
-              />
+              cityName={city.cityName}
+              cityId={city.cityId}
+              events={city.events}
+              dummyData={city.dummyData} 
+              countryCode={city.countryCode} />
               <GamesList gameEvent={city.events} cityName={city.cityName} />
             </div>
           </Zoom>

react-fm/src/pages/matchQueues/data.ts

@@ -4,6 +4,7 @@ const dummyData = {
       {
         cityId: '2',
         cityName: 'Hyderabad',
+        countryCode: 'IN',
         dummyData: false,
         events: [
           {
@@ -148,6 +149,7 @@ const dummyData = {
       {
         cityId: '1',
         cityName: 'Gurgaon',
+        countryCode: 'IN',
         dummyData: false,
         events: [
           {
@@ -321,6 +323,7 @@ const dummyData = {
       {
         cityId: '4',
         cityName: 'San Jose',
+        countryCode: 'US',
         dummyData: false,
         events: [
           {

react-fm/src/pages/matchQueues/eventsComponents/Cities.module.scss

@@ -7,7 +7,47 @@
   display: inline-block;
 }
 
-.citiesImg {
+.citiesImg ,.weatherImg {
   height: 40px;
   margin-bottom: -3px;
 }
+
+.weatherImgMobile {
+  height: 40px;
+  // margin-bottom: -3px;
+}
+
+.citiesContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  justify-content: space-between;
+}
+
+.mobileContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+  justify-content: space-between;
+}
+
+.weather {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(76, 233, 90);
+  font-size: 20px;
+  font-weight: 600;
+  gap: 15px;
+}
+
+.mobileWeather {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(76, 233, 90);
+  font-size: 20px;
+  font-weight: 600;
+  gap: 8px;
+}

react-fm/src/pages/matchQueues/eventsComponents/Cities.tsx

@@ -1,12 +1,28 @@
-import type { FC } from 'react';
-
+import { type FC ,useEffect, useState} from 'react';
 import Typography from '@mui/material/Typography';
-
 import mapCityData from '../map';
-import type { CityDetails } from '../types/Events.types';
+import type { CityDetails,Weather, WeatherIcon } from '../types/Events.types';
 import styles from './Cities.module.scss';
+import useOrientation from '@/hooks/useOrientation';
+
+const weatherIconMap: WeatherIcon = {
+  '01': 'weather-icons/clear.png',
+  '02': 'weather-icons/fewclouds.png',
+  '03': 'weather-icons/scatteredclouds.png',
+  '04': 'weather-icons/brokenclouds.png',
+  '05': 'weather-icons/showerrain.png',
+  '06': 'weather-icons/showerrain.png',
+  '09': 'weather-icons/showerrain.png',
+  '10': 'weather-icons/rain.png',
+  '11': 'weather-icons/thunderstorm.png',
+  '13': 'weather-icons/snow.png',
+  '50': 'weather-icons/mist.png',
+}
 
-export const Cities: FC<CityDetails> = ({ cityName, cityId }) => {
+export const Cities: FC<CityDetails> = ({ cityName, cityId,countryCode }) => {
+
+  const [weather,setWeather] = useState<Weather>({temp: "", description: "", icon: ""});
+  const isPortrait = useOrientation();
   //calculate the image source based on the city name
   let cityImage;
 
@@ -16,12 +32,51 @@ export const Cities: FC<CityDetails> = ({ cityName, cityId }) => {
     }
   });
 
+  useEffect(function() {
+    async function fetchWeather() {
+      try {
+        const apiUrl =
+        `https://api.openweathermap.org/data/2.5/weather?q=${cityName},${countryCode}&units=metric&appid=2d9b4d6c529fae9a54f7e64abefede4c`;
+        const res = await fetch(apiUrl);
+        const data = await res.json();
+        setWeather({
+          temp: data.main.temp,
+          description: data.weather[0]?.description,
+          icon: data.weather[0]?.icon
+        });
+      }
+      catch(err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+      }
+
+    }
+    fetchWeather();
+  },[cityName, countryCode])
+
+
+  const formattedWeather = (weather: Weather) => {
+    const description = weather?.description?.charAt(0).toUpperCase() + weather?.description?.slice(1);
+    const image = weatherIconMap?.[weather?.icon.substring(0, 2)] || "";
+
+    return (
+      <div className={isPortrait ? styles.mobileWeather : styles.weather}>
+        <span>{weather?.temp ? `${Math.round(Number(weather?.temp))} °C` : ""} </span>
+        <span>{description || ''}</span>
+        {image && <img className={isPortrait ? styles.weatherImgMobile : styles.weatherImg} src={image} alt={description} />}
+      </div>
+    );
+  };
   return (
-    <div>
-      <Typography className={styles.citiesName} key={cityId}>
-        {cityName}
-      </Typography>
-      <img className={styles.citiesImg} src={cityImage} alt={cityName} />
+    <div className={isPortrait ? styles.mobileContainer : styles.citiesContainer}>
+      <div>
+        <Typography className={styles.citiesName} key={cityId}>
+          {cityName}
+        </Typography>
+        <img className={styles.citiesImg} src={cityImage} alt={cityName} />
+      </div>
+      {formattedWeather(weather)}
     </div>
   );
 };
+

react-fm/src/pages/matchQueues/types/Events.types.tsx

@@ -29,8 +29,19 @@ type CityDetails = {
   cityName: string;
   dummyData: boolean;
   events: EventDetails[];
+  countryCode: string;
 };
 
+type Weather = {
+  temp: string,
+  description: string,
+  icon: string
+}
+
+type WeatherIcon = {
+  [key: string] : string;
+}
+
 type dummyDataArrays = {
   data: CityDetails[];
 };
@@ -41,4 +52,6 @@ export type {
   waitListPlayerDetails,
   EventDetails,
   dummyDataArrays,
+  Weather,
+  WeatherIcon
 };