perf(contacts): save & new possibility on customer form. close #1485,…

… Not showing search result if not on the first page. close #1486

src/modules/common/components/ButtonMutate.tsx

@@ -26,6 +26,7 @@ type Props = {
   variables: any;
   successMessage?: string;
   btnSize?: string;
+  btnStyle?: string;
   icon?: string;
   callback?: (data?: any) => void;
   children?: React.ReactNode;
@@ -118,6 +119,7 @@ class ButtonMutate extends React.Component<Props, { isLoading: boolean }> {
       btnSize,
       icon,
       type,
+      btnStyle = 'success',
       disabled,
       block
     } = this.props;
@@ -126,7 +128,7 @@ class ButtonMutate extends React.Component<Props, { isLoading: boolean }> {
     return (
       <Button
         disabled={disabled || isLoading}
-        btnStyle="success"
+        btnStyle={btnStyle}
         size={btnSize}
         type={type}
         onClick={type ? undefined : this.mutate}

src/modules/common/types.ts

@@ -81,6 +81,9 @@ export type IButtonMutateProps = {
   callback?: () => void;
   size?: string;
   object?: any;
+  text?: string;
+  icon?: string;
+  type?: string;
   disableLoading?: boolean;
 };
 

src/modules/companies/components/list/CompaniesList.tsx

@@ -77,6 +77,7 @@ class CompaniesList extends React.Component<IProps, State> {
 
     this.setState({ searchValue });
     this.timer = setTimeout(() => {
+      router.removeParams(history, 'page');
       router.setParams(history, { searchValue });
     }, 500);
   };

src/modules/customers/components/list/CustomerForm.tsx

@@ -1,7 +1,6 @@
 import { IUser, IUserLinks } from 'modules/auth/types';
 import AvatarUpload from 'modules/common/components/AvatarUpload';
 import Button from 'modules/common/components/Button';
-import { SmallLoader } from 'modules/common/components/ButtonMutate';
 import FormControl from 'modules/common/components/form/Control';
 import Form from 'modules/common/components/form/Form';
 import FormGroup from 'modules/common/components/form/Group';
@@ -30,6 +29,7 @@ type Props = {
   closeModal: () => void;
   renderButton: (props: IButtonMutateProps) => JSX.Element;
   queryParams: IQueryParams;
+  changeRedirectType?: (type: string) => void;
 };
 
 type State = {
@@ -38,7 +38,6 @@ type State = {
   hasAuthority: string;
   users: IUser[];
   avatar: string;
-  hasRedirect: boolean;
   phones?: string[];
   emails?: string[];
   primaryPhone?: string;
@@ -56,8 +55,7 @@ class CustomerForm extends React.Component<Props, State> {
       doNotDisturb: customer.doNotDisturb || 'No',
       hasAuthority: customer.hasAuthority || 'No',
       users: [],
-      avatar: customer.avatar,
-      hasRedirect: false
+      avatar: customer.avatar
     };
   }
 
@@ -96,10 +94,6 @@ class CustomerForm extends React.Component<Props, State> {
     this.setState({ avatar: url });
   };
 
-  onBtnClick = () => {
-    this.setState({ hasRedirect: true });
-  };
-
   getVisitorInfo(customer, key) {
     return customer.visitorContactInfo && customer.visitorContactInfo[key];
   }
@@ -153,10 +147,17 @@ class CustomerForm extends React.Component<Props, State> {
     this.setState({ ownerId });
   };
 
+  saveAndRedirect = (type: string) => {
+    const { changeRedirectType } = this.props;
+
+    if (changeRedirectType) {
+      changeRedirectType(type);
+    }
+  };
+
   renderContent = (formProps: IFormProps) => {
     const { closeModal, renderButton } = this.props;
     const { values, isSubmitted } = formProps;
-    const { hasRedirect } = this.state;
 
     const customer = this.props.customer || ({} as ICustomer);
     const { links = {}, primaryEmail, primaryPhone } = customer;
@@ -365,20 +366,29 @@ class CustomerForm extends React.Component<Props, State> {
             name: 'customer',
             values: this.generateDoc(values),
             isSubmitted,
-            disableLoading: hasRedirect,
             object: this.props.customer
           })}
 
           {!this.props.customer && (
-            <Button
-              btnStyle="primary"
-              onClick={this.onBtnClick}
-              type="submit"
-              disabled={isSubmitted && hasRedirect}
-            >
-              {isSubmitted && hasRedirect && <SmallLoader />}
-              Save & continue
-            </Button>
+            <>
+              <Button
+                btnStyle="primary"
+                type="submit"
+                icon="user-square"
+                onClick={this.saveAndRedirect.bind(this, 'detail')}
+                disabled={isSubmitted}
+              >
+                Save & View
+              </Button>
+              <Button
+                type="submit"
+                onClick={this.saveAndRedirect.bind(this, 'new')}
+                disabled={isSubmitted}
+                icon="user-plus"
+              >
+                Save & New
+              </Button>
+            </>
           )}
         </ModalFooter>
       </>

src/modules/customers/components/list/CustomersList.tsx

@@ -140,12 +140,14 @@ class CustomersList extends React.Component<IProps, State> {
     if (this.timer) {
       clearTimeout(this.timer);
     }
+
     const { history } = this.props;
     const searchValue = e.target.value;
 
     this.setState({ searchValue });
 
     this.timer = setTimeout(() => {
+      router.removeParams(history, 'page');
       router.setParams(history, { searchValue });
     }, 500);
   };

src/modules/customers/containers/CustomerForm.tsx

@@ -16,51 +16,80 @@ type Props = {
   queryParams: IQueryParams;
 };
 
-type FinalProps = {} & Props & IRouterProps;
-
-const CustomerFormContainer = (props: FinalProps) => {
-  const { history, closeModal } = props;
+type State = {
+  redirectType?: string;
+};
 
-  const renderButton = ({
-    name,
-    values,
-    isSubmitted,
-    object,
-    disableLoading
-  }: IButtonMutateProps) => {
-    const callbackResponse = data => {
-      if (disableLoading) {
-        return history.push(
-          `/contacts/customers/details/${data.customersAdd._id}`
-        );
-      }
+type FinalProps = {} & Props & IRouterProps;
+class CustomerFormContainer extends React.Component<FinalProps, State> {
+  constructor(props) {
+    super(props);
 
-      return closeModal();
+    this.state = {
+      redirectType: undefined
     };
+  }
 
-    return (
-      <ButtonMutate
-        mutation={object ? mutations.customersEdit : mutations.customersAdd}
-        variables={values}
-        callback={callbackResponse}
-        refetchQueries={getRefetchQueries()}
-        isSubmitted={isSubmitted}
-        disableLoading={disableLoading}
-        type="submit"
-        successMessage={`You successfully ${
-          object ? 'updated' : 'added'
-        } a ${name}`}
-      />
-    );
+  changeRedirectType = (redirectType: string) => {
+    this.setState({ redirectType });
   };
 
-  const updatedProps = {
-    ...props,
-    renderButton
-  };
+  render() {
+    const { closeModal, history } = this.props;
+    const { redirectType } = this.state;
 
-  return <CustomerForm {...updatedProps} />;
-};
+    const renderButton = ({
+      name,
+      values,
+      isSubmitted,
+      object
+    }: IButtonMutateProps) => {
+      const afterSave = data => {
+        closeModal();
+
+        if (redirectType === 'detail') {
+          return history.push(
+            `/contacts/customers/details/${data.customersAdd._id}`
+          );
+        }
+
+        const currentLocation = `${window.location.pathname}${
+          window.location.search
+        }`;
+
+        if (redirectType === 'new') {
+          history.push(`/contacts`);
+          history.replace(`${currentLocation}#showCustomerModal=true`);
+        }
+      };
+
+      return (
+        <ButtonMutate
+          mutation={object ? mutations.customersEdit : mutations.customersAdd}
+          variables={values}
+          callback={afterSave}
+          refetchQueries={getRefetchQueries()}
+          isSubmitted={isSubmitted}
+          disableLoading={redirectType ? true : false}
+          disabled={isSubmitted}
+          type="submit"
+          icon="user-check"
+          successMessage={`You successfully ${
+            object ? 'updated' : 'added'
+          } a ${name}`}
+        />
+      );
+    };
+
+    const updatedProps = {
+      ...this.props,
+      changeRedirectType: this.changeRedirectType,
+      renderButton
+    };
+
+    return <CustomerForm {...updatedProps} />;
+  }
+}
 
 const getRefetchQueries = () => {
   return [