1. import React, { useCallback, useState, useEffect } from 'react';
2. import { ConfigAppSDK } from '@contentful/app-sdk';
3. import { Heading, Form, Paragraph, Flex } from '@contentful/f36-components';
4. import { css } from 'emotion';
5. import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
6.  
7. export interface AppInstallationParameters {}
8.  
9. const ConfigScreen = () => {
10.   const [parameters, setParameters] = useState<AppInstallationParameters>({});
11.   const sdk = useSDK<ConfigAppSDK>();
12.   /*
13.      To use the cma, inject it as follows.
14.      If it is not needed, you can remove the next line.
15.   */
16.   // const cma = useCMA();
17.  
18.   const onConfigure = useCallback(async () => {
19.     // This method will be called when a user clicks on "Install"
20.     // or "Save" in the configuration screen.
21.     // for more details see https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
22.  
23.     // Get current the state of EditorInterface and other entities
24.     // related to this app installation
25.     const currentState = await sdk.app.getCurrentState();
26.  
27.     return {
28.       // Parameters to be persisted as the app configuration.
29.       parameters,
30.       // In case you don't want to submit any update to app
31.       // locations, you can just pass the currentState as is
32.       targetState: currentState,
33.     };
34.   }, [parameters, sdk]);
35.  
36.   useEffect(() => {
37.     // `onConfigure` allows to configure a callback to be
38.     // invoked when a user attempts to install the app or update
39.     // its configuration.
40.     sdk.app.onConfigure(() => onConfigure());
41.   }, [sdk, onConfigure]);
42.  
43.   useEffect(() => {
44.     (async () => {
45.       // Get current parameters of the app.
46.       // If the app is not installed yet, `parameters` will be `null`.
47.       const currentParameters: AppInstallationParameters | null = await sdk.app.getParameters();
48.  
49.       if (currentParameters) {
50.         setParameters(currentParameters);
51.       }
52.  
53.       // Once preparation has finished, call `setReady` to hide
54.       // the loading screen and present the app to a user.
55.       sdk.app.setReady();
56.     })();
57.   }, [sdk]);
58.  
59.   return (
60.     <Flex flexDirecti className={css({ margin: '80px', maxWidth: '800px' })}>
61.       &lt;Form&gt;
62.         &lt;Heading&gt;App Config&lt;/Heading&gt;
63.         <Paragraph>Welcome to your contentful app. This is your config page.</Paragraph>
64.       &lt;/Form&gt;
65.     </Flex>
66.   );
67. };
68.  
69. export default ConfigScreen;
70.