Fetch products hook

useProducts.js

import { useState, useEffect } from 'react';
import { get } from '../utils/rest';

const useProducts = (url, dependencies = []) => {
  // Set isLoading to true by default to indicate that data is loading
  const [isLoading, setIsLoading] = useState(true);
  const [fetchedProducts, setFetchedProducts] = useState([]);

  const fetchProducts = (params = {}) =>
    get(url, params)
      .then(response => {
        setIsLoading(false);
        setFetchedProducts(response.data);
      })
      .catch(error => {
        // eslint-disable-next-line no-console
        console.log(`😱 fetchProduct() request failed: ${error}`);
        setIsLoading(false);
        // Stop execute javascript
        return false;
      });

  // Check if component was unmounted to prevent memory leaks
  const effectCallback = () => {
    // New stuff here
    let unmounted = false;
    if (!unmounted) {
      fetchProducts();
    }
    return () => {
      // Bye bye!
      unmounted = true;
    };
  };

  useEffect(effectCallback, dependencies);

  return [isLoading, fetchedProducts];
};

export default useProducts;