refactor: ListWithFetch.tsx logics enhancement

Author: vanGalilea

__tests__/ListWithFetch.test.tsx

@@ -15,8 +15,8 @@ test('displays images from the server', async () => {
   expect(loadingSpinner).not.toBeUndefined()
 
   //load images from server
-  const images = await findAllByLabelText(/flavor/i)
-  expect(images).toHaveLength(2)
+  const userContainers = await findAllByLabelText(/user-container/i)
+  expect(userContainers).toHaveLength(10)
 
   //loading spinner no longer shows
   expect(queryByLabelText(/loader/i)).toBeNull()
@@ -25,15 +25,12 @@ test('displays images from the server', async () => {
   expect(queryByLabelText(/alert/i)).toBeNull()
 })
 
-test('displays error upon error esponse from server', async () => {
+test('displays error upon error response from server', async () => {
   server.resetHandlers(
-    rest.get(
-      'https://4ec38857-2800-4f07-838e-535a78cf7d51.mock.pstmn.io/flavors',
-      (res, req, ctx) => {
-        // @ts-ignore
-        res(ctx.status(500))
-      },
-    ),
+    rest.get('https://random-data-api.com/api/v2/users', (res, req, ctx) => {
+      // @ts-ignore
+      res(ctx.status(500))
+    }),
   )
   render(<ListWithFetch />)
   const {findByLabelText, getByLabelText, getByText, queryByLabelText} = screen

ios/Podfile.lock

@@ -272,8 +272,12 @@ PODS:
   - React-jsinspector (0.66.0)
   - React-logger (0.66.0):
     - glog
-  - react-native-safe-area-context (3.4.1):
+  - react-native-safe-area-context (4.3.3):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
+    - ReactCommon/turbomodule/core
   - react-native-video (5.2.0):
     - React-Core
     - react-native-video/Video (= 5.2.0)
@@ -348,7 +352,7 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.11):
     - React
-  - RNGestureHandler (1.10.3):
+  - RNGestureHandler (2.6.0):
     - React-Core
   - RNScreens (3.17.0):
     - React-Core
@@ -540,7 +544,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 6a05173dc0142abc582bd4edd2d23146b8cc218a
   React-jsinspector: be95ad424ba9f7b817aff22732eb9b1b810a000a
   React-logger: 9a9cd87d4ea681ae929b32ef580638ff1b50fb24
-  react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
+  react-native-safe-area-context: b456e1c40ec86f5593d58b275bd0e9603169daca
   react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28
   React-perflogger: 1f554c2b684e2f484f9edcdfdaeedab039fbaca8
   React-RCTActionSheet: 610d5a5d71ab4808734782c8bca6a12ec3563672
@@ -556,7 +560,7 @@ SPEC CHECKSUMS:
   ReactCommon: eb059748e842a1a86025ebbd4ac9d99e74492f88
   RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNGestureHandler: 920eb17f5b1e15dae6e5ed1904045f8f90e0b11e
   RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
   Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

src/components/ListWithFetch.tsx

@@ -1,8 +1,17 @@
 import React, {useEffect, useState} from 'react'
-import {ActivityIndicator, Image, StyleSheet, Text, View} from 'react-native'
+import {
+  ActivityIndicator,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
 import {Colors} from 'react-native/Libraries/NewAppScreen'
 import axios from 'axios'
 
+const AVATAR_SIZE = 68
+
 export default () => {
   const [flavorsData, setFlavorsData] = useState([])
   const [loading, setLoading] = useState(false)
@@ -13,7 +22,7 @@ export default () => {
       setLoading(true)
       try {
         const response = await axios.get(
-          'https://4ec38857-2800-4f07-838e-535a78cf7d51.mock.pstmn.io/flavors',
+          'https://random-data-api.com/api/v2/users?size=10',
         )
         // @ts-ignore
         setFlavorsData(response.data)
@@ -28,9 +37,8 @@ export default () => {
   }, [])
 
   return (
-    <View style={styles.body}>
-      <Text>The Ice Cream Shoppe</Text>
-      <Text>Today's Flavors</Text>
+    <ScrollView>
+      <Text>The Funky Users DB</Text>
       {loading && (
         <ActivityIndicator
           color={'#000'}
@@ -43,17 +51,27 @@ export default () => {
           <Text>Error oopsie!</Text>
         </View>
       )}
-      {flavorsData.map(({name, image}) => (
-        <View key={name} style={styles.flavorContainer}>
-          <Image
-            source={{uri: image}}
-            style={styles.image}
-            accessibilityLabel={`${name}-flavor`}
-          />
-          <Text>{name}</Text>
-        </View>
-      ))}
-    </View>
+      {flavorsData.map(
+        ({first_name, last_name, uid, avatar, email, phone_number}) => (
+          <View
+            key={uid}
+            style={styles.userContainer}
+            accessibilityLabel={`${uid}-user-container`}>
+          >
+            <View style={styles.avatarWrapper}>
+              <Image source={{uri: avatar}} style={styles.image} />
+            </View>
+            <View style={styles.userInfoContainer}>
+              <Text>
+                {first_name} {last_name}
+              </Text>
+              <Text>{email}</Text>
+              <Text>{phone_number}</Text>
+            </View>
+          </View>
+        ),
+      )}
+    </ScrollView>
   )
 }
 
@@ -64,6 +82,18 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   errorContainer: {backgroundColor: '#C63939', padding: 16, borderRadius: 6},
-  flavorContainer: {alignItems: 'center', margin: 8},
-  image: {width: 100, height: 100},
+  userContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 16,
+    marginBottom: 8,
+    flex: 1,
+  },
+  avatarWrapper: {
+    backgroundColor: 'rgba(88,186,224,0.65)',
+    padding: 16,
+    borderRadius: AVATAR_SIZE,
+  },
+  userInfoContainer: {flex: 1, marginLeft: 16},
+  image: {height: AVATAR_SIZE, width: AVATAR_SIZE},
 })