[PAY-2859] Fix bugs in edit app flow (#8320)

AudiusProject · May 2, 2024 · 3586f41 · 3586f41
1 parent 465061b
commit 3586f41
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/packages/common/src/api/developerApps.ts b/packages/common/src/api/developerApps.ts
@@ -137,13 +137,13 @@ const developerAppsApi = createApi({
 
         await sdk.developerApps.updateDeveloperApp({
           appApiKey: apiKey,
-          name: name,
-          description: description,
-          imageUrl: imageUrl,
+          name,
+          description,
+          imageUrl,
           userId: encodedUserId
         })
 
-        return {}
+        return { name, description, imageUrl, apiKey }
       },
       options: {
         idArgKey: 'name',

diff --git a/packages/web/src/components/preload-image/PreloadImage.tsx b/packages/web/src/components/preload-image/PreloadImage.tsx
@@ -12,13 +12,17 @@ const PreloadImage = ({
   alt = '',
   asBackground = false,
   preloaded = false,
-  className
+  className,
+  height,
+  width
 }: {
   src: string
   alt?: string
   asBackground?: boolean
   preloaded?: boolean
   className?: string
+  height?: string
+  width?: string
 }) => {
   const [isLoaded, setIsLoaded] = useState(preloaded)
   useEffect(() => {
@@ -33,13 +37,15 @@ const PreloadImage = ({
   return asBackground ? (
     <div
       className={cn(styles.img, className, { [styles.isLoaded]: isLoaded })}
-      style={{ backgroundImage: `url(${src})` }}
+      style={{ backgroundImage: `url(${src})`, height, width }}
     />
   ) : (
     <img
       src={src}
       className={cn(styles.img, className, { [styles.isLoaded]: isLoaded })}
       alt={alt}
+      height={height}
+      width={width}
     />
   )
 }

diff --git a/...s/web/src/pages/settings-page/components/desktop/AuthorizedApps/AuthorizedAppListItem.tsx b/...s/web/src/pages/settings-page/components/desktop/AuthorizedApps/AuthorizedAppListItem.tsx
@@ -11,6 +11,8 @@ import {
   PopupMenuItem
 } from '@audius/harmony'
 
+import PreloadImage from 'components/preload-image/PreloadImage'
+
 import styles from './AuthorizedAppListItem.module.css'
 import { AuthorizedAppPageProps, AuthorizedAppsPages } from './types'
 
@@ -59,7 +61,7 @@ export const AuthorizedAppListItem = (props: AuthorizedAppListItemProps) => {
     <li className={styles.listItem}>
       <span className={styles.listItemImage}>
         {imageUrl ? (
-          <img src={imageUrl} />
+          <PreloadImage src={imageUrl} />
         ) : (
           <IconEmbed color='subdued' size='2xl' />
         )}

diff --git a/...ges/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx b/...ges/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx
@@ -11,6 +11,8 @@ import {
   PopupMenuItem
 } from '@audius/harmony'
 
+import PreloadImage from 'components/preload-image/PreloadImage'
+
 import styles from './DeveloperAppListItem.module.css'
 import { CreateAppPageProps, CreateAppsPages } from './types'
 
@@ -59,7 +61,7 @@ export const DeveloperAppListItem = (props: DeveloperAppListItemProps) => {
     <li className={styles.listItem}>
       <span className={styles.listItemImage}>
         {imageUrl ? (
-          <img src={imageUrl} />
+          <PreloadImage src={imageUrl} />
         ) : (
           <IconEmbed color='subdued' size='2xl' />
         )}

diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/EditAppPage.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/EditAppPage.tsx
@@ -17,6 +17,7 @@ import { toFormikValidationSchema } from 'zod-formik-adapter'
 import { make, useRecord } from 'common/store/analytics/actions'
 import { Divider } from 'components/divider'
 import { TextAreaField, TextField } from 'components/form-fields'
+import PreloadImage from 'components/preload-image/PreloadImage'
 import Toast from 'components/toast/Toast'
 import { MountPlacement } from 'components/types'
 import { copyToClipboard } from 'utils/clipboardUtil'
@@ -47,7 +48,7 @@ const messages = {
 const ImageField = ({ name }: { name: string }) => {
   const [{ value }] = useField(name)
   return value ? (
-    <img src={value} height='136' width='136' />
+    <PreloadImage src={value} width='100%' />
   ) : (
     <Flex
       w='100%'
@@ -137,8 +138,14 @@ export const EditAppPage = (props: EditAppPageProps) => {
         <Flex gap='m' direction='column'>
           <Flex gap='m' alignItems='center'>
             <Flex
-              borderRadius='xs'
-              css={{ overflow: 'hidden', alignSelf: 'stretch' }}
+              borderRadius='l'
+              css={{
+                overflow: 'hidden',
+                alignSelf: 'stretch',
+                width: 138,
+                maxWidth: 138,
+                height: 138
+              }}
               flex={'1 1 auto'}
             >
               <ImageField name='imageUrl' />