feat: update controls

marcolink · May 24, 2024 · b865f57 · b865f57
1 parent ec31777
commit b865f57
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,10 @@
+export const BLURHASH_DEFAULTS = {
+  imageField: 'image',
+  blurhashField: 'blurhash',
+  componentX: 4,
+  componentY: 3,
+}
+
+export const APP_ID = {
+  production: '6EgmuKsOM0M1hPRhd9Zo75'
+}
diff --git a/src/hooks/useCreateBlurhash.tsx b/src/hooks/useCreateBlurhash.tsx
@@ -4,6 +4,7 @@ import {PlainClientAPI} from "contentful-management";
 import {useMemo, useRef} from "react";
 import {useQuery} from "@tanstack/react-query";
 import {useInstanceParameters} from "./useInstanceParameters";
+import {BLURHASH_DEFAULTS} from "../constants";
 
 type InputProps = {
   assetId?: string
@@ -20,8 +21,8 @@ type Props = InputProps & Required<Pick<InputProps, 'width' | 'height' | 'compon
 const defaultProps: Props = {
   width: 320,
   height: 320,
-  componentX: 6,
-  componentY: 6,
+  componentX: BLURHASH_DEFAULTS.componentX,
+  componentY: BLURHASH_DEFAULTS.componentY,
   language: 'en-US'
 }
 

diff --git a/src/locations/ConfigScreen.tsx b/src/locations/ConfigScreen.tsx
@@ -4,6 +4,7 @@ import {useSDK} from '@contentful/react-apps-toolkit';
 import {css} from 'emotion';
 import {useCallback, useEffect, useState} from 'react';
 import {makeContentType} from "../logic/makeContentType";
+import {APP_ID, BLURHASH_DEFAULTS} from "../constants";
 
 const CONTENT_TYPE_NAME = 'Blurhash Image'
 export const CONTENT_TYPE_ID = 'blurhashImage'
@@ -42,6 +43,25 @@ const ConfigScreen = () => {
       const newContentType = await sdk.cma.contentType.createWithId(params, makeContentType(CONTENT_TYPE_NAME))
       await sdk.cma.contentType.publish(params, newContentType)
       console.log({newContentType})
+
+      const editorInterface = await sdk.cma.editorInterface.get({
+        contentTypeId: newContentType.sys.id
+      })
+
+      const blurhashFieldControls = {
+        fieldId: BLURHASH_DEFAULTS.blurhashField,
+        widgetId: APP_ID.production,
+        widgetNamespace: "app",
+        settings: {
+          sourceImageFieldId: BLURHASH_DEFAULTS.imageField,
+          componentX: BLURHASH_DEFAULTS.componentX,
+          componentY: BLURHASH_DEFAULTS.componentY
+        }
+      }
+
+      editorInterface.controls = editorInterface.controls?.filter(control => control.fieldId !== BLURHASH_DEFAULTS.blurhashField) || []
+      editorInterface.controls.push(blurhashFieldControls)
+      await sdk.cma.editorInterface.update({contentTypeId: newContentType.sys.id}, editorInterface)
     }
 
     return {

diff --git a/src/logic/makeContentType.ts b/src/logic/makeContentType.ts
@@ -1,4 +1,5 @@
 import {CreateContentTypeProps} from "contentful-management/dist/typings/entities/content-type";
+import {BLURHASH_DEFAULTS} from "../constants";
 
 export const makeContentType = (contentTypeName: string): CreateContentTypeProps => ({
     name: contentTypeName,
@@ -12,15 +13,15 @@ export const makeContentType = (contentTypeName: string): CreateContentTypeProps
             localized: false,
         },
         {
-            id: 'image',
+            id: BLURHASH_DEFAULTS.imageField,
             name: 'Image',
             required: true,
             type: 'Link',
             linkType: 'Asset',
             localized: false,
         },
         {
-            id: 'blurhash',
+            id: BLURHASH_DEFAULTS.blurhashField,
             name: 'Blurhash',
             required: true,
             type: 'Symbol',