docs(website): update code snippets for development_notifications

website/src/code-examples/development/forms/channels-create-with-modal.jsx

@@ -0,0 +1,46 @@
+
+import { useCallback } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { FormModalPage } from '@commercetools-frontend/application-components';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsCreate = (props) => {
+  const languages = useApplicationContext((context) => context.project.languages);
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await createChannel(data);
+      // If successful, show a notification and redirect
+      // to the Channels details page.
+      // If errored, show an error notification.
+    },
+    [createChannel]
+  );
+
+  return (
+    <ChannelsForm
+      initialValues={docToFormValues(null, languages)}
+      onSubmit={handleSubmit}
+    >
+      {(formProps) => {
+        return (
+          <FormModalPage
+            title="Create a channel"
+            isOpen
+            onClose={props.onClose}
+            isPrimaryButtonDisabled={formProps.isSubmitting}
+            onSecondaryButtonClick={() => {
+              formProps.handleCancel();
+              props.onClose()
+            }}
+            onPrimaryButtonClick={formProps.submitForm}
+          >
+            {formProps.formElements}
+          </FormModalPage>
+        )
+      }}
+    </ChannelsForm>
+  );
+}

website/src/code-examples/development/forms/channels-create-with-modal.tsx

@@ -0,0 +1,46 @@
+
+import { useCallback } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { FormModalPage } from '@commercetools-frontend/application-components';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsCreate = (props) => {
+  const languages = useApplicationContext((context) => context.project.languages);
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await createChannel(data);
+      // If successful, show a notification and redirect
+      // to the Channels details page.
+      // If errored, show an error notification.
+    },
+    [createChannel]
+  );
+
+  return (
+    <ChannelsForm
+      initialValues={docToFormValues(null, languages)}
+      onSubmit={handleSubmit}
+    >
+      {(formProps) => {
+        return (
+          <FormModalPage
+            title="Create a channel"
+            isOpen
+            onClose={props.onClose}
+            isPrimaryButtonDisabled={formProps.isSubmitting}
+            onSecondaryButtonClick={() => {
+              formProps.handleCancel();
+              props.onClose()
+            }}
+            onPrimaryButtonClick={formProps.submitForm}
+          >
+            {formProps.formElements}
+          </FormModalPage>
+        )
+      }}
+    </ChannelsForm>
+  );
+}

website/src/code-examples/development/forms/channels-create.jsx

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import Text from '@commercetools-uikit/text';
+import Spacings from '@commercetools-uikit/spacings';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsCreate = () => {
+  const languages = useApplicationContext((context) => context.project.languages);
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await createChannel(data);
+      // If successful, show a notification and redirect
+      // to the Channels details page.
+      // If errored, show an error notification.
+    },
+    [createChannel]
+  );
+
+  return (
+    <Spacings.Stack scale="xl">
+      <Text.Headline as="h1">
+        Create a channel
+      </Text.Headline>
+      <ChannelsForm
+        initialValues={docToFormValues(null, languages)}
+        onSubmit={handleSubmit}
+      />
+    </Spacings.Stack>
+  );
+}

website/src/code-examples/development/forms/channels-create.tsx

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import Text from '@commercetools-uikit/text';
+import Spacings from '@commercetools-uikit/spacings';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsCreate = () => {
+  const languages = useApplicationContext((context) => context.project.languages);
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await createChannel(data);
+      // If successful, show a notification and redirect
+      // to the Channels details page.
+      // If errored, show an error notification.
+    },
+    [createChannel]
+  );
+
+  return (
+    <Spacings.Stack scale="xl">
+      <Text.Headline as="h1">
+        Create a channel
+      </Text.Headline>
+      <ChannelsForm
+        initialValues={docToFormValues(null, languages)}
+        onSubmit={handleSubmit}
+      />
+    </Spacings.Stack>
+  );
+}

website/src/code-examples/development/forms/channels-details-with-modal.jsx

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+import { useRouteMatch } from "react-router-dom";
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { FormModalPage } from '@commercetools-frontend/application-components';
+import LoadingSpinner from '@commercetools-uikit/loading-spinner';
+import useChannelsFetcher from './use-channels-fetcher';
+import useChannelsUpdater from './use-channels-updater';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsDetails = (props) => {
+  const match = useRouteMatch();
+  const languages = useApplicationContext((context) => context.project.languages);
+  const { data: channel } = useChannelsFetcher(match.params.id)
+  const { updateChannel } = useChannelsUpdater(match.params.id)
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await updateChannel(data);
+      // If successful, show a notification.
+      // If errored, show an error notification.
+    },
+    [updateChannel]
+  );
+
+  if (!channel) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <ChannelsForm
+      initialValues={docToFormValues(channel, languages)}
+      onSubmit={handleSubmit}
+    >
+      {(formProps) => {
+        return (
+          <FormModalPage
+            title="Manage Channel"
+            isOpen
+            onClose={props.onClose}
+            isPrimaryButtonDisabled={formProps.isSubmitting}
+            onSecondaryButtonClick={formProps.handleCancel}
+            onPrimaryButtonClick={formProps.submitForm}
+          >
+            {formProps.formElements}
+          </FormModalPage>
+        )
+      }}
+    </ChannelsForm>
+  );
+}

website/src/code-examples/development/forms/channels-details-with-modal.tsx

@@ -0,0 +1,65 @@
+import { ReactNode, useCallback } from 'react';
+import { useRouteMatch } from "react-router-dom";
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { FormModalPage } from '@commercetools-frontend/application-components';
+import LoadingSpinner from '@commercetools-uikit/loading-spinner';
+import useChannelsFetcher from './use-channels-fetcher';
+import useChannelsUpdater from './use-channels-updater';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+type ChannelsDetailsProps = {
+  onClose: () => void;
+  // ...
+}
+
+type FormProps = {
+  isSubmitting: boolean;
+  handleCancel: () => void;
+  submitForm: () => void;
+  formElements: ReactNode
+  // ...
+}
+
+const ChannelsDetails = (props: ChannelsDetailsProps) => {
+  const match = useRouteMatch();
+  const languages = useApplicationContext((context) => context.project.languages);
+  const { data: channel } = useChannelsFetcher(match.params.id)
+  const { updateChannel } = useChannelsUpdater(match.params.id)
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await updateChannel(data);
+      // If successful, show a notification.
+      // If errored, show an error notification.
+    },
+    [updateChannel]
+  );
+
+  if (!channel) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <ChannelsForm
+      initialValues={docToFormValues(channel, languages)}
+      onSubmit={handleSubmit}
+    >
+      {(formProps: FormProps) => {
+        return (
+          <FormModalPage
+            title="Manage Channel"
+            isOpen
+            onClose={props.onClose}
+            isPrimaryButtonDisabled={formProps.isSubmitting}
+            onSecondaryButtonClick={formProps.handleCancel}
+            onPrimaryButtonClick={formProps.submitForm}
+          >
+            {formProps.formElements}
+          </FormModalPage>
+        )
+      }}
+    </ChannelsForm>
+  );
+}

website/src/code-examples/development/forms/channels-details.jsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useRouteMatch } from "react-router-dom";
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import Text from '@commercetools-uikit/text';
+import Spacings from '@commercetools-uikit/spacings';
+import LoadingSpinner from '@commercetools-uikit/loading-spinner';
+import useChannelsFetcher from './use-channels-fetcher';
+import useChannelsUpdater from './use-channels-updater';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsDetails = (props) => {
+  const match = useRouteMatch();
+  const languages = useApplicationContext((context) => context.project.languages);
+  const { data: channel } = useChannelsFetcher(match.params.id)
+  const { updateChannel } = useChannelsUpdater(match.params.id)
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await updateChannel(data);
+      // If successful, show a notification.
+      // If errored, show an error notification.
+    },
+    [updateChannel]
+  );
+
+  if (!channel) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Spacings.Stack scale="xl">
+      <Text.Headline as="h1">
+        Manage Channel
+      </Text.Headline>
+      <ChannelsForm
+        initialValues={docToFormValues(channel, languages)}
+        onSubmit={handleSubmit}
+      />
+    </Spacings.Stack>
+  );
+}

website/src/code-examples/development/forms/channels-details.tsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useRouteMatch } from "react-router-dom";
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import Text from '@commercetools-uikit/text';
+import Spacings from '@commercetools-uikit/spacings';
+import LoadingSpinner from '@commercetools-uikit/loading-spinner';
+import useChannelsFetcher from './use-channels-fetcher';
+import useChannelsUpdater from './use-channels-updater';
+import { docToFormValues, formValuesToDoc } from './conversions';
+import ChannelsForm from './channels-form';
+
+const ChannelsDetails = (props) => {
+  const match = useRouteMatch();
+  const languages = useApplicationContext((context) => context.project.languages);
+  const { data: channel } = useChannelsFetcher(match.params.id)
+  const { updateChannel } = useChannelsUpdater(match.params.id)
+  const handleSubmit = useCallback(
+    async (formValues) => {
+      const data = formValuesToDoc(formValues);
+      // This would trigger the request, for example a mutation.
+      const result = await updateChannel(data);
+      // If successful, show a notification.
+      // If errored, show an error notification.
+    },
+    [updateChannel]
+  );
+
+  if (!channel) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Spacings.Stack scale="xl">
+      <Text.Headline as="h1">
+        Manage Channel
+      </Text.Headline>
+      <ChannelsForm
+        initialValues={docToFormValues(channel, languages)}
+        onSubmit={handleSubmit}
+      />
+    </Spacings.Stack>
+  );
+}