docs(cookbook): network requests recipes

examples/cookbook/__mocks__/axios.ts

@@ -0,0 +1,14 @@
+const chuckNorrisError = () => {
+  throw Error(
+    "Please ensure you mock 'Axios' - Only Chuck Norris is allowed to make API requests when testing ;)",
+  );
+};
+
+export default {
+  ...jest.requireActual('axios'),
+  get: jest.fn(chuckNorrisError),
+  post: jest.fn(chuckNorrisError),
+  put: jest.fn(chuckNorrisError),
+  delete: jest.fn(chuckNorrisError),
+  request: jest.fn(chuckNorrisError),
+};

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: 'Phone book with\na Variety of Net. Req. Methods', path: 'network-requests/' },
 ];

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

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import { Text } from 'react-native';
+import { User } from './types';
+import ContactsList from './components/ContactsList';
+import FavoritesList from './components/FavoritesList';
+import getAllContacts from './api/getAllContacts';
+import getAllFavorites from './api/getAllFavorites';
+
+export default () => {
+  const [usersData, setUsersData] = useState<User[]>([]);
+  const [favoritesData, setFavoritesData] = useState<User[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const _getAllContacts = async () => {
+      const _data = await getAllContacts();
+      setUsersData(_data);
+    };
+    const _getAllFavorites = async () => {
+      const _data = await getAllFavorites();
+      setFavoritesData(_data);
+    };
+
+    const run = async () => {
+      try {
+        await Promise.all([_getAllContacts(), _getAllFavorites()]);
+      } catch (e) {
+        const message = isErrorWithMessage(e) ? e.message : 'Something went wrong';
+        setError(message);
+      }
+    };
+
+    void run();
+  }, []);
+
+  if (error) {
+    return <Text>An error occurred: {error}</Text>;
+  }
+
+  return (
+    <>
+      <FavoritesList users={favoritesData} />
+      <ContactsList users={usersData} />
+    </>
+  );
+};
+
+const isErrorWithMessage = (
+  e: unknown,
+): e is {
+  message: string;
+} => typeof e === 'object' && e !== null && 'message' in e;

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

@@ -0,0 +1,52 @@
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
+import React from 'react';
+import PhoneBook from '../PhoneBook';
+import {
+  mockAxiosGetWithFailureResponse,
+  mockAxiosGetWithSuccessResponse,
+  mockFetchWithFailureResponse,
+  mockFetchWithSuccessResponse,
+} from './test-utils';
+
+jest.setTimeout(10000);
+
+describe('PhoneBook', () => {
+  it('fetches contacts successfully and renders in list', async () => {
+    mockFetchWithSuccessResponse();
+    mockAxiosGetWithSuccessResponse();
+    render(<PhoneBook />);
+
+    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);
+  });
+
+  it('fails to fetch contacts and renders error message', async () => {
+    mockFetchWithFailureResponse();
+    mockAxiosGetWithSuccessResponse();
+    render(<PhoneBook />);
+
+    await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
+    expect(await screen.findByText(/error fetching contacts/i)).toBeOnTheScreen();
+  });
+
+  it('fetches favorites successfully and renders all users avatars', async () => {
+    mockFetchWithSuccessResponse();
+    mockAxiosGetWithSuccessResponse();
+    render(<PhoneBook />);
+
+    await waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));
+    expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();
+    expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);
+  });
+
+  it('fails to fetch favorites and renders error message', async () => {
+    mockFetchWithSuccessResponse();
+    mockAxiosGetWithFailureResponse();
+    render(<PhoneBook />);
+
+    await waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));
+    expect(await screen.findByText(/error fetching favorites/i)).toBeOnTheScreen();
+  });
+});

examples/cookbook/app/network-requests/__tests__/test-utils.ts

@@ -0,0 +1,113 @@
+import { User } from '../types';
+import axios from 'axios';
+
+class MismatchedUrlError extends Error {
+  constructor(url: string) {
+    super(`The URL: ${url} does not match the API's base URL.`);
+  }
+}
+
+/**
+ * Ensures that the URL matches the base URL of the API.
+ * @param url
+ * @throws {MismatchedUrlError}
+ */
+const ensureUrlMatchesBaseUrl = (url: string) => {
+  if (!url.includes('https://randomuser.me/api')) throw new MismatchedUrlError(url);
+};
+
+export const mockFetchWithSuccessResponse = () => {
+  (global.fetch as jest.Mock).mockImplementationOnce((url) => {
+    ensureUrlMatchesBaseUrl(url);
+
+    return Promise.resolve({
+      ok: true,
+      json: jest.fn().mockResolvedValueOnce(DATA),
+    });
+  });
+};
+
+export const mockFetchWithFailureResponse = () => {
+  (global.fetch as jest.Mock).mockImplementationOnce((url) => {
+    ensureUrlMatchesBaseUrl(url);
+
+    return Promise.resolve({
+      ok: false,
+    });
+  });
+};
+
+export const mockAxiosGetWithSuccessResponse = () => {
+  (axios.get as jest.Mock).mockImplementationOnce((url) => {
+    ensureUrlMatchesBaseUrl(url);
+
+    return Promise.resolve({ data: DATA });
+  });
+};
+
+export const mockAxiosGetWithFailureResponse = () => {
+  (axios.get as jest.Mock).mockImplementationOnce((url) => {
+    ensureUrlMatchesBaseUrl(url);
+
+    return Promise.reject({ message: 'Error fetching favorites' });
+  });
+};
+
+export 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',
+      },
+      cell: '123-4567-890',
+    },
+    {
+      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',
+      },
+      cell: '123-4567-890',
+    },
+    {
+      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',
+      },
+      cell: '123-4567-890',
+    },
+  ],
+};

examples/cookbook/app/network-requests/api/getAllContacts.ts

@@ -0,0 +1,10 @@
+import { User } from '../types';
+
+export default async (): Promise<User[]> => {
+  const res = await fetch('https://randomuser.me/api/?results=25');
+  if (!res.ok) {
+    throw new Error(`Error fetching contacts`);
+  }
+  const json = await res.json();
+  return json.results;
+};

examples/cookbook/app/network-requests/api/getAllFavorites.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { User } from '../types';
+
+export default async (): Promise<User[]> => {
+  const res = await axios.get('https://randomuser.me/api/?results=10');
+  return res.data.results;
+};

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

@@ -0,0 +1,60 @@
+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, cell }, 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>
+            <Text>Mobile: {cell}</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/components/FavoritesList.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: { picture } }) => {
+    return (
+      <View style={styles.userContainer}>
+        <Image
+          source={{ uri: picture.thumbnail }}
+          style={styles.userImage}
+          accessibilityLabel={'favorite-contact-avatar'}
+        />
+      </View>
+    );
+  }, []);
+
+  if (users.length === 0) return <FullScreenLoader />;
+
+  return (
+    <View style={styles.outerContainer}>
+      <Text>⭐My Favorites</Text>
+      <FlatList<User>
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        data={users}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => `${index}-${item.id.value}`}
+      />
+    </View>
+  );
+};
+const FullScreenLoader = () => {
+  return (
+    <View style={styles.loaderContainer}>
+      <Text>Figuring out your favorites...</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    padding: 8,
+  },
+  userContainer: {
+    padding: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userImage: {
+    width: 52,
+    height: 52,
+    borderRadius: 36,
+    borderColor: '#9b6dff',
+    borderWidth: 2,
+  },
+  loaderContainer: { height: 52, justifyContent: 'center', alignItems: 'center' },
+});

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

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