Sycing RN fetching and rendering (#908)

* Sycing RN fetching and rendering

* updating react-vite to use undefined for fetching

Author: DanDaManTran

exercise-src/react-native/13-http-requests/03-problem/src/services/pmo/api/api.ts

@@ -14,7 +14,7 @@ export async function apiRequest<
   params?: Params
   path: string
   body?: Body
-}): Promise<{ data: Data | undefined; error: Error | undefined }> {}
+}): Promise<{ data?: Data; error?: Error }> {}
 
 export function stringifyQuery(
   input: Record<string, string | undefined | undefined>,

exercise-src/react-native/13-http-requests/03-solution/src/services/pmo/api/api.ts

@@ -14,7 +14,7 @@ export async function apiRequest<
   params?: Params
   path: string
   body?: Body
-}): Promise<{ data: Data | undefined; error: Error | undefined }> {
+}): Promise<{ data?: Data; error?: Error }> {
   try {
     const query = params ? stringifyQuery(params) : ""
     const requestUrl = `${baseUrl}${path}?${query}`
@@ -28,15 +28,13 @@ export async function apiRequest<
     })
 
     const data = await response.json()
-
-    if (!response.ok) {
-      const error = new Error(`${response.status} (${response.statusText})`)
-      return { data: data, error: error }
-    }
+    const error = response.ok
+      ? undefined
+      : new Error(`${response.status} (${response.statusText})`)
 
     return {
       data: "data" in data ? data.data : data,
-      error: undefined,
+      error: error,
     }
   } catch (error) {
     return {

exercise-src/react-native/15-async-storage/01-problem/src/services/pmo/api/api.ts

@@ -37,15 +37,13 @@ export async function apiRequest<
     })
 
     const data = await response.json()
-
-    if (!response.ok) {
-      const error = new Error(`${response.status} (${response.statusText})`)
-      return { data: data, error: error }
-    }
+    const error = response.ok
+      ? undefined
+      : new Error(`${response.status} (${response.statusText})`)
 
     return {
       data: "data" in data ? data.data : data,
-      error: undefined,
+      error: error,
     }
   } catch (error) {
     return {

exercise-src/react-native/15-async-storage/01-solution/src/services/pmo/api/api.ts

@@ -59,6 +59,9 @@ export async function apiRequest<
     })
 
     const data = await response.json()
+    const error = response.ok
+      ? undefined
+      : new Error(`${response.status} (${response.statusText})`)
 
     if (method === "GET" && response.ok) {
       await storeData<CachedResponse<Data>>(keyPrefix + requestUrl, {
@@ -67,14 +70,9 @@ export async function apiRequest<
       })
     }
 
-    if (!response.ok) {
-      const error = new Error(`${response.status} (${response.statusText})`)
-      return { data: data, error: error }
-    }
-
     return {
       data: "data" in data ? data.data : data,
-      error: undefined,
+      error: error,
     }
   } catch (error) {
     return {

exercise-src/react-native/15-async-storage/02-problem/src/services/pmo/api/api.ts

@@ -23,7 +23,7 @@ export async function apiRequest<
   params?: Params
   path: string
   body?: Body
-}): Promise<{ data: Data | undefined; error: Error | undefined }> {
+}): Promise<{ data?: Data; error?: Error }> {
   try {
     const query = params ? stringifyQuery(params) : ""
     const requestUrl = `${baseUrl}${path}?${query}`
@@ -58,6 +58,9 @@ export async function apiRequest<
     })
 
     const data = await response.json()
+    const error = response.ok
+      ? undefined
+      : new Error(`${response.status} (${response.statusText})`)
 
     if (method === "GET" && response.ok) {
       await storeData<CachedResponse<Data>>(keyPrefix + requestUrl, {
@@ -66,14 +69,9 @@ export async function apiRequest<
       })
     }
 
-    if (!response.ok) {
-      const error = new Error(`${response.status} (${response.statusText})`)
-      return { data: data, error: error }
-    }
-
     return {
       data: "data" in data ? data.data : data,
-      error: undefined,
+      error: error,
     }
   } catch (error) {
     return {

exercises/react-vite/05-props/01-solution/src/pages/RestaurantList/ListItem.tsx

@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
+        <img src={`/${thumbnail}`} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (

exercises/react-vite/06-routing/01-problem/src/pages/RestaurantList/ListItem.tsx

@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
+        <img src={`/${thumbnail}`} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (

exercises/react-vite/06-routing/01-solution/src/pages/RestaurantList/ListItem.tsx

@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
+        <img src={`/${thumbnail}`} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (

exercises/react-vite/06-routing/02-problem/src/pages/RestaurantList/ListItem.tsx

@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
+        <img src={`/${thumbnail}`} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (

exercises/react-vite/06-routing/02-solution/src/pages/RestaurantList/ListItem.tsx

@@ -19,7 +19,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <>
       <div className="restaurant">
-        <img src={thumbnail} alt={`A thumbnail for ${name}`} width="100" height="100" />
+        <img src={`/${thumbnail}`} alt={`A thumbnail for ${name}`} width="100" height="100" />
         <h3>{name}</h3>
 
         {address && (