index.tsxβ’1.99 kB
import { useQuery } from '@tanstack/react-query';
import { ReactFlowProvider } from '@xyflow/react';
import { Navigate, useParams } from 'react-router-dom';
import { BuilderPage } from '@/app/builder';
import { BuilderStateProvider } from '@/app/builder/builder-state-provider';
import { LoadingSpinner } from '@/components/ui/spinner';
import { flowsApi } from '@/features/flows/lib/flows-api';
import { sampleDataHooks } from '@/features/flows/lib/sample-data-hooks';
import { authenticationSession } from '@/lib/authentication-session';
import { PopulatedFlow } from '@activepieces/shared';
const FlowBuilderPage = () => {
const { flowId } = useParams();
const {
data: flow,
isLoading,
isError,
} = useQuery<PopulatedFlow, Error>({
queryKey: ['flow', flowId, authenticationSession.getProjectId()],
queryFn: () => flowsApi.get(flowId!),
gcTime: 0,
retry: false,
refetchOnWindowFocus: false,
});
const { data: sampleData, isLoading: isSampleDataLoading } =
sampleDataHooks.useSampleDataForFlow(flow?.version, flow?.projectId);
const { data: sampleDataInput, isLoading: isSampleDataInputLoading } =
sampleDataHooks.useSampleDataInputForFlow(flow?.version, flow?.projectId);
if (isError) {
console.error('Error fetching flow', flowId);
return <Navigate to="/" />;
}
if (isLoading || isSampleDataLoading || isSampleDataInputLoading) {
return (
<div className="bg-background flex h-screen w-screen items-center justify-center ">
<LoadingSpinner size={50}></LoadingSpinner>
</div>
);
}
return (
<ReactFlowProvider>
<BuilderStateProvider
flow={flow!}
canExitRun={true}
flowVersion={flow!.version}
readonly={false}
run={null}
sampleData={sampleData ?? {}}
sampleDataInput={sampleDataInput ?? {}}
>
<BuilderPage />
</BuilderStateProvider>
</ReactFlowProvider>
);
};
export { FlowBuilderPage };