saleor-dashboard/src/products/views/ProductCreate.tsx

import React from "react";
import { useIntl } from "react-intl";

import { WindowTitle } from "@saleor/components/WindowTitle";
import SearchProductTypes from "@saleor/containers/SearchProductTypes";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
import SearchCollections from "../../containers/SearchCollections";
import { decimal, getMutationState, maybe } from "../../misc";
import ProductCreatePage, {
  ProductCreatePageSubmitData
} from "../components/ProductCreatePage";
import { TypedProductCreateMutation } from "../mutations";
import { ProductCreate } from "../types/ProductCreate";
import { productListUrl, productUrl } from "../urls";

interface ProductUpdateProps {
  id: string;
}

export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
  const navigate = useNavigator();
  const notify = useNotifier();
  const shop = useShop();
  const intl = useIntl();
  const {
    loadMore: loadMoreCategories,
    search: searchCategory,
    result: searchCategoryOpts
  } = useCategorySearch({
    variables: DEFAULT_INITIAL_SEARCH_DATA
  });

  const handleBack = () => navigate(productListUrl());

  return (
    <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
      {({
        loadMore: loadMoreCollections,
        search: searchCollection,
        result: searchCollectionOpts
      }) => (
        <SearchProductTypes variables={DEFAULT_INITIAL_SEARCH_DATA}>
          {({
            loadMore: loadMoreProductTypes,
            search: searchProductTypes,
            result: searchProductTypesOpts
          }) => {
            const handleSuccess = (data: ProductCreate) => {
              if (data.productCreate.errors.length === 0) {
                notify({
                  text: intl.formatMessage({
                    defaultMessage: "Product created"
                  })
                });
                navigate(productUrl(data.productCreate.product.id));
              } else {
                const attributeError = data.productCreate.errors.find(
                  err => err.field === "attributes"
                );
                if (!!attributeError) {
                  notify({ text: attributeError.message });
                }
              }
            };

            return (
              <TypedProductCreateMutation onCompleted={handleSuccess}>
                {(
                  productCreate,
                  {
                    called: productCreateCalled,
                    data: productCreateData,
                    loading: productCreateDataLoading
                  }
                ) => {
                  const handleSubmit = (
                    formData: ProductCreatePageSubmitData
                  ) => {
                    productCreate({
                      variables: {
                        attributes: formData.attributes.map(attribute => ({
                          id: attribute.id,
                          values: attribute.value
                        })),
                        basePrice: decimal(formData.basePrice),
                        category: formData.category,
                        chargeTaxes: formData.chargeTaxes,
                        collections: formData.collections,
                        descriptionJson: JSON.stringify(formData.description),
                        isPublished: formData.isPublished,
                        name: formData.name,
                        productType: formData.productType,
                        publicationDate:
                          formData.publicationDate !== ""
                            ? formData.publicationDate
                            : null,
                        seo: {
                          description: formData.seoDescription,
                          title: formData.seoTitle
                        },
                        sku: formData.sku,
                        stockQuantity:
                          formData.stockQuantity !== null
                            ? formData.stockQuantity
                            : 0
                      }
                    });
                  };

                  const formTransitionState = getMutationState(
                    productCreateCalled,
                    productCreateDataLoading,
                    maybe(() => productCreateData.productCreate.errors)
                  );
                  return (
                    <>
                      <WindowTitle
                        title={intl.formatMessage({
                          defaultMessage: "Create Product",
                          description: "window title"
                        })}
                      />
                      <ProductCreatePage
                        currency={maybe(() => shop.defaultCurrency)}
                        categories={maybe(
                          () => searchCategoryOpts.data.search.edges,
                          []
                        ).map(edge => edge.node)}
                        collections={maybe(
                          () => searchCollectionOpts.data.search.edges,
                          []
                        ).map(edge => edge.node)}
                        disabled={productCreateDataLoading}
                        errors={maybe(
                          () => productCreateData.productCreate.errors,
                          []
                        )}
                        fetchCategories={searchCategory}
                        fetchCollections={searchCollection}
                        fetchProductTypes={searchProductTypes}
                        header={intl.formatMessage({
                          defaultMessage: "New Product",
                          description: "page header"
                        })}
                        productTypes={maybe(() =>
                          searchProductTypesOpts.data.search.edges.map(
                            edge => edge.node
                          )
                        )}
                        onBack={handleBack}
                        onSubmit={handleSubmit}
                        saveButtonBarState={formTransitionState}
                        fetchMoreCategories={{
                          hasMore: maybe(
                            () =>
                              searchCategoryOpts.data.search.pageInfo
                                .hasNextPage
                          ),
                          loading: searchCategoryOpts.loading,
                          onFetchMore: loadMoreCategories
                        }}
                        fetchMoreCollections={{
                          hasMore: maybe(
                            () =>
                              searchCollectionOpts.data.search.pageInfo
                                .hasNextPage
                          ),
                          loading: searchCollectionOpts.loading,
                          onFetchMore: loadMoreCollections
                        }}
                        fetchMoreProductTypes={{
                          hasMore: maybe(
                            () =>
                              searchProductTypesOpts.data.search.pageInfo
                                .hasNextPage
                          ),
                          loading: searchProductTypesOpts.loading,
                          onFetchMore: loadMoreProductTypes
                        }}
                      />
                    </>
                  );
                }}
              </TypedProductCreateMutation>
            );
          }}
        </SearchProductTypes>
      )}
    </SearchCollections>
  );
};
export default ProductUpdate;