Debounce order search

src/components/Navigator/modes/index.ts

@@ -1,17 +1,23 @@
 import { IntlShape } from "react-intl";
 
+import {
+  CheckIfOrderExists,
+  CheckIfOrderExistsVariables
+} from "../queries/types/CheckIfOrderExists";
 import { QuickSearchAction, QuickSearchMode } from "../types";
 import getDefaultModeActions from "./default";
 import getOrdersModeActions from "./orders";
+import { ActionQueries } from "./types";
 
 function getModeActions(
   mode: QuickSearchMode,
   query: string,
-  intl: IntlShape
+  intl: IntlShape,
+  queries: ActionQueries
 ): QuickSearchAction[] {
   switch (mode) {
     case "orders":
-      return getOrdersModeActions(query, intl);
+      return getOrdersModeActions(query, intl, queries.order);
     default:
       return getDefaultModeActions(query, intl);
   }

src/components/Navigator/modes/orders.ts

@@ -1,14 +1,27 @@
 import { IntlShape } from "react-intl";
 
+import { maybe } from "@saleor/misc";
 import { orderUrl } from "@saleor/orders/urls";
+import { CheckIfOrderExists_order } from "../queries/types/CheckIfOrderExists";
 import { QuickSearchAction } from "../types";
 import messages from "./messages";
 
+export function isQueryValidOrderNumber(query: string): boolean {
+  return query === parseInt(query, 0).toString();
+}
+
+export function getGqlOrderId(orderNumber: string): string {
+  return btoa(`Order:${orderNumber}`);
+}
+
 function getOrdersModeActions(
   query: string,
-  intl: IntlShape
+  intl: IntlShape,
+  order: CheckIfOrderExists_order
 ): QuickSearchAction[] {
-  if (query === parseInt(query, 0).toString()) {
+  const gqlId = getGqlOrderId(query);
+
+  if (isQueryValidOrderNumber(query) && maybe(() => order.id === gqlId)) {
     return [
       {
         label: intl.formatMessage(messages.goToOrder, {
@@ -16,7 +29,7 @@ function getOrdersModeActions(
         }),
         score: 1,
         type: "action",
-        url: orderUrl(btoa(`Order:${query}`))
+        url: orderUrl(gqlId)
       }
     ];
   }

src/components/Navigator/modes/types.ts

@@ -0,0 +1,5 @@
+import { CheckIfOrderExists_order } from "../queries/types/CheckIfOrderExists";
+
+export interface ActionQueries {
+  order: CheckIfOrderExists_order;
+}

src/components/Navigator/queries/types/CheckIfOrderExists.ts

@@ -0,0 +1,23 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { OrderStatus } from "./../../../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: CheckIfOrderExists
+// ====================================================
+
+export interface CheckIfOrderExists_order {
+  __typename: "Order";
+  id: string;
+  status: OrderStatus;
+}
+
+export interface CheckIfOrderExists {
+  order: CheckIfOrderExists_order | null;
+}
+
+export interface CheckIfOrderExistsVariables {
+  id: string;
+}

src/components/Navigator/queries/useCheckIfOrderExists.ts

@@ -0,0 +1,41 @@
+import gql from "graphql-tag";
+import { useState } from "react";
+
+import makeQuery, { UseQueryResult } from "@saleor/hooks/makeQuery";
+import useDebounce from "@saleor/hooks/useDebounce";
+import {
+  CheckIfOrderExists,
+  CheckIfOrderExistsVariables
+} from "./types/CheckIfOrderExists";
+
+const checkIfOrderExists = gql`
+  query CheckIfOrderExists($id: ID!) {
+    order(id: $id) {
+      id
+      status
+    }
+  }
+`;
+
+const useCheckIfOrderExistsQuery = makeQuery<
+  CheckIfOrderExists,
+  CheckIfOrderExistsVariables
+>(checkIfOrderExists);
+
+type UseCheckIfOrderExists = [
+  UseQueryResult<CheckIfOrderExists, CheckIfOrderExistsVariables>,
+  (query: string) => void
+];
+function useCheckIfOrderExists(): UseCheckIfOrderExists {
+  const [id, setId] = useState("");
+  const setIdDebounced = useDebounce(setId);
+  const result = useCheckIfOrderExistsQuery({
+    skip: id === "",
+    variables: {
+      id
+    }
+  });
+
+  return [result, setIdDebounced];
+}
+export default useCheckIfOrderExists;

src/components/Navigator/useQuickSearch.ts

@@ -3,7 +3,10 @@ import { useIntl } from "react-intl";
 
 import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
+import { maybe } from "@saleor/misc";
 import getModeActions from "./modes";
+import { getGqlOrderId, isQueryValidOrderNumber } from "./modes/orders";
+import useCheckIfOrderExists from "./queries/useCheckIfOrderExists";
 import { QuickSearchAction, QuickSearchMode } from "./types";
 
 type UseQuickSearch = [
@@ -19,6 +22,7 @@ function useQuickSearch(
   const [query, setQuery] = useState("");
   const [mode, setMode] = useState<QuickSearchMode>("default");
   const intl = useIntl();
+  const [{ data: orderData }, getOrderData] = useCheckIfOrderExists();
 
   useModalDialogOpen(open, {
     onClose: () => {
@@ -60,11 +64,21 @@ function useQuickSearch(
           setQuery(value);
       }
     } else {
+      if (mode === "orders" && isQueryValidOrderNumber(value)) {
+        getOrderData(getGqlOrderId(value));
+      }
       setQuery(value);
     }
   };
 
-  return [query, mode, change, getModeActions(mode, query, intl)];
+  return [
+    query,
+    mode,
+    change,
+    getModeActions(mode, query, intl, {
+      order: maybe(() => orderData.order)
+    })
+  ];
 }
 
 export default useQuickSearch;

src/hooks/useDebounce.ts

@@ -6,12 +6,13 @@ function useDebounce<T>(
   time = 200
 ): UseDebounceFn<T> {
   const timer = useRef(null);
-  useEffect(() => () => clearTimeout(timer.current));
+  useEffect(() => () => clearTimeout(timer.current), []);
 
   return (...args: T[]) => {
     if (timer.current) {
       clearTimeout(timer.current);
     }
+
     timer.current = setTimeout(() => debounceFn(...args), time);
   };
 }

src/plugins/types/PluginUpdate.ts

@@ -2,10 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import {
-  PluginUpdateInput,
-  ConfigurationTypeFieldEnum
-} from "./../../types/globalTypes";
+import { PluginUpdateInput, ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: PluginUpdate
@@ -32,9 +29,7 @@ export interface PluginUpdate_pluginUpdate_plugin {
   name: string;
   description: string;
   active: boolean;
-  configuration:
-    | (PluginUpdate_pluginUpdate_plugin_configuration | null)[]
-    | null;
+  configuration: (PluginUpdate_pluginUpdate_plugin_configuration | null)[] | null;
 }
 
 export interface PluginUpdate_pluginUpdate {

src/searches/types/SearchProductTypes.ts

@@ -22,9 +22,7 @@ export interface SearchProductTypes_search_edges_node_productAttributes {
   slug: string | null;
   name: string | null;
   valueRequired: boolean;
-  values:
-    | (SearchProductTypes_search_edges_node_productAttributes_values | null)[]
-    | null;
+  values: (SearchProductTypes_search_edges_node_productAttributes_values | null)[] | null;
 }
 
 export interface SearchProductTypes_search_edges_node {
@@ -32,9 +30,7 @@ export interface SearchProductTypes_search_edges_node {
   id: string;
   name: string;
   hasVariants: boolean;
-  productAttributes:
-    | (SearchProductTypes_search_edges_node_productAttributes | null)[]
-    | null;
+  productAttributes: (SearchProductTypes_search_edges_node_productAttributes | null)[] | null;
 }
 
 export interface SearchProductTypes_search_edges {

src/siteSettings/types/ShopSettingsUpdate.ts

@@ -2,12 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import {
-  SiteDomainInput,
-  ShopSettingsInput,
-  AddressInput,
-  AuthorizationKeyType
-} from "./../../types/globalTypes";
+import { SiteDomainInput, ShopSettingsInput, AddressInput, AuthorizationKeyType } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ShopSettingsUpdate

src/types/globalTypes.ts

@@ -8,41 +8,41 @@
 
 export enum AddressTypeEnum {
   BILLING = "BILLING",
-  SHIPPING = "SHIPPING"
+  SHIPPING = "SHIPPING",
 }
 
 export enum AttributeInputTypeEnum {
   DROPDOWN = "DROPDOWN",
-  MULTISELECT = "MULTISELECT"
+  MULTISELECT = "MULTISELECT",
 }
 
 export enum AttributeTypeEnum {
   PRODUCT = "PRODUCT",
-  VARIANT = "VARIANT"
+  VARIANT = "VARIANT",
 }
 
 export enum AttributeValueType {
   COLOR = "COLOR",
   GRADIENT = "GRADIENT",
   STRING = "STRING",
-  URL = "URL"
+  URL = "URL",
 }
 
 export enum AuthorizationKeyType {
   FACEBOOK = "FACEBOOK",
-  GOOGLE_OAUTH2 = "GOOGLE_OAUTH2"
+  GOOGLE_OAUTH2 = "GOOGLE_OAUTH2",
 }
 
 export enum CollectionPublished {
   HIDDEN = "HIDDEN",
-  PUBLISHED = "PUBLISHED"
+  PUBLISHED = "PUBLISHED",
 }
 
 export enum ConfigurationTypeFieldEnum {
   BOOLEAN = "BOOLEAN",
   PASSWORD = "PASSWORD",
   SECRET = "SECRET",
-  STRING = "STRING"
+  STRING = "STRING",
 }
 
 export enum CountryCode {
@@ -295,23 +295,23 @@ export enum CountryCode {
   YT = "YT",
   ZA = "ZA",
   ZM = "ZM",
-  ZW = "ZW"
+  ZW = "ZW",
 }
 
 export enum DiscountStatusEnum {
   ACTIVE = "ACTIVE",
   EXPIRED = "EXPIRED",
-  SCHEDULED = "SCHEDULED"
+  SCHEDULED = "SCHEDULED",
 }
 
 export enum DiscountValueTypeEnum {
   FIXED = "FIXED",
-  PERCENTAGE = "PERCENTAGE"
+  PERCENTAGE = "PERCENTAGE",
 }
 
 export enum FulfillmentStatus {
   CANCELED = "CANCELED",
-  FULFILLED = "FULFILLED"
+  FULFILLED = "FULFILLED",
 }
 
 export enum LanguageCodeEnum {
@@ -357,19 +357,19 @@ export enum LanguageCodeEnum {
   UK = "UK",
   VI = "VI",
   ZH_HANS = "ZH_HANS",
-  ZH_HANT = "ZH_HANT"
+  ZH_HANT = "ZH_HANT",
 }
 
 export enum OrderAction {
   CAPTURE = "CAPTURE",
   MARK_AS_PAID = "MARK_AS_PAID",
   REFUND = "REFUND",
-  VOID = "VOID"
+  VOID = "VOID",
 }
 
 export enum OrderDirection {
   ASC = "ASC",
-  DESC = "DESC"
+  DESC = "DESC",
 }
 
 export enum OrderEventsEmailsEnum {
@@ -378,7 +378,7 @@ export enum OrderEventsEmailsEnum {
   ORDER_CONFIRMATION = "ORDER_CONFIRMATION",
   PAYMENT_CONFIRMATION = "PAYMENT_CONFIRMATION",
   SHIPPING_CONFIRMATION = "SHIPPING_CONFIRMATION",
-  TRACKING_UPDATED = "TRACKING_UPDATED"
+  TRACKING_UPDATED = "TRACKING_UPDATED",
 }
 
 export enum OrderEventsEnum {
@@ -402,7 +402,7 @@ export enum OrderEventsEnum {
   PLACED = "PLACED",
   PLACED_FROM_DRAFT = "PLACED_FROM_DRAFT",
   TRACKING_UPDATED = "TRACKING_UPDATED",
-  UPDATED_ADDRESS = "UPDATED_ADDRESS"
+  UPDATED_ADDRESS = "UPDATED_ADDRESS",
 }
 
 export enum OrderStatus {
@@ -410,7 +410,7 @@ export enum OrderStatus {
   DRAFT = "DRAFT",
   FULFILLED = "FULFILLED",
   PARTIALLY_FULFILLED = "PARTIALLY_FULFILLED",
-  UNFULFILLED = "UNFULFILLED"
+  UNFULFILLED = "UNFULFILLED",
 }
 
 export enum OrderStatusFilter {
@@ -419,7 +419,7 @@ export enum OrderStatusFilter {
   PARTIALLY_FULFILLED = "PARTIALLY_FULFILLED",
   READY_TO_CAPTURE = "READY_TO_CAPTURE",
   READY_TO_FULFILL = "READY_TO_FULFILL",
-  UNFULFILLED = "UNFULFILLED"
+  UNFULFILLED = "UNFULFILLED",
 }
 
 export enum PaymentChargeStatusEnum {
@@ -427,7 +427,7 @@ export enum PaymentChargeStatusEnum {
   FULLY_REFUNDED = "FULLY_REFUNDED",
   NOT_CHARGED = "NOT_CHARGED",
   PARTIALLY_CHARGED = "PARTIALLY_CHARGED",
-  PARTIALLY_REFUNDED = "PARTIALLY_REFUNDED"
+  PARTIALLY_REFUNDED = "PARTIALLY_REFUNDED",
 }
 
 export enum PermissionEnum {
@@ -445,7 +445,7 @@ export enum PermissionEnum {
   MANAGE_STAFF = "MANAGE_STAFF",
   MANAGE_TRANSLATIONS = "MANAGE_TRANSLATIONS",
   MANAGE_USERS = "MANAGE_USERS",
-  MANAGE_WEBHOOKS = "MANAGE_WEBHOOKS"
+  MANAGE_WEBHOOKS = "MANAGE_WEBHOOKS",
 }
 
 export enum ProductErrorCode {
@@ -459,7 +459,7 @@ export enum ProductErrorCode {
   NOT_PRODUCTS_IMAGE = "NOT_PRODUCTS_IMAGE",
   REQUIRED = "REQUIRED",
   UNIQUE = "UNIQUE",
-  VARIANT_NO_DIGITAL_CONTENT = "VARIANT_NO_DIGITAL_CONTENT"
+  VARIANT_NO_DIGITAL_CONTENT = "VARIANT_NO_DIGITAL_CONTENT",
 }
 
 export enum ProductOrderField {
@@ -468,37 +468,37 @@ export enum ProductOrderField {
   NAME = "NAME",
   PRICE = "PRICE",
   PUBLISHED = "PUBLISHED",
-  TYPE = "TYPE"
+  TYPE = "TYPE",
 }
 
 export enum ProductTypeConfigurable {
   CONFIGURABLE = "CONFIGURABLE",
-  SIMPLE = "SIMPLE"
+  SIMPLE = "SIMPLE",
 }
 
 export enum ProductTypeEnum {
   DIGITAL = "DIGITAL",
-  SHIPPABLE = "SHIPPABLE"
+  SHIPPABLE = "SHIPPABLE",
 }
 
 export enum SaleType {
   FIXED = "FIXED",
-  PERCENTAGE = "PERCENTAGE"
+  PERCENTAGE = "PERCENTAGE",
 }
 
 export enum ShippingMethodTypeEnum {
   PRICE = "PRICE",
-  WEIGHT = "WEIGHT"
+  WEIGHT = "WEIGHT",
 }
 
 export enum StaffMemberStatus {
   ACTIVE = "ACTIVE",
-  DEACTIVATED = "DEACTIVATED"
+  DEACTIVATED = "DEACTIVATED",
 }
 
 export enum StockAvailability {
   IN_STOCK = "IN_STOCK",
-  OUT_OF_STOCK = "OUT_OF_STOCK"
+  OUT_OF_STOCK = "OUT_OF_STOCK",
 }
 
 export enum TaxRateType {
@@ -526,19 +526,19 @@ export enum TaxRateType {
   SOCIAL_HOUSING = "SOCIAL_HOUSING",
   STANDARD = "STANDARD",
   WATER = "WATER",
-  WINE = "WINE"
+  WINE = "WINE",
 }
 
 export enum VoucherDiscountType {
   FIXED = "FIXED",
   PERCENTAGE = "PERCENTAGE",
-  SHIPPING = "SHIPPING"
+  SHIPPING = "SHIPPING",
 }
 
 export enum VoucherTypeEnum {
   ENTIRE_ORDER = "ENTIRE_ORDER",
   SHIPPING = "SHIPPING",
-  SPECIFIC_PRODUCT = "SPECIFIC_PRODUCT"
+  SPECIFIC_PRODUCT = "SPECIFIC_PRODUCT",
 }
 
 export enum WebhookErrorCode {
@@ -546,7 +546,7 @@ export enum WebhookErrorCode {
   INVALID = "INVALID",
   NOT_FOUND = "NOT_FOUND",
   REQUIRED = "REQUIRED",
-  UNIQUE = "UNIQUE"
+  UNIQUE = "UNIQUE",
 }
 
 export enum WebhookEventTypeEnum {
@@ -557,14 +557,14 @@ export enum WebhookEventTypeEnum {
   ORDER_FULFILLED = "ORDER_FULFILLED",
   ORDER_FULLY_PAID = "ORDER_FULLY_PAID",
   ORDER_UPDATED = "ORDER_UPDATED",
-  PRODUCT_CREATED = "PRODUCT_CREATED"
+  PRODUCT_CREATED = "PRODUCT_CREATED",
 }
 
 export enum WeightUnitsEnum {
   G = "G",
   KG = "KG",
   LB = "LB",
-  OZ = "OZ"
+  OZ = "OZ",
 }
 
 export interface AddressInput {