Merge pull request #76 from vtex-apps/feature/split-correction-sugges…

…tions-banners Feature/split correction suggestions banners
vtex-apps · Jun 17, 2020 · efc308e · efc308e
2 parents 1f93725 + 22b020b
commit efc308e
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 68 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- `correction`, `suggestions`, and `banners` are now comming from graphql instead of `searchContext`.
+
 ## [1.0.19] - 2020-06-09
 
 ### Removed

diff --git a/react/Banner.js b/react/Banner.js
@@ -1,14 +1,3 @@
-import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
 import Banner from "./components/Banner";
-import { path } from "ramda";
 
-const withBanners = Component => props => {
-  const { searchQuery } = useSearchPage();
-  const banners =
-    searchQuery.banners ||
-    path(["data", "productSearch", "banners"], searchQuery);
-
-  return <Component {...props} banners={banners} />;
-};
-
-export default withBanners(Banner);
+export default Banner;
diff --git a/react/DidYouMean.js b/react/DidYouMean.js
@@ -1,15 +1,3 @@
-import React from "react";
-import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
 import DidYouMean from "./components/DidYouMean";
-import { path } from "ramda";
 
-const withDidYouMeanTerm = Component => () => {
-  const { searchQuery } = useSearchPage();
-  const correction =
-    searchQuery.correction ||
-    path(["data", "productSearch", "correction"], searchQuery);
-
-  return <Component correction={correction} />;
-};
-
-export default withDidYouMeanTerm(DidYouMean);
+export default DidYouMean;
diff --git a/react/Suggestions.js b/react/Suggestions.js
@@ -1,15 +1,3 @@
-import React from "react";
-import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
 import Suggestions from "./components/Suggestions";
-import { path } from "ramda";
 
-const withSuggestion = Component => () => {
-  const { searchQuery } = useSearchPage();
-  const suggestion =
-    searchQuery.suggestion ||
-    path(["data", "productSearch", "suggestion"], searchQuery);
-
-  return <Component suggestion={suggestion} />;
-};
-
-export default withSuggestion(Suggestions);
+export default Suggestions;
diff --git a/react/components/Banner/index.tsx b/react/components/Banner/index.tsx
@@ -1,4 +1,7 @@
 import { useCssHandles } from "vtex.css-handles";
+import bannersQuery from "vtex.store-resources/QueryBanners";
+import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
+import { useQuery } from "react-apollo";
 
 interface ElasticBanner {
   id: string;
@@ -14,12 +17,16 @@ enum HorizotalAlignment {
 }
 
 interface BannerProps {
-  banners: ElasticBanner[];
   area: string;
   blockClass?: string;
   horizontalAlignment?: HorizotalAlignment;
 }
 
+interface SelectedFacet {
+  key: string;
+  value: string;
+}
+
 const getAlignmentClass = (alignment: HorizotalAlignment | undefined) => {
   switch (alignment) {
     case "left":
@@ -32,22 +39,40 @@ const getAlignmentClass = (alignment: HorizotalAlignment | undefined) => {
 };
 
 const Banner = (props: BannerProps) => {
-  const { area, banners, horizontalAlignment } = props;
+  const { area, horizontalAlignment } = props;
+
+  const CSS_HANDLES = ["searchBanner"];
+  const handles = useCssHandles(CSS_HANDLES);
+
+  const {
+    searchQuery: {
+      variables: { fullText, selectedFacets },
+    },
+  } = useSearchPage();
+
+  const { loading, data } = useQuery(bannersQuery, {
+    variables: {
+      fullText,
+      selectedFacets: selectedFacets.filter(
+        (facet: SelectedFacet) => facet.key !== "ft",
+      ),
+    },
+  });
 
-  if (!banners) {
+  if (loading || !data) {
     return null;
   }
 
-  const selectedBanner = banners.find(banner => banner.area === area);
+  const banners = data?.banners?.banners || [];
+
+  const selectedBanner = banners.find(
+    (banner: ElasticBanner) => banner.area === area,
+  );
 
   if (!selectedBanner) {
     return null;
   }
 
-  const CSS_HANDLES = ["searchBanner"];
-
-  const handles = useCssHandles(CSS_HANDLES);
-
   const className = `flex ${getAlignmentClass(horizontalAlignment)} ${
     handles.searchBanner
   }`;

diff --git a/react/components/DidYouMean/index.tsx b/react/components/DidYouMean/index.tsx
@@ -1,30 +1,45 @@
 import { Link } from "vtex.render-runtime";
 import { useCssHandles } from "vtex.css-handles";
+import correctionQuery from "vtex.store-resources/QueryCorrection";
+import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
+import { useQuery } from "react-apollo";
 import { FormattedMessage } from "react-intl";
 
-interface DidYouMeanProps {
-  correction: {
-    correction: boolean;
-    misspelled: boolean;
-    text: string;
-    highlighted: string;
-  };
+interface Correction {
+  correction: boolean;
+  misspelled: boolean;
+  text: string;
+  highlighted: string;
 }
 
 const CSS_HANDLES = ["didYouMeanPrefix", "didYouMeanTerm"];
 
-const DidYouMean = (props: DidYouMeanProps) => {
+const DidYouMean = () => {
   const handles = useCssHandles(CSS_HANDLES);
 
-  return props.correction && props.correction.correction ? (
+  const {
+    searchQuery: {
+      variables: { fullText },
+    },
+  } = useSearchPage();
+
+  const { loading, data } = useQuery(correctionQuery, {
+    variables: {
+      fullText,
+    },
+  });
+
+  const correction: Correction = data?.correction?.correction;
+
+  return !loading && correction?.correction ? (
     <p>
       <span className={`${handles.didYouMeanPrefix} c-muted-1`}>
         <FormattedMessage id={"store/didYouMean"} />
         {": "}
       </span>
       <span className={handles.didYouMeanTerm}>
-        <Link className="link" to={`/${props.correction.text}?map=ft`}>
-          {props.correction.text}
+        <Link className="link" to={`/${correction.text}?map=ft`}>
+          {correction.text}
         </Link>
       </span>
     </p>

diff --git a/react/components/Suggestions/index.tsx b/react/components/Suggestions/index.tsx
@@ -2,20 +2,33 @@ import React from "react";
 import { Link } from "vtex.render-runtime";
 import styles from "./styles.css";
 import { FormattedMessage } from "react-intl";
+import searchSuggestionsQuery from "vtex.store-resources/QuerySearchSuggestions";
+import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
+import { useQuery } from "react-apollo";
 
-interface SuggestionsProps {
-  suggestion: {
-    searches: {
-      term: string;
-      count: number;
-    }[];
-  };
+interface Suggestion {
+  searches: {
+    term: string;
+    count: number;
+  }[];
 }
 
-const Suggestions = (props: SuggestionsProps) => {
-  const { suggestion } = props;
+const Suggestions = () => {
+  const {
+    searchQuery: {
+      variables: { fullText },
+    },
+  } = useSearchPage();
 
-  if (!suggestion || suggestion.searches.length === 0) {
+  const { loading, data } = useQuery(searchSuggestionsQuery, {
+    variables: {
+      fullText,
+    },
+  });
+
+  const suggestion: Suggestion | undefined = data?.searchSuggestions;
+
+  if (loading || !suggestion || suggestion.searches.length === 0) {
     return null;
   }
 

diff --git a/react/package.json b/react/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.19",
   "private": true,
   "dependencies": {
+    "@apollo/react-hooks": "^3.1.5",
     "@types/jest": "24.0.15",
     "@types/node": "12.6.8",
     "@types/pubsub-js": "^1.5.18",

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -21,6 +21,24 @@
     "@types/node" "^10.1.0"
     long "^4.0.0"
 
+"@apollo/react-common@^3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@apollo/react-common/-/react-common-3.1.4.tgz#ec13c985be23ea8e799c9ea18e696eccc97be345"
+  integrity sha512-X5Kyro73bthWSCBJUC5XYQqMnG0dLWuDZmVkzog9dynovhfiVCV4kPSdgSIkqnb++cwCzOVuQ4rDKVwo2XRzQA==
+  dependencies:
+    ts-invariant "^0.4.4"
+    tslib "^1.10.0"
+
+"@apollo/react-hooks@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-hooks/-/react-hooks-3.1.5.tgz#7e710be52461255ae7fc0b3b9c2ece64299c10e6"
+  integrity sha512-y0CJ393DLxIIkksRup4nt+vSjxalbZBXnnXxYbviq/woj+zKa431zy0yT4LqyRKpFy9ahMIwxBnBwfwIoupqLQ==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@wry/equality" "^0.1.9"
+    ts-invariant "^0.4.4"
+    tslib "^1.10.0"
+
 "@apollographql/apollo-tools@^0.3.3":
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/@apollographql/apollo-tools/-/apollo-tools-0.3.7.tgz#3bc9c35b9fff65febd4ddc0c1fc04677693a3d40"
@@ -5999,7 +6017,7 @@ triple-beam@^1.2.0, triple-beam@^1.3.0:
   resolved "https://registry.yarnpkg.com/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9"
   integrity sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==
 
-ts-invariant@^0.4.0:
+ts-invariant@^0.4.0, ts-invariant@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
   integrity sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==