Function New2

app/src/pages/New.tsx:27–189

()

};

export default function New2() {
  // Whether we're using AI to generate the chart
  const [isAI, setIsAI] = useState(false);
  const userId = useUserId();
  const navigate = useNavigate();
  const createChartMutation = useMutation(
    async (options: CreateChartOptions) => {
      if (!userId) throw new Error("No user id");

      // Get Session Token
      if (!supabase) throw new Error("No supabase");
      const { data } = await supabase.auth.getSession();
      if (!data.session) throw new Error("No Session");

      // Get Template
      const importTemplate = await import(
        `../lib/templates/${options.template}-template.ts`
      );
      let content: string = importTemplate.content;
      const theme: FFTheme = importTemplate.theme;
      const cytoscapeStyle = importTemplate.cytoscapeStyle ?? "";

      const chart = `${content}\n=====${JSON.stringify({
        themeEditor: theme,
        cytoscapeStyle,
      })}=====`;

      return supabase
        .from("user_charts")
        .insert({ name: options.name, chart: chart, user_id: userId })
        .select();
    },
    {
      onSettled: () => {
        setIsAI(false);
      },
      onSuccess: (response: any) => {
        const chartId = response.data[0]?.id;
        if (chartId) navigate(`/u/${chartId}`);
      },
    }
  );

  const hasProAccess = useHasProAccess();
  const handleSubmit = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      if (!hasProAccess) {
        showPaywall({
          title: createUnlimitedTitle(),
          content: createUnlimitedContent(),
          toPricingCode: "New",
        });
        return;
      }
      const data = new FormData(e.currentTarget);
      const name = data.get("name")?.toString();
      const template = data.get("template")?.toString();