feat: add data fetching

* added and configured TanStack Query
* replaced placeholder data with fetches to OpenWeather

Author: borisyankov

App.tsx

@@ -3,8 +3,9 @@ import {
   StaticParamList,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import Details from './src/screens/Details';
+import Details, { DetailsRouteParams } from './src/screens/Details';
 import Home from './src/screens/Home';
 
 const RootStack = createNativeStackNavigator({
@@ -18,13 +19,13 @@ const RootStack = createNativeStackNavigator({
     Details: {
       screen: Details,
       options: ({ route }) => ({
-        title: route.params?.name,
+        title: (route.params as DetailsRouteParams).name,
       }),
     },
   },
 });
 
-type RootStackParamList = StaticParamList<typeof RootStack>;
+export type RootStackParamList = StaticParamList<typeof RootStack>;
 
 declare global {
   namespace ReactNavigation {
@@ -34,6 +35,12 @@ declare global {
 
 const Navigation = createStaticNavigation(RootStack);
 
+const queryClient = new QueryClient();
+
 export default function App() {
-  return <Navigation />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Navigation />
+    </QueryClientProvider>
+  );
 }

package-lock.json

@@ -13,6 +13,7 @@
     "@react-navigation/native": "^7.0.0",
     "@react-navigation/native-stack": "^7.0.0",
     "@shopify/flash-list": "^1.7.1",
+    "@tanstack/react-query": "^5.59.20",
     "react": "18.3.1",
     "react-native": "0.76.1",
     "react-native-config": "^1.5.3",

package.json

@@ -1491,8 +1491,8 @@ export const sampleForecastResponse: ForecastResponse = {
   },
 };
 
-export async function fetchForecast(city: string | number) {
+export async function fetchForecast(name: string) {
   return fetchData<ForecastResponse>(
-    `https://api.openweathermap.org/data/2.5/forecast?q=${city}`,
+    `https://api.openweathermap.org/data/2.5/forecast?q=${name}`,
   );
 }

src/api/forecast.ts

@@ -149,7 +149,7 @@ export const sampleGroupWeather: GroupResponse = {
   ],
 };
 
-export async function getGroupWeather(ids: number[]) {
+export async function fetchGroupWeather(ids: number[]) {
   return fetchData<GroupResponse>(
     `https://api.openweathermap.org/data/2.5/group?id=${ids.join(',')}`,
   );

src/api/group.ts

@@ -164,8 +164,8 @@ export type City = {
   name: string;
   coord?: Coord;
   local_names?: Record<`${string}${string}`, string>;
-  lat: number;
-  lon: number;
+  lat?: number;
+  lon?: number;
   country: CountryCode;
   state?: string;
   population?: number;

src/api/types.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchGroupWeather } from '../api/group';
+import { fetchForecast } from '../api/forecast';
+
+const cityIds = [728193, 3081368, 2643743, 5391959];
+
+export function useCityListWeather() {
+  return useQuery({
+    queryKey: ['weather'],
+    queryFn: () => fetchGroupWeather(cityIds),
+    staleTime: 60 * 1000,
+  });
+}
+
+export function useCityWeather(id: number) {
+  return useQuery({
+    queryKey: ['cities'],
+    queryFn: () => fetchGroupWeather(cityIds),
+    staleTime: 60 * 1000,
+    select: data => data.list.find(c => c.id === id),
+  });
+}
+
+export function useCityForecast(name: string) {
+  return useQuery({
+    queryKey: ['forecast', name],
+    queryFn: () => fetchForecast(name),
+    staleTime: 60 * 60 * 1000,
+  });
+}

src/data/queries.ts

@@ -1,18 +1,25 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { GroupedWeather } from '../api/group';
-import { sampleForecastResponse } from '../api/forecast';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { formatDate, formatTemperature } from '../utils';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { useCityForecast } from '../data/queries';
+import { RootStackParamList } from '../../App';
 
-type Props = {
-  city: GroupedWeather;
-};
-
-export default function CityForecast({ city }: Props) {
+export default function CityForecast() {
+  const route = useRoute<RouteProp<RootStackParamList, 'Details'>>();
+  const { data, isPending, isError, error } = useCityForecast(
+    route.params.name,
+  );
+  if (isPending) {
+    return <ActivityIndicator size="large" style={styles.progress} />;
+  }
+  if (isError) {
+    return <Text style={styles.error}>Error: {error.message}</Text>;
+  }
   return (
     <View style={styles.wrapper}>
       <Text style={styles.header}>5-day forecast</Text>
-      {sampleForecastResponse.list.map(x => (
+      {data.list.map(x => (
         <Text key={x.dt}>
           {formatDate(x.dt)} {formatTemperature(x.main.temp_max)}{' '}
           {formatTemperature(x.main.temp_min)}
@@ -29,8 +36,15 @@ const styles = StyleSheet.create({
   header: {
     fontSize: 24,
   },
+  progress: {
+    flex: 1,
+    alignSelf: 'center',
+  },
   icon: {
     width: 128,
     height: 128,
   },
+  error: {
+    color: 'red',
+  },
 });

src/screens/CityForecast.tsx

@@ -14,9 +14,12 @@ export default function CityItem({ city }: Props) {
   const navigation = useNavigation();
   return (
     <PressableScale
-      onPress={() =>
-        navigation.navigate('Details', { id: city.id, name: city.name })
-      }>
+      onPress={() => {
+        navigation.navigate('Details', {
+          id: city.id,
+          name: city.name,
+        });
+      }}>
       <View style={styles.card}>
         <View>
           <Text style={styles.name}>

src/screens/CityItem.tsx

@@ -1,14 +1,32 @@
 import { FlashList } from '@shopify/flash-list';
 import React from 'react';
+import { ActivityIndicator, StyleSheet, Text } from 'react-native';
+import { useCityListWeather } from '../data/queries';
 import CityItem from './CityItem';
-import { sampleGroupWeather } from '../api/group';
 
 export default function CityList() {
+  const { data, isPending, isError, error } = useCityListWeather();
+  if (isPending) {
+    return <ActivityIndicator size="large" style={styles.progress} />;
+  }
+  if (isError) {
+    return <Text style={styles.error}>Error: {error.message}</Text>;
+  }
   return (
     <FlashList
-      data={sampleGroupWeather.list}
+      data={data?.list ?? []}
       renderItem={({ item }) => <CityItem city={item} />}
       estimatedItemSize={200}
     />
   );
 }
+
+const styles = StyleSheet.create({
+  progress: {
+    flex: 1,
+    alignSelf: 'center',
+  },
+  error: {
+    color: 'red',
+  },
+});

src/screens/CityList.tsx

@@ -1,29 +1,38 @@
 import React from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
-import { GroupedWeather } from '../api/group';
 import { formatTemperature } from '../utils';
 import { iconUrl } from '../api/api';
+import { useCityWeather } from '../data/queries';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { RootStackParamList } from '../../App';
 
-type Props = {
-  city: GroupedWeather;
-};
-
-export default function CityWeather({ city }: Props) {
+export default function CityWeather() {
+  const route = useRoute<RouteProp<RootStackParamList, 'Details'>>();
+  const { data, isPending, isError, error } = useCityWeather(route.params?.id);
+  if (isPending) {
+    return <Text>loading...</Text>;
+  }
+  if (isError) {
+    return <Text>{error.message}</Text>;
+  }
+  if (!data) {
+    return <Text>No data</Text>;
+  }
   return (
     <View style={styles.wrapper}>
       <View>
         <View style={styles.tempWrapper}>
-          <Text style={styles.temp}>{formatTemperature(city.main.temp)}</Text>
+          <Text style={styles.temp}>{formatTemperature(data.main.temp)}</Text>
           <Image
-            source={{ uri: iconUrl(city.weather[0].icon) }}
+            source={{ uri: iconUrl(data.weather[0].icon) }}
             style={styles.icon}
           />
         </View>
       </View>
       <View style={styles.details}>
-        <Text>Feels like {Math.round(city.main.feels_like - 273.15)}°</Text>
-        <Text>Humidity: {city.main.humidity}%</Text>
-        <Text>Wind: {city.wind.speed} km/h</Text>
+        <Text>Feels like {Math.round(data.main.feels_like - 273.15)}°</Text>
+        <Text>Humidity: {data.main.humidity}%</Text>
+        <Text>Wind: {data.wind.speed} km/h</Text>
       </View>
     </View>
   );

src/screens/CityWeather.tsx

@@ -1,24 +1,22 @@
 import type { StaticScreenProps } from '@react-navigation/native';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { sampleGroupWeather } from '../api/group';
+import { StyleSheet, View } from 'react-native';
 import CityForecast from './CityForecast';
 import CityWeather from './CityWeather';
 
-export type Props = StaticScreenProps<{
+export type DetailsRouteParams = {
   id: number;
   name: string;
-}>;
+};
 
-export default function Details({ route }: Props) {
-  const city = sampleGroupWeather.list.find(c => c.id === route.params.id);
-  if (!city) {
-    return <Text>City not found</Text>;
-  }
+export type DetailsScreenProps = StaticScreenProps<DetailsRouteParams>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function Details({ route }: DetailsScreenProps) {
   return (
     <View style={styles.screen}>
-      <CityWeather city={city} />
-      <CityForecast city={city} />
+      <CityWeather />
+      <CityForecast />
     </View>
   );
 }
@@ -28,11 +26,4 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 'white',
   },
-  city: {
-    fontSize: 32,
-  },
-  icon: {
-    width: 128,
-    height: 128,
-  },
 });