chore: modernize CMA access in example apps [TTTI-17]

examples/asset-upload/src/locations/Field.tsx

@@ -1,11 +1,11 @@
 import { FieldAppSDK } from '@contentful/app-sdk';
 import { AssetCard, Button, Stack } from '@contentful/f36-components';
-import { useAutoResizer, useCMA, useFieldValue, useSDK } from '@contentful/react-apps-toolkit';
+import { useAutoResizer, useFieldValue, useSDK } from '@contentful/react-apps-toolkit';
 import { Link } from 'contentful-management';
 
 const Field = () => {
   const sdk = useSDK<FieldAppSDK>();
-  const cma = useCMA();
+  const cma = sdk.cma;
   useAutoResizer();
 
   const [value, setValue] = useFieldValue<Link<'Asset'>>();

examples/blog-post-metrics/src/locations/ConfigScreen.tsx

@@ -2,18 +2,18 @@ import React, { useCallback, useState, useEffect } from 'react';
 import { ConfigAppSDK } from '@contentful/app-sdk';
 import { Heading, Form, Paragraph, Flex } from '@contentful/f36-components';
 import { css } from 'emotion';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 export interface AppInstallationParameters {}
 
 const ConfigScreen = () => {
   const [parameters, setParameters] = useState<AppInstallationParameters>({});
   const sdk = useSDK<ConfigAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   const onConfigure = useCallback(async () => {
     // This method will be called when a user clicks on "Install"

examples/blog-post-metrics/src/locations/Dialog.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { DialogAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Dialog = () => {
   const sdk = useSDK<DialogAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Dialog Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/blog-post-metrics/src/locations/EntryEditor.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { EditorAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Entry = () => {
   const sdk = useSDK<EditorAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Entry Editor Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/blog-post-metrics/src/locations/Field.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { FieldAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Field = () => {
   const sdk = useSDK<FieldAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
   // If you only want to extend Contentful's default editing experience
   // reuse Contentful's editor components
   // -> https://www.contentful.com/developers/docs/extensibility/field-editors/

examples/blog-post-metrics/src/locations/Home.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { HomeAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Home = () => {
   const sdk = useSDK<HomeAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Home Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/blog-post-metrics/src/locations/Page.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { PageAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Page = () => {
   const sdk = useSDK<PageAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Page Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/compare-entries/src/locations/Dialog.tsx

@@ -1,13 +1,13 @@
 import { DialogAppSDK } from '@contentful/app-sdk';
 import { Spinner, Stack } from '@contentful/f36-components';
-import { useCMA, useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 import { EntryProps, GetEntryParams, PlainClientAPI } from 'contentful-management';
 import React, { useEffect, useState } from 'react';
 import DiffViewer from 'react-diff-viewer';
 
 const Dialog = () => {
   const sdk = useSDK<DialogAppSDK>();
-  const cma = useCMA();
+  const cma = sdk.cma;
   const [leftEntry, setLeftEntry] = useState<EntryProps | null | undefined>();
   const [rightEntry, setRightEntry] = useState<EntryProps | null | undefined>();
 

examples/compare-entries/src/locations/Sidebar.tsx

@@ -1,12 +1,12 @@
 import { SidebarAppSDK } from '@contentful/app-sdk';
 import { Button, Select, Stack } from '@contentful/f36-components';
-import { useCMA, useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 import { EnvironmentProps, SpaceProps } from 'contentful-management';
 import React, { useEffect, useState } from 'react';
 
 const Sidebar = () => {
   const sdk = useSDK<SidebarAppSDK>();
-  const cma = useCMA();
+  const cma = sdk.cma;
 
   const [environments, setEnvironments] = useState<EnvironmentProps[] | undefined>(undefined);
   const [spaces, setSpaces] = useState<SpaceProps[] | undefined>(undefined);

examples/editor-assignment/src/locations/ConfigScreen.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect } from 'react';
 import { ConfigAppSDK } from '@contentful/app-sdk';
 import { Heading, Form, Accordion, Flex, Checkbox } from '@contentful/f36-components';
 import { css } from 'emotion';
-import { useCMA, useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 import { ContentTypeProps } from 'contentful-management';
 import tokens from '@contentful/f36-tokens';
 import { getInitialSidebarContentTypes } from '../utils/sidebar';
@@ -64,7 +64,7 @@ const ConfigScreen = () => {
   const [supportedFieldCTs, setSupportedFieldCTs] = useState<ContentTypeProps[]>([]);
   const [selectedFieldCTs, setSelectedFieldCTs] = useState<string[]>([]);
   const sdk = useSDK<ConfigAppSDK>();
-  const cma = useCMA();
+  const cma = sdk.cma;
 
   const onConfigure = useCallback(async () => {
     // This method will be called when a user clicks on "Install"

examples/editor-assignment/src/locations/EntryEditor.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { EditorAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Entry = () => {
   const sdk = useSDK<EditorAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Entry Editor Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/editor-assignment/src/locations/Field.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { FieldAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Field = () => {
   const sdk = useSDK<FieldAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
   // If you only want to extend Contentful's default editing experience
   // reuse Contentful's editor components
   // -> https://www.contentful.com/developers/docs/extensibility/field-editors/

examples/editor-assignment/src/locations/Sidebar.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 import { SidebarAppSDK } from '@contentful/app-sdk';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Sidebar = () => {
   const sdk = useSDK<SidebarAppSDK>();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Sidebar Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/home-location/src/components/members/Members.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import { Flex, Grid, Text } from '@contentful/f36-components';
 import { useAsync } from 'react-async-hook';
-import { useCMA } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 import { Member } from './Member';
 import { LoadingMembers } from './LoadingMembers';
+import type { HomeAppSDK } from '@contentful/app-sdk';
 
 const Members = () => {
-  const cma = useCMA();
+  const sdk = useSDK<HomeAppSDK>();
+  const cma = sdk.cma;
   const getSpaceMembers = useCallback(async () => {
     return await cma.user.getManyForSpace({});
   }, [cma]);

examples/home-location/src/components/stats/Stats.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import { Flex, Grid, Text } from '@contentful/f36-components';
 import { useAsync } from 'react-async-hook';
-import { useCMA } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 import { StatCard } from './StatCard';
 import { LoadingStats } from './LoadingStats';
+import type { HomeAppSDK } from '@contentful/app-sdk';
 
 const Stats = () => {
-  const cma = useCMA();
+  const sdk = useSDK<HomeAppSDK>();
+  const cma = sdk.cma;
   const getStats = useCallback(async () => {
     const [contentTypes, entries, assets, locales, tags] = await Promise.all([
       cma.contentType.getMany({}),

examples/home-location/src/locations/Home.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback } from 'react';
-import { useCMA, useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 import { useAsync } from 'react-async-hook';
 import { Flex, Text } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
 import Stats from '../components/stats/Stats';
 import Members from '../components/members/Members';
+import type { HomeAppSDK } from '@contentful/app-sdk';
 
 export const Home = () => {
-  const sdk = useSDK();
-  const cma = useCMA();
+  const sdk = useSDK<HomeAppSDK>();
+  const cma = sdk.cma;
   const getSpace = useCallback(async () => {
     return await cma.space.get({});
   }, [cma]);

examples/javascript/src/locations/ConfigScreen.jsx

@@ -1,16 +1,16 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { Heading, Form, Paragraph, Flex } from '@contentful/f36-components';
 import { css } from 'emotion';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const ConfigScreen = () => {
   const [parameters, setParameters] = useState({});
   const sdk = useSDK();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
   const onConfigure = useCallback(async () => {
     // This method will be called when a user clicks on "Install"
     // or "Save" in the configuration screen.

examples/javascript/src/locations/Dialog.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Dialog = () => {
   const sdk = useSDK();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Dialog Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/javascript/src/locations/EntryEditor.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Entry = () => {
   const sdk = useSDK();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Entry Editor Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/javascript/src/locations/Field.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Field = () => {
   const sdk = useSDK();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
   // If you only want to extend Contentful's default editing experience
   // reuse Contentful's editor components
   // -> https://www.contentful.com/developers/docs/extensibility/field-editors/

examples/javascript/src/locations/Home.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Home = () => {
   const sdk = useSDK();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Home Component (AppId: {sdk.ids.app})</Paragraph>;
 };

examples/javascript/src/locations/Page.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Paragraph } from '@contentful/f36-components';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK } from '@contentful/react-apps-toolkit';
 
 const Page = () => {
   const sdk = useSDK();
   /*
-     To use the cma, inject it as follows.
+     To use the cma, access it as follows.
      If it is not needed, you can remove the next line.
   */
-  // const cma = useCMA();
+  // const cma = sdk.cma;
 
   return <Paragraph>Hello Page Component (AppId: {sdk.ids.app})</Paragraph>;
 };