eslint fix

src/components/containers/BlurWrapper/index.tsx

@@ -1,5 +1,5 @@
-import React, { AllHTMLAttributes, FC } from "react";
-import * as styles from "./styles.scss";
+import React, { AllHTMLAttributes, FC } from 'react';
+import * as styles from './styles.scss';
 
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 

src/components/containers/Card/index.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import classNames = require("classnames");
 import * as styles from './styles.scss';
 
+import classNames = require('classnames');
+
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
 }
@@ -12,12 +13,12 @@ const Card: FC<IProps> = ({
   seamless,
   ...props
 }) => (
-    <div
-      className={classNames(styles.card, className, { seamless })}
-      {...props}
-    >
-      {children}
-    </div>
+  <div
+    className={classNames(styles.card, className, { seamless })}
+    {...props}
+  >
+    {children}
+  </div>
 );
 
 export { Card };

src/components/containers/CellGrid/index.tsx

@@ -1,6 +1,9 @@
-import React, { FC, HTMLAttributes, ReactChild, ReactChildren } from 'react';
+import React, {
+  FC, HTMLAttributes, ReactChild, ReactChildren
+} from 'react';
 import * as styles from './styles.scss';
-import classNames = require("classnames");
+
+import classNames = require('classnames');
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;
@@ -13,13 +16,13 @@ const CellGrid: FC<IProps> = ({
   className,
   ...props
 }) => (
-    <div
-      className={classNames(styles.grid, className)}
-      style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))` }}
-      {...props}
-    >
-      {children}
-    </div>
+  <div
+    className={classNames(styles.grid, className)}
+    style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))` }}
+    {...props}
+  >
+    {children}
+  </div>
 );
 
 export { CellGrid };

src/components/containers/Grid/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-import * as styles from "./styles.scss";
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import * as styles from './styles.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
@@ -15,14 +15,14 @@ type IProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const Grid: FC<IProps> = ({
   children,
-  className = "",
+  className = '',
   horizontal = false,
   vertical = false,
   square = false,
-  size = "auto",
+  size = 'auto',
   style = {},
-  columns = "auto",
-  rows = "auto",
+  columns = 'auto',
+  rows = 'auto',
   gap = 10,
   stretchy,
   ...props
@@ -37,10 +37,10 @@ const Grid: FC<IProps> = ({
     style={{
       ...style,
       gridTemplateColumns: square
-        ? `repeat(auto-fill, ${(columns !== "auto" && columns) || size})`
+        ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})`
         : columns,
       gridTemplateRows: square
-        ? `repeat(auto-fill, ${(rows !== "auto" && rows) || size})`
+        ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})`
         : rows,
       gridAutoRows: rows,
       gridAutoColumns: columns,

src/components/containers/Group/index.tsx

@@ -18,7 +18,7 @@ const Group: FC<IProps> = ({
   bottom = false,
   wrap = false,
   seamless = false,
- ...props
+  ...props
 }) => (
   <div
     className={classNames(

src/components/containers/Padder/index.tsx

@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import classNames = require("classnames");
 
-type IProps = React.HTMLAttributes<HTMLDivElement> &  {
+import classNames = require('classnames');
+
+type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;
   vertical?: boolean;
   horizontal?: boolean;
@@ -17,13 +18,13 @@ const Padder: FC<IProps> = ({
   horizontal,
   ...props
 }) => (
-    <div
-      className={classNames(styles.padder, className, { vertical, horizontal })}
-      style={padding ? { ...style, padding } : style}
-      {...props}
-    >
-      {children}
-    </div>
+  <div
+    className={classNames(styles.padder, className, { vertical, horizontal })}
+    style={padding ? { ...style, padding } : style}
+    {...props}
+  >
+    {children}
+  </div>
 );
 
 export { Padder };

src/components/containers/Panel/index.tsx

@@ -1,10 +1,11 @@
 import React, { FC, HTMLAttributes } from 'react';
 import * as styles from './styles.scss';
-import classNames = require("classnames");
+
+import classNames = require('classnames');
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
-  stretchy?: boolean
+  stretchy?: boolean;
 }
 
 const Panel: FC<IProps> = ({
@@ -14,9 +15,9 @@ const Panel: FC<IProps> = ({
   stretchy,
   ...props
 }) => (
-    <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
-      {children}
-    </div>
+  <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
+    {children}
+  </div>
 );
 
 export { Panel };

src/components/containers/Scroll/index.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEventHandler, useEffect, useState } from 'react';
-import * as styles from './styles.scss';
 import { Scrollbars } from 'tt-react-custom-scrollbars';
 import classNames from 'classnames';
+import * as styles from './styles.scss';
 
 interface IProps {
   children: Element | React.ReactChild;
@@ -33,11 +33,11 @@ export const Scroll = ({
       renderTrackVertical={data => <div className={styles.track_vertical} {...data} />}
       renderThumbHorizontal={data => <div className={styles.thumb_horizontal} {...data} />}
       renderThumbVertical={data => <div className={styles.thumb_vertical} {...data} />}
-      renderView = {data => <div className={styles.view} {...data} />}
+      renderView={data => <div className={styles.view} {...data} />}
       hideTracksWhenNotNeeded
       universal
       ref={setRef}
-      { ...props }
+      {...props}
     >
       {children}
     </Scrollbars>

src/components/containers/TagField/index.tsx

@@ -1,10 +1,10 @@
-import React, {FC, HTMLAttributes} from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 import * as styles from './styles.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {}
 
 const TagField: FC<IProps> = ({
- children,
+  children,
 }) => (
   <div className={styles.wrap}>
     {children}

src/components/editors/EditorPanel/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ChangeEventHandler } from 'react';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
-import { ImageUploadButton } from '~/components/editors/ImageUploadButton';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
 
 interface IProps {
   data: INode;
@@ -11,7 +11,7 @@ interface IProps {
 
 const EditorPanel: FC<IProps> = ({ onUpload }) => (
   <div className={styles.panel}>
-    <ImageUploadButton onUpload={onUpload} />
+    <EditorUploadButton onUpload={onUpload} />
   </div>
 );
 

src/components/editors/EditorUploadButton/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC, ChangeEventHandler } from 'react';
+import * as styles from './styles.scss';
+import { Icon } from '~/components/input/Icon';
+
+interface IProps {
+  onUpload?: ChangeEventHandler<HTMLInputElement>;
+}
+
+const EditorUploadButton: FC<IProps> = ({
+  onUpload,
+}) => (
+  <div className={styles.wrap}>
+    <input type="file" onChange={onUpload} accept="image/*" multiple />
+
+    <div className={styles.icon}>
+      <Icon size={32} icon="plus" />
+    </div>
+  </div>
+);
+
+export { EditorUploadButton };

src/components/editors/ImageEditor/index.tsx

@@ -1,40 +1,55 @@
-import React, { FC, useCallback, useEffect, useState, ChangeEventHandler, DragEventHandler } from 'react';
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useState,
+  ChangeEventHandler,
+  DragEventHandler
+} from 'react';
 import uuid from 'uuid4';
-import { INode, IFileWithUUID, IFile } from '~/redux/types';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { connect } from 'react-redux';
-import { selectUploads } from '~/redux/uploads/selectors';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
+import { INode, IFileWithUUID, IFile } from '~/redux/types';
+import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
+import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import { moveArrItem } from '~/utils/fn';
 import { IUploadStatus } from '~/redux/uploads/reducer';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles
 };
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
   data: INode;
   pending_files: IUploadStatus[];
   setData: (val: INode) => void;
   onFileMove: (o: number, n: number) => void;
   onInputChange: ChangeEventHandler<HTMLInputElement>;
   onDrop: DragEventHandler<HTMLFormElement>;
-}
-
-const ImageEditorUnconnected: FC<IProps> = ({ data, onFileMove, onInputChange, onDrop, pending_files }) => {
-  return (
-    <ImageGrid
-      onFileMove={onFileMove}
-      items={data.files}
-      locked={pending_files}
-      onUpload={onInputChange}
-      onDrop={onDrop}
-    />
-  );
 };
 
-const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
+const ImageEditorUnconnected: FC<IProps> = ({
+  data,
+  onFileMove,
+  onInputChange,
+  onDrop,
+  pending_files
+}) => (
+  <ImageGrid
+    onFileMove={onFileMove}
+    items={data.files}
+    locked={pending_files}
+    onUpload={onInputChange}
+    onDrop={onDrop}
+  />
+);
+
+const ImageEditor = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ImageEditorUnconnected);
 export { ImageEditor };

src/components/editors/ImageGrid/index.tsx

@@ -1,10 +1,11 @@
-import React, { FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler } from 'react';
+import React, {
+  FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler
+} from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
-import { ImageUploadButton } from '~/components/editors/ImageUploadButton';
 
 interface IProps {
   items: IFile[];
@@ -12,50 +13,52 @@ interface IProps {
   onFileMove: (o: number, n: number) => void;
   onUpload?: ChangeEventHandler<HTMLInputElement>;
   onDrop: DragEventHandler<HTMLFormElement>;
-};
+}
 
 const SortableItem = SortableElement(({ children }) => <div className={styles.item}>{children}</div>);
 
-const SortableList = SortableContainer(({ items, locked, onUpload, onDrop }: { items: IFile[]; locked: IUploadStatus[]; onUpload: ChangeEventHandler<HTMLInputElement>; onDrop: DragEventHandler<HTMLFormElement> }) => {
-  return (
+const SortableList = SortableContainer(
+  ({
+    items,
+    locked,
+    onDrop
+  }: {
+    items: IFile[];
+    locked: IUploadStatus[];
+    onUpload: ChangeEventHandler<HTMLInputElement>;
+    onDrop: DragEventHandler<HTMLFormElement>;
+  }) => (
     <form className={styles.grid} onDrop={onDrop}>
-      {
-        items.map((file, index) => (
-          <SortableItem key={file.id} index={index} collection={0}>
-            <ImageUpload
-              id={file.id}
-              thumb={file.url}
-            />
-          </SortableItem>
-        ))
-      }
-      {
-        locked.map((item, index) => (
-          <SortableItem key={item.temp_id} index={index} collection={1} disabled>
-            <ImageUpload
-              thumb={item.preview}
-              progress={item.progress}
-              is_uploading
-            />
-          </SortableItem>
-        ))
-      }
+      {items.map((file, index) => (
+        <SortableItem key={file.id} index={index} collection={0}>
+          <ImageUpload id={file.id} thumb={file.url} />
+        </SortableItem>
+      ))}
+      {locked.map((item, index) => (
+        <SortableItem key={item.temp_id} index={index} collection={1} disabled>
+          <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
+        </SortableItem>
+      ))}
     </form>
-  );
-});
+  )
+);
 
 const ImageGrid: FC<IProps> = ({
-  items,
-  locked,
-  onFileMove,
-  onUpload,
-  onDrop,
+  items, locked, onFileMove, onUpload, onDrop
 }) => {
   const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]);
 
   return (
-    <SortableList onSortEnd={onMove} axis="xy" items={items} locked={locked} onUpload={onUpload} onDrop={onDrop} pressDelay={100} />
-  )
-}
+    <SortableList
+      onSortEnd={onMove}
+      axis="xy"
+      items={items}
+      locked={locked}
+      onUpload={onUpload}
+      onDrop={onDrop}
+      pressDelay={100}
+    />
+  );
+};
 
-export { ImageGrid };
+export { ImageGrid };

src/components/editors/ImageUploadButton/index.tsx

@@ -1,21 +0,0 @@
-import React, { FC, ChangeEventHandler } from 'react';
-import * as styles from './styles.scss';
-import { Icon } from '~/components/input/Icon';
-
-interface IProps {
-  onUpload?: ChangeEventHandler<HTMLInputElement>;
-};
-
-const ImageUploadButton: FC<IProps> = ({
-  onUpload,
-}) => (
-    <div className={styles.wrap}>
-      <input type="file" onChange={onUpload} accept="image/*" multiple />
-
-      <div className={styles.icon}>
-        <Icon size={32} icon="plus" />
-      </div>
-    </div>
-  )
-
-export { ImageUploadButton };

src/components/flow/Cell/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import classNames = require("classnames");
+
+import classNames = require('classnames');
 
 interface IProps {
   height?: number;
@@ -16,15 +17,15 @@ const Cell: FC<IProps> = ({
   title,
   is_hero,
 }) => (
-    <div
-      className={classNames(styles.cell, { is_hero })}
-      style={{
-        gridRowEnd: `span ${height}`,
-        gridColumnEnd: `span ${width}`,
-      }}
-    >
-      { title && <div className={styles.title}>{title}</div> }
-    </div>
+  <div
+    className={classNames(styles.cell, { is_hero })}
+    style={{
+      gridRowEnd: `span ${height}`,
+      gridColumnEnd: `span ${width}`,
+    }}
+  >
+    { title && <div className={styles.title}>{title}</div> }
+  </div>
 );
 
 export { Cell };

src/components/flow/HeroPlaceholder/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
+
 const style = require('./style.scss');
 
 export const HeroPlaceholder = () => (
-  <div className={style.container}>
-  </div>
+  <div className={style.container} />
 );

src/components/flow/TestGrid/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Cell } from '~/components/flow/Cell';
 import { range } from 'ramda';
+import { Cell } from '~/components/flow/Cell';
 
 import * as styles from './styles.scss';
 

src/components/input/ArcProgress/index.tsx

@@ -5,7 +5,7 @@ import { describeArc } from '~/utils/dom';
 interface IProps {
   size: number;
   progress: number;
-};
+}
 
 export const ArcProgress: FC<IProps> = ({ size, progress }) => (
   <svg className={styles.icon} width={size} height={size}>

src/components/input/Button/index.tsx

@@ -1,14 +1,14 @@
-import classnames from "classnames";
-import * as styles from "./styles.scss";
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
-import { Icon } from "~/components/input/Icon";
-import { IIcon } from "~/redux/types";
+import classnames from 'classnames';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+import * as styles from './styles.scss';
+import { Icon } from '~/components/input/Icon';
+import { IIcon } from '~/redux/types';
 
 type IButtonProps = DetailedHTMLProps<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
+ButtonHTMLAttributes<HTMLButtonElement>,
+HTMLButtonElement
 > & {
-  size?: "mini" | "normal" | "big" | "giant" | "micro";
+  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   seamless?: boolean;
@@ -22,8 +22,8 @@ type IButtonProps = DetailedHTMLProps<
 };
 
 export const Button: FC<IButtonProps> = ({
-  className = "",
-  size = "normal",
+  className = '',
+  size = 'normal',
   iconLeft,
   iconRight,
   children,
@@ -36,26 +36,25 @@ export const Button: FC<IButtonProps> = ({
   title,
   stretchy,
   ...props
-}) =>
-  React.createElement(seamless || non_submitting ? "div" : "button", {
-    className: classnames(styles.button, className, styles[size], {
-      red,
-      grey,
-      seamless,
-      transparent,
-      disabled: props.disabled,
-      icon: (iconLeft || iconRight) && !title && !children,
-      is_loading,
-      stretchy
-    }),
-    children: [
-      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-      title ? (
-        <span key={1}>{title}</span>
-      ) : (
-        (children && <span key={1}>{children}</span>) || null
-      ),
-      iconRight && <Icon icon={iconRight} size={20} key={2} />
-    ],
-    ...props
-  });
+}) => React.createElement(seamless || non_submitting ? 'div' : 'button', {
+  className: classnames(styles.button, className, styles[size], {
+    red,
+    grey,
+    seamless,
+    transparent,
+    disabled: props.disabled,
+    icon: (iconLeft || iconRight) && !title && !children,
+    is_loading,
+    stretchy
+  }),
+  children: [
+    iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+    title ? (
+      <span key={1}>{title}</span>
+    ) : (
+      (children && <span key={1}>{children}</span>) || null
+    ),
+    iconRight && <Icon icon={iconRight} size={20} key={2} />
+  ],
+  ...props
+});

src/components/input/Icon/index.tsx

@@ -1,18 +1,20 @@
-import React, { FC } from "react";
-import { IIcon } from "~/redux/types";
+import React, { FC } from 'react';
+import { IIcon } from '~/redux/types';
 
 type IProps = React.SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
+export const Icon: FC<IProps> = ({
+  size = 20, icon, style, ...props
+}) => (
   <svg
     width={size}
     height={size}
-    viewBox={`0 0 24 24`}
+    viewBox="0 0 24 24"
     preserveAspectRatio="xMidYMid slice"
-    style={{ ...style, outline: "none" }}
+    style={{ ...style, outline: 'none' }}
     {...props}
   >
     <use xlinkHref={`#${icon}`} />

src/components/input/Info/index.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import classNames = require("classnames");
+
+import classNames = require('classnames');
 
 const style = require('./style.scss');
 
 interface IInfoProps {
-  text?: string,
-  children?: string,
-  level?: string,
+  text?: string;
+  children?: string;
+  level?: string;
 }
 export const Info: React.FunctionComponent<IInfoProps> = ({
   text,

src/components/input/InputText/index.tsx

@@ -4,8 +4,8 @@ import React, {
   useCallback,
   useState, useEffect,
 } from 'react';
-import * as styles from '~/styles/inputs.scss';
 import classNames from 'classnames';
+import * as styles from '~/styles/inputs.scss';
 import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
@@ -31,8 +31,8 @@ const InputText: FC<IInputTextProps> = ({
     [handler],
   );
 
-  const onFocus = useCallback(() => setFocused(true), [focused]);
-  const onBlur = useCallback(() => setFocused(false), [focused]);
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback(() => setFocused(false), []);
 
   useEffect(() => {
     if (onRef) onRef(inner_ref);
@@ -50,7 +50,8 @@ const InputText: FC<IInputTextProps> = ({
         [styles.has_error]: !!error,
         [styles.has_loader]: is_loading,
       },
-    )}>
+    )}
+    >
       <div className={styles.input}>
         <input
           type="text"

src/components/input/TextInput/index.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import * as styles from './styles.scss';
 
 interface ITextInputProps {
-  type?: 'text' | 'password',
-  placeholder?: string,
-  label?: string,
-  value?: string,
+  type?: 'text' | 'password';
+  placeholder?: string;
+  label?: string;
+  value?: string;
 
-  onChange: React.ChangeEventHandler,
+  onChange: React.ChangeEventHandler;
 }
 
 export const TextInput: React.FunctionComponent<ITextInputProps> = ({
@@ -15,15 +15,15 @@ export const TextInput: React.FunctionComponent<ITextInputProps> = ({
   placeholder = '',
   label,
   onChange = () => {},
-  value='',
+  value = '',
 }) => (
   <div
     className={styles.wrapper}
   >
     <div className={styles.container}>
       {
-        label &&
-        <div className={styles.label}>{label}</div>
+        label
+        && <div className={styles.label}>{label}</div>
       }
       <input
         placeholder={placeholder}

src/components/main/GodRays/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface IGodRaysProps {
-  raised?: boolean,
+  raised?: boolean;
 }
 
 export class GodRays extends React.Component<IGodRaysProps> {
@@ -30,22 +30,26 @@ export class GodRays extends React.Component<IGodRaysProps> {
       return setTimeout(() => window.requestAnimationFrame(this.draw), 1000);
     }
 
-    const { width, height, rays, particles } = this.state;
+    const {
+      width, height, rays, particles
+    } = this.state;
 
     const ctx = this.canvas.getContext('2d');
 
-    ctx.globalCompositeOperation = "luminosity";
+    ctx.globalCompositeOperation = 'luminosity';
     ctx.clearRect(0, 0, width, height + 100); // clear canvas
     ctx.save();
 
-    rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
+    rays.map(({
+      angle, iterator, weight, speed, pulsar, opacity
+    }, index) => {
       const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
       gradient.addColorStop(0.2, `rgba(255, 60, 40, ${opacity * 0.1})`);
-      gradient.addColorStop(1, `rgba(255, 60, 40, 0)`);
+      gradient.addColorStop(1, 'rgba(255, 60, 40, 0)');
 
       const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3);
       gradient2.addColorStop(0.2, `rgba(255, 40, 100, ${opacity * 0.2})`);
-      gradient2.addColorStop(1, "rgba(255, 40, 100, 0)");
+      gradient2.addColorStop(1, 'rgba(255, 40, 100, 0)');
 
       ctx.save();
       ctx.translate(width / 2, -900);
@@ -106,7 +110,7 @@ export class GodRays extends React.Component<IGodRaysProps> {
     this.init();
   }
 
-  render(){
+  render() {
     const { width, height } = this.state;
 
     return (
@@ -119,7 +123,8 @@ export class GodRays extends React.Component<IGodRaysProps> {
         zIndex: -1,
         opacity: 1,
         pointerEvents: 'none',
-      }}>
+      }}
+      >
         <canvas
           width={width}
           height={height + 100}
@@ -128,12 +133,13 @@ export class GodRays extends React.Component<IGodRaysProps> {
             position: 'relative',
             top: -100,
           }}
-          ref={el => { this.canvas = el; }}
+          ref={(el) => { this.canvas = el; }}
         />
       </div>
     );
   }
 
   canvas: HTMLCanvasElement;
+
   inc;
-};
+}

src/components/main/Header/index.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { Logo } from "~/components/main/Logo";
-import { connect } from "react-redux";
-import { push as historyPush } from "connected-react-router";
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { push as historyPush } from 'connected-react-router';
+import { Link } from 'react-router-dom';
+import { Logo } from '~/components/main/Logo';
 
-import * as style from "./style.scss";
-import { Filler } from "~/components/containers/Filler";
-import { Link } from "react-router-dom";
-import {selectUser} from "~/redux/auth/selectors";
-import {Group} from "~/components/containers/Group";
+import * as style from './style.scss';
+import { Filler } from '~/components/containers/Filler';
+import { selectUser } from '~/redux/auth/selectors';
+import { Group } from '~/components/containers/Group';
 
 const mapStateToProps = selectUser;
 
@@ -20,31 +20,29 @@ type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
 const HeaderUnconnected: React.FunctionComponent<IProps> = ({
   username,
   is_user
-}) => {
-  return (
-    <div className="default_container head_container">
-      <div className={style.container}>
-        <Logo />
+}) => (
+  <div className="default_container head_container">
+    <div className={style.container}>
+      <Logo />
 
-        <Filler />
+      <Filler />
 
-        <div className={style.plugs}>
-          <Link to="/">flow</Link>
-          <Link to="/examples/image">image</Link>
-          <Link to="/examples/edit">editor</Link>
-          <Link to="/examples/horizontal">horizontal</Link>
-        </div>
-
-        <Filler />
-
-        <Group horizontal className={style.user_button}>
-          <div>username</div>
-          <div className={style.user_avatar}/>
-        </Group>
+      <div className={style.plugs}>
+        <Link to="/">flow</Link>
+        <Link to="/examples/image">image</Link>
+        <Link to="/examples/edit">editor</Link>
+        <Link to="/examples/horizontal">horizontal</Link>
       </div>
+
+      <Filler />
+
+      <Group horizontal className={style.user_button}>
+        <div>username</div>
+        <div className={style.user_avatar} />
+      </Group>
     </div>
-  );
-};
+  </div>
+);
 
 const Header = connect(
   mapStateToProps,

src/components/main/SidePane/index.tsx

@@ -1,7 +1,9 @@
-import React, { FC, LegacyRef, ReactChild, useCallback, useEffect, useState } from 'react';
-import * as styles from './styles.scss';
+import React, {
+  FC, LegacyRef, ReactChild, useCallback, useEffect, useState
+} from 'react';
 import classNames from 'classnames';
-import {Group} from "~/components/containers/Group";
+import * as styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
 
 interface IProps {
 }
@@ -28,8 +30,8 @@ export const SidePane: FC<IProps> = ({
     return () => {
       window.removeEventListener('resize', moveThis);
       document.removeEventListener('DOMContentLoaded', moveThis);
-    }
-  }, []);
+    };
+  }, [moveThis]);
 
   return (
     <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>

src/components/node/Comment/index.tsx

@@ -1,7 +1,8 @@
-import React, {FC, HTMLAttributes} from 'react';
-import { Card } from "~/components/containers/Card";
+import React, { FC, HTMLAttributes } from 'react';
+import { Card } from '~/components/containers/Card';
 import * as styles from './styles.scss';
-import classNames = require("classnames");
+
+import classNames = require('classnames');
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -14,17 +15,17 @@ const Comment: FC<IProps> = ({
   className,
   ...props
 }) => (
-    <Card
-      className={classNames(styles.wrap, className, { is_empty, is_loading })}
-      seamless
-      {...props}
-    >
-      <div className={styles.thumb}>
-        <div className={styles.thumb_image} />
-      </div>
+  <Card
+    className={classNames(styles.wrap, className, { is_empty, is_loading })}
+    seamless
+    {...props}
+  >
+    <div className={styles.thumb}>
+      <div className={styles.thumb_image} />
+    </div>
 
-      <div className={styles.text} />
-    </Card>
+    <div className={styles.text} />
+  </Card>
 );
 
 export { Comment };

src/components/node/MenuButton/index.tsx

@@ -1,7 +1,7 @@
-import React, {FC} from 'react';
+import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import { Group } from "~/components/containers/Group";
-import { Filler } from "~/components/containers/Filler";
+import { Group } from '~/components/containers/Group';
+import { Filler } from '~/components/containers/Filler';
 
 interface IProps {
   title: string;
@@ -19,7 +19,10 @@ const MenuButton: FC<IProps> = ({
   >
     <Group horizontal>
       <div className={styles.icon}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+          <path fill="none" d="M0 0h24v24H0V0z" />
+          <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
+        </svg>
       </div>
 
       <Filler>

src/components/node/NodeNoComments/index.tsx

@@ -1,15 +1,15 @@
-import React, { FC } from "react";
-import { Comment } from "~/components/node/Comment";
+import React, { FC } from 'react';
+import { Comment } from '~/components/node/Comment';
 import * as styles from './styles.scss';
-import {Group} from "~/components/containers/Group";
+import { Group } from '~/components/containers/Group';
 
 interface IProps {}
 
 const NodeNoComments: FC<IProps> = () => (
   <Group className={styles.wrap}>
-    <Comment is_empty={true} is_loading={false} style={{ height: 94 }} />
-    <Comment is_empty={true} is_loading={false} style={{ height: 104 }} />
-    <Comment is_empty={true} is_loading={false} style={{ height: 100 }} />
+    <Comment is_empty is_loading={false} style={{ height: 94 }} />
+    <Comment is_empty is_loading={false} style={{ height: 104 }} />
+    <Comment is_empty is_loading={false} style={{ height: 100 }} />
   </Group>
 );
 

src/components/node/NodePanel/index.tsx

@@ -1,21 +1,21 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import { Group } from "~/components/containers/Group";
-import { Filler } from "~/components/containers/Filler";
+import { Group } from '~/components/containers/Group';
+import { Filler } from '~/components/containers/Filler';
 
 interface IProps {}
 
 const NodePanel: FC<IProps> = () => (
-    <div className={styles.wrap}>
-      <Group horizontal className={styles.panel}>
-        <Filler>
-          <div className={styles.title}>Node title</div>
-          <div className={styles.name}>~author</div>
-        </Filler>
-      </Group>
+  <div className={styles.wrap}>
+    <Group horizontal className={styles.panel}>
+      <Filler>
+        <div className={styles.title}>Node title</div>
+        <div className={styles.name}>~author</div>
+      </Filler>
+    </Group>
 
-      <div className={styles.mark} />
-    </div>
+    <div className={styles.mark} />
+  </div>
 );
 
 export { NodePanel };

src/components/node/NodeRelated/index.tsx

@@ -1,7 +1,7 @@
-import React, {FC, HTMLAttributes} from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 import { range } from 'ramda';
 import * as styles from './styles.scss';
-import {Group} from "~/components/containers/Group";
+import { Group } from '~/components/containers/Group';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {}
 
@@ -16,7 +16,7 @@ const NodeRelated: FC<IProps> = ({
     </div>
     <div className={styles.grid}>
       {
-        range(1,7).map(el => (<div className={styles.item} key={el} />))
+        range(1, 7).map(el => (<div className={styles.item} key={el} />))
       }
     </div>
   </Group>

src/components/node/Tag/index.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import classNames = require("classnames");
-import {ITag} from "~/redux/types";
+import { ITag } from '~/redux/types';
+
+import classNames = require('classnames');
 
 interface IProps {
   title: ITag['title'];

src/components/node/Tags/index.tsx

@@ -1,7 +1,7 @@
-import React, {FC, HTMLAttributes} from 'react';
-import {TagField} from "~/components/containers/TagField";
-import {ITag} from "~/redux/types";
-import {Tag} from "~/components/node/Tag";
+import React, { FC, HTMLAttributes } from 'react';
+import { TagField } from '~/components/containers/TagField';
+import { ITag } from '~/redux/types';
+import { Tag } from '~/components/node/Tag';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: ITag[];

src/components/placeholders/ParagraphPlaceholder/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { Placeholder } from "~/components/placeholders/Placeholder";
+import { Placeholder } from '~/components/placeholders/Placeholder';
 import * as styles from './styles.scss';
-import {Group} from "~/components/containers/Group";
+import { Group } from '~/components/containers/Group';
 
 const ParagraphPlaceholder = ({ }) => (
   <Group>

src/components/upload/ImageUpload/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
 import classNames from 'classnames';
+import * as styles from './styles.scss';
 import { ArcProgress } from '~/components/input/ArcProgress';
 
 interface IProps {
@@ -9,22 +9,20 @@ interface IProps {
   progress?: number;
 
   is_uploading?: boolean;
-};
+}
 
 const ImageUpload: FC<IProps> = ({
   thumb,
   id,
   progress,
   is_uploading,
-}) => {
-  return (
-    <div className={styles.wrap}>
-      <div className={classNames(styles.thumb_wrap, { is_uploading })}>
-        {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }}>{id}</div>}
-        {is_uploading && <div className={styles.progress}><ArcProgress size={72} progress={progress} /></div>}
-      </div>
+}) => (
+  <div className={styles.wrap}>
+    <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+      {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }}>{id}</div>}
+      {is_uploading && <div className={styles.progress}><ArcProgress size={72} progress={progress} /></div>}
     </div>
-  );
-}
+  </div>
+);
 
-export { ImageUpload };
+export { ImageUpload };