change npm to yarn; some changes

package.json

@@ -6,27 +6,31 @@
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-solid-svg-icons": "5.15.1",
-    "@fortawesome/react-fontawesome": "0.1.11",
+    "@fortawesome/react-fontawesome": "0.1.12",
-    "@sentry/browser": "5.26.0",
+    "@sentry/react": "5.27.2",
     "bbcode-to-react": "0.2.9",
-    "react": "16.14.0",
+    "react": "17.0.1",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.1",
     "react-loader-spinner": "3.1.14",
     "redux": "4.0.5",
-    "react-redux": "7.2.1",
+    "react-redux": "7.2.2",
-    "react-router-dom": "5.2.0"
+    "react-router-dom": "5.2.0",
+    "eruda": "2.4.1",
+    "eruda-dom": "2.0.0",
+    "eruda-memory": "2.0.0",
+    "eruda-features": "2.0.0"
   },
   "devDependencies": {
-    "@types/node": "14.11.8",
+    "@types/node": "14.14.6",
-    "@types/react": "16.9.52",
+    "@types/react": "16.9.55",
-    "@types/react-dom": "16.9.8",
+    "@types/react-dom": "16.9.9",
     "@types/react-redux": "7.1.9",
     "@types/react-router-dom": "5.1.6",
     "@types/react-transition-group": "4.4.0",
     "node-sass": "4.14.1",
     "redux-devtools-extension": "2.13.8",
-    "typescript": "4.0.3",
+    "typescript": "4.0.5",
-    "react-scripts": "3.4.3"
+    "react-scripts": "4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/api/api.ts

@@ -29,15 +29,12 @@ async function request<T>(url: string, method: string, body?: string | FormData)
 function get<T>(url: string, data?: object): Promise<T> {
     return request<T>(url, 'GET', JSON.stringify(data));
 }
-
 function post<T>(url: string, data?: object | FormData): Promise<T> {
     return request(url, 'POST', data instanceof FormData ? data : JSON.stringify(data));
 }
-
 function put<T>(url: string, data?: object): Promise<T> {
     return request<T>(url, 'PUT', JSON.stringify(data));
 }
-
 function del<T>(url: string, data?: object): Promise<T> {
     return request<T>(url, 'DELETE', JSON.stringify(data));
 }

src/index.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter} from "react-router-dom";
 import { Provider } from 'react-redux';
 import store from "./store/store";
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 import App from './pages/App/App';
 import * as serviceWorker from './serviceWorker';
+// @ts-ignore
+import eruda from 'eruda';
 
 if(process.env.NODE_ENV === 'production')
-    Sentry.init({ dsn: "https://27a5473611834ece9aca26216d79ad86@sentry.io/1810028" });
+    Sentry.init({
+        dsn: "https://27a5473611834ece9aca26216d79ad86@sentry.io/1810028"
+    });
+
+eruda.init();
 
 ReactDOM.render(
     <BrowserRouter>

src/pages/App/App.tsx

@@ -27,6 +27,7 @@ import { getVersion, version } from "../../api/api";
 import Settings from "../User/Settings/Settings";
 import { setUser } from "../../store/ducks/currentUser";
 import { setSettings } from "../../store/ducks/userSettings";
+import { withProfiler } from "@sentry/react";
 
 type Props = {
     notifications: React.ReactNode[]
@@ -138,4 +139,4 @@ export default connect(
         setUser: (userData: UserType) => dispatch(setUser(userData)),
         setSettings: (settings: UserSettingsType) => dispatch(setSettings(settings))
     })
-)(App);
+)(withProfiler(App));

src/pages/Modals/LoginModal.tsx

@@ -47,7 +47,7 @@ class LoginModal extends React.Component<Props, State> {
 
             setUser(user);
             const successful = (
-                <NotificationMessage level={"success"}>
+                <NotificationMessage level={"success"} position={"center"}>
                     Ты успешно вошел!
                 </NotificationMessage>
             );

src/pages/Navbar/Navbar.tsx

@@ -31,13 +31,12 @@ class Navbar extends React.Component<Props, State> {
         this.props.logout();
         localStorage.removeItem('user');
         localStorage.removeItem('theme');
-        document.querySelector('body')!!.removeAttribute('theme');
+        document.body.removeAttribute('theme');
-        userLogout().catch(() => {
+        userLogout().catch(() => {});
-        });
     };
 
     changeSize = () => {
-        this.setState({ expand: !this.state.expand })
+        this.setState({ expand: !this.state.expand });
     }
 
     componentDidMount() {

src/pages/Novel/Novel.tsx

@@ -125,13 +125,14 @@ class Novel extends React.Component<Props, State> {
             this.setState({ errorCode: err.code });
         });
 
-        if(currentUser.authorized)
+        if(currentUser.authorized) {
             fetchUserNovel(currentUser.id, params.novelId).then((userData: UserNovelType) => {
                 this.setState({ userData });
             }).catch((err: ApiError) => {
                 if(err.code !== 100) console.error(err.text);
             });
         }
+    }
 
     updateNovelMark = (mark: number) => {
         const { match: { params }, currentUser, hideModal, setModal } = this.props;

src/store/store.ts

@@ -1,9 +1,12 @@
 import { createStore } from "redux";
 import { composeWithDevTools } from "redux-devtools-extension";
 import reducers from "./ducks/index";
+import * as Sentry from "@sentry/react";
 
-const composeEnhancers = composeWithDevTools({
+const composeEnhancers = composeWithDevTools({ trace: true });
-    trace: true
+const sentryReduxEnhancer = Sentry.createReduxEnhancer({});
-});
+
-const store = process.env.NODE_ENV === 'development' ? createStore(reducers, composeEnhancers()) : createStore(reducers);
+const store = process.env.NODE_ENV === 'development'
+    ? createStore(reducers, composeEnhancers())
+    : createStore(reducers, sentryReduxEnhancer);
 export default store;

src/ui/Notifications/NotificationMessage.tsx

@@ -6,7 +6,7 @@ type Props = {
     children: React.ReactNode
     level?: 'info' | 'success' | 'error'
     hideTime?: number
-    position?: 'left' | 'bottom' | 'right'
+    position?: 'left' | 'center' | 'right'
 } & React.DetailedHTMLProps<React.AllHTMLAttributes<HTMLDivElement>, HTMLDivElement>
 
 type State = {
@@ -77,7 +77,7 @@ class NotificationMessage extends React.Component<Props, State> {
             case "left":
                 Object.assign(style, { bottom: 0, left: 0 });
                 break;
-            case "bottom":
+            case "center":
                 Object.assign(style, { bottom: 0, left: '50%', transform: 'translateX(-50%)' });
                 break;
             case "right":