added react fast reload

craco.config.js

@@ -1,4 +1,5 @@
 const CracoAlias = require('craco-alias');
+const fastRefreshCracoPlugin = require('craco-fast-refresh');
 
 module.exports = {
   webpack: {
@@ -14,27 +15,28 @@ module.exports = {
     mode: 'file',
   },
   jest: {
-    setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.js",
+    setupTestFrameworkScriptFile: '<rootDir>/src/setupTests.js',
     configure: {
       moduleNameMapper: {
-        "^~/(.*)$": "<rootDir>/src/$1",
-        "^.+\\.scss$": "identity-obj-proxy"
+        '^~/(.*)$': '<rootDir>/src/$1',
+        '^.+\\.scss$': 'identity-obj-proxy',
       },
-      snapshotSerializers: ["enzyme-to-json/serializer"],
-      moduleFileExtensions: ["js", "json", "ts", "tsx", "jsx", "node"],
+      snapshotSerializers: ['enzyme-to-json/serializer'],
+      moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'jsx', 'node'],
       verbose: true,
-      roots: ["<rootDir>/src"],
+      roots: ['<rootDir>/src'],
       transform: {
-        "^.+\\.tsx?$": "ts-jest",
-        "^.+\\.ts?$": "babel-jest",
-        "^.+\\.js?$": "ts-jest",
-        "^.+\\.jsx?$": "babel-jest"
+        '^.+\\.tsx?$': 'ts-jest',
+        '^.+\\.ts?$': 'babel-jest',
+        '^.+\\.js?$': 'ts-jest',
+        '^.+\\.jsx?$': 'babel-jest',
       },
-      preset: "ts-jest/presets/js-with-ts",
-      testEnvironment: "node"
-    }
+      preset: 'ts-jest/presets/js-with-ts',
+      testEnvironment: 'node',
+    },
   },
   plugins: [
+    { plugin: fastRefreshCracoPlugin },
     {
       plugin: CracoAlias,
       options: {

package.json

@@ -44,8 +44,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {
@@ -61,12 +60,13 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "5.8.0",
     "@types/classnames": "^2.2.7",
     "@types/node": "^11.13.22",
     "@types/ramda": "^0.26.33",
     "@types/react-redux": "^7.1.11",
-    "@craco/craco": "5.8.0",
     "craco-alias": "^2.1.1",
+    "craco-fast-refresh": "^1.0.2",
     "prettier": "^1.18.2"
   }
 }

src/components/input/InputText/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, ChangeEvent, useCallback, useState, useEffect, LegacyRef } from 'react';
+import React, {ChangeEvent, FC, useCallback, useEffect, useState} from 'react';
 import classNames from 'classnames';
 import styles from '~/styles/common/inputs.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { IInputTextProps } from '~/redux/types';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
+import {Icon} from '~/components/input/Icon';
+import {IInputTextProps} from '~/redux/types';
+import {LoaderCircle} from '~/components/input/LoaderCircle';
 
 const InputText: FC<IInputTextProps> = ({
   wrapperClassName,

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,21 +1,21 @@
-import React, { createElement, FC, FormEvent, useCallback, useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import { IDialogProps } from '~/redux/modal/constants';
-import { useCloseOnEscape } from '~/utils/hooks';
-import { Group } from '~/components/containers/Group';
-import { InputText } from '~/components/input/InputText';
-import { Button } from '~/components/input/Button';
-import { Padder } from '~/components/containers/Padder';
+import React, {createElement, FC, FormEvent, useCallback, useEffect, useState} from 'react';
+import {connect} from 'react-redux';
+import {IDialogProps} from '~/redux/modal/constants';
+import {useCloseOnEscape} from '~/utils/hooks';
+import {Group} from '~/components/containers/Group';
+import {InputText} from '~/components/input/InputText';
+import {Button} from '~/components/input/Button';
+import {Padder} from '~/components/containers/Padder';
 import styles from './styles.module.scss';
-import { selectNode } from '~/redux/node/selectors';
-import { EditorPanel } from '~/components/editors/EditorPanel';
+import {selectNode} from '~/redux/node/selectors';
+import {EditorPanel} from '~/components/editors/EditorPanel';
 import * as NODE_ACTIONS from '~/redux/node/actions';
-import { selectUploads } from '~/redux/uploads/selectors';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { EMPTY_NODE, NODE_EDITORS } from '~/redux/node/constants';
-import { BetterScrollDialog } from '../BetterScrollDialog';
-import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
-import { IEditorComponentProps } from '~/redux/node/types';
+import {selectUploads} from '~/redux/uploads/selectors';
+import {ERROR_LITERAL} from '~/constants/errors';
+import {EMPTY_NODE, NODE_EDITORS} from '~/redux/node/constants';
+import {BetterScrollDialog} from '../BetterScrollDialog';
+import {CoverBackdrop} from '~/components/containers/CoverBackdrop';
+import {IEditorComponentProps} from '~/redux/node/types';
 
 const mapStateToProps = state => {
   const { editor, errors } = selectNode(state);
@@ -78,7 +78,13 @@ const EditorDialogUnconnected: FC<IProps> = ({
       <EditorPanel data={data} setData={setData} temp={temp} setTemp={setTemp} />
 
       <Group horizontal>
-        <InputText title="Название" value={data.title} handler={setTitle} autoFocus />
+        <InputText
+          title="Название"
+          value={data.title}
+          handler={setTitle}
+          autoFocus
+          maxLength={256}
+        />
 
         <Button title="Сохранить" iconRight="check" />
       </Group>