docs(examples): code refactoring and type improvement (#7634)

* refactor: minor code refactoring and type improvement for react-native example

* chore: slice the movie with original value

examples/react/react-native/src/components/ListItem.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Paragraph, TouchableRipple } from 'react-native-paper'
+import { MovieDetails } from '../lib/api'
 
 type Props = {
-  item: any
-  onPress: (item: any) => void
+  item: MovieDetails
+  onPress: (item: MovieDetails) => void
 }
 
 export function ListItem({ item, onPress }: Props) {

examples/react/react-native/src/lib/api.ts

@@ -18,27 +18,27 @@ function delay(t: number) {
   })
 }
 
-export async function fetchMovies() {
+export async function fetchMovies(): Promise<Movie[]> {
   console.log('fetchMovies')
 
   await delay(200 + Math.floor(Math.random() * 2000))
 
-  return movies
-    .slice(0, 100)
-    .map((movie) => ({ title: movie.title, year: movie.year })) as Promise<
-    Movie[]
-  >
+  return Promise.resolve(
+    movies
+      .slice(0, 100)
+      .map((movie) => ({ title: movie.title, year: movie.year })),
+  )
 }
 
-export async function fetchMovie(title: string) {
+export async function fetchMovie(title: string): Promise<MovieDetails> {
   console.log('fetchMovie', title)
 
   await delay(200 + Math.floor(Math.random() * 2000))
 
   const result = movies.filter((item) => item.title === title)
 
-  if (result.length == 0) {
+  if (result.length === 0) {
     throw new Error('Movie not found')
   }
-  return result[0] as Promise<MovieDetails>
+  return Promise.resolve(result[0] as MovieDetails)
 }

examples/react/react-native/src/screens/MoviesListScreen.tsx

@@ -9,7 +9,7 @@ import { Divider } from '../components/Divider'
 import { ListItem } from '../components/ListItem'
 import { useRefreshByUser } from '../hooks/useRefreshByUser'
 import { useRefreshOnFocus } from '../hooks/useRefreshOnFocus'
-import { fetchMovies, Movie } from '../lib/api'
+import { fetchMovies, Movie, MovieDetails } from '../lib/api'
 import { MoviesStackNavigator } from '../navigation/types'
 
 type MoviesListScreenNavigationProp = StackNavigationProp<
@@ -30,7 +30,7 @@ export function MoviesListScreen({ navigation }: Props) {
   useRefreshOnFocus(refetch)
 
   const onListItemPress = React.useCallback(
-    (movie) => {
+    (movie: MovieDetails) => {
       navigation.navigate('MovieDetails', {
         movie,
       })
@@ -39,7 +39,7 @@ export function MoviesListScreen({ navigation }: Props) {
   )
 
   const renderItem = React.useCallback(
-    ({ item }) => {
+    ({ item }: { item: MovieDetails }) => {
       return <ListItem item={item} onPress={onListItemPress} />
     },
     [onListItemPress],
@@ -48,7 +48,6 @@ export function MoviesListScreen({ navigation }: Props) {
   if (isPending) return <LoadingIndicator />
 
   if (error) return <ErrorMessage message={error.message}></ErrorMessage>
-
   return (
     <FlatList
       data={data}