From 6a01fce9c130aed0f94e632376e110886377899a Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Mon, 12 Aug 2024 15:16:22 -0400
Subject: [PATCH] fix payloads for stringified data

---
 .../stylePresets/components/StylePresetForm.tsx    |  8 +++++---
 .../stylePresets/components/StylePresetModal.tsx   |  2 +-
 .../stylePresets/store/stylePresetModal.ts         |  2 +-
 .../web/src/features/stylePresets/store/types.ts   | 13 -------------
 .../web/src/services/api/endpoints/stylePresets.ts | 14 ++++++--------
 5 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
index 74c5928f68..7c3666fcae 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
@@ -43,9 +43,11 @@ export const StylePresetForm = ({
   const handleClickSave = useCallback<SubmitHandler<StylePresetFormData>>(
     async (data) => {
       const payload = {
-        name: data.name,
-        positive_prompt: data.positivePrompt,
-        negative_prompt: data.negativePrompt,
+        data: {
+          name: data.name,
+          positive_prompt: data.positivePrompt,
+          negative_prompt: data.negativePrompt,
+        },
         image: data.image,
       };
 
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetModal.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetModal.tsx
index de8cfae062..cccae93c18 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetModal.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetModal.tsx
@@ -10,8 +10,8 @@ import {
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob';
+import type { PrefilledFormData } from 'features/stylePresets/store/stylePresetModal';
 import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
-import type { PrefilledFormData } from 'features/stylePresets/store/types';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/stylePresets/store/stylePresetModal.ts b/invokeai/frontend/web/src/features/stylePresets/store/stylePresetModal.ts
index 14f78f8b22..0499d1e5e2 100644
--- a/invokeai/frontend/web/src/features/stylePresets/store/stylePresetModal.ts
+++ b/invokeai/frontend/web/src/features/stylePresets/store/stylePresetModal.ts
@@ -11,7 +11,7 @@ const initialState: StylePresetModalState = {
  */
 export const $stylePresetModalState = atom<StylePresetModalState>(initialState);
 
-export type StylePresetModalState = {
+type StylePresetModalState = {
   isModalOpen: boolean;
   updatingStylePresetId: string | null;
   prefilledFormData: PrefilledFormData | null;
diff --git a/invokeai/frontend/web/src/features/stylePresets/store/types.ts b/invokeai/frontend/web/src/features/stylePresets/store/types.ts
index 50ec7fad7e..98b53e307b 100644
--- a/invokeai/frontend/web/src/features/stylePresets/store/types.ts
+++ b/invokeai/frontend/web/src/features/stylePresets/store/types.ts
@@ -1,16 +1,3 @@
-export type StylePresetModalState = {
-  isModalOpen: boolean;
-  updatingStylePresetId: string | null;
-  prefilledFormData: PrefilledFormData | null;
-};
-
-export type PrefilledFormData = {
-  name: string;
-  positivePrompt: string;
-  negativePrompt: string;
-  imageUrl: string | null;
-};
-
 export type StylePresetState = {
   activeStylePresetId: string | null;
   searchTerm: string;
diff --git a/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts b/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts
index c7419c10c8..4e428200a2 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts
@@ -37,15 +37,15 @@ export const stylePresetsApi = api.injectEndpoints({
     }),
     createStylePreset: build.mutation<
       paths['/api/v1/style_presets/']['post']['responses']['200']['content']['application/json'],
-      paths['/api/v1/style_presets/']['post']['requestBody']['content']['multipart/form-data']
+      { data: { name: string; positive_prompt: string; negative_prompt: string }; image: Blob | null }
     >({
-      query: ({ name, positive_prompt, negative_prompt, image }) => {
+      query: ({ data, image }) => {
         const formData = new FormData();
         if (image) {
           formData.append('image', image);
         }
 
-        formData.append('data', JSON.stringify({ name, positive_prompt, negative_prompt }));
+        formData.append('data', JSON.stringify(data));
 
         return {
           url: buildStylePresetsUrl(),
@@ -60,16 +60,14 @@ export const stylePresetsApi = api.injectEndpoints({
     }),
     updateStylePreset: build.mutation<
       paths['/api/v1/style_presets/i/{style_preset_id}']['patch']['responses']['200']['content']['application/json'],
-      paths['/api/v1/style_presets/i/{style_preset_id}']['patch']['requestBody']['content']['multipart/form-data'] & {
-        id: string;
-      }
+      { data: { name: string; positive_prompt: string; negative_prompt: string }; image: Blob | null; id: string }
     >({
-      query: ({ id, name, positive_prompt, negative_prompt, image }) => {
+      query: ({ id, data, image }) => {
         const formData = new FormData();
         if (image) {
           formData.append('image', image);
         }
-        formData.append('data', JSON.stringify({ name, positive_prompt, negative_prompt }));
+        formData.append('data', JSON.stringify(data));
 
         return {
           url: buildStylePresetsUrl(`i/${id}`),