smoothschedule/activepieces-fork/packages/react-ui/src/features/templates/hooks/templates-hook.ts

import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';

import {
  ListTemplatesRequestQuery,
  Template,
  TemplateType,
} from '@activepieces/shared';

import { templatesApi } from '../lib/templates-api';

export const useTemplates = (request: ListTemplatesRequestQuery) => {
  const [search, setSearch] = useState<string>('');

  const { data: templates, isLoading } = useQuery<Template[], Error>({
    queryKey: ['templates', request.type],
    queryFn: async () => {
      const templates = await templatesApi.list(request);
      return templates.data;
    },
    staleTime: 0,
  });

  const filteredTemplates = templates?.filter((template) => {
    const templateName = template.name.toLowerCase();
    const templateDescription = template.description.toLowerCase();
    return (
      templateName.includes(search.toLowerCase()) ||
      templateDescription.includes(search.toLowerCase())
    );
  });

  return {
    templates,
    filteredTemplates,
    isLoading,
    search,
    setSearch,
  };
};

/**
 * Hook to fetch both custom (platform) and official templates
 */
export const useAllTemplates = () => {
  const [search, setSearch] = useState<string>('');

  // Fetch custom templates (platform-specific)
  const {
    data: customTemplates,
    isLoading: isLoadingCustom,
  } = useQuery<Template[], Error>({
    queryKey: ['templates', TemplateType.CUSTOM],
    queryFn: async () => {
      try {
        const templates = await templatesApi.list({
          type: TemplateType.CUSTOM,
        });
        return templates.data;
      } catch {
        // If custom templates fail (e.g., feature not enabled), return empty array
        return [];
      }
    },
    staleTime: 0,
  });

  // Fetch official templates from Activepieces cloud
  const {
    data: officialTemplates,
    isLoading: isLoadingOfficial,
  } = useQuery<Template[], Error>({
    queryKey: ['templates', TemplateType.OFFICIAL],
    queryFn: async () => {
      try {
        const templates = await templatesApi.list({
          type: TemplateType.OFFICIAL,
        });
        return templates.data;
      } catch {
        return [];
      }
    },
    staleTime: 0,
  });

  const isLoading = isLoadingCustom || isLoadingOfficial;

  // Combine all templates
  const allTemplates = [
    ...(customTemplates || []),
    ...(officialTemplates || []),
  ];

  const filteredTemplates = allTemplates.filter((template) => {
    const templateName = template.name.toLowerCase();
    const templateDescription = template.description.toLowerCase();
    return (
      templateName.includes(search.toLowerCase()) ||
      templateDescription.includes(search.toLowerCase())
    );
  });

  // Separate filtered results by type
  const filteredCustomTemplates = filteredTemplates.filter(
    (t) => t.type === TemplateType.CUSTOM,
  );
  const filteredOfficialTemplates = filteredTemplates.filter(
    (t) => t.type === TemplateType.OFFICIAL,
  );

  return {
    customTemplates: customTemplates || [],
    officialTemplates: officialTemplates || [],
    allTemplates,
    filteredTemplates,
    filteredCustomTemplates,
    filteredOfficialTemplates,
    isLoading,
    search,
    setSearch,
  };
};