From 409255960ebb67ac9f1c88de963225cd74da81b0 Mon Sep 17 00:00:00 2001 From: AlicjaSzu Date: Thu, 14 May 2020 17:17:36 +0200 Subject: [PATCH] remove useSearchQueryAttributes hook --- .../ProductVariantPicker.tsx | 3 +- .../ProductVariantPicker/stories.tsx | 1 + .../organisms/ProductVariantPicker/test.tsx | 6 +++- .../organisms/ProductVariantPicker/types.ts | 1 + src/@next/hooks/index.ts | 1 - src/@next/hooks/useSearchQueryAttributes.tsx | 30 ------------------- src/components/ProductDescription/index.tsx | 2 ++ src/views/Product/Page.tsx | 11 ++++--- src/views/Product/View.tsx | 29 +++++++++++++++--- 9 files changed, 40 insertions(+), 44 deletions(-) delete mode 100644 src/@next/hooks/useSearchQueryAttributes.tsx diff --git a/src/@next/components/organisms/ProductVariantPicker/ProductVariantPicker.tsx b/src/@next/components/organisms/ProductVariantPicker/ProductVariantPicker.tsx index 11213c71cb..16015ca21b 100755 --- a/src/@next/components/organisms/ProductVariantPicker/ProductVariantPicker.tsx +++ b/src/@next/components/organisms/ProductVariantPicker/ProductVariantPicker.tsx @@ -3,7 +3,6 @@ import React, { useEffect } from "react"; import { useProductVariantsAttributes, useProductVariantsAttributesValuesSelection, - useSearchQueryAttributes, } from "@hooks"; import { ProductVariantAttributeSelect } from "./ProductVariantAttributeSelect"; import * as S from "./styles"; @@ -15,6 +14,7 @@ export const ProductVariantPicker: React.FC = ({ onChange, selectSidebar = false, selectSidebarTarget, + updateUrlWithAttributes, }: IProps) => { const productVariantsAttributes = useProductVariantsAttributes( productVariants @@ -23,7 +23,6 @@ export const ProductVariantPicker: React.FC = ({ productVariantsAttributesSelectedValues, selectProductVariantsAttributesValue, ] = useProductVariantsAttributesValuesSelection(productVariantsAttributes); - const { updateUrlWithAttributes } = useSearchQueryAttributes(); useEffect(() => { const selectedVariant = productVariants.find(productVariant => { diff --git a/src/@next/components/organisms/ProductVariantPicker/stories.tsx b/src/@next/components/organisms/ProductVariantPicker/stories.tsx index 9f82393e02..8616a0069b 100644 --- a/src/@next/components/organisms/ProductVariantPicker/stories.tsx +++ b/src/@next/components/organisms/ProductVariantPicker/stories.tsx @@ -26,6 +26,7 @@ const PROPS = { onChange: action("onChange"), productVariants: PRODUCT_VARIANTS, queryAttributes: {}, + updateUrlWithAttributes: action("update url params"), }; storiesOf("@components/organisms/ProductVariantPicker", module) diff --git a/src/@next/components/organisms/ProductVariantPicker/test.tsx b/src/@next/components/organisms/ProductVariantPicker/test.tsx index 59753ace24..ea1657cb04 100644 --- a/src/@next/components/organisms/ProductVariantPicker/test.tsx +++ b/src/@next/components/organisms/ProductVariantPicker/test.tsx @@ -16,7 +16,11 @@ if (!portalRoot) { document.body.appendChild(portalRoot); } -const PROPS = { productVariants, queryAttributes: {} }; +const PROPS = { + productVariants, + queryAttributes: {}, + updateUrlWithAttributes: jest.fn(), +}; describe("", () => { it("exists", () => { diff --git a/src/@next/components/organisms/ProductVariantPicker/types.ts b/src/@next/components/organisms/ProductVariantPicker/types.ts index f8138e5334..954455e546 100755 --- a/src/@next/components/organisms/ProductVariantPicker/types.ts +++ b/src/@next/components/organisms/ProductVariantPicker/types.ts @@ -10,4 +10,5 @@ export interface IProps { selectSidebar?: boolean; selectSidebarTarget?: HTMLElement | null; queryAttributes: Record; + updateUrlWithAttributes: (slug: string, value: string) => void; } diff --git a/src/@next/hooks/index.ts b/src/@next/hooks/index.ts index 5ea0f5bf56..99df316b6c 100644 --- a/src/@next/hooks/index.ts +++ b/src/@next/hooks/index.ts @@ -7,4 +7,3 @@ export * from "./useProductVariantsAttributesValuesSelection"; export * from "./useSelectableProductVariantsAttributeValues"; export * from "./useCheckoutStepState"; export * from "./useCheckoutStepFromPath"; -export * from "./useSearchQueryAttributes"; diff --git a/src/@next/hooks/useSearchQueryAttributes.tsx b/src/@next/hooks/useSearchQueryAttributes.tsx deleted file mode 100644 index 464a337f7f..0000000000 --- a/src/@next/hooks/useSearchQueryAttributes.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import queryString from "query-string"; -import { useHistory } from "react-router-dom"; - -export const useSearchQueryAttributes = () => { - const history = useHistory(); - const search = history.location.search; - const searchQueryAttributes = queryString.parse(search); - - const updateUrlWithAttributes = (slug: string, value: string) => { - history.replace( - queryString.stringifyUrl( - { - query: { [slug]: value }, - url: `${history.location.pathname}${history.location.search}`, - }, - { skipEmptyString: true } - ) - ); - }; - - const clearUrlAttribute = (slug: string) => updateUrlWithAttributes(slug, ""); - const clearUrl = () => history.replace(history.location.pathname); - - return { - clearUrl, - clearUrlAttribute, - searchQueryAttributes, - updateUrlWithAttributes, - }; -}; diff --git a/src/components/ProductDescription/index.tsx b/src/components/ProductDescription/index.tsx index 9f77e0b7b2..fddde3eaa7 100644 --- a/src/components/ProductDescription/index.tsx +++ b/src/components/ProductDescription/index.tsx @@ -25,6 +25,7 @@ interface ProductDescriptionProps { queryAttributes: Record; addToCart(varinatId: string, quantity?: number): void; setVariantId(variantId: string); + updateUrlWithAttributes(slug: string, value: string): void; } interface ProductDescriptionState { @@ -149,6 +150,7 @@ class ProductDescription extends React.Component< onChange={this.onVariantPickerChange} selectSidebar={true} queryAttributes={this.props.queryAttributes} + updateUrlWithAttributes={this.props.updateUrlWithAttributes} />
diff --git a/src/views/Product/Page.tsx b/src/views/Product/Page.tsx index 6c3b7025b9..419a935cb9 100644 --- a/src/views/Product/Page.tsx +++ b/src/views/Product/Page.tsx @@ -25,12 +25,10 @@ const populateBreadcrumbs = product => [ }, ]; -const Page: React.FC }> = ({ - add, - product, - items, - queryAttributes, -}) => { +const Page: React.FC; + updateUrlWithAttributes: (slug: string, value: string) => void; +}> = ({ add, product, items, queryAttributes, updateUrlWithAttributes }) => { const productGallery: React.RefObject = React.useRef(); const [variantId, setVariantId] = React.useState(""); @@ -60,6 +58,7 @@ const Page: React.FC }> = ({ queryAttributes={queryAttributes} addToCart={add} setVariantId={setVariantId} + updateUrlWithAttributes={updateUrlWithAttributes} /> ); diff --git a/src/views/Product/View.tsx b/src/views/Product/View.tsx index ff1466daa1..ca4dd95b17 100644 --- a/src/views/Product/View.tsx +++ b/src/views/Product/View.tsx @@ -1,10 +1,11 @@ import "./scss/index.scss"; import { isEmpty } from "lodash"; +import queryString from "query-string"; import React, { useEffect, useState } from "react"; import { RouteComponentProps } from "react-router"; +import { useHistory } from "react-router-dom"; -import { useSearchQueryAttributes } from "@hooks"; import { ProductDetails_product } from "@sdk/queries/types/ProductDetails"; import { useCart, useProductDetails } from "@sdk/react"; @@ -50,7 +51,21 @@ const extractMeta = (product: ProductDetails_product) => ({ const PageWithQueryAttributes: React.FC = props => { const { product } = props; - const { clearUrl, searchQueryAttributes } = useSearchQueryAttributes(); + const history = useHistory(); + const search = history.location.search; + const searchQueryAttributes = queryString.parse(search); + + const updateUrlWithAttributes = (slug: string, value: string) => { + history.replace( + queryString.stringifyUrl( + { + query: { [slug]: value }, + url: `${history.location.pathname}${history.location.search}`, + }, + { skipEmptyString: true } + ) + ); + }; const [queryAttributes, setQueryAttributes] = useState({}); useEffect(() => { @@ -85,10 +100,16 @@ const PageWithQueryAttributes: React.FC = props => { }, [product.variants.length]); useEffect(() => { - clearUrl(); + history.replace(history.location.pathname); }, [queryAttributes]); - return ; + return ( + + ); }; const View: React.FC> = ({ match }) => {