remove useSearchQueryAttributes hook

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<IProps> = ({
   onChange,
   selectSidebar = false,
   selectSidebarTarget,
+  updateUrlWithAttributes,
 }: IProps) => {
   const productVariantsAttributes = useProductVariantsAttributes(
     productVariants
@@ -23,7 +23,6 @@ export const ProductVariantPicker: React.FC<IProps> = ({
     productVariantsAttributesSelectedValues,
     selectProductVariantsAttributesValue,
   ] = useProductVariantsAttributesValuesSelection(productVariantsAttributes);
-  const { updateUrlWithAttributes } = useSearchQueryAttributes();
 
   useEffect(() => {
     const selectedVariant = productVariants.find(productVariant => {

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)

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("<ProductVariantPicker />", () => {
   it("exists", () => {

src/@next/components/organisms/ProductVariantPicker/types.ts

@@ -10,4 +10,5 @@ export interface IProps {
   selectSidebar?: boolean;
   selectSidebarTarget?: HTMLElement | null;
   queryAttributes: Record<string, string>;
+  updateUrlWithAttributes: (slug: string, value: string) => void;
 }

src/@next/hooks/index.ts

@@ -7,4 +7,3 @@ export * from "./useProductVariantsAttributesValuesSelection";
 export * from "./useSelectableProductVariantsAttributeValues";
 export * from "./useCheckoutStepState";
 export * from "./useCheckoutStepFromPath";
-export * from "./useSearchQueryAttributes";

src/components/ProductDescription/index.tsx

@@ -25,6 +25,7 @@ interface ProductDescriptionProps {
   queryAttributes: Record<string, string>;
   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}
           />
         </div>
         <div className="product-description__quantity-input">

src/views/Product/Page.tsx

@@ -25,12 +25,10 @@ const populateBreadcrumbs = product => [
   },
 ];
 
-const Page: React.FC<IProps & { queryAttributes: Record<string, string> }> = ({
-  add,
-  product,
-  items,
-  queryAttributes,
-}) => {
+const Page: React.FC<IProps & {
+  queryAttributes: Record<string, string>;
+  updateUrlWithAttributes: (slug: string, value: string) => void;
+}> = ({ add, product, items, queryAttributes, updateUrlWithAttributes }) => {
   const productGallery: React.RefObject<HTMLDivElement> = React.useRef();
 
   const [variantId, setVariantId] = React.useState("");
@@ -60,6 +58,7 @@ const Page: React.FC<IProps & { queryAttributes: Record<string, string> }> = ({
       queryAttributes={queryAttributes}
       addToCart={add}
       setVariantId={setVariantId}
+      updateUrlWithAttributes={updateUrlWithAttributes}
     />
   );
 

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<IProps> = 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<IProps> = props => {
   }, [product.variants.length]);
 
   useEffect(() => {
-    clearUrl();
+    history.replace(history.location.pathname);
   }, [queryAttributes]);
 
-  return <Page {...props} queryAttributes={queryAttributes} />;
+  return (
+    <Page
+      {...props}
+      queryAttributes={queryAttributes}
+      updateUrlWithAttributes={updateUrlWithAttributes}
+    />
+  );
 };
 
 const View: React.FC<RouteComponentProps<{ id: string }>> = ({ match }) => {