feat(popular-locations): implement popular cities (#22)

* feat(popular-locations): implement popular cities

* change property name

client/src/App.css

@@ -361,16 +361,18 @@ main {
 .popular-cities {
   gap: 1rem;
   display: flex;
+  min-height: 0;
   flex-direction: column;
   grid-area: popular-cities;
   /* TODO: [-] Extract to variable */
   background: rgba(255, 255, 255, 0.075);
 }
 
 .popular-cities .cities {
-  justify-content: space-around;
   flex: 1;
+  gap: 2rem;
   display: flex;
+  overflow: auto;
   flex-direction: column;
 }
 

client/src/components/dashboard.tsx

@@ -1,4 +1,5 @@
 import Map from './map';
+import PopularLocations from './popular-locations';
 import { PiWind, PiEyeLight, PiSunLight, PiDropLight, PiWindLight, PiThermometerSimple } from 'react-icons/pi';
 
 const Dashboard = () => {
@@ -47,36 +48,7 @@ const Dashboard = () => {
 
             <Map coordinates={{ lat: 51.5, lng: 0.12 }} />
 
-            <div className='popular-cities'>
-                <h1>Popular Cities</h1>
-
-                <div className='cities'>
-                    <div>
-                        <h2>London</h2>
-                        <span>25°C</span>
-                    </div>
-
-                    <div>
-                        <h2>Paris</h2>
-                        <span>30°C</span>
-                    </div>
-
-                    <div>
-                        <h2>New York</h2>
-                        <span>20°C</span>
-                    </div>
-
-                    <div>
-                        <h2>Tokyo</h2>
-                        <span>35°C</span>
-                    </div>
-
-                    <div>
-                        <h2>Rome</h2>
-                        <span>28°C</span>
-                    </div>
-                </div>
-            </div>
+            <PopularLocations />
 
             <div className='weekly-forecast'>
                 <h1>Forecast</h1>

client/src/components/popular-locations.tsx

@@ -0,0 +1,24 @@
+import { trpc } from '@utils/trpc';
+
+const PopularLocations = () => {
+    const [data] = trpc.getPopularLocations.useSuspenseQuery();
+
+    return (
+        <div className='popular-cities'>
+            <h1>Popular Cities</h1>
+
+            <div className='cities'>
+                {
+                    data.map((city) => (
+                        <div key={ city.name }>
+                            <h2>{ city.name }</h2>
+                            <span>{ city.temp_c }°C</span>
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    );
+};
+
+export default PopularLocations;

server/index.ts

@@ -1,8 +1,8 @@
 import { z } from 'zod';
 import cors from 'cors';
 import { router, publicProcedure } from './utils/trpc';
-import { fetchSearch } from './utils/fetchers/fetchers';
 import { createHTTPServer } from '@trpc/server/adapters/standalone';
+import { fetchSearch, fetchPopularLocations } from './utils/fetchers/fetchers';
 
 export type AppRouter = typeof appRouter;
 
@@ -12,6 +12,12 @@ const appRouter = router({
 		.query(async ({ input }) => {
 			const results = await fetchSearch(input);
 
+			return results;
+		}),
+	getPopularLocations: publicProcedure
+		.query(async () => {
+			const results = await fetchPopularLocations();
+
 			return results;
 		}),
 });

server/utils/fetchers/fetchers.ts

@@ -1,4 +1,5 @@
 import fetchExternalData from './fetch-external-data';
+import CurrentWeatherResponse from './types/current-forecast';
 import LocationSearchResponse from './types/search-locations';
 
 export const fetchSearch = async (query: string) => {
@@ -14,3 +15,35 @@ export const fetchSearch = async (query: string) => {
         name: `${ location.name }, ${ location.region }, ${ location.country }`,
     }));
 }
+
+export const fetchCurrentWeather = async (query: string) => {
+    const searchParams = new URLSearchParams({ q: query });
+
+    const data = await fetchExternalData<CurrentWeatherResponse>({
+        endpoint: '/current.json',
+        searchParams: searchParams,
+    });
+
+    return data;
+}
+
+export const fetchPopularLocations = async () => {
+    const cities = [
+		'London',
+		'New York',
+		'Paris',
+		'Tokyo',
+		'Beijing',
+		'Madrid',
+		'Rome',
+	];
+
+    return Promise.all(cities.map(async (city) => {
+        const data = await fetchCurrentWeather(city);
+
+        return {
+            name: data.location.name,
+            temp_c: data.current.temp_c,
+        };
+    }));
+};