slate/scenes/SceneActivity/hooks.js

import * as React from "react";
import * as Events from "~/common/custom-events";
import * as ActivityUtilities from "~/common/activity-utilities";

const updateExploreFeed = async ({ viewer, state, onAction, setState, update }) => {
  const currentItems = viewer?.explore?.items || state?.explore?.items || [];
  const response = await ActivityUtilities.fetchExploreItems({ currentItems, update });
  if (Events.hasError(response)) return;

  const newItems = response.data;

  const currentFeed = viewer?.explore?.feed || state?.explore?.feed || [];
  const newFeed = await ActivityUtilities.processActivity(newItems).sort(
    (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
  );

  const newState = {
    items: currentItems.concat(newItems),
    feed: currentFeed.concat(newFeed),
    shouldFetchMore: newItems.length > 0,
  };

  if (viewer) {
    onAction({ type: "UPDATE_VIEWER", viewer: { explore: newState } });
    return;
  }

  setState((prev) => ({ ...prev, explore: newState }));
};

const updateActivityFeed = async ({ viewer, onAction, update }) => {
  const currentItems = viewer?.activity?.items || [];
  const response = await ActivityUtilities.fetchActivityItems({ currentItems, viewer, update });
  if (Events.hasError(response)) return;

  const newItems = response.data;

  const currentFeed = viewer?.activity?.feed || [];
  const newFeed = ActivityUtilities.processActivity(newItems).sort(
    (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
  );

  onAction({
    type: "UPDATE_VIEWER",
    viewer: {
      activity: {
        feed: currentFeed.concat(newFeed),
        items: currentItems.concat(newItems),
        shouldFetchMore: newItems.length > 0,
      },
    },
  });
};

// NOTE(amine): get the state for the selected tab.
const getState = (viewer, state, tab) => {
  if (!viewer) return state.explore || [];

  if (tab === "explore") {
    return viewer?.explore || {};
  }
  return viewer?.activity || {};
};

const getTab = (page, viewer) => {
  if (page.params?.tab) return page.params?.tab;

  if (viewer?.subscriptions?.length || viewer?.following?.length) {
    return "activity";
  }
  return "explore";
};

export function useActivity({ page, viewer, onAction }) {
  const [state, setState] = React.useState({
    explore: {
      feed: [],
      items: [],
      shouldFetchMore: true,
    },
    loading: {
      explore: false,
      activity: false,
    },
  });

  // const tab = getTab(page, viewer);
  const tab = "explore";

  const updateFeed = React.useCallback(
    async (update) => {
      const currentState = getState(viewer, state, tab);
      const { shouldFetchMore } = currentState || {};
      if (typeof shouldFetchMore === "boolean" && !shouldFetchMore) {
        return;
      }

      if (state.loading[tab]) return;
      setState((prev) => ({ ...prev, loading: { ...prev.loading, [tab]: true } }));
      if (viewer && tab === "activity") {
        await updateActivityFeed({ viewer, onAction, update });
      } else {
        await updateExploreFeed({ viewer, onAction, state, setState, update });
      }
      setState((prev) => ({ ...prev, loading: { ...prev.loading, [tab]: false } }));
    },
    [tab, onAction, state, viewer]
  );

  const { feed = [] } = getState(viewer, state, tab);
  React.useEffect(() => {
    if (feed && feed?.length !== 0) return;
    updateFeed(true);
  }, [tab]);

  return { updateFeed, feed, tab, isLoading: state.loading };
}