Change prettier rules

packages/app/components/contact/ContactForm.test.tsx

@@ -9,162 +9,143 @@ import { TestContextProvider } from 'app/shell';
 import { ContactForm } from './ContactForm';
 
 beforeEach(() => {
-  sinon.stub(feedback, 'send').returns(Promise.resolve() as any);
+    sinon.stub(feedback, 'send').returns(Promise.resolve() as any);
 });
 
 afterEach(() => {
-  (feedback.send as any).restore();
+    (feedback.send as any).restore();
 });
 
 describe('ContactForm', () => {
-  it('should contain Form', () => {
-    const user = {} as User;
+    it('should contain Form', () => {
+        const user = {} as User;
 
-    render(
-      <TestContextProvider>
-        <ContactForm user={user} />
-      </TestContextProvider>,
-    );
+        render(
+            <TestContextProvider>
+                <ContactForm user={user} />
+            </TestContextProvider>,
+        );
 
-    expect(screen.getAllByRole('textbox').length, 'to be greater than', 1);
+        expect(screen.getAllByRole('textbox').length, 'to be greater than', 1);
 
-    expect(
-      screen.getByRole('button', { name: /Send/ }),
-      'to have property',
-      'type',
-      'submit',
-    );
+        expect(screen.getByRole('button', { name: /Send/ }), 'to have property', 'type', 'submit');
 
-    [
-      {
-        label: 'subject',
-        name: 'subject',
-      },
-      {
-        label: 'E‑mail',
-        name: 'email',
-      },
-      {
-        label: 'message',
-        name: 'message',
-      },
-    ].forEach((el) => {
-      expect(
-        screen.getByLabelText(el.label, { exact: false }),
-        'to have property',
-        'name',
-        el.name,
-      );
-    });
-  });
-
-  describe('when rendered with user', () => {
-    const user = {
-      email: 'foo@bar.com',
-    } as User;
-
-    it('should render email field with user email', () => {
-      render(
-        <TestContextProvider>
-          <ContactForm user={user} />
-        </TestContextProvider>,
-      );
-
-      expect(screen.getByDisplayValue(user.email), 'to be a', HTMLInputElement);
-    });
-  });
-
-  it('should submit and then hide form and display success message', async () => {
-    const user = {
-      email: 'foo@bar.com',
-    } as User;
-
-    render(
-      <TestContextProvider>
-        <ContactForm user={user} />
-      </TestContextProvider>,
-    );
-
-    fireEvent.change(screen.getByLabelText(/subject/i), {
-      target: {
-        value: 'subject',
-      },
+        [
+            {
+                label: 'subject',
+                name: 'subject',
+            },
+            {
+                label: 'E‑mail',
+                name: 'email',
+            },
+            {
+                label: 'message',
+                name: 'message',
+            },
+        ].forEach((el) => {
+            expect(screen.getByLabelText(el.label, { exact: false }), 'to have property', 'name', el.name);
+        });
     });
 
-    fireEvent.change(screen.getByLabelText(/message/i), {
-      target: {
-        value: 'the message',
-      },
+    describe('when rendered with user', () => {
+        const user = {
+            email: 'foo@bar.com',
+        } as User;
+
+        it('should render email field with user email', () => {
+            render(
+                <TestContextProvider>
+                    <ContactForm user={user} />
+                </TestContextProvider>,
+            );
+
+            expect(screen.getByDisplayValue(user.email), 'to be a', HTMLInputElement);
+        });
     });
 
-    const button = screen.getByRole('button', { name: 'Send' });
+    it('should submit and then hide form and display success message', async () => {
+        const user = {
+            email: 'foo@bar.com',
+        } as User;
 
-    expect(button, 'to have property', 'disabled', false);
+        render(
+            <TestContextProvider>
+                <ContactForm user={user} />
+            </TestContextProvider>,
+        );
 
-    fireEvent.click(button);
+        fireEvent.change(screen.getByLabelText(/subject/i), {
+            target: {
+                value: 'subject',
+            },
+        });
 
-    expect(button, 'to have property', 'disabled', true);
-    expect(feedback.send, 'to have a call exhaustively satisfying', [
-      {
-        subject: 'subject',
-        email: user.email,
-        category: '',
-        message: 'the message',
-      },
-    ]);
+        fireEvent.change(screen.getByLabelText(/message/i), {
+            target: {
+                value: 'the message',
+            },
+        });
 
-    await waitFor(() => {
-      expect(
-        screen.getByText('Your message was received', { exact: false }),
-        'to be a',
-        HTMLElement,
-      );
+        const button = screen.getByRole('button', { name: 'Send' });
+
+        expect(button, 'to have property', 'disabled', false);
+
+        fireEvent.click(button);
+
+        expect(button, 'to have property', 'disabled', true);
+        expect(feedback.send, 'to have a call exhaustively satisfying', [
+            {
+                subject: 'subject',
+                email: user.email,
+                category: '',
+                message: 'the message',
+            },
+        ]);
+
+        await waitFor(() => {
+            expect(screen.getByText('Your message was received', { exact: false }), 'to be a', HTMLElement);
+        });
+
+        expect(screen.getByText(user.email), 'to be a', HTMLElement);
+
+        expect(screen.queryByRole('button', { name: /Send/ }), 'to be null');
     });
 
-    expect(screen.getByText(user.email), 'to be a', HTMLElement);
+    it('should show validation messages', async () => {
+        const user = {
+            email: 'foo@bar.com',
+        } as User;
 
-    expect(screen.queryByRole('button', { name: /Send/ }), 'to be null');
-  });
+        (feedback.send as any).callsFake(() =>
+            Promise.reject({
+                success: false,
+                errors: { email: 'error.email_invalid' },
+            }),
+        );
 
-  it('should show validation messages', async () => {
-    const user = {
-      email: 'foo@bar.com',
-    } as User;
+        render(
+            <TestContextProvider>
+                <ContactForm user={user} />
+            </TestContextProvider>,
+        );
 
-    (feedback.send as any).callsFake(() =>
-      Promise.reject({
-        success: false,
-        errors: { email: 'error.email_invalid' },
-      }),
-    );
+        fireEvent.change(screen.getByLabelText(/subject/i), {
+            target: {
+                value: 'subject',
+            },
+        });
 
-    render(
-      <TestContextProvider>
-        <ContactForm user={user} />
-      </TestContextProvider>,
-    );
+        fireEvent.change(screen.getByLabelText(/message/i), {
+            target: {
+                value: 'the message',
+            },
+        });
 
-    fireEvent.change(screen.getByLabelText(/subject/i), {
-      target: {
-        value: 'subject',
-      },
+        fireEvent.click(screen.getByRole('button', { name: 'Send' }));
+
+        await waitFor(() => {
+            expect(screen.getByRole('alert'), 'to have property', 'innerHTML', 'E‑mail is invalid');
+        });
     });
-
-    fireEvent.change(screen.getByLabelText(/message/i), {
-      target: {
-        value: 'the message',
-      },
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: 'Send' }));
-
-    await waitFor(() => {
-      expect(
-        screen.getByRole('alert'),
-        'to have property',
-        'innerHTML',
-        'E‑mail is invalid',
-      );
-    });
-  });
 });

packages/app/components/contact/ContactForm.tsx

@@ -2,14 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
-import {
-  Input,
-  TextArea,
-  Button,
-  Form,
-  FormModel,
-  Dropdown,
-} from 'app/components/ui/form';
+import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'app/components/ui/form';
 import feedback from 'app/services/api/feedback';
 import icons from 'app/components/ui/icons.scss';
 import popupStyles from 'app/components/ui/popup/popup.scss';
@@ -21,190 +14,170 @@ import styles from './contactForm.scss';
 import messages from './contactForm.intl.json';
 
 const CONTACT_CATEGORIES = {
-  // TODO: сюда позже проставить реальные id категорий с backend
-  0: <Message {...messages.cannotAccessMyAccount} />,
-  1: <Message {...messages.foundBugOnSite} />,
-  2: <Message {...messages.improvementsSuggestion} />,
-  3: <Message {...messages.integrationQuestion} />,
-  4: <Message {...messages.other} />,
+    // TODO: сюда позже проставить реальные id категорий с backend
+    0: <Message {...messages.cannotAccessMyAccount} />,
+    1: <Message {...messages.foundBugOnSite} />,
+    2: <Message {...messages.improvementsSuggestion} />,
+    3: <Message {...messages.integrationQuestion} />,
+    4: <Message {...messages.other} />,
 };
 
 export class ContactForm extends React.Component<
-  {
-    onClose: () => void;
-    user: User;
-  },
-  {
-    isLoading: boolean;
-    isSuccessfullySent: boolean;
-    lastEmail: string | null;
-  }
+    {
+        onClose: () => void;
+        user: User;
+    },
+    {
+        isLoading: boolean;
+        isSuccessfullySent: boolean;
+        lastEmail: string | null;
+    }
 > {
-  static defaultProps = {
-    onClose() {},
-  };
+    static defaultProps = {
+        onClose() {},
+    };
 
-  state = {
-    isLoading: false,
-    isSuccessfullySent: false,
-    lastEmail: null,
-  };
+    state = {
+        isLoading: false,
+        isSuccessfullySent: false,
+        lastEmail: null,
+    };
 
-  form = new FormModel();
+    form = new FormModel();
 
-  render() {
-    const { isSuccessfullySent } = this.state || {};
-    const { onClose } = this.props;
+    render() {
+        const { isSuccessfullySent } = this.state || {};
+        const { onClose } = this.props;
 
-    return (
-      <div
-        data-testid="feedbackPopup"
-        className={
-          isSuccessfullySent ? styles.successState : styles.contactForm
-        }
-      >
-        <div className={popupStyles.popup}>
-          <div className={popupStyles.header}>
-            <h2 className={popupStyles.headerTitle}>
-              <Message {...messages.title} />
-            </h2>
-            <span
-              className={clsx(icons.close, popupStyles.close)}
-              onClick={onClose}
-              data-testid="feedback-popup-close"
-            />
-          </div>
+        return (
+            <div data-testid="feedbackPopup" className={isSuccessfullySent ? styles.successState : styles.contactForm}>
+                <div className={popupStyles.popup}>
+                    <div className={popupStyles.header}>
+                        <h2 className={popupStyles.headerTitle}>
+                            <Message {...messages.title} />
+                        </h2>
+                        <span
+                            className={clsx(icons.close, popupStyles.close)}
+                            onClick={onClose}
+                            data-testid="feedback-popup-close"
+                        />
+                    </div>
 
-          {isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
-        </div>
-      </div>
-    );
-  }
-
-  renderForm() {
-    const { form } = this;
-    const { user } = this.props;
-    const { isLoading } = this.state;
-
-    return (
-      <Form form={form} onSubmit={this.onSubmit} isLoading={isLoading}>
-        <div className={popupStyles.body}>
-          <div className={styles.philosophicalThought}>
-            <Message {...messages.philosophicalThought} />
-          </div>
-
-          <div className={styles.formDisclaimer}>
-            <Message {...messages.disclaimer} />
-            <br />
-          </div>
-
-          <div className={styles.pairInputRow}>
-            <div className={styles.pairInput}>
-              <Input
-                {...form.bindField('subject')}
-                required
-                label={messages.subject}
-                skin="light"
-              />
+                    {isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
+                </div>
             </div>
-
-            <div className={styles.pairInput}>
-              <Input
-                {...form.bindField('email')}
-                required
-                label={messages.email}
-                type="email"
-                skin="light"
-                defaultValue={user.email}
-              />
-            </div>
-          </div>
-
-          <div className={styles.formMargin}>
-            <Dropdown
-              {...form.bindField('category')}
-              label={messages.whichQuestion}
-              items={CONTACT_CATEGORIES}
-              block
-            />
-          </div>
-
-          <TextArea
-            {...form.bindField('message')}
-            required
-            label={messages.message}
-            skin="light"
-            minRows={6}
-            maxRows={6}
-          />
-        </div>
-
-        <div className={styles.footer}>
-          <Button
-            label={messages.send}
-            block
-            type="submit"
-            disabled={isLoading}
-          />
-        </div>
-      </Form>
-    );
-  }
-
-  renderSuccess() {
-    const { lastEmail: email } = this.state;
-    const { onClose } = this.props;
-
-    return (
-      <div>
-        <div className={styles.successBody}>
-          <span className={styles.successIcon} />
-          <div className={styles.successDescription}>
-            <Message {...messages.youMessageReceived} />
-          </div>
-          <div className={styles.sentToEmail}>{email}</div>
-        </div>
-
-        <div className={styles.footer}>
-          <Button
-            label={messages.close}
-            block
-            onClick={onClose}
-            data-testid="feedback-popup-close-button"
-          />
-        </div>
-      </div>
-    );
-  }
-
-  onSubmit = (): Promise<void> => {
-    if (this.state.isLoading) {
-      return Promise.resolve();
+        );
     }
 
-    this.setState({ isLoading: true });
+    renderForm() {
+        const { form } = this;
+        const { user } = this.props;
+        const { isLoading } = this.state;
 
-    return feedback
-      .send(this.form.serialize())
-      .then(() =>
-        this.setState({
-          isSuccessfullySent: true,
-          lastEmail: this.form.value('email'),
-        }),
-      )
-      .catch((resp) => {
-        if (resp.errors) {
-          this.form.setErrors(resp.errors);
+        return (
+            <Form form={form} onSubmit={this.onSubmit} isLoading={isLoading}>
+                <div className={popupStyles.body}>
+                    <div className={styles.philosophicalThought}>
+                        <Message {...messages.philosophicalThought} />
+                    </div>
 
-          return;
+                    <div className={styles.formDisclaimer}>
+                        <Message {...messages.disclaimer} />
+                        <br />
+                    </div>
+
+                    <div className={styles.pairInputRow}>
+                        <div className={styles.pairInput}>
+                            <Input {...form.bindField('subject')} required label={messages.subject} skin="light" />
+                        </div>
+
+                        <div className={styles.pairInput}>
+                            <Input
+                                {...form.bindField('email')}
+                                required
+                                label={messages.email}
+                                type="email"
+                                skin="light"
+                                defaultValue={user.email}
+                            />
+                        </div>
+                    </div>
+
+                    <div className={styles.formMargin}>
+                        <Dropdown
+                            {...form.bindField('category')}
+                            label={messages.whichQuestion}
+                            items={CONTACT_CATEGORIES}
+                            block
+                        />
+                    </div>
+
+                    <TextArea
+                        {...form.bindField('message')}
+                        required
+                        label={messages.message}
+                        skin="light"
+                        minRows={6}
+                        maxRows={6}
+                    />
+                </div>
+
+                <div className={styles.footer}>
+                    <Button label={messages.send} block type="submit" disabled={isLoading} />
+                </div>
+            </Form>
+        );
+    }
+
+    renderSuccess() {
+        const { lastEmail: email } = this.state;
+        const { onClose } = this.props;
+
+        return (
+            <div>
+                <div className={styles.successBody}>
+                    <span className={styles.successIcon} />
+                    <div className={styles.successDescription}>
+                        <Message {...messages.youMessageReceived} />
+                    </div>
+                    <div className={styles.sentToEmail}>{email}</div>
+                </div>
+
+                <div className={styles.footer}>
+                    <Button label={messages.close} block onClick={onClose} data-testid="feedback-popup-close-button" />
+                </div>
+            </div>
+        );
+    }
+
+    onSubmit = (): Promise<void> => {
+        if (this.state.isLoading) {
+            return Promise.resolve();
         }
 
-        logger.warn('Error sending feedback', resp);
-      })
-      .finally(() => this.setState({ isLoading: false }));
-  };
+        this.setState({ isLoading: true });
+
+        return feedback
+            .send(this.form.serialize())
+            .then(() =>
+                this.setState({
+                    isSuccessfullySent: true,
+                    lastEmail: this.form.value('email'),
+                }),
+            )
+            .catch((resp) => {
+                if (resp.errors) {
+                    this.form.setErrors(resp.errors);
+
+                    return;
+                }
+
+                logger.warn('Error sending feedback', resp);
+            })
+            .finally(() => this.setState({ isLoading: false }));
+    };
 }
 
 export default connect((state: RootState) => ({
-  user: state.user,
+    user: state.user,
 }))(ContactForm);

packages/app/components/contact/ContactLink.tsx

@@ -4,24 +4,24 @@ import { create as createPopup } from 'app/components/ui/popup/actions';
 import ContactForm from './ContactForm';
 
 type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-  createContactPopup: () => void;
+    createContactPopup: () => void;
 };
 
 function ContactLink({ createContactPopup, ...props }: Props) {
-  return (
-    <a
-      href="#"
-      data-e2e-button="feedbackPopup"
-      onClick={(event) => {
-        event.preventDefault();
+    return (
+        <a
+            href="#"
+            data-e2e-button="feedbackPopup"
+            onClick={(event) => {
+                event.preventDefault();
 
-        createContactPopup();
-      }}
-      {...props}
-    />
-  );
+                createContactPopup();
+            }}
+            {...props}
+        />
+    );
 }
 
 export default connect(null, {
-  createContactPopup: () => createPopup({ Popup: ContactForm }),
+    createContactPopup: () => createPopup({ Popup: ContactForm }),
 })(ContactLink);

packages/app/components/contact/contactForm.intl.json

@@ -1,19 +1,19 @@
 {
-  "title": "Feedback form",
-  "subject": "Subject",
-  "email": "E‑mail",
-  "message": "Message",
-  "send": "Send",
-  "philosophicalThought": "Properly formulated question — half of the answer",
-  "disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
-  "whichQuestion": "What are you interested in?",
+    "title": "Feedback form",
+    "subject": "Subject",
+    "email": "E‑mail",
+    "message": "Message",
+    "send": "Send",
+    "philosophicalThought": "Properly formulated question — half of the answer",
+    "disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
+    "whichQuestion": "What are you interested in?",
 
-  "cannotAccessMyAccount": "Can not access my account",
-  "foundBugOnSite": "I found a bug on the site",
-  "improvementsSuggestion": "I have a suggestion for improving the functional",
-  "integrationQuestion": "Service integration question",
-  "other": "Other",
+    "cannotAccessMyAccount": "Can not access my account",
+    "foundBugOnSite": "I found a bug on the site",
+    "improvementsSuggestion": "I have a suggestion for improving the functional",
+    "integrationQuestion": "Service integration question",
+    "other": "Other",
 
-  "youMessageReceived": "Your message was received. We will respond to you shortly. The answer will come to your E‑mail:",
-  "close": "Close"
+    "youMessageReceived": "Your message was received. We will respond to you shortly. The answer will come to your E‑mail:",
+    "close": "Close"
 }

packages/app/components/contact/contactForm.scss

@@ -5,81 +5,81 @@
 /* Form state */
 
 .contactForm {
-  composes: popupWrapper from '~app/components/ui/popup/popup.scss';
+    composes: popupWrapper from '~app/components/ui/popup/popup.scss';
 
-  @include popupBounding(500px);
+    @include popupBounding(500px);
 }
 
 .philosophicalThought {
-  font-family: $font-family-title;
-  font-size: 19px;
-  color: $green;
-  text-align: center;
-  margin-bottom: 5px;
+    font-family: $font-family-title;
+    font-size: 19px;
+    color: $green;
+    text-align: center;
+    margin-bottom: 5px;
 }
 
 .formDisclaimer {
-  font-size: 12px;
-  line-height: 14px;
-  text-align: center;
-  max-width: 400px;
-  margin: 0 auto 10px;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: center;
+    max-width: 400px;
+    margin: 0 auto 10px;
 }
 
 .pairInputRow {
-  display: flex;
-  margin-bottom: 10px;
+    display: flex;
+    margin-bottom: 10px;
 }
 
 .pairInput {
-  width: 50%;
+    width: 50%;
 
-  &:first-of-type {
-    margin-right: $popupPadding;
-  }
+    &:first-of-type {
+        margin-right: $popupPadding;
+    }
 }
 
 .formMargin {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 /* Success State */
 
 .successState {
-  composes: popupWrapper from '~app/components/ui/popup/popup.scss';
+    composes: popupWrapper from '~app/components/ui/popup/popup.scss';
 
-  @include popupBounding(320px);
+    @include popupBounding(320px);
 }
 
 .successBody {
-  composes: body from '~app/components/ui/popup/popup.scss';
+    composes: body from '~app/components/ui/popup/popup.scss';
 
-  text-align: center;
+    text-align: center;
 }
 
 .successDescription {
-  @extend .formDisclaimer;
+    @extend .formDisclaimer;
 
-  margin-bottom: 15px;
+    margin-bottom: 15px;
 }
 
 .successIcon {
-  composes: checkmark from '~app/components/ui/icons.scss';
+    composes: checkmark from '~app/components/ui/icons.scss';
 
-  font-size: 90px;
-  color: #aaa;
-  margin-bottom: 20px;
-  line-height: 71px;
+    font-size: 90px;
+    color: #aaa;
+    margin-bottom: 20px;
+    line-height: 71px;
 }
 
 .sentToEmail {
-  font-family: $font-family-title;
-  color: #444;
-  font-size: 18px;
+    font-family: $font-family-title;
+    color: #444;
+    font-size: 18px;
 }
 
 /* Common */
 
 .footer {
-  margin-top: 0;
+    margin-top: 0;
 }