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(''); const { data: templates, isLoading } = useQuery({ 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(''); // Fetch custom templates (platform-specific) const { data: customTemplates, isLoading: isLoadingCustom, } = useQuery({ 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({ 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, }; };