Merge pull request #78 from Jank1310/77-dont-use-apifetch-in-ssr-comp…

…onents

77 dont use apifetch in ssr components

app/src/app/[locale]/importer/[id]/closed/page.tsx

@@ -1,7 +1,5 @@
-import { ImporterDto } from "@/app/api/importer/[slug]/ImporterDto";
 import initTranslations from "@/i18n/initi18n";
-import { fetchWithAuth } from "@/lib/frontendFetch";
-import { getHost } from "@/lib/utils";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { CheckCircleIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getPageForState } from "../redirectUtil";
@@ -16,13 +14,9 @@ type Props = {
 const ImporterClosedPage = async (props: Props) => {
   const { t } = await initTranslations(props.params.locale);
   const importerId = props.params.id;
-  const initialImporterDto = (await fetchWithAuth(
-    `${getHost()}/api/importer/${importerId}`,
-    {
-      cache: "no-cache",
-    }
-  ).then((res) => res.json())) as ImporterDto;
-  const pageForState = getPageForState(initialImporterDto);
+  const importerManager = await getImporterManager();
+  const importerDto = await importerManager.getImporterDto(importerId);
+  const pageForState = getPageForState(importerDto);
   if (pageForState !== "closed") {
     return redirect(pageForState);
   }

app/src/app/[locale]/importer/[id]/importing/page.tsx

@@ -1,8 +1,6 @@
-import { ImporterDto } from "@/app/api/importer/[slug]/ImporterDto";
 import { Button } from "@/components/ui/button";
 import initTranslations from "@/i18n/initi18n";
-import { fetchWithAuth } from "@/lib/frontendFetch";
-import { getHost } from "@/lib/utils";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { ZapIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getPageForState } from "../redirectUtil";
@@ -17,20 +15,14 @@ type Props = {
 const ImportingPage = async (props: Props) => {
   const { t } = await initTranslations(props.params.locale);
   const importerId = props.params.id;
-  const initialImporterDtoPromise = fetchWithAuth(
-    `${getHost()}/api/importer/${importerId}`,
-    {
-      cache: "no-cache",
-    }
-  ).then(async (res) => (await res.json()) as ImporterDto);
-
-  const initialImporterDto = await initialImporterDtoPromise;
-  const page = getPageForState(initialImporterDto);
+  const importerManager = await getImporterManager();
+  const importerDto = await importerManager.getImporterDto(importerId);
+  const page = getPageForState(importerDto);
   if (page !== "importing") {
     return redirect(page);
   }
 
-  const redirectUrl = initialImporterDto.config.redirectUrl;
+  const redirectUrl = importerDto.config.redirectUrl;
   return (
     <div className="w-full h-full flex items-center justify-center">
       <div className="flex flex-col items-center">

app/src/app/[locale]/importer/[id]/layout.tsx

@@ -1,8 +1,7 @@
-import { ImporterDto } from "@/app/api/importer/[slug]/ImporterDto";
 import TranslationsProvider from "@/components/TranslationsProvider";
 import { Toaster } from "@/components/ui/toaster";
-import { fetchWithAuth } from "@/lib/frontendFetch";
-import { getHost, hexToCssHsl } from "@/lib/utils";
+import { getImporterManager } from "@/lib/ImporterManager";
+import { hexToCssHsl } from "@/lib/utils";
 import SidebarMenu from "./SidebarMenu";
 
 type PageProps = {
@@ -14,12 +13,8 @@ type PageProps = {
 };
 
 export default async function ImporterPage({ params, children }: PageProps) {
-  const importerDto = (await fetchWithAuth(
-    `${getHost()}/api/importer/${params.id}`,
-    {
-      cache: "no-cache",
-    }
-  ).then((res) => res.json())) as ImporterDto;
+  const importerManager = await getImporterManager();
+  const importerDto = await importerManager.getImporterDto(params.id);
   const { primaryColor, primaryForegroundColor } =
     importerDto.config.design ?? {};
   return (

app/src/app/[locale]/importer/[id]/mapping/SelectMappings.tsx

@@ -26,7 +26,7 @@ import { produce } from "immer";
 import { ChevronRightCircleIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 
-import { fetchWithAuth } from "@/lib/frontendFetch";
+import { useFrontendFetchWithAuth } from "@/lib/frontendFetch";
 import { getHost } from "@/lib/utils";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -48,6 +48,7 @@ const SelectMappings = ({
 }: Props) => {
   const { push } = useRouter();
   const { t } = useTranslation();
+  const frontendFetch = useFrontendFetchWithAuth();
   const [enablePolling, setEnablePolling] = React.useState(false);
   const { importer } = useGetImporter(
     initialImporterDto.importerId,
@@ -103,7 +104,7 @@ const SelectMappings = ({
     }
     setIsSavingMapping(true);
     try {
-      await fetchWithAuth(
+      await frontendFetch(
         `${getHost()}/api/importer/${importer.importerId}/mappings`,
         {
           method: "PUT",

app/src/app/[locale]/importer/[id]/mapping/page.tsx

@@ -1,9 +1,4 @@
-import {
-  DataMappingRecommendation,
-  ImporterDto,
-} from "@/app/api/importer/[slug]/ImporterDto";
-import { fetchWithAuth } from "@/lib/frontendFetch";
-import { getHost } from "@/lib/utils";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { redirect } from "next/navigation";
 import { getPageForState } from "../redirectUtil";
 import SelectMappings from "./SelectMappings";
@@ -16,21 +11,10 @@ type Props = {
 
 const MappingPage = async (props: Props) => {
   const importerId = props.params.id;
-  const initialImporterDtoPromise = fetchWithAuth(
-    `${getHost()}/api/importer/${importerId}`,
-    {
-      cache: "no-cache",
-    }
-  ).then(async (res) => (await res.json()) as ImporterDto);
-  const initialDataMappingsPromise = fetchWithAuth(
-    `${getHost()}/api/importer/${importerId}/mappings/recommendations`,
-    {
-      cache: "no-cache",
-    }
-  ).then(
-    async (res) =>
-      (await res.json()).recommendations as DataMappingRecommendation[] | null
-  );
+  const importerManager = await getImporterManager();
+  const initialImporterDtoPromise = importerManager.getImporterDto(importerId);
+  const initialDataMappingsPromise =
+    importerManager.getMappingRecommendations(importerId);
   const [initialImporterDto, initialDataMappings] = await Promise.all([
     initialImporterDtoPromise,
     initialDataMappingsPromise,

app/src/app/[locale]/importer/[id]/select-file/SelectFileUploader.tsx

@@ -3,7 +3,7 @@ import { ImporterDto } from "@/app/api/importer/[slug]/ImporterDto";
 import { useGetImporter } from "@/components/hooks/useGetImporter";
 import { LoadingSpinner } from "@/components/ui/loadingSpinner";
 import { useToast } from "@/components/ui/use-toast";
-import { fetchWithAuth } from "@/lib/frontendFetch";
+import { useFrontendFetchWithAuth } from "@/lib/frontendFetch";
 import { getHost } from "@/lib/utils";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -23,7 +23,8 @@ const allowedMimeTypes = [
 
 const SelectFileUploader = ({ importerDto: initialImporterDto }: Props) => {
   const { t } = useTranslation();
-  const { push, replace } = useRouter();
+  const { push } = useRouter();
+  const frontendFetch = useFrontendFetchWithAuth();
   const { toast } = useToast();
   const [isUploading, setIsUploading] = React.useState(false);
   const [hasUploaded, setHasUploaded] = React.useState(false);
@@ -40,7 +41,7 @@ const SelectFileUploader = ({ importerDto: initialImporterDto }: Props) => {
         const formData = new FormData();
         formData.append("file", file);
         formData.append("importerId", importer.importerId);
-        await fetchWithAuth(`${getHost()}/api/upload`, {
+        await frontendFetch(`${getHost()}/api/upload`, {
           method: "POST",
           body: formData,
         });

app/src/app/[locale]/importer/[id]/select-file/page.tsx

@@ -1,6 +1,4 @@
-import { ImporterDto } from "@/app/api/importer/[slug]/ImporterDto";
-import { fetchWithAuth } from "@/lib/frontendFetch";
-import { getHost } from "@/lib/utils";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { redirect } from "next/navigation";
 import { getPageForState } from "../redirectUtil";
 import SelectFileUploader from "./SelectFileUploader";
@@ -13,19 +11,15 @@ type Props = {
 
 const SelectFilePage = async (props: Props) => {
   const importerId = props.params.id;
-  const initialImporterDto = (await fetchWithAuth(
-    `${getHost()}/api/importer/${importerId}`,
-    {
-      cache: "no-cache",
-    }
-  ).then((res) => res.json())) as ImporterDto;
-  const pageForState = getPageForState(initialImporterDto);
+  const importerManager = await getImporterManager();
+  const importerDto = await importerManager.getImporterDto(importerId);
+  const pageForState = getPageForState(importerDto);
   if (pageForState !== "select-file") {
     return redirect(pageForState);
   }
   return (
     <div className="flex h-full items-center justify-center">
-      <SelectFileUploader importerDto={initialImporterDto} />
+      <SelectFileUploader importerDto={importerDto} />
     </div>
   );
 };

app/src/app/[locale]/importer/[id]/validate/Validation.tsx

@@ -7,7 +7,7 @@ import { useGetImporter } from "@/components/hooks/useGetImporter";
 import { Button } from "@/components/ui/button";
 import { LoadingSpinner } from "@/components/ui/loadingSpinner";
 import { useToast } from "@/components/ui/use-toast";
-import { fetchWithAuth } from "@/lib/frontendFetch";
+import { useFrontendFetchWithAuth } from "@/lib/frontendFetch";
 import { getHost } from "@/lib/utils";
 import { enableMapSet, produce } from "immer";
 import { sum } from "lodash";
@@ -30,6 +30,7 @@ const Validation = ({
   const { t } = useTranslation();
   const { push } = useRouter();
   const { toast } = useToast();
+  const frontendFetch = useFrontendFetchWithAuth();
   const [enablePolling, setEnablePolling] = React.useState(false);
   const [isStartingImport, setIsStartingImport] = React.useState(false);
   const [currentValidations, setCurrentValidations] = React.useState<
@@ -154,7 +155,7 @@ const Validation = ({
         })
       );
       try {
-        const res = await fetchWithAuth(
+        const res = await frontendFetch(
           `${getHost()}/api/importer/${initialImporterDto.importerId}/records`,
           {
             method: "PATCH",
@@ -182,7 +183,12 @@ const Validation = ({
         }
       }
     },
-    [handleRecordUpdate, initialImporterDto.importerId, isMounted]
+    [
+      frontendFetch,
+      handleRecordUpdate,
+      initialImporterDto.importerId,
+      isMounted,
+    ]
   );
 
   const handleStartImport = React.useCallback(async () => {
@@ -191,7 +197,7 @@ const Validation = ({
     }
     setIsStartingImport(true);
     try {
-      await fetchWithAuth(
+      await frontendFetch(
         `${getHost()}/api/importer/${
           initialImporterDto.importerId
         }/start-import`,
@@ -211,7 +217,15 @@ const Validation = ({
         setIsStartingImport(false);
       }
     }
-  }, [initialImporterDto.importerId, isMounted, push, t, toast, totalErrors]);
+  }, [
+    frontendFetch,
+    initialImporterDto.importerId,
+    isMounted,
+    push,
+    t,
+    toast,
+    totalErrors,
+  ]);
 
   const hasErrors = dataStats.totalErrors > 0;
 

app/src/app/[locale]/importer/[id]/validate/page.tsx

@@ -1,20 +1,13 @@
-import { ImporterDto } from "@/app/api/importer/[slug]/ImporterDto";
-import { fetchRecords } from "@/components/hooks/useFetchRecords";
-import { fetchWithAuth } from "@/lib/frontendFetch";
-import { getHost } from "@/lib/utils";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { redirect } from "next/navigation";
 import { getPageForState } from "../redirectUtil";
 import Validation from "./Validation";
 
 export default async function page(props: { params: { id: string } }) {
   const importerId = props.params.id;
-  const initialImporterDtoPromise = fetchWithAuth(
-    `${getHost()}/api/importer/${importerId}`,
-    {
-      cache: "no-cache",
-    }
-  ).then((res) => res.json() as Promise<ImporterDto>);
-  const initialRecordsPromise = fetchRecords(importerId, 0, 100);
+  const importerManager = await getImporterManager();
+  const initialImporterDtoPromise = importerManager.getImporterDto(importerId);
+  const initialRecordsPromise = importerManager.getRecords(importerId, 0, 100);
   const [initialImporterDto, initialRecords] = await Promise.all([
     initialImporterDtoPromise,
     initialRecordsPromise,

app/src/app/api/importer/[slug]/close/route.ts

@@ -1,4 +1,4 @@
-import { getTemporalWorkflowClient } from "@/lib/temporalClient";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { validateServerAuth } from "@/lib/validateAuth";
 import { NextRequest, NextResponse } from "next/server";
 
@@ -10,8 +10,7 @@ export async function POST(
     return NextResponse.json("Unauthorized", { status: 401 });
   }
   const { slug: importerId } = params;
-  const client = await getTemporalWorkflowClient();
-  const handle = client.getHandle(importerId);
-  await handle.signal("importer:close");
+  const importerManager = await getImporterManager();
+  await importerManager.closeImporter(importerId);
   return NextResponse.json({});
 }

app/src/app/api/importer/[slug]/mappings/recommendations/route.ts

@@ -1,7 +1,6 @@
-import { getTemporalWorkflowClient } from "@/lib/temporalClient";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { validateAuth } from "@/lib/validateAuth";
 import { NextRequest, NextResponse } from "next/server";
-import { ImporterStatus } from "../../ImporterDto";
 
 export async function GET(
   req: NextRequest,
@@ -11,14 +10,17 @@ export async function GET(
     return NextResponse.json("Unauthorized", { status: 401 });
   }
   const { slug: importerId } = params;
-  const client = await getTemporalWorkflowClient();
-  const handle = client.getHandle(importerId);
-  const workflowState = await handle.query<ImporterStatus>("importer:status");
-  if (workflowState.state === "closed") {
-    return NextResponse.json({ error: "Importer is closed" }, { status: 410 });
+  const importerManager = await getImporterManager();
+  try {
+    const recommendations = await importerManager.getMappingRecommendations(
+      importerId
+    );
+    return NextResponse.json({ recommendations });
+  } catch (err) {
+    if ((err as Error).message === "Importer is closed") {
+      return NextResponse.json("Importer is closed", { status: 400 });
+    } else {
+      throw err;
+    }
   }
-  const recommendations = await handle.query(
-    "importer:data-mapping-recommendations"
-  );
-  return NextResponse.json({ recommendations });
 }

app/src/app/api/importer/[slug]/mappings/route.ts

@@ -1,7 +1,6 @@
-import { getTemporalWorkflowClient } from "@/lib/temporalClient";
+import { getImporterManager } from "@/lib/ImporterManager";
 import { validateAuth } from "@/lib/validateAuth";
 import { NextRequest, NextResponse } from "next/server";
-import { ImporterStatus } from "../ImporterDto";
 
 export async function PUT(
   req: NextRequest,
@@ -11,16 +10,9 @@ export async function PUT(
     return NextResponse.json("Unauthorized", { status: 401 });
   }
   const { slug: importerId } = params;
-  const client = await getTemporalWorkflowClient();
-  const handle = client.getHandle(importerId);
+  const importerManager = await getImporterManager();
   const mappings = await req.json();
-  const workflowState = await handle.query<ImporterStatus>("importer:status");
-  if (workflowState.state === "closed") {
-    return NextResponse.json({ error: "Importer is closed" }, { status: 410 });
-  }
-  await handle.executeUpdate("importer:update-mapping", {
-    args: [{ mappings }],
-  });
+  await importerManager.updateMappings(importerId, mappings);
   return new NextResponse(undefined, {
     status: 201,
   });