Add functionality to delete model

airtai · Apr 23, 2024 · 017aaf6 · 017aaf6
1 parent 85bd045
commit 017aaf6
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 1 deletion.
diff --git a/app/main.wasp b/app/main.wasp
@@ -280,6 +280,11 @@ action addUserModels {
   entities: []
 }
 
+action deleteUserModels {
+  fn: import { deleteUserModels } from "@src/server/actions.js",
+  entities: []
+}
+
 action validateForm {
   fn: import { validateForm } from "@src/server/actions.js",
   entities: []

diff --git a/app/src/client/app/ModelsPage.tsx b/app/src/client/app/ModelsPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getModels, useQuery, updateUserModels, addUserModels } from 'wasp/client/operations';
+import { getModels, useQuery, updateUserModels, addUserModels, deleteUserModels } from 'wasp/client/operations';
 
 import { useModels, ModelsActionType } from '../hooks/useModels';
 import CustomLayout from './layout/CustomLayout';
@@ -38,6 +38,14 @@ const ModelsPage = () => {
     dispatch({ type: ModelsActionType.TOGGLE_ADD_MODEL, payload: false });
   };
 
+  const onDeleteCallback = async () => {
+    dispatch({ type: ModelsActionType.TOGGLE_LOADING, payload: true });
+    state.updateExistingModel && (await deleteUserModels({ uuid: state.updateExistingModel.uuid }));
+    await refetchModels();
+    dispatch({ type: ModelsActionType.TOGGLE_ADD_MODEL, payload: false });
+    dispatch({ type: ModelsActionType.TOGGLE_LOADING, payload: false });
+  };
+
   const updateSelectedModel = (index: number) => {
     if (modelsList) {
       const selectedModel = modelsList[index];
@@ -93,6 +101,7 @@ const ModelsPage = () => {
                             onModelChange={handleModelChange}
                             onSuccessCallback={onSuccessCallback}
                             onCancelCallback={onCancelCallback}
+                            onDeleteCallback={onDeleteCallback}
                           />
                         )}
                       </>

diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx
@@ -15,6 +15,7 @@ interface DynamicFormBuilderProps {
   updateExistingModel: Model | null;
   onSuccessCallback: (data: any) => void;
   onCancelCallback: (data: any) => void;
+  onDeleteCallback: (data: any) => void;
 }
 
 const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
@@ -23,6 +24,7 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
   updateExistingModel,
   onSuccessCallback,
   onCancelCallback,
+  onDeleteCallback,
 }) => {
   const { formData, handleChange, formErrors, setFormErrors } = useForm({
     jsonSchema,
@@ -91,6 +93,17 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
           >
             Cancel
           </button>
+
+          {updateExistingModel && (
+            <button
+              className='float-right ml-3 rounded-md px-3.5 py-2.5 text-sm border bg-airt-error text-airt-font-base hover:bg-opacity-80 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+              disabled={isLoading}
+              data-testid='form-cancel-button'
+              onClick={onDeleteCallback}
+            >
+              Delete model
+            </button>
+          )}
         </div>
       </form>
       {isLoading && (

diff --git a/app/src/client/components/ModelForm.tsx b/app/src/client/components/ModelForm.tsx
@@ -13,6 +13,7 @@ interface ModelFormProps {
   onModelChange: (model: string) => void;
   onSuccessCallback: (data: any) => void;
   onCancelCallback: () => void;
+  onDeleteCallback: (data: any) => void;
 }
 
 const ModelForm: React.FC<ModelFormProps> = ({
@@ -23,6 +24,7 @@ const ModelForm: React.FC<ModelFormProps> = ({
   onModelChange,
   onSuccessCallback,
   onCancelCallback,
+  onDeleteCallback,
 }) => {
   return (
     <div>
@@ -39,6 +41,7 @@ const ModelForm: React.FC<ModelFormProps> = ({
               updateExistingModel={updateExistingModel ?? null}
               onSuccessCallback={onSuccessCallback}
               onCancelCallback={onCancelCallback}
+              onDeleteCallback={onDeleteCallback}
             />
           )}
         </>

diff --git a/app/src/client/tests/DynamicFormBuilder.test.tsx b/app/src/client/tests/DynamicFormBuilder.test.tsx
@@ -81,6 +81,7 @@ describe('DynamicFormBuilder', () => {
         updateExistingModel={updateExistingModel}
         onSuccessCallback={vi.fn()}
         onCancelCallback={vi.fn()}
+        onDeleteCallback={vi.fn()}
       />
     );
     expect(screen.getByLabelText('Model')).toBeInTheDocument();
@@ -97,6 +98,7 @@ describe('DynamicFormBuilder', () => {
         updateExistingModel={updateExistingModel}
         onSuccessCallback={onSuccessCallback}
         onCancelCallback={vi.fn()}
+        onDeleteCallback={vi.fn()}
       />
     );
 
@@ -148,6 +150,7 @@ describe('DynamicFormBuilder', () => {
         updateExistingModel={updateExistingModel}
         onSuccessCallback={onSuccessCallback}
         onCancelCallback={vi.fn()}
+        onDeleteCallback={vi.fn()}
       />
     );
 
@@ -168,6 +171,7 @@ describe('DynamicFormBuilder', () => {
         updateExistingModel={updateExistingModel}
         onSuccessCallback={vi.fn()}
         onCancelCallback={vi.fn()}
+        onDeleteCallback={vi.fn()}
       />
     );
 

diff --git a/app/src/server/actions.ts b/app/src/server/actions.ts
@@ -9,6 +9,7 @@ import {
   type ValidateForm,
   type UpdateUserModels,
   type AddUserModels,
+  type DeleteUserModels,
 } from 'wasp/server/operations';
 import Stripe from 'stripe';
 import type { StripePaymentResult } from '../shared/types';
@@ -189,6 +190,33 @@ export const updateUserModels: UpdateUserModels<UpdateUserModelsPayload, void> =
   }
 };
 
+type DeleteUserModelsPayload = {
+  uuid: string;
+};
+
+export const deleteUserModels: DeleteUserModels<DeleteUserModelsPayload, void> = async (args, context) => {
+  if (!context.user) {
+    throw new HttpError(401);
+  }
+
+  try {
+    const response = await fetch(`${FASTAGENCY_SERVER_URL}/models/delete`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ user_id: context.user.id, uuid: args.uuid }),
+    });
+    const json: any = (await response.json()) as { detail?: string }; // Parse JSON once
+
+    if (!response.ok) {
+      const errorMsg = json.detail || `HTTP error with status code ${response.status}`;
+      console.error('Server Error:', errorMsg);
+      throw new Error(errorMsg);
+    }
+  } catch (error: any) {
+    throw new HttpError(500, error.message);
+  }
+};
+
 export const validateForm: ValidateForm<{ data: any; validationURL: string }, any> = async (
   { data, validationURL }: { data: any; validationURL: string },
   context: any