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

Use product search hook

Browse source
This commit is contained in:
dominik-zeglen 2019-11-19 17:50:40 +01:00
parent bd7130d196
commit fff2a8caea
6 changed files with 89 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/collections/views/CollectionDetails.tsx
View file

@ -13,8 +13,8 @@ import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl";
import useProductSearch from "@saleor/searches/useProductSearch";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts";
import { getMutationState, maybe } from "../../misc";
import { productUrl } from "../../products/urls";
import { CollectionInput } from "../../types/globalTypes";
@ -50,6 +50,9 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
);
const paginate = usePaginator();
const intl = useIntl();
const { search, result } = useProductSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const closeModal = () =>
navigate(
@ -284,29 +287,25 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
toggle={toggle}
toggleAll={toggleAll}
/>
<SearchProducts variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({ search, result }) => (
<AssignProductDialog
confirmButtonState={assignTransitionState}
open={params.action === "assign"}
onFetch={search}
loading={result.loading}
onClose={closeModal}
onSubmit={products =>
assignProduct.mutate({
...paginationState,
collectionId: id,
productIds: products.map(product => product.id)
})
}
products={maybe(() =>
result.data.search.edges
.map(edge => edge.node)
.filter(suggestedProduct => suggestedProduct.id)
)}
/>
<AssignProductDialog
confirmButtonState={assignTransitionState}
open={params.action === "assign"}
onFetch={search}
loading={result.loading}
onClose={closeModal}
onSubmit={products =>
assignProduct.mutate({
...paginationState,
collectionId: id,
productIds: products.map(product => product.id)
})
}
products={maybe(() =>
result.data.search.edges
.map(edge => edge.node)
.filter(suggestedProduct => suggestedProduct.id)
)}
</SearchProducts>
/>
<ActionDialog
confirmButtonState={removeTransitionState}
onClose={closeModal}

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

@ -21,7 +21,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { SearchProducts_search_edges_node } from "../../containers/SearchProducts/types/SearchProducts";
import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
import Checkbox from "../Checkbox";
export interface FormData {

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

@ -18,10 +18,10 @@ import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls";
import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
@ -78,6 +78,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
} = useCollectionSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const {
search: searchProducts,
result: searchProductsOpts
} = useProductSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const paginationState = createPaginationState(PAGINATE_BY, params);
const changeTab = (tab: SaleDetailsPageTab) => {
@ -353,42 +359,33 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
toggle={toggle}
toggleAll={toggleAll}
/>
<SearchProducts
variables={DEFAULT_INITIAL_SEARCH_DATA}
>
{({
search: searchProducts,
result: searchProductsOpts
}) => (
<AssignProductDialog
confirmButtonState={assignTransitionState}
open={params.action === "assign-product"}
onFetch={searchProducts}
loading={searchProductsOpts.loading}
onClose={closeModal}
onSubmit={products =>
saleCataloguesAdd({
variables: {
...paginationState,
id,
input: {
products: products.map(
product => product.id
)
}
}
})
}
products={maybe(() =>
searchProductsOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedProduct => suggestedProduct.id
<AssignProductDialog
confirmButtonState={assignTransitionState}
open={params.action === "assign-product"}
onFetch={searchProducts}
loading={searchProductsOpts.loading}
onClose={closeModal}
onSubmit={products =>
saleCataloguesAdd({
variables: {
...paginationState,
id,
input: {
products: products.map(
product => product.id
)
)}
/>
}
}
})
}
products={maybe(() =>
searchProductsOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedProduct => suggestedProduct.id
)
)}
</SearchProducts>
/>
<AssignCategoriesDialog
categories={maybe(() =>
searchCategoriesOpts.data.search.edges

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

@ -18,10 +18,10 @@ import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls";
import {
@ -80,6 +80,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
} = useCollectionSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const {
search: searchProducts,
result: searchProductsOpts
} = useProductSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const paginationState = createPaginationState(PAGINATE_BY, params);
const changeTab = (tab: VoucherDetailsPageTab) => {
@ -509,42 +515,33 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
[]
)}
/>
<SearchProducts
variables={DEFAULT_INITIAL_SEARCH_DATA}
>
{({
search: searchProducts,
result: searchProductsOpts
}) => (
<AssignProductDialog
confirmButtonState={assignTransitionState}
open={params.action === "assign-product"}
onFetch={searchProducts}
loading={searchProductsOpts.loading}
onClose={closeModal}
onSubmit={products =>
voucherCataloguesAdd({
variables: {
...paginationState,
id,
input: {
products: products.map(
product => product.id
)
}
}
})
}
products={maybe(() =>
searchProductsOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedProduct => suggestedProduct.id
<AssignProductDialog
confirmButtonState={assignTransitionState}
open={params.action === "assign-product"}
onFetch={searchProducts}
loading={searchProductsOpts.loading}
onClose={closeModal}
onSubmit={products =>
voucherCataloguesAdd({
variables: {
...paginationState,
id,
input: {
products: products.map(
product => product.id
)
)}
/>
}
}
})
}
products={maybe(() =>
searchProductsOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedProduct => suggestedProduct.id
)
)}
</SearchProducts>
/>
<ActionDialog
open={
params.action === "unassign-category" &&

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

4
src/containers/SearchProducts/index.tsx → src/searches/useProductSearch.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 {
SearchProducts,
SearchProductsVariables
@ -27,6 +27,6 @@ export const searchProducts = gql`
}
`;
export default TopLevelSearch<SearchProducts, SearchProductsVariables>(
export default makeTopLevelSearch<SearchProducts, SearchProductsVariables>(
searchProducts
);