Fix the solution code for “Using Async Storage”

exercise-src/react-native/13-http-requests/04-problem/src/screens/RestaurantDetails/RestaurantDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react"
 import { RestaurantsStackParamList } from "../../App"
 import Loading from "../../components/Loading"
 import RestaurantHeader from "../../components/RestaurantHeader"
+import Box from "../../design/Box"
 import Button from "../../design/Button"
 import Screen from "../../design/Screen"
 import Typography from "../../design/Typography"

exercise-src/react-native/13-http-requests/04-solution/src/screens/RestaurantDetails/RestaurantDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react"
 import { RestaurantsStackParamList } from "../../App"
 import Loading from "../../components/Loading"
 import RestaurantHeader from "../../components/RestaurantHeader"
+import Box from "../../design/Box"
 import Button from "../../design/Button"
 import Screen from "../../design/Screen"
 import Typography from "../../design/Typography"
@@ -27,10 +28,12 @@ const RestaurantDetails: React.FC<RestaurantDetailsProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant details:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant details:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/14-user-input/01-problem/src/screens/RestaurantDetails/RestaurantDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react"
 import { RestaurantsStackParamList } from "../../App"
 import Loading from "../../components/Loading"
 import RestaurantHeader from "../../components/RestaurantHeader"
+import Box from "../../design/Box"
 import Button from "../../design/Button"
 import Screen from "../../design/Screen"
 import Typography from "../../design/Typography"
@@ -27,10 +28,12 @@ const RestaurantDetails: React.FC<RestaurantDetailsProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant details:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant details:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/14-user-input/01-problem/src/screens/RestaurantOrder/RestaurantOrder.tsx

@@ -40,10 +40,12 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant order:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant order:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }
@@ -55,7 +57,9 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (!restaurant) {
     return (
       <Screen>
-        <Typography variant="heading">Restaurant not found</Typography>
+        <Box padding="m">
+          <Typography variant="heading">Restaurant not found</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/14-user-input/01-solution/src/screens/RestaurantDetails/RestaurantDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react"
 import { RestaurantsStackParamList } from "../../App"
 import Loading from "../../components/Loading"
 import RestaurantHeader from "../../components/RestaurantHeader"
+import Box from "../../design/Box"
 import Button from "../../design/Button"
 import Screen from "../../design/Screen"
 import Typography from "../../design/Typography"
@@ -27,10 +28,12 @@ const RestaurantDetails: React.FC<RestaurantDetailsProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant details:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant details:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/14-user-input/01-solution/src/screens/RestaurantOrder/RestaurantOrder.tsx

@@ -56,10 +56,12 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant order:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant order:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }
@@ -71,7 +73,9 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (!restaurant) {
     return (
       <Screen>
-        <Typography variant="heading">Restaurant not found</Typography>
+        <Box padding="m">
+          <Typography variant="heading">Restaurant not found</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/14-user-input/02-problem/src/screens/RestaurantOrder/RestaurantOrder.tsx

@@ -58,10 +58,12 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant order:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant order:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }
@@ -73,7 +75,9 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (!restaurant) {
     return (
       <Screen>
-        <Typography variant="heading">Restaurant not found</Typography>
+        <Box padding="m">
+          <Typography variant="heading">Restaurant not found</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/14-user-input/02-solution/src/screens/RestaurantOrder/RestaurantOrder.tsx

@@ -60,10 +60,12 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant order:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant order:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }
@@ -75,7 +77,9 @@ const RestaurantOrder: React.FC<RestaurantOrderProps> = ({ route }) => {
   if (!restaurant) {
     return (
       <Screen>
-        <Typography variant="heading">Restaurant not found</Typography>
+        <Box padding="m">
+          <Typography variant="heading">Restaurant not found</Typography>
+        </Box>
       </Screen>
     )
   }

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

@@ -1,6 +1,6 @@
 import AsyncStorage from "@react-native-async-storage/async-storage"
 
-// Exercise: Implement the four `AsyncStorage` helpers in `storage.ts`.
+// Exercise: Implement the four `AsyncStorage` helpers.
 export const getData = async <T>(key: string): Promise<T | undefined> => {}
 
 export const getAllKeys = (): Promise<readonly string[]> => {}

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

@@ -63,7 +63,7 @@ export async function apiRequest<
     if (method === "GET" && response.ok) {
       await storeData<CachedResponse<Data>>(keyPrefix + requestUrl, {
         data: data,
-        dateTime: new Date().toDateString(),
+        dateTime: new Date().toJSON(),
       })
     }
 

exercise-src/react-native/17-offline-support/02-problem/src/screens/RestaurantDetails/RestaurantDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react"
 import { RestaurantsStackParamList } from "../../App"
 import Loading from "../../components/Loading"
 import RestaurantHeader from "../../components/RestaurantHeader"
+import Box from "../../design/Box"
 import Button from "../../design/Button"
 import Screen from "../../design/Screen"
 import Typography from "../../design/Typography"
@@ -35,10 +36,12 @@ const RestaurantDetails: React.FC<RestaurantDetailsProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant details:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant details:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }

exercise-src/react-native/17-offline-support/02-solution/src/screens/RestaurantDetails/RestaurantDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react"
 import { RestaurantsStackParamList } from "../../App"
 import Loading from "../../components/Loading"
 import RestaurantHeader from "../../components/RestaurantHeader"
+import Box from "../../design/Box"
 import Button from "../../design/Button"
 import Screen from "../../design/Screen"
 import Typography from "../../design/Typography"
@@ -37,10 +38,12 @@ const RestaurantDetails: React.FC<RestaurantDetailsProps> = ({ route }) => {
   if (error) {
     return (
       <Screen>
-        <Typography variant="heading">
-          Error loading restaurant details:{" "}
-        </Typography>
-        <Typography variant="body">{error.message}</Typography>
+        <Box padding="m">
+          <Typography variant="heading">
+            Error loading restaurant details:{" "}
+          </Typography>
+          <Typography variant="body">{error.message}</Typography>
+        </Box>
       </Screen>
     )
   }

src/react-native/15-using-asyncstorage/using-asyncstorage.md

@@ -46,7 +46,7 @@ This also means that classes and functions can't be serialized for storage.
 Here is an example:
 
 @sourceref ./async-setItem.ts
-@highlight 6
+@highlight 1, 5-6, only
 
 This function takes a `restaurant` object, converts it into a string, and saves it under the key `"restaurantData"`.
 
@@ -58,7 +58,7 @@ The retrieved data, being in string format, often needs to be converted back int
 Consider this example:
 
 @sourceref ./async-getItem.ts
-@highlight 5
+@highlight 5-6, only
 
 This function fetches the data stored under the `"restaurantData"` key and converts it from a string back into an object.
 
@@ -126,17 +126,24 @@ Here are some pointers on implementing this strategy:
 npm install @react-native-async-storage/async-storage@1
 ```
 
-✏️ Update **jest-setup.ts** to be:
+✏️ Terminate the existing dev server and start it again:
 
-@diff ../../../exercises/react-native/14-user-input/01-solution/jest-setup.ts ../../../exercises/react-native/15-async-storage/01-problem/jest-setup.ts only
+```bash
+npm run start
+```
 
-✏️ Create **src/services/storage/index.ts** and update it to be:
+✏️ Update **jest-setup.ts** to be:
 
-@sourceref ../../../exercises/react-native/15-async-storage/01-problem/src/services/storage/index.ts
+@diff ../../../exercises/react-native/14-user-input/01-solution/jest-setup.ts ../../../exercises/react-native/15-async-storage/01-problem/jest-setup.ts only
 
 ✏️ Create **src/services/storage/storage.ts** and update it to be:
 
 @sourceref ../../../exercises/react-native/15-async-storage/01-problem/src/services/storage/storage.ts
+@highlight 3
+
+✏️ Create **src/services/storage/index.ts** and update it to be:
+
+@sourceref ../../../exercises/react-native/15-async-storage/01-problem/src/services/storage/index.ts
 
 ✏️ Update **src/services/pmo/api/api.ts** to be:
 
@@ -166,6 +173,10 @@ You can verify that this is working correctly by using DevTools to:
 - View the requests (or lack thereof) being made.
 - Inspect the stored data.
 
+You can terminate the `api` server to check that uncached requests show an error.
+
+**Hint:** Use [`new Date().toJSON()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON) to get the current datetime as a string.
+
 ### Solution 1
 
 If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`!
@@ -190,7 +201,7 @@ Our overall approach to caching the network responses seems great, although ther
 Right now, we’re storing the datetime as a string in Async Storage, which means we have to parse it every time we check the cached response:
 
 @sourceref ../../../exercises/react-native/15-async-storage/01-solution/src/services/pmo/api/api.ts
-@highlight 7, 38-39, 69, only
+@highlight 7, 38-39, 66, only
 
 We could improve this by storing the datetime as a number instead, so we don’t have to parse it when fetching from the cache:
 
@@ -249,6 +260,7 @@ We’ll assume that the data is version `1` if we haven’t stored the version n
 ✏️ Create **src/services/DataMigration/DataMigration.tsx** and update it to be:
 
 @sourceref ../../../exercises/react-native/15-async-storage/02-problem/src/services/DataMigration/DataMigration.tsx
+@highlight 13, 21-23, only
 
 ✏️ Create **src/services/DataMigration/index.ts** and update it to be:
 
@@ -294,7 +306,7 @@ If you’ve implemented the solution correctly, the tests will pass when you run
 <details>
 <summary>Click to see the solution</summary>
 
-✏️ Update **src/services/DataMigration/DataMigration.ts** to be:
+✏️ Update **src/services/DataMigration/DataMigration.tsx** to be:
 
 @diff ../../../exercises/react-native/15-async-storage/02-problem/src/services/DataMigration/DataMigration.tsx ../../../exercises/react-native/15-async-storage/02-solution/src/services/DataMigration/DataMigration.tsx only