index.tsx•1.25 kB
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
import { useSearchParam } from 'react-use';
import { LoadingScreen } from '@/components/ui/loading-screen';
import { ApForm } from '@/features/forms/components/ap-form';
import { humanInputApi } from '@/features/forms/lib/human-input-api';
import {
FormResponse,
isNil,
USE_DRAFT_QUERY_PARAM_NAME,
} from '@activepieces/shared';
import NotFoundPage from '../404-page';
export const FormPage = () => {
const { flowId } = useParams();
const useDraft = useSearchParam(USE_DRAFT_QUERY_PARAM_NAME) === 'true';
const {
data: form,
isLoading,
isError,
} = useQuery<FormResponse | null, Error>({
queryKey: ['form', flowId],
queryFn: () => humanInputApi.getForm(flowId!, useDraft),
enabled: !isNil(flowId),
retry: false,
staleTime: Infinity,
});
return (
<>
{isLoading && <LoadingScreen />}
{isError && (
<NotFoundPage
title="Hmm... this form isn't here"
description="The form you're looking for isn't here or maybe hasn't been published by the owner yet"
/>
)}
{form && !isLoading && <ApForm form={form} useDraft={useDraft} />}
</>
);
};