Call custom React async hook within a component and se it's state again

user_15020833 0
Viewed 94

I have a custom react hook fetching number of comments from an API that looks like this:

export async function useFetchNumberOfComments(articleId) {
  const [numberOfComments, setNumbeOfComments] = useState(0);

  useEffect(() => {
    (async () => {
      try {
        const response = await axios.get(`https://example.com/${articleId}`, {
          headers: {
            "Content-Type": "application/json",
            "X-API-KEY": "X",
            Authorization: localStorage.getItem("access_token"),
          },
        });

        const data = await response.data;

        setNumbeOfComments(data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

  return numberOfComments;
}

And I want to use it in a Article component that looks like this:

import { useFetchNumberOfComments } from "../utils";

const SingleArticle = () => {
  let { id } = useParams();
  // Important state
  const [numOfComments, setNumOfComments] = useState(0);
  // Not important states
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [content, setContent] = useState("");
  const [comments, setComments] = useState([]);
  const [commentAuthor, setCommentAuthor] = useState("");
  const [commentContent, setCommentContent] = useState("");
  const [imageId, setImageId] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [createdAt, setCreatedAt] = useState();

  const postComment = async (e) => {
    e.preventDefault();

    const dataToSend = {
      articleId: id,
      author: commentAuthor,
      content: commentContent,
    };

    try {
      await axios.post(`https://example.com/comments`, dataToSend, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: localStorage.getItem("access_token"),
        },
      });

      
      // Here, fetch the number of comments from my custom hook and update numOf Comments in this component
      setCommentAuthor("");
      setCommentContent("");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <form onSubmit={postComment}>
        // Here are some inputs, labels and a submit button
      </form>  
      <h4 className={styles.h1}>Comments({numOfComments})</h4>
    </>
  );
};

export default SingleArticle;

Now, the problem is that I have no idea how to do the mentioned activity within the Article component: Once the form data(for comment) are sent, trigger the useFetchNumberOfComments custom hook and set the numOfComments state inside article component to the newly fetched data.

react-hooks reactjs javascript
1 Answers

I think you'd be better served refactoring the useFetchNumberOfComments hook to return a fetch function and some fetch request meta data, i.e. loading and response and error states.

Example:

export function useFetchNumberOfComments() {
  const [numberOfComments, setNumbeOfComments] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchArticleCommentCount = useCallback(async (articleId) => {
    setLoading(true);
    try {
      const response = await axios.get(`https://example.com/${articleId}`, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: JSON.parse(localStorage.getItem("access_token")),
        },
      });

      const data = await response.data;

      setNumbeOfComments(data);
      setError(null);

      return data;
    } catch (err) {
      console.log(err);
      setError(err);
    } finally {
      setLoading(false);
    }
  }, []);
  
  return {
    fetchArticleCommentCount,
    numberOfComments,
    loading,
    error
  };
};

...

import { useFetchNumberOfComments } from "../utils";

const SingleArticle = () => {
  const { id } = useParams();

  const {
    fetchArticleCommentCount,
    numberOfComments,
  } = useFetchNumberOfComments();

  // Important state
  const [numOfComments, setNumOfComments] = useState(0);

  // Not important states
  ...

  const postComment = async (e) => {
    e.preventDefault();

    const dataToSend = {
      articleId: id,
      author: commentAuthor,
      content: commentContent,
    };

    try {
      await axios.post(`https://example.com/comments`, dataToSend, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: localStorage.getItem("access_token"),
        },
      });

      // await returned comment count and update local state
      const commentCount = await fetchArticleCommentCount(id);
      setNumOfComments(commentCount);

      // or use the updated numberOfComments value returned from hook
      fetchArticleCommentCount(id);
      // both are available, but you only need one or the other here

      setCommentAuthor("");
      setCommentContent("");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <form onSubmit={postComment}>
        // Here are some inputs, labels and a submit button
      </form>  
      <h4 className={styles.h1}>Comments({numberOfComments})</h4>
    </>
  );
};

export default SingleArticle;
user_86908570
Related