add users list with fetch example and corres. minimal test

Author: vanGalilea

examples/cookbook/app/index.tsx

@@ -82,6 +82,7 @@ type Recipe = {
 };
 
 const recipes: Recipe[] = [
-  { id: 2, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
-  { id: 1, title: 'Task List with Jotai', path: 'jotai/' },
+  { id: 1, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
+  { id: 2, title: 'Task List with Jotai', path: 'state-management/jotai/' },
+  { id: 3, title: 'Users Home with\na Variety of Net. Req. Methods', path: 'network-requests/' },
 ];

examples/cookbook/app/network-requests/UsersHome.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { User } from './types';
+import UserList from './components/UserList';
+
+export default () => {
+  const [data, setData] = useState<User[]>([]);
+  useEffect(() => {
+    const run = async () => {
+      const _data = await getUsersWithFetch();
+      setData(_data);
+    };
+
+    void run();
+  }, []);
+
+  return (
+    <>
+      {/*Todo: maybe this should be a phone book app with all contacts, catch up suggestions at the top woth avatar*/}
+      {/*add phonbe number to user maybe?*/}
+      {/* TODO: Add Catch up with... UserSuggestionsList with avatar horizontally in top that will utilize axios for example*/}
+      {/*maybe add one example of react query?*/}
+      <UserList users={data} />
+    </>
+  );
+};
+
+const getUsersWithFetch = async (): Promise<User[]> => {
+  const res = await fetch('https://randomuser.me/api/?results=25');
+  const json = await res.json();
+  return json.results;
+};

examples/cookbook/app/network-requests/__tests__/UsersListFetch.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
+import React from 'react';
+import UsersHome from '../UsersHome';
+import { User } from '../types';
+
+beforeAll(() => {
+  jest.spyOn(global, 'fetch').mockImplementation(
+    jest.fn(() => {
+      throw Error('Only Chuck Norris is allowed to make API requests when testing ;)');
+    }),
+  );
+});
+
+afterAll(() => {
+  (global.fetch as jest.Mock).mockRestore();
+});
+
+describe('UsersListFetch', () => {
+  it('fetches users successfully and renders in list', async () => {
+    jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+      json: jest.fn().mockResolvedValueOnce(DATA),
+    } as unknown as Response);
+    render(<UsersHome />);
+
+    await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
+    expect(await screen.findByText('Name: Mrs Ida Kristensen')).toBeOnTheScreen();
+    expect(await screen.findByText('Email: [email protected]')).toBeOnTheScreen();
+    expect(await screen.findAllByText(/name/i)).toHaveLength(3);
+  });
+});
+
+const DATA: { results: User[] } = {
+  results: [
+    {
+      name: {
+        title: 'Mrs',
+        first: 'Ida',
+        last: 'Kristensen',
+      },
+      email: '[email protected]',
+      id: {
+        name: 'CPR',
+        value: '250562-5730',
+      },
+      picture: {
+        large: 'https://randomuser.me/api/portraits/women/26.jpg',
+        medium: 'https://randomuser.me/api/portraits/med/women/26.jpg',
+        thumbnail: 'https://randomuser.me/api/portraits/thumb/women/26.jpg',
+      },
+    },
+    {
+      name: {
+        title: 'Mr',
+        first: 'Elijah',
+        last: 'Ellis',
+      },
+      email: '[email protected]',
+      id: {
+        name: 'TFN',
+        value: '138117486',
+      },
+      picture: {
+        large: 'https://randomuser.me/api/portraits/men/53.jpg',
+        medium: 'https://randomuser.me/api/portraits/med/men/53.jpg',
+        thumbnail: 'https://randomuser.me/api/portraits/thumb/men/53.jpg',
+      },
+    },
+    {
+      name: {
+        title: 'Mr',
+        first: 'Miro',
+        last: 'Halko',
+      },
+      email: '[email protected]',
+      id: {
+        name: 'HETU',
+        value: 'NaNNA945undefined',
+      },
+      picture: {
+        large: 'https://randomuser.me/api/portraits/men/17.jpg',
+        medium: 'https://randomuser.me/api/portraits/med/men/17.jpg',
+        thumbnail: 'https://randomuser.me/api/portraits/thumb/men/17.jpg',
+      },
+    },
+  ],
+};

examples/cookbook/app/network-requests/components/UserList.tsx

@@ -0,0 +1,59 @@
+import { FlatList, Image, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback } from 'react';
+import type { ListRenderItem } from '@react-native/virtualized-lists';
+import { User } from '../types';
+
+export default ({ users }: { users: User[] }) => {
+  const renderItem: ListRenderItem<User> = useCallback(
+    ({ item: { name, email, picture }, index }) => {
+      const { title, first, last } = name;
+      const backgroundColor = index % 2 === 0 ? '#f9f9f9' : '#fff';
+      return (
+        <View style={[{ backgroundColor }, styles.userContainer]}>
+          <Image source={{ uri: picture.thumbnail }} style={styles.userImage} />
+          <View>
+            <Text>
+              Name: {title} {first} {last}
+            </Text>
+            <Text>Email: {email}</Text>
+          </View>
+        </View>
+      );
+    },
+    [],
+  );
+
+  if (users.length === 0) return <FullScreenLoader />;
+
+  return (
+    <View>
+      <FlatList<User>
+        data={users}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => `${index}-${item.id.value}`}
+      />
+    </View>
+  );
+};
+const FullScreenLoader = () => {
+  return (
+    <View style={styles.loaderContainer}>
+      <Text>Users data not quite there yet...</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  userContainer: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userImage: {
+    width: 50,
+    height: 50,
+    borderRadius: 24,
+    marginRight: 16,
+  },
+  loaderContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});

examples/cookbook/app/network-requests/index.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import UsersHome from './UsersHome';
+
+export default function Example() {
+  return <UsersHome />;
+}

examples/cookbook/app/network-requests/types.ts

@@ -0,0 +1,17 @@
+export type User = {
+  name: {
+    title: string;
+    first: string;
+    last: string;
+  };
+  email: string;
+  id: {
+    name: string;
+    value: string;
+  };
+  picture: {
+    large: string;
+    medium: string;
+    thumbnail: string;
+  };
+};