mercredi 20 octobre 2021

React Hooks - useFetch generalization

I have an api which provides me methods like:

  1. searchUsersByUsername(username, limit)
  2. getRandomPremiumUsers(limit)
  3. getYoungUsers(maxAge, limit)

I am implementing a hook "useFetchUsers", which will provide an interface to access these methods.

This is my current code:

import { useState, useEffect } from "react";

import {
  searchUsersByUsername, 
  getRandomPremiumUsers,
  getRandomYoungUsers,
} from "../../services/firebase/api/users/search"
import { MAX_SEARCH_USERS_BY_USERNAME_TO_RETRIEVE } from "../../utils/search";

export const QUERIES = {
  "SEARCH_USERS_BY_USERNAME": searchUsersByUsername,
  "FETCH_RANDOM_PREMIUM_USERS": getRandomPremiumUsers,
  "FETCH_RANDOM_YOUNG_USERS": getRandomYoungUsers,
};

const defaultOptions = {
  query: QUERIES[0],
  username: "", // optional
  limit = MAX_SEARCH_USERS_BY_USERNAME_TO_RETRIEVE, // optional
};

export default function useFetchUsers(options = defaultOptions, deps) {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(undefined);

  const getUsers = async () => {
    setIsLoading(true);

    try {
      const users = await options.query();
      setUsers(users);
    } catch(err) {
      setError(err);
    }

    setIsLoading(false);
  }

  useEffect(getUsers, deps);

  return {
    users,
    isLoading,
    error,
    getUsers
  }
}

The main problem I am facing, is that I don't know how to make this "interface" more flexible, in order to be able to pass arguments to my QUERY methods.

Also, my defaultOptions object doesn't need the fields "username" for the methods "getRandomPremiumUsers" and "getRandomYoungUsers".

Any ideas about how to fit the requirements following a similar abstraction?

Aucun commentaire:

Enregistrer un commentaire