import { useSelector } from "react-redux";
import { createSelector } from "reselect";
import { useEffect } from "react";
import { fetchRecipesRequest } from "../actions";
import useSafeDispatch from "./useSafeDispatch";
import { denormalize } from "normalizr";
import { recipesSchema } from "../entities";
import { Recipe } from "../../api";
import { selectEntities } from "../selectors";

const selectAllRecipes = createSelector(
  [selectEntities],
  (entities) =>
    denormalize(
      Object.keys(entities.recipes),
      recipesSchema,
      entities
    ) as Recipe[]
);

export default function useRecipes() {
  const dispatch = useSafeDispatch();

  useEffect(() => {
    dispatch(fetchRecipesRequest());
  }, []);

  return useSelector(selectAllRecipes);
}