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 createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import useProductSearch from "@saleor/searches/useProductSearch";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config"; import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts";
import { getMutationState, maybe } from "../../misc"; import { getMutationState, maybe } from "../../misc";
import { productUrl } from "../../products/urls"; import { productUrl } from "../../products/urls";
import { CollectionInput } from "../../types/globalTypes"; import { CollectionInput } from "../../types/globalTypes";
@ -50,6 +50,9 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
); );
const paginate = usePaginator(); const paginate = usePaginator();
const intl = useIntl(); const intl = useIntl();
const { search, result } = useProductSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -284,29 +287,25 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
toggle={toggle} toggle={toggle}
toggleAll={toggleAll} toggleAll={toggleAll}
/> />
<SearchProducts variables={DEFAULT_INITIAL_SEARCH_DATA}> <AssignProductDialog
{({ search, result }) => ( confirmButtonState={assignTransitionState}
<AssignProductDialog open={params.action === "assign"}
confirmButtonState={assignTransitionState} onFetch={search}
open={params.action === "assign"} loading={result.loading}
onFetch={search} onClose={closeModal}
loading={result.loading} onSubmit={products =>
onClose={closeModal} assignProduct.mutate({
onSubmit={products => ...paginationState,
assignProduct.mutate({ collectionId: id,
...paginationState, productIds: products.map(product => product.id)
collectionId: id, })
productIds: products.map(product => product.id) }
}) products={maybe(() =>
} result.data.search.edges
products={maybe(() => .map(edge => edge.node)
result.data.search.edges .filter(suggestedProduct => suggestedProduct.id)
.map(edge => edge.node)
.filter(suggestedProduct => suggestedProduct.id)
)}
/>
)} )}
</SearchProducts> />
<ActionDialog <ActionDialog
confirmButtonState={removeTransitionState} confirmButtonState={removeTransitionState}
onClose={closeModal} 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 useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import { maybe } from "@saleor/misc"; 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"; import Checkbox from "../Checkbox";
export interface FormData { 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 { commonMessages, sectionNames } from "@saleor/intl";
import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls"; import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls"; import { collectionUrl } from "../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config"; import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls"; import { productUrl } from "../../products/urls";
import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes"; import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
@ -78,6 +78,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
} = useCollectionSearch({ } = useCollectionSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA variables: DEFAULT_INITIAL_SEARCH_DATA
}); });
const {
search: searchProducts,
result: searchProductsOpts
} = useProductSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const paginationState = createPaginationState(PAGINATE_BY, params); const paginationState = createPaginationState(PAGINATE_BY, params);
const changeTab = (tab: SaleDetailsPageTab) => { const changeTab = (tab: SaleDetailsPageTab) => {
@ -353,42 +359,33 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
toggle={toggle} toggle={toggle}
toggleAll={toggleAll} toggleAll={toggleAll}
/> />
<SearchProducts <AssignProductDialog
variables={DEFAULT_INITIAL_SEARCH_DATA} confirmButtonState={assignTransitionState}
> open={params.action === "assign-product"}
{({ onFetch={searchProducts}
search: searchProducts, loading={searchProductsOpts.loading}
result: searchProductsOpts onClose={closeModal}
}) => ( onSubmit={products =>
<AssignProductDialog saleCataloguesAdd({
confirmButtonState={assignTransitionState} variables: {
open={params.action === "assign-product"} ...paginationState,
onFetch={searchProducts} id,
loading={searchProductsOpts.loading} input: {
onClose={closeModal} products: products.map(
onSubmit={products => product => product.id
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
) )
)} }
/> }
})
}
products={maybe(() =>
searchProductsOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedProduct => suggestedProduct.id
)
)} )}
</SearchProducts> />
<AssignCategoriesDialog <AssignCategoriesDialog
categories={maybe(() => categories={maybe(() =>
searchCategoriesOpts.data.search.edges 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 { commonMessages, sectionNames } from "@saleor/intl";
import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls"; import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls"; import { collectionUrl } from "../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config"; import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls"; import { productUrl } from "../../products/urls";
import { import {
@ -80,6 +80,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
} = useCollectionSearch({ } = useCollectionSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA variables: DEFAULT_INITIAL_SEARCH_DATA
}); });
const {
search: searchProducts,
result: searchProductsOpts
} = useProductSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const paginationState = createPaginationState(PAGINATE_BY, params); const paginationState = createPaginationState(PAGINATE_BY, params);
const changeTab = (tab: VoucherDetailsPageTab) => { const changeTab = (tab: VoucherDetailsPageTab) => {
@ -509,42 +515,33 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
[] []
)} )}
/> />
<SearchProducts <AssignProductDialog
variables={DEFAULT_INITIAL_SEARCH_DATA} confirmButtonState={assignTransitionState}
> open={params.action === "assign-product"}
{({ onFetch={searchProducts}
search: searchProducts, loading={searchProductsOpts.loading}
result: searchProductsOpts onClose={closeModal}
}) => ( onSubmit={products =>
<AssignProductDialog voucherCataloguesAdd({
confirmButtonState={assignTransitionState} variables: {
open={params.action === "assign-product"} ...paginationState,
onFetch={searchProducts} id,
loading={searchProductsOpts.loading} input: {
onClose={closeModal} products: products.map(
onSubmit={products => product => product.id
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
) )
)} }
/> }
})
}
products={maybe(() =>
searchProductsOpts.data.search.edges
.map(edge => edge.node)
.filter(
suggestedProduct => suggestedProduct.id
)
)} )}
</SearchProducts> />
<ActionDialog <ActionDialog
open={ open={
params.action === "unassign-category" && 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 gql from "graphql-tag";
import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
import { pageInfoFragment } from "@saleor/queries"; import { pageInfoFragment } from "@saleor/queries";
import TopLevelSearch from "../TopLevelSearch";
import { import {
SearchProducts, SearchProducts,
SearchProductsVariables SearchProductsVariables
@ -27,6 +27,6 @@ export const searchProducts = gql`
} }
`; `;
export default TopLevelSearch<SearchProducts, SearchProductsVariables>( export default makeTopLevelSearch<SearchProducts, SearchProductsVariables>(
searchProducts searchProducts
); );