API connections are being made

apps/webapp/app/models/apiConnection.server.ts

@@ -24,3 +24,18 @@ export async function createAPIConnection({
     },
   });
 }
+
+export async function setConnectedAPIConnection({
+  id,
+}: {
+  id: APIConnection["id"];
+}) {
+  return await prisma.aPIConnection.update({
+    where: {
+      id,
+    },
+    data: {
+      status: "CONNECTED",
+    },
+  });
+}

apps/webapp/app/routes/resources/connection.tsx

@@ -1,11 +1,15 @@
 import githubLogo from "../../assets/images/integrations/github.png";
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import Pizzly from "@nangohq/pizzly-frontend";
-import { ActionArgs, json } from "@remix-run/server-runtime";
+import type { ActionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
 import { requireUserId } from "~/services/session.server";
 import { env } from "~/env.server";
 import { z } from "zod";
-import { createAPIConnection } from "~/models/apiConnection.server";
+import {
+  createAPIConnection,
+  setConnectedAPIConnection,
+} from "~/models/apiConnection.server";
 import { APIConnectionType } from ".prisma/client";
 import { useFetcher } from "@remix-run/react";
 
@@ -32,7 +36,6 @@ const createSchema = z.object({
 const updateSchema = z.object({
   type: z.literal("update"),
   connectionId: z.string(),
-  externalId: z.number(),
 });
 const requestSchema = z.discriminatedUnion("type", [
   createSchema,
@@ -45,6 +48,10 @@ type CreateResponse = {
   connectionId: string;
 };
 
+type UpdateResponse = {
+  success: boolean;
+};
+
 export const action = async ({ request, params }: ActionArgs) => {
   const userId = await requireUserId(request);
   if (userId === null) {
@@ -86,8 +93,14 @@ export const action = async ({ request, params }: ActionArgs) => {
         return json(response);
       }
       case "update": {
-        const { connectionId, externalId } = parsed;
-        return {};
+        const { connectionId } = parsed;
+        await setConnectedAPIConnection({
+          id: connectionId,
+        });
+
+        return json({
+          success: true,
+        });
       }
     }
   } catch (error: any) {
@@ -125,8 +138,12 @@ type Status = "loading" | "idle";
 
 export function useCreateConnection() {
   const createConnectionFetcher = useFetcher<CreateResponse>();
+  const completeConnectionFetcher = useFetcher<UpdateResponse>();
   const status: Status =
-    createConnectionFetcher.state === "loading" ? "loading" : "idle";
+    createConnectionFetcher.state === "loading" ||
+    completeConnectionFetcher.state === "loading"
+      ? "loading"
+      : "idle";
 
   useEffect(() => {
     async function authenticationFlow() {
@@ -135,12 +152,17 @@ export function useCreateConnection() {
       try {
         const pizzly = new Pizzly(createConnectionFetcher.data.host);
 
-        const result = await pizzly.auth(
+        await pizzly.auth(
           createConnectionFetcher.data.integrationKey,
           createConnectionFetcher.data.connectionId
         );
-        console.log(
-          `OAuth flow succeeded for provider "${result.providerConfigKey}" and connection-id "${result.connectionId}"!`
+
+        completeConnectionFetcher.submit(
+          {
+            type: "update",
+            connectionId: createConnectionFetcher.data.connectionId,
+          },
+          { method: "post", action: "/resources/connection" }
         );
       } catch (error: any) {
         console.error(
@@ -150,7 +172,7 @@ export function useCreateConnection() {
     }
 
     authenticationFlow();
-  }, [createConnectionFetcher.data]);
+  }, [completeConnectionFetcher, createConnectionFetcher.data]);
 
   return {
     createFetcher: createConnectionFetcher,

apps/webapp/prisma/migrations/20221212171032_api_external_id_integer/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - The `externalId` column on the `APIConnection` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+
+*/
+-- AlterTable
+ALTER TABLE "APIConnection" DROP COLUMN "externalId",
+ADD COLUMN     "externalId" INTEGER;

apps/webapp/prisma/migrations/20221212175847_api_connection_status/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `externalId` on the `APIConnection` table. All the data in the column will be lost.
+
+*/
+-- CreateEnum
+CREATE TYPE "APIConnectionStatus" AS ENUM ('CREATED', 'CONNECTED');
+
+-- AlterTable
+ALTER TABLE "APIConnection" DROP COLUMN "externalId",
+ADD COLUMN     "status" "APIConnectionStatus" NOT NULL DEFAULT 'CREATED';

apps/webapp/prisma/schema.prisma

@@ -54,7 +54,7 @@ model APIConnection {
   title String
 
   apiIdentifier String
-  externalId    String?
+  status    APIConnectionStatus @default(CREATED)
   scopes String[]
   type APIConnectionType
 
@@ -70,6 +70,11 @@ enum APIConnectionType {
   GRAPHQL
 }
 
+enum APIConnectionStatus {
+  CREATED
+  CONNECTED
+}
+
 model RuntimeEnvironment {
   id     String @id @default(cuid())
   slug   String