djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use category search hook

Browse source
This commit is contained in:
dominik-zeglen 2019-11-19 16:47:12 +01:00
parent 0a7f65727a
commit e67727af03
11 changed files with 835 additions and 871 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
View file

@ -19,7 +19,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { SearchCategories_search_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import Checkbox from "../Checkbox";
export interface FormData {

20
src/discounts/views/SaleDetails.tsx
View file

@ -16,10 +16,10 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchCategories from "../../containers/SearchCategories";
import SearchCollections from "../../containers/SearchCollections";
import SearchProducts from "../../containers/SearchProducts";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
@ -66,6 +66,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
params.ids
);
const intl = useIntl();
const {
search: searchCategories,
result: searchCategoriesOpts
} = useCategorySearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const paginationState = createPaginationState(PAGINATE_BY, params);
const changeTab = (tab: SaleDetailsPageTab) => {
@ -377,20 +383,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
/>
)}
</SearchProducts>
<SearchCategories
variables={DEFAULT_INITIAL_SEARCH_DATA}
>
{({
search: searchCategories,
result: searchCategoriesOpts
}) => (
<AssignCategoriesDialog
categories={maybe(() =>
searchCategoriesOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedCategory =>
suggestedCategory.id
suggestedCategory => suggestedCategory.id
)
)}
confirmButtonState={assignTransitionState}
@ -412,8 +410,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
})
}
/>
)}
</SearchCategories>
<SearchCollections
variables={DEFAULT_INITIAL_SEARCH_DATA}
>

20
src/discounts/views/VoucherDetails.tsx
View file

@ -16,10 +16,10 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchCategories from "../../containers/SearchCategories";
import SearchCollections from "../../containers/SearchCollections";
import SearchProducts from "../../containers/SearchProducts";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
@ -68,6 +68,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
params.ids
);
const intl = useIntl();
const {
search: searchCategories,
result: searchCategoriesOpts
} = useCategorySearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const paginationState = createPaginationState(PAGINATE_BY, params);
const changeTab = (tab: VoucherDetailsPageTab) => {
@ -420,20 +426,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
toggle={toggle}
toggleAll={toggleAll}
/>
<SearchCategories
variables={DEFAULT_INITIAL_SEARCH_DATA}
>
{({
search: searchCategories,
result: searchCategoriesOpts
}) => (
<AssignCategoriesDialog
categories={maybe(() =>
searchCategoriesOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedCategory =>
suggestedCategory.id
suggestedCategory => suggestedCategory.id
)
)}
confirmButtonState={assignTransitionState}
@ -455,8 +453,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
})
}
/>
)}
</SearchCategories>
<SearchCollections
variables={DEFAULT_INITIAL_SEARCH_DATA}
>

2
src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
View file

@ -14,13 +14,13 @@ import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
import { SearchCategories_search_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
import { SearchCollections_search_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
import { SearchPages_search_edges_node } from "@saleor/containers/SearchPages/types/SearchPages";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { buttonMessages, sectionNames } from "@saleor/intl";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import { UserError } from "@saleor/types";
import { getErrors, getFieldError } from "@saleor/utils/errors";
import { getMenuItemByValue, IMenu } from "@saleor/utils/menu";

59
src/navigation/views/MenuDetails/index.tsx
View file

@ -5,10 +5,10 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import { categoryUrl } from "../../../categories/urls";
import { collectionUrl } from "../../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
import SearchCategories from "../../../containers/SearchCategories";
import SearchCollections from "../../../containers/SearchCollections";
import SearchPages from "../../../containers/SearchPages";
import { getMutationState, maybe } from "../../../misc";
@ -59,6 +59,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const categorySearch = useCategorySearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const closeModal = () =>
navigate(
@ -97,8 +100,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
return (
<SearchPages variables={DEFAULT_INITIAL_SEARCH_DATA}>
{pageSearch => (
<SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
{categorySearch => (
<SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
{collectionSearch => (
<MenuDetailsQuery displayLoader variables={{ id }}>
@ -127,9 +128,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
const pages = maybe(
() =>
pageSearch.result.data.search.edges.map(
edge => edge.node
),
pageSearch.result.data.search.edges.map(edge => edge.node),
[]
);
@ -149,20 +148,14 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
const deleteState = getMutationState(
menuDeleteOpts.called,
menuDeleteOpts.loading,
maybe(
() => menuDeleteOpts.data.menuDelete.errors
)
maybe(() => menuDeleteOpts.data.menuDelete.errors)
);
const updateState = getMutationState(
menuUpdateOpts.called,
menuUpdateOpts.loading,
maybe(
() => menuUpdateOpts.data.menuUpdate.errors
),
maybe(
() => menuUpdateOpts.data.menuItemMove.errors
)
maybe(() => menuUpdateOpts.data.menuUpdate.errors),
maybe(() => menuUpdateOpts.data.menuItemMove.errors)
);
// This is a workaround to let know <MenuDetailsPage />
@ -182,10 +175,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
});
if (result) {
if (
result.data.menuItemBulkDelete.errors
.length > 0 ||
result.data.menuItemMove.errors.length >
result.data.menuItemBulkDelete.errors.length >
0 ||
result.data.menuItemMove.errors.length > 0 ||
result.data.menuUpdate.errors.length > 0
) {
return false;
@ -250,10 +242,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
values={{
menuName: (
<strong>
{maybe(
() => data.menu.name,
"..."
)}
{maybe(() => data.menu.name, "...")}
</strong>
)
}}
@ -290,8 +279,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
menuItemCreateOpts.loading,
maybe(
() =>
menuItemCreateOpts.data
.menuItemCreate.errors
menuItemCreateOpts.data.menuItemCreate
.errors
)
);
@ -302,8 +291,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
collections={collections}
errors={maybe(
() =>
menuItemCreateOpts.data
.menuItemCreate.errors,
menuItemCreateOpts.data.menuItemCreate
.errors,
[]
)}
pages={pages}
@ -311,9 +300,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
categorySearch.result.loading ||
collectionSearch.result.loading
}
confirmButtonState={
formTransitionState
}
confirmButtonState={formTransitionState}
disabled={menuItemCreateOpts.loading}
onClose={closeModal}
onSubmit={handleSubmit}
@ -357,8 +344,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
menuItemUpdateOpts.loading,
maybe(
() =>
menuItemUpdateOpts.data
.menuItemUpdate.errors
menuItemUpdateOpts.data.menuItemUpdate
.errors
)
);
@ -378,8 +365,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
collections={collections}
errors={maybe(
() =>
menuItemUpdateOpts.data
.menuItemUpdate.errors,
menuItemUpdateOpts.data.menuItemUpdate
.errors,
[]
)}
pages={pages}
@ -391,9 +378,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
categorySearch.result.loading ||
collectionSearch.result.loading
}
confirmButtonState={
formTransitionState
}
confirmButtonState={formTransitionState}
disabled={menuItemUpdateOpts.loading}
onClose={closeModal}
onSubmit={handleSubmit}
@ -414,8 +399,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
)}
</SearchCollections>
)}
</SearchCategories>
)}
</SearchPages>
);
};

2
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -13,7 +13,6 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import { SearchCategories_search_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
import { SearchCollections_search_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/containers/SearchProductTypes/types/SearchProductTypes";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
@ -25,6 +24,7 @@ import {
ProductAttributeValueChoices,
ProductType
} from "@saleor/products/utils/data";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
import { FetchMoreProps, UserError } from "../../../types";

2
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -12,13 +12,13 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import { SearchCategories_search_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
import { SearchCollections_search_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useFormset from "@saleor/hooks/useFormset";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import { FetchMoreProps, ListActions, UserError } from "@saleor/types";
import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";

21
src/products/views/ProductCreate.tsx
View file

@ -6,8 +6,8 @@ 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 SearchCategories from "../../containers/SearchCategories";
import SearchCollections from "../../containers/SearchCollections";
import { decimal, getMutationState, maybe } from "../../misc";
import ProductCreatePage, {
@ -26,16 +26,17 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
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 (
<SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({
loadMore: loadMoreCategories,
search: searchCategory,
result: searchCategoryOpts
}) => (
<SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({
loadMore: loadMoreCollections,
@ -89,9 +90,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
category: formData.category,
chargeTaxes: formData.chargeTaxes,
collections: formData.collections,
descriptionJson: JSON.stringify(
formData.description
),
descriptionJson: JSON.stringify(formData.description),
isPublished: formData.isPublished,
name: formData.name,
productType: formData.productType,
@ -192,8 +191,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
</SearchProductTypes>
)}
</SearchCollections>
)}
</SearchCategories>
);
};
export default ProductUpdate;

34
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -14,8 +14,8 @@ import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import ProductVariantCreateDialog from "@saleor/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog";
import { ProductVariantBulkCreate } from "@saleor/products/types/ProductVariantBulkCreate";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
import SearchCategories from "../../../containers/SearchCategories";
import SearchCollections from "../../../containers/SearchCollections";
import { getMutationState, maybe } from "../../../misc";
import ProductUpdatePage from "../../components/ProductUpdatePage";
@ -55,6 +55,13 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
);
const intl = useIntl();
const shop = useShop();
const {
loadMore: loadMoreCategories,
search: searchCategories,
result: searchCategoriesOpts
} = useCategorySearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const openModal = (action: ProductUrlDialog) =>
navigate(
@ -64,12 +71,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
);
return (
<SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({
loadMore: loadMoreCategories,
search: searchCategories,
result: searchCategoriesOpts
}) => (
<SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({
loadMore: loadMoreCollections,
@ -108,8 +109,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
const handleImageCreate = (data: ProductImageCreate) => {
const imageError = data.productImageCreate.errors.find(
error =>
error.field ===
("image" as keyof ProductImageCreateVariables)
error.field === ("image" as keyof ProductImageCreateVariables)
);
if (imageError) {
notify({
@ -121,8 +121,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
const handleVariantAdd = () =>
navigate(productVariantAddUrl(id));
const handleVariantAdd = () => navigate(productVariantAddUrl(id));
const handleBulkProductVariantCreate = (
data: ProductVariantBulkCreate
@ -201,12 +200,9 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
updateSimpleProduct.opts.called,
updateProduct.opts.loading ||
updateSimpleProduct.opts.loading,
maybe(() => updateProduct.opts.data.productUpdate.errors),
maybe(
() => updateProduct.opts.data.productUpdate.errors
),
maybe(
() =>
updateSimpleProduct.opts.data.productUpdate.errors
() => updateSimpleProduct.opts.data.productUpdate.errors
),
maybe(
() =>
@ -217,9 +213,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
const deleteTransitionState = getMutationState(
deleteProduct.opts.called,
deleteProduct.opts.loading,
maybe(
() => deleteProduct.opts.data.productDelete.errors
)
maybe(() => deleteProduct.opts.data.productDelete.errors)
);
const bulkProductVariantDeleteTransitionState = getMutationState(
@ -412,8 +406,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
</TypedProductDetailsQuery>
)}
</SearchCollections>
)}
</SearchCategories>
);
};
export default ProductUpdate;

0
src/containers/SearchCategories/types/SearchCategories.ts → src/searches/types/SearchCategories.ts
View file

4
src/containers/SearchCategories/index.tsx → src/searches/useCategorySearch.ts
View file

@ -1,7 +1,7 @@
import gql from "graphql-tag";
import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
import { pageInfoFragment } from "@saleor/queries";
import TopLevelSearch from "../TopLevelSearch";
import {
SearchCategories,
SearchCategoriesVariables
@ -24,6 +24,6 @@ export const searchCategories = gql`
}
`;
export default TopLevelSearch<SearchCategories, SearchCategoriesVariables>(
export default makeTopLevelSearch<SearchCategories, SearchCategoriesVariables>(
searchCategories
);