Merge pull request #3443 from mirumee/use-autocomplete-country

Use autocomplete fields in country choice

CHANGELOG.md

@@ -12,6 +12,8 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add alt text to `Product` `thumbnail` and `background_image` of `Collection` and `Category` - #3429 by @fowczarek
 - Improve several payment validations - #3418 by @jxltom
 - Fix decimal value argument in GraphQL = #3457 by @fowczarek
+- Add query batching - #3443 by @dominik-zeglen
+- Use autocomplete fields in country selection - #3443 by @dominik-zeglen
 - Add alt text to categories and collections - #3461 by @dominik-zeglen
 - Use first and last name of a customer or staff member in UI - #3247 by @Bonifacy1, @dominik-zeglen
 - Bump `urllib3` and `elasticsearch` to latest versions - #3460 by @maarcingebala

package.json

@@ -30,9 +30,10 @@
     "apollo-cache-inmemory": "^1.3.11",
     "apollo-client": "^2.4.7",
     "apollo-client-preset": "^1.0.6",
+    "apollo-link": "^1.2.5",
+    "apollo-link-batch-http": "^1.2.5",
     "apollo-link-context": "^1.0.10",
     "apollo-link-error": "^1.1.2",
-    "apollo-link-http": "^1.5.7",
     "apollo-upload-client": "^9.1.0",
     "bootstrap": "4.1.2",
     "classnames": "^2.2.6",

saleor/static/dashboard-next/collections/containers/ProductSearch.tsx

@@ -27,10 +27,7 @@ export class SearchProductsProvider extends React.Component<
   render() {
     const { children } = this.props;
     return (
-      <TypedSearchProductsQuery
-        variables={{ query: this.state.query }}
-        skip={!this.state.query}
-      >
+      <TypedSearchProductsQuery variables={{ query: this.state.query }}>
         {searchOpts => children(this.search, searchOpts)}
       </TypedSearchProductsQuery>
     );

saleor/static/dashboard-next/components/AddressEdit/AddressEdit.tsx

@@ -11,7 +11,7 @@ import { AddressTypeInput } from "../../customers/types";
 import i18n from "../../i18n";
 import { maybe } from "../../misc";
 import FormSpacer from "../FormSpacer";
-import SingleSelectField from "../SingleSelectField";
+import SingleAutocompleteSelectField from "../SingleAutocompleteSelectField";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -149,10 +149,10 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
       <FormSpacer />
       <div className={classes.root}>
         <div>
-          <SingleSelectField
+          <SingleAutocompleteSelectField
             disabled={disabled}
             error={!!errors.country}
-            hint={errors.country}
+            helperText={errors.country}
             label={i18n.t("Country")}
             name="country"
             onChange={onChange}

saleor/static/dashboard-next/components/Debounce.tsx

@@ -17,6 +17,10 @@ export class Debounce<T> extends React.Component<DebounceProps<T>> {
     this.timer = setTimeout(() => debounceFn(...args), time || 200);
   };
 
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
   render() {
     return this.props.children(this.handleDebounce);
   }

saleor/static/dashboard-next/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -122,6 +122,8 @@ export const MultiAutocompleteSelectField = withStyles(styles, {
               inputValue,
               selectedItem,
               toggleMenu,
+              closeMenu,
+              openMenu,
               highlightedIndex
             }) => {
               return (
@@ -133,6 +135,9 @@ export const MultiAutocompleteSelectField = withStyles(styles, {
                         placeholder
                       }),
                       endAdornment: <ArrowDropdownIcon onClick={toggleMenu} />,
+                      id: undefined,
+                      onBlur: closeMenu,
+                      onFocus: openMenu,
                       startAdornment: selectedItem.map(item => (
                         <Chip
                           key={item.value}

saleor/static/dashboard-next/components/Shop/index.tsx

@@ -9,15 +9,11 @@ export const shopContext = React.createContext<ShopContext>(undefined);
 
 export const ShopProvider: React.StatelessComponent<{}> = ({ children }) => (
   <TypedShopInfoQuery>
-    {({ data }) =>
-      data && data.shop !== undefined ? (
-        <shopContext.Provider value={data.shop}>
-          {children}
-        </shopContext.Provider>
-      ) : (
-        children
-      )
-    }
+    {({ data }) => (
+      <shopContext.Provider value={data ? data.shop : undefined}>
+        {children}
+      </shopContext.Provider>
+    )}
   </TypedShopInfoQuery>
 );
 export const Shop = shopContext.Consumer;