Merge pull request #101 from muerwre/develop

removed redux completely

package.json

@@ -14,7 +14,6 @@
     "body-scroll-lock": "^2.6.4",
     "classnames": "^2.2.6",
     "color2k": "^1.2.4",
-    "connected-react-router": "^6.5.2",
     "date-fns": "^2.4.1",
     "file-loader": "^6.2.0",
     "flexbin": "^0.2.0",
@@ -22,7 +21,8 @@
     "insane": "^2.6.2",
     "marked": "^2.0.0",
     "mobx": "^6.3.10",
-    "mobx-react": "^7.2.1",
+    "mobx-persist-store": "^1.0.4",
+    "mobx-react-lite": "^3.2.3",
     "next": "^12.0.7",
     "node-sass": "^4.14.1",
     "photoswipe": "^4.1.3",
@@ -35,15 +35,11 @@
     "react-lazyload": "^3.2.0",
     "react-masonry-css": "^1.0.16",
     "react-popper": "^2.2.3",
-    "react-redux": "^7.2.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^5.0.0",
     "react-sortable-hoc": "^2.0.0",
     "react-sticky-box": "^0.9.3",
-    "redux": "^4.1.2",
-    "redux-persist": "^5.10.0",
-    "redux-saga": "^1.1.1",
     "sticky-sidebar": "^3.3.1",
     "swiper": "^6.8.4",
     "swr": "^1.0.1",
@@ -83,7 +79,6 @@
     "@types/marked": "^1.2.2",
     "@types/node": "^11.13.22",
     "@types/ramda": "^0.26.33",
-    "@types/react-redux": "^7.1.11",
     "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
     "craco-alias": "^2.3.1",

src/api/auth/index.ts

@@ -21,7 +21,7 @@ import {
   ApiUpdateUserResult,
   ApiUserLoginRequest,
   ApiUserLoginResult,
-} from './types';
+} from '~/api/auth/types';
 
 export const apiUserLogin = ({ username, password }: ApiUserLoginRequest) =>
   api
@@ -41,9 +41,9 @@ export const apiAuthGetUpdates = ({ exclude_dialogs, last }: ApiAuthGetUpdatesRe
 export const apiUpdateUser = ({ user }: ApiUpdateUserRequest) =>
   api.patch<ApiUpdateUserResult>(API.USER.ME, user).then(cleanResult);
 
-export const apiRequestRestoreCode = ({ field }: { field: string }) =>
+export const apiRequestRestoreCode = (field: string) =>
   api
-    .post<{}>(API.USER.REQUEST_CODE(), { field })
+    .post<{ field: string }>(API.USER.REQUEST_CODE(), { field })
     .then(cleanResult);
 
 export const apiCheckRestoreCode = ({ code }: ApiCheckRestoreCodeRequest) =>

src/api/auth/types.ts

@@ -1,104 +1,16 @@
-import { IFile, INotification } from '../types';
-
-export interface IToken {
-  access: string;
-  refresh: string;
-}
-
-export interface IUser {
-  id: number;
-  username: string;
-  email: string;
-  role: string;
-  photo?: IFile;
-  cover?: IFile;
-  name: string;
-  fullname: string;
-  description: string;
-
-  last_seen: string;
-  last_seen_messages: string;
-  last_seen_boris: string;
-
-  is_activated: boolean;
-  is_user: boolean;
-}
-
-export type ISocialProvider = 'vkontakte' | 'google';
-
-export interface ISocialAccount {
-  provider: ISocialProvider;
-  id: string;
-  name: string;
-  photo: string;
-}
-
-export type IAuthState = Readonly<{
-  user: IUser;
-  token: string;
-
-  is_tester: boolean;
-
-  updates: {
-    last: string;
-    notifications: INotification[];
-    boris_commented_at: string;
-  };
-
-  login: {
-    error: string;
-    is_loading: boolean;
-    is_registering: boolean;
-  };
-
-  profile: {
-    is_loading: boolean;
-
-    user?: IUser;
-    patch_errors: Record<string, string>;
-
-    socials: {
-      accounts: ISocialAccount[];
-      error: string;
-      is_loading: boolean;
-    };
-  };
-
-  restore: {
-    code: string;
-    user?: Pick<IUser, 'username' | 'photo'>;
-    is_loading: boolean;
-    is_succesfull: boolean;
-    error: string;
-  };
-
-  register_social: {
-    errors: {
-      username: string;
-      password: string;
-    };
-    error: string;
-    token: string;
-    is_loading: boolean;
-  };
-}>;
-
-export type ApiWithTokenRequest = { access: string };
+import { INotification } from '~/types';
+import { ISocialAccount, IUser } from '~/types/auth';
 
 export type ApiUserLoginRequest = Record<'username' | 'password', string>;
 export type ApiUserLoginResult = { token: string; user: IUser };
-
 export type ApiAuthGetUserRequest = {};
 export type ApiAuthGetUserResult = { user: IUser };
-
 export type ApiUpdateUserRequest = {
   user: Partial<IUser & { password: string; newPassword: string }>;
 };
 export type ApiUpdateUserResult = { user: IUser; errors: Record<Partial<keyof IUser>, string> };
-
 export type ApiAuthGetUserProfileRequest = { username: string };
 export type ApiAuthGetUserProfileResult = { user: IUser };
-
 export type ApiAuthGetUpdatesRequest = {
   exclude_dialogs: number;
   last: string;
@@ -107,27 +19,20 @@ export type ApiAuthGetUpdatesResult = {
   notifications: INotification[];
   boris: { commented_at: string };
 };
-
 export type ApiCheckRestoreCodeRequest = { code: string };
 export type ApiCheckRestoreCodeResult = { user: IUser };
-
 export type ApiRestoreCodeRequest = { code: string; password: string };
 export type ApiRestoreCodeResult = { token: string; user: IUser };
-
 export type ApiGetSocialsResult = { accounts: ISocialAccount[] };
-
 export type ApiDropSocialRequest = { id: string; provider: string };
 export type ApiDropSocialResult = { accounts: ISocialAccount[] };
-
 export type ApiAttachSocialRequest = { token: string };
 export type ApiAttachSocialResult = { account: ISocialAccount };
-
 export type ApiLoginWithSocialRequest = {
   token: string;
   username?: string;
   password?: string;
 };
-
 export type ApiLoginWithSocialResult = {
   token: string;
   errors: Record<string, string>;

src/api/flow/index.ts

@@ -1,18 +1,8 @@
-import { api, cleanResult, configWithToken } from '~/utils/api';
-import { INode, IResultWithStatus } from 'src/redux/types';
+import { api, cleanResult } from '~/utils/api';
 import { API } from '~/constants/api';
 import { PostCellViewRequest, PostCellViewResult } from '~/types/node';
 import { GetSearchResultsRequest, GetSearchResultsResult } from '~/types/flow';
 
-export const postNode = ({
-  access,
-  node,
-}: {
-  access: string;
-  node: INode;
-}): Promise<IResultWithStatus<INode>> =>
-  api.post(API.NODE.SAVE, { node }, configWithToken(access)).then(cleanResult);
-
 export const postCellView = ({ id, flow }: PostCellViewRequest) =>
   api
     .post<PostCellViewResult>(API.NODE.SET_CELL_VIEW(id), { flow })

src/api/messages/types.ts

@@ -1,4 +1,4 @@
-import { IMessage } from '~/redux/types';
+import { IMessage } from '~/types';
 
 export type ApiGetUserMessagesRequest = {
   username: string;

src/api/node/index.ts

@@ -1,5 +1,5 @@
 import { api, cleanResult } from '~/utils/api';
-import { IComment, INode } from '~/redux/types';
+import { IComment, INode } from '~/types';
 import { API } from '~/constants/api';
 import { COMMENTS_DISPLAY } from '~/constants/node';
 import {

src/api/uploads/types.ts

@@ -1,4 +1,4 @@
-import { IFile, IUploadProgressHandler } from '~/redux/types';
+import { IFile, IUploadProgressHandler } from '~/types';
 import { UploadTarget, UploadType } from '~/constants/uploads';
 
 export type ApiUploadFileRequest = {

src/components/auth/login/LoginDialogButtons/index.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { Button } from '~/components/input/Button';
+import { Grid } from '~/components/containers/Grid';
+import { Group } from '~/components/containers/Group';
+import styles from './styles.module.scss';
+import { OAuthProvider } from '~/types/auth';
+
+interface IProps {
+  openOauthWindow: (provider: OAuthProvider) => void;
+}
+
+const LoginDialogButtons: FC<IProps> = ({ openOauthWindow }) => (
+  <Group className={styles.footer}>
+    <Button>Войти</Button>
+
+    <Grid columns="repeat(2, 1fr)">
+      <Button
+        color="outline"
+        iconLeft="google"
+        type="button"
+        onClick={() => openOauthWindow('google')}
+      >
+        <span>Google</span>
+      </Button>
+
+      <Button
+        color="outline"
+        iconLeft="vk"
+        type="button"
+        onClick={() => openOauthWindow('vkontakte')}
+      >
+        <span>Вконтакте</span>
+      </Button>
+    </Grid>
+  </Group>
+);
+
+export { LoginDialogButtons };

src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { Button } from '~/components/input/Button';
+import styles from './styles.module.scss';
+
+interface IProps {}
+
+const LoginSocialRegisterButtons: FC<IProps> = () => (
+  <div className={styles.wrap}>
+    <Button color="secondary">Впустите меня!</Button>
+  </div>
+);
+
+export { LoginSocialRegisterButtons };

src/components/auth/restore/RestoreInvalidCode/index.tsx

@@ -0,0 +1,27 @@
+import React, { VFC } from 'react';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Icon } from '~/components/input/Icon';
+import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
+import { Button } from '~/components/input/Button';
+
+interface RestoreInvalidCodeProps {
+  error: string;
+  onClose: () => void;
+}
+
+const RestoreInvalidCode: VFC<RestoreInvalidCodeProps> = ({ error, onClose }) => (
+  <Group className={styles.error_shade}>
+    <Icon icon="close" size={64} />
+
+    <div>{error || ERROR_LITERAL[ERRORS.CODE_IS_INVALID]}</div>
+
+    <div className={styles.spacer} />
+
+    <Button color="primary" onClick={onClose}>
+      Очень жаль
+    </Button>
+  </Group>
+);
+
+export { RestoreInvalidCode };

src/components/auth/restore/RestoreInvalidCode/styles.module.scss

@@ -0,0 +1,35 @@
+@import "src/styles/variables";
+
+.error_shade {
+  @include outer_shadow();
+
+  background: $content_bg;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  padding: $gap * 2;
+  box-sizing: border-box;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+  text-align: center;
+  color: $wisegreen;
+
+  svg {
+    fill: $wisegreen;
+  }
+}
+
+.error_shade {
+  color: $red;
+
+  svg {
+    fill: $red;
+  }
+}

src/components/auth/restore/RestoreSent/index.tsx

@@ -0,0 +1,25 @@
+import React, { VFC } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { Button } from '~/components/input/Button';
+import { Group } from '~/components/containers/Group';
+
+interface RestoreSentProps {
+  onClose: () => void;
+}
+
+const RestoreSent: VFC<RestoreSentProps> = ({ onClose }) => (
+  <Group className={styles.shade}>
+    <Icon icon="check" size={64} />
+
+    <div>Проверьте почту, мы отправили на неё код</div>
+
+    <div />
+
+    <Button color="secondary" onClick={onClose}>
+      Отлично!
+    </Button>
+  </Group>
+);
+
+export { RestoreSent };

src/components/auth/restore/RestoreSent/styles.module.scss

@@ -0,0 +1,27 @@
+@import "src/styles/variables";
+
+.shade {
+  @include outer_shadow();
+
+  background: $content_bg;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  padding: $gap * 2;
+  box-sizing: border-box;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+  text-align: center;
+  color: $wisegreen;
+
+  svg {
+    fill: $wisegreen;
+  }
+}

src/components/auth/restore/RestoreSuccess/index.tsx

@@ -0,0 +1,27 @@
+import React, { VFC } from 'react';
+import { Icon } from '~/components/input/Icon';
+import { Button } from '~/components/input/Button';
+import { Group } from '~/components/containers/Group';
+import styles from './styles.module.scss';
+
+interface RestoreSuccessProps {
+  username?: string;
+  onClick: () => void;
+}
+
+const RestoreSuccess: VFC<RestoreSuccessProps> = ({ username, onClick }) => (
+  <Group className={styles.shade}>
+    <Icon icon="check" size={64} />
+
+    <div>Пароль обновлен</div>
+    <div>Добро пожаловать домой{username ? `, ~${username}` : ''}!</div>
+
+    <div />
+
+    <Button color="secondary" onClick={onClick}>
+      Ура!
+    </Button>
+  </Group>
+);
+
+export { RestoreSuccess };

src/components/auth/restore/RestoreSuccess/styles.module.scss

@@ -0,0 +1,27 @@
+@import "src/styles/variables";
+
+.shade {
+  @include outer_shadow();
+
+  background: $content_bg;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  padding: $gap * 2;
+  box-sizing: border-box;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+  text-align: center;
+  color: $wisegreen;
+
+  svg {
+    fill: $wisegreen;
+  }
+}

src/components/bars/PlayerBar/index.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, VFC } from "react";
-import styles from "./styles.module.scss";
-import { Icon } from "~/components/input/Icon";
-import { PlayerState } from "~/constants/player";
-import { path } from "ramda";
-import { IFile } from "~/redux/types";
-import { PlayerProgress } from "~/types/player";
+import React, { useCallback, VFC } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { PlayerState } from '~/constants/player';
+import { path } from 'ramda';
+import { IFile } from '~/types';
+import { PlayerProgress } from '~/types/player';
 
 interface Props {
   progress: PlayerProgress;

src/components/bars/SubmitBar/index.tsx

@@ -1,26 +1,26 @@
-import React, { FC, useCallback, useState } from "react";
-import { Icon } from "~/components/input/Icon";
-import { Link } from "react-router-dom";
-import classNames from "classnames";
-import { useRouteMatch } from "react-router";
-import styles from "./styles.module.scss";
+import React, { FC, useCallback, useState } from 'react';
+import { Icon } from '~/components/input/Icon';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Dialog } from '~/constants/modal';
 
 interface Props {
   isLab?: boolean;
 }
 
 const SubmitBar: FC<Props> = ({ isLab }) => {
-  const { url } = useRouteMatch();
+  const showModal = useShowModal(Dialog.CreateNode);
   const [focused, setFocused] = useState(false);
 
   const onFocus = useCallback(() => setFocused(true), [setFocused]);
   const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
   const createUrl = useCallback(
-    (type: string) => {
-      return [url.replace(/\/$/, ''), 'create', type].join('/');
+    (type: string) => () => {
+      showModal({ type, isInLab: !!isLab });
     },
-    [url]
+    [isLab, showModal]
   );
 
   const icon = isLab ? 'lab' : 'plus';
@@ -28,21 +28,21 @@ const SubmitBar: FC<Props> = ({ isLab }) => {
   return (
     <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
       <div className={classNames(styles.panel, { [styles.active]: focused })}>
-        <Link to={createUrl('image')} className={styles.link}>
+        <button onClick={createUrl('image')} className={styles.link}>
           <Icon icon="image" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('text')} className={styles.link}>
+        <button onClick={createUrl('text')} className={styles.link}>
           <Icon icon="text" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('video')} className={styles.link}>
+        <button onClick={createUrl('video')} className={styles.link}>
           <Icon icon="video" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('audio')} className={styles.link}>
+        <button onClick={createUrl('audio')} className={styles.link}>
           <Icon icon="audio" size={32} />
-        </Link>
+        </button>
       </div>
 
       <button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button">

src/components/boris/BorisContactItem/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { Icon } from "~/components/input/Icon";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
 
 interface Props {
   icon: string;

src/components/boris/BorisContactItem/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables.scss";
+@import "src/styles/variables.scss";
 
 .item {
   display: flex;

src/components/boris/BorisContacts/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import { BorisContactItem } from "~/components/boris/BorisContactItem";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import { BorisContactItem } from '~/components/boris/BorisContactItem';
+import styles from './styles.module.scss';
 
 interface Props {}
 

src/components/boris/BorisContacts/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .contacts {
   @include inner_shadow;

src/components/boris/BorisSidebar/index.tsx

@@ -1,24 +1,23 @@
-import React, { FC } from "react";
-import styles from "~/layouts/BorisLayout/styles.module.scss";
-import { BorisSuperpowers } from "~/components/boris/BorisSuperpowers";
-import { BorisContacts } from "~/components/boris/BorisContacts";
-import { BorisStats } from "~/components/boris/BorisStats";
-import { Group } from "~/components/containers/Group";
-import { IUser } from "~/redux/auth/types";
-import { BorisUsageStats } from "~/types/boris";
+import React, { FC } from 'react';
+import styles from '~/layouts/BorisLayout/styles.module.scss';
+import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
+import { BorisContacts } from '~/components/boris/BorisContacts';
+import { BorisStats } from '~/components/boris/BorisStats';
+import { Group } from '~/components/containers/Group';
+import { BorisUsageStats } from '~/types/boris';
 
 interface Props {
-  user: IUser;
+  isUser: boolean;
   isTester: boolean;
   stats: BorisUsageStats;
   setBetaTester: (val: boolean) => void;
   isLoading: boolean;
 }
 
-const BorisSidebar: FC<Props> = ({ user, stats, isLoading, isTester, setBetaTester }) => (
+const BorisSidebar: FC<Props> = ({ isUser, stats, isLoading, isTester, setBetaTester }) => (
   <Group className={styles.stats__container}>
     <div className={styles.super_powers}>
-      {user.is_user && <BorisSuperpowers active={isTester} onChange={setBetaTester} />}
+      {isUser && <BorisSuperpowers active={isTester} onChange={setBetaTester} />}
     </div>
 
     <BorisContacts />

src/components/boris/BorisStats/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import { BorisUsageStats } from "~/types/boris";
-import { BorisStatsGit } from "../BorisStatsGit";
-import { BorisStatsBackend } from "../BorisStatsBackend";
+import React, { FC } from 'react';
+import { BorisUsageStats } from '~/types/boris';
+import { BorisStatsGit } from '../BorisStatsGit';
+import { BorisStatsBackend } from '../BorisStatsBackend';
 
 interface IProps {
   stats: BorisUsageStats;

src/components/boris/BorisStatsBackend/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from "react";
-import { StatBackend } from "~/types/boris";
-import styles from "./styles.module.scss";
-import { sizeOf } from "~/utils/dom";
-import { StatsRow } from "~/components/common/StatsRow";
-import { SubTitle } from "~/components/common/SubTitle";
+import React, { FC } from 'react';
+import { StatBackend } from '~/types/boris';
+import styles from './styles.module.scss';
+import { sizeOf } from '~/utils/dom';
+import { StatsRow } from '~/components/common/StatsRow';
+import { SubTitle } from '~/components/common/SubTitle';
 
 interface IProps {
   stats: StatBackend;

src/components/boris/BorisStatsGit/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from "react";
-import { GithubIssue } from "~/types/boris";
-import styles from "./styles.module.scss";
-import { Placeholder } from "~/components/placeholders/Placeholder";
-import { BorisStatsGitCard } from "../BorisStatsGitCard";
+import React, { FC, useMemo } from 'react';
+import { GithubIssue } from '~/types/boris';
+import styles from './styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { BorisStatsGitCard } from '../BorisStatsGitCard';
 
 interface IProps {
   issues: GithubIssue[];

src/components/boris/BorisStatsGitCard/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from "react";
-import styles from "./styles.module.scss";
-import { getPrettyDate } from "~/utils/dom";
-import { GithubIssue } from "~/types/boris";
-import classNames from "classnames";
+import React, { FC, useMemo } from 'react';
+import styles from './styles.module.scss';
+import { getPrettyDate } from '~/utils/dom';
+import { GithubIssue } from '~/types/boris';
+import classNames from 'classnames';
 
 interface IProps {
   data: GithubIssue;

src/components/boris/BorisSuperpowers/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useCallback } from "react";
-import styles from "./styles.module.scss";
-import { Toggle } from "~/components/input/Toggle";
+import React, { FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import { Toggle } from '~/components/input/Toggle';
 
 interface IProps {
   active?: boolean;

src/components/boris/BorisSuperpowers/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .wrap {
   display: grid;

src/components/boris/BorisUIDemo/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useState } from "react";
-import { Card } from "~/components/containers/Card";
-import styles from "./styles.module.scss";
-import markdown from "~/styles/common/markdown.module.scss";
-import { Group } from "~/components/containers/Group";
-import { Button } from "~/components/input/Button";
-import { InputText } from "~/components/input/InputText";
+import React, { FC, useState } from 'react';
+import { Card } from '~/components/containers/Card';
+import styles from './styles.module.scss';
+import markdown from '~/styles/common/markdown.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+import { InputText } from '~/components/input/InputText';
 
 interface IProps {}
 

src/components/boris/BorisUIDemo/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables.scss";
+@import "src/styles/variables.scss";
 
 .card {
   flex: 3;

src/components/boris/Superpower/index.tsx

@@ -1,14 +1,12 @@
-import React, { FC } from "react";
-import { useShallowSelect } from "~/hooks/data/useShallowSelect";
-import { selectAuthIsTester, selectUser } from "~/redux/auth/selectors";
+import React, { FC } from 'react';
+import { useAuth } from '~/hooks/auth/useAuth';
 
 interface IProps {}
 
 const Superpower: FC<IProps> = ({ children }) => {
-  const user = useShallowSelect(selectUser);
-  const is_tester = useShallowSelect(selectAuthIsTester);
+  const { isTester } = useAuth();
 
-  if (!user.is_user || !is_tester) return null;
+  if (!isTester) return null;
 
   return <>{children}</>;
 };

src/components/comment/Comment/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, HTMLAttributes, memo } from "react";
-import { CommentWrapper } from "~/components/containers/CommentWrapper";
-import { IComment, ICommentGroup, IFile } from "~/redux/types";
-import { CommentContent } from "~/components/comment/CommentContent";
-import styles from "./styles.module.scss";
-import { CommendDeleted } from "../../node/CommendDeleted";
-import classNames from "classnames";
-import { NEW_COMMENT_CLASSNAME } from "~/constants/comment";
+import React, { FC, HTMLAttributes, memo } from 'react';
+import { CommentWrapper } from '~/components/containers/CommentWrapper';
+import { IComment, ICommentGroup, IFile } from '~/types';
+import { CommentContent } from '~/components/comment/CommentContent';
+import styles from './styles.module.scss';
+import { CommendDeleted } from '../../node/CommendDeleted';
+import classNames from 'classnames';
+import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   nodeId: number;

src/components/comment/CommentAvatar/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback, useState } from "react";
-import { IUser } from "~/redux/auth/types";
-import { Avatar } from "~/components/common/Avatar";
-import { path } from "ramda";
-import { Manager, Popper, Reference } from "react-popper";
-import styles from "./styles.module.scss";
-import { useRandomPhrase } from "~/constants/phrases";
+import React, { FC, useCallback, useState } from 'react';
+import { IUser } from '~/types/auth';
+import { Avatar } from '~/components/common/Avatar';
+import { path } from 'ramda';
+import { Manager, Popper, Reference } from 'react-popper';
+import styles from './styles.module.scss';
+import { useRandomPhrase } from '~/constants/phrases';
 
 interface Props {
   user: IUser;

src/components/comment/CommentAvatar/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables.scss";
+@import "src/styles/variables.scss";
 
 @keyframes appear {
   0% { opacity: 0 }

src/components/comment/CommentContent/index.tsx

@@ -1,18 +1,18 @@
-import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useState } from "react";
-import { IComment, IFile } from "~/redux/types";
-import { append, assocPath, path } from "ramda";
-import { formatCommentText, getPrettyDate, getURL } from "~/utils/dom";
-import { Group } from "~/components/containers/Group";
-import styles from "./styles.module.scss";
-import { UploadType } from "~/constants/uploads";
-import reduce from "ramda/es/reduce";
-import { AudioPlayer } from "~/components/media/AudioPlayer";
-import classnames from "classnames";
-import classNames from "classnames";
-import { PRESETS } from "~/constants/urls";
-import { COMMENT_BLOCK_RENDERERS } from "~/constants/comment";
-import { CommentMenu } from "../CommentMenu";
-import { CommentForm } from "~/components/comment/CommentForm";
+import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useState } from 'react';
+import { IComment, IFile } from '~/types';
+import { append, assocPath, path } from 'ramda';
+import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
+import { Group } from '~/components/containers/Group';
+import styles from './styles.module.scss';
+import { UploadType } from '~/constants/uploads';
+import reduce from 'ramda/es/reduce';
+import { AudioPlayer } from '~/components/media/AudioPlayer';
+import classnames from 'classnames';
+import classNames from 'classnames';
+import { PRESETS } from '~/constants/urls';
+import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
+import { CommentMenu } from '../CommentMenu';
+import { CommentForm } from '~/components/comment/CommentForm';
 
 interface IProps {
   nodeId: number;

src/components/comment/CommentEmbedBlock/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, memo, useMemo } from "react";
-import { ICommentBlockProps } from "~/constants/comment";
-import styles from "./styles.module.scss";
-import { getYoutubeThumb } from "~/utils/dom";
-import { Icon } from "~/components/input/Icon";
-import { useYoutubeMetadata } from "~/hooks/metadata/useYoutubeMetadata";
+import React, { FC, memo, useMemo } from 'react';
+import { ICommentBlockProps } from '~/constants/comment';
+import styles from './styles.module.scss';
+import { getYoutubeThumb } from '~/utils/dom';
+import { Icon } from '~/components/input/Icon';
+import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata';
 
 type Props = ICommentBlockProps & {};
 

src/components/comment/CommentForm/index.tsx

@@ -1,23 +1,23 @@
-import React, { FC, useCallback, useState } from "react";
-import { useCommentFormFormik } from "~/hooks/comments/useCommentFormFormik";
-import { FormikProvider } from "formik";
-import { LocalCommentFormTextarea } from "~/components/comment/LocalCommentFormTextarea";
-import { Button } from "~/components/input/Button";
-import { UploadSubject, UploadTarget } from "~/constants/uploads";
-import { CommentFormAttachButtons } from "~/components/comment/CommentFormAttachButtons";
-import { CommentFormFormatButtons } from "~/components/comment/CommentFormFormatButtons";
-import { CommentFormAttaches } from "~/components/comment/CommentFormAttaches";
-import { LoaderCircle } from "~/components/input/LoaderCircle";
-import { IComment, INode } from "~/redux/types";
-import { EMPTY_COMMENT } from "~/constants/node";
-import { UploadDropzone } from "~/components/upload/UploadDropzone";
-import styles from "./styles.module.scss";
-import { ERROR_LITERAL } from "~/constants/errors";
-import { useInputPasteUpload } from "~/hooks/dom/useInputPasteUpload";
-import { Filler } from "~/components/containers/Filler";
-import { useUploader } from "~/hooks/data/useUploader";
-import { UploaderContextProvider } from "~/utils/context/UploaderContextProvider";
-import { observer } from "mobx-react-lite";
+import React, { FC, useCallback, useState } from 'react';
+import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
+import { FormikProvider } from 'formik';
+import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
+import { Button } from '~/components/input/Button';
+import { UploadSubject, UploadTarget } from '~/constants/uploads';
+import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
+import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
+import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { IComment, INode } from '~/types';
+import { EMPTY_COMMENT } from '~/constants/node';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import styles from './styles.module.scss';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
+import { Filler } from '~/components/containers/Filler';
+import { useUploader } from '~/hooks/data/useUploader';
+import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
+import { observer } from 'mobx-react-lite';
 
 interface IProps {
   comment?: IComment;

src/components/comment/CommentFormAttachButtons/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from "react";
-import { ButtonGroup } from "~/components/input/ButtonGroup";
-import { Button } from "~/components/input/Button";
-import { COMMENT_FILE_TYPES } from "~/constants/uploads";
+import React, { FC, useCallback } from 'react';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { Button } from '~/components/input/Button';
+import { COMMENT_FILE_TYPES } from '~/constants/uploads';
 
 interface IProps {
   onUpload: (files: File[]) => void;

src/components/comment/CommentFormAttaches/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
-import { IFile } from '~/redux/types';
+import { IFile } from '~/types';
 import { SortEnd } from 'react-sortable-hoc';
 import { moveArrItem } from '~/utils/fn';
 import { useFileDropZone } from '~/hooks';

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useCallback, useEffect } from "react";
-import { ButtonGroup } from "~/components/input/ButtonGroup";
-import { Button } from "~/components/input/Button";
-import { useFormatWrapper, wrapTextInsideInput } from "~/hooks/dom/useFormatWrapper";
-import styles from "./styles.module.scss";
+import React, { FC, useCallback, useEffect } from 'react';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { Button } from '~/components/input/Button';
+import { useFormatWrapper, wrapTextInsideInput } from '~/hooks/dom/useFormatWrapper';
+import styles from './styles.module.scss';
 
 interface IProps {
   element: HTMLTextAreaElement;

src/components/comment/CommentMenu/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useCallback, useState } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, useCallback, useState } from 'react';
+import styles from './styles.module.scss';
 
 interface IProps {
   onEdit: () => void;

src/components/comment/CommentTextBlock/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useMemo } from "react";
-import { ICommentBlockProps } from "~/constants/comment";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
-import markdown from "~/styles/common/markdown.module.scss";
-import { formatText } from "~/utils/dom";
+import React, { FC, useMemo } from 'react';
+import { ICommentBlockProps } from '~/constants/comment';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import markdown from '~/styles/common/markdown.module.scss';
+import { formatText } from '~/utils/dom';
 
 interface IProps extends ICommentBlockProps {}
 

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from "react";
-import { Textarea } from "~/components/input/Textarea";
-import { useCommentFormContext } from "~/hooks/comments/useCommentFormFormik";
-import { useRandomPhrase } from "~/constants/phrases";
+import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react';
+import { Textarea } from '~/components/input/Textarea';
+import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
+import { useRandomPhrase } from '~/constants/phrases';
 
 interface IProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   isLoading?: boolean;

src/components/common/Avatar/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback } from "react";
-import { getURLFromString } from "~/utils/dom";
-import { PRESETS } from "~/constants/urls";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
-import { openUserProfile } from "~/utils/user";
-import { DivProps } from "~/utils/types";
+import React, { FC, useCallback } from 'react';
+import { getURLFromString } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { openUserProfile } from '~/utils/user';
+import { DivProps } from '~/utils/types';
 
 interface Props extends DivProps {
   url?: string;

src/components/common/Avatar/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .avatar {
   @include outer_shadow;

src/components/common/MenuDots/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from "react";
-import styles from "~/components/flow/FlowCell/styles.module.scss";
-import { Icon } from "~/components/input/Icon";
-import { ButtonProps } from "~/utils/types";
-import classNames from "classnames";
+import React, { FC } from 'react';
+import styles from '~/components/flow/FlowCell/styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { ButtonProps } from '~/utils/types';
+import classNames from 'classnames';
 
 interface Props extends ButtonProps {}
 

src/components/common/SubTitle/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from "react";
-import { Placeholder } from "~/components/placeholders/Placeholder";
-import { DivProps } from "~/utils/types";
-import classNames from "classnames";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
 
 interface Props extends DivProps {
   isLoading?: boolean;

src/components/common/SubTitle/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables.scss";
+@import "src/styles/variables.scss";
 
 .title {
   font: $font_12_semibold;

src/components/containers/Authorized/index.tsx

@@ -1,13 +1,12 @@
-import React, { FC } from "react";
-import { useShallowSelect } from "~/hooks/data/useShallowSelect";
-import { selectUser } from "~/redux/auth/selectors";
+import React, { FC } from 'react';
+import { useAuth } from '~/hooks/auth/useAuth';
 
 interface IProps {}
 
 const Authorized: FC<IProps> = ({ children }) => {
-  const user = useShallowSelect(selectUser);
+  const { isUser } = useAuth();
 
-  if (!user.is_user) return null;
+  if (!isUser) return null;
 
   return <>{children}</>;
 };

src/components/containers/BlurWrapper/index.tsx

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

src/components/containers/Card/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/CellGrid/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, HTMLAttributes } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, HTMLAttributes } from 'react';
+import styles from './styles.module.scss';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;

src/components/containers/CommentWrapper/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from "react";
-import classNames from "classnames";
+import React, { FC } from 'react';
+import classNames from 'classnames';
 
-import styles from "./styles.module.scss";
-import { IUser } from "~/redux/auth/types";
-import { path } from "ramda";
-import { CommentAvatar } from "~/components/comment/CommentAvatar";
-import { DivProps } from "~/utils/types";
+import styles from './styles.module.scss';
+import { IUser } from '~/types/auth';
+import { path } from 'ramda';
+import { CommentAvatar } from '~/components/comment/CommentAvatar';
+import { DivProps } from '~/utils/types';
 
 type IProps = DivProps & {
   user: IUser;

src/components/containers/CoverBackdrop/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from "react";
-import { IUser } from "~/redux/auth/types";
-import styles from "./styles.module.scss";
-import { getURL } from "~/utils/dom";
-import { PRESETS } from "~/constants/urls";
-import classNames from "classnames";
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { IUser } from '~/types/auth';
+import styles from './styles.module.scss';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import classNames from 'classnames';
 
 interface IProps {
   cover: IUser['cover'];

src/components/containers/Filler/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement>;
 

src/components/containers/Grid/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;

src/components/containers/Group/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;

src/components/containers/InfiniteScroll/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
 
 interface IProps extends HTMLAttributes<HTMLDivElement> {
   hasMore: boolean;

src/components/containers/Markdown/index.tsx

@@ -1,6 +1,6 @@
-import React, { DetailedHTMLProps, FC, HTMLAttributes } from "react";
-import styles from "~/styles/common/markdown.module.scss";
-import classNames from "classnames";
+import React, { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
+import styles from '~/styles/common/markdown.module.scss';
+import classNames from 'classnames';
 
 interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 

src/components/containers/Padder/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;

src/components/containers/PageCoverProvider/index.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, FC, useContext, useState } from "react";
-import styles from "./styles.module.scss";
-import { createPortal } from "react-dom";
-import { getURL } from "~/utils/dom";
-import { PRESETS } from "~/constants/urls";
-import { IFile } from "~/redux/types";
+import React, { createContext, FC, useContext, useState } from 'react';
+import styles from './styles.module.scss';
+import { createPortal } from 'react-dom';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import { IFile } from '~/types';
 
 interface CoverContextValue {
   cover: IFile | null;

src/components/containers/PageCoverProvider/usePageCover.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { IFile } from '~/redux/types';
+import { IFile } from '~/types';
 import { usePageCoverContext } from '~/components/containers/PageCoverProvider/index';
 
 export const usePageCover = (cover?: IFile) => {

src/components/containers/Panel/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, HTMLAttributes } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, HTMLAttributes } from 'react';
+import styles from './styles.module.scss';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/Square/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { DivProps } from "~/utils/types";
-import classNames from "classnames";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
 
 interface IProps extends DivProps {}
 

src/components/containers/Sticky/index.tsx

@@ -1,5 +1,5 @@
-import React, { DetailsHTMLAttributes, FC } from "react";
-import StickyBox from "react-sticky-box";
+import React, { DetailsHTMLAttributes, FC } from 'react';
+import StickyBox from 'react-sticky-box';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;

src/components/containers/TagField/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, HTMLAttributes } from 'react';
+import styles from './styles.module.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 

src/components/dialogs/BetterScrollDialog/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, MouseEventHandler, useEffect, useRef } from "react";
-import styles from "./styles.module.scss";
-import { clearAllBodyScrollLocks, disableBodyScroll } from "body-scroll-lock";
-import { Icon } from "~/components/input/Icon";
-import { LoaderCircle } from "~/components/input/LoaderCircle";
+import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
+import { Icon } from '~/components/input/Icon';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 interface IProps {
   children: React.ReactChild;

src/components/dialogs/DialogTitle/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, ReactNode } from 'react';
+import styles from './styles.module.scss';
 
 interface IProps {
   children: ReactNode;

src/components/dialogs/ModalWrapper/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, MouseEventHandler } from "react";
-import ReactDOM from "react-dom";
-import styles from "./styles.module.scss";
+import React, { FC, MouseEventHandler } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './styles.module.scss';
 
 type IProps = {
   onOverlayClick: MouseEventHandler;

src/components/dialogs/ModalWrapper/styles.module.scss

@@ -46,6 +46,8 @@
 }
 
 .overlay {
+  @include modal_backdrop();
+
   position: absolute;
   top: 0;
   left: 0;
@@ -53,6 +55,4 @@
   height: 100%;
   cursor: pointer;
   animation: appear 0.25s forwards;
-
-  @include blur();
 }

src/components/dialogs/Tabs/index.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, FC, useContext, useMemo, useState, VFC } from "react";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
+import React, { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
 
 interface TabProps {
   items: string[];

src/components/dialogs/Tabs/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .wrap {
   display: flex;

src/components/editors/AudioEditor/index.tsx

@@ -1,15 +1,15 @@
-import React, { FC, useCallback, useMemo } from "react";
-import { UploadType } from "~/constants/uploads";
-import { ImageGrid } from "../ImageGrid";
-import { AudioGrid } from "../AudioGrid";
-import styles from "./styles.module.scss";
-import { NodeEditorProps } from "~/types/node";
-import { useNodeImages } from "~/hooks/node/useNodeImages";
-import { useNodeAudios } from "~/hooks/node/useNodeAudios";
-import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
-import { UploadDropzone } from "~/components/upload/UploadDropzone";
-import { useUploaderContext } from "~/utils/context/UploaderContextProvider";
-import { values } from "ramda";
+import React, { FC, useCallback, useMemo } from 'react';
+import { UploadType } from '~/constants/uploads';
+import { ImageGrid } from '../ImageGrid';
+import { AudioGrid } from '../AudioGrid';
+import styles from './styles.module.scss';
+import { NodeEditorProps } from '~/types/node';
+import { useNodeImages } from '~/hooks/node/useNodeImages';
+import { useNodeAudios } from '~/hooks/node/useNodeAudios';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import { values } from 'ramda';
 
 type IProps = NodeEditorProps;
 

src/components/editors/AudioGrid/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useCallback } from "react";
-import { SortEnd } from "react-sortable-hoc";
-import { IFile } from "~/redux/types";
-import { moveArrItem } from "~/utils/fn";
-import { SortableAudioGrid } from "~/components/editors/SortableAudioGrid";
+import React, { FC, useCallback } from 'react';
+import { SortEnd } from 'react-sortable-hoc';
+import { IFile } from '~/types';
+import { moveArrItem } from '~/utils/fn';
+import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 
-import styles from "./styles.module.scss";
-import { UploadStatus } from "~/store/uploader/UploaderStore";
-import { useWindowSize } from "~/hooks/dom/useWindowSize";
+import styles from './styles.module.scss';
+import { UploadStatus } from '~/store/uploader/UploaderStore';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
 
 interface IProps {
   files: IFile[];

src/components/editors/EditorAudioUploadButton/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import { EditorUploadButton } from "~/components/editors/EditorUploadButton";
-import { UploadType } from "~/constants/uploads";
-import { IEditorComponentProps } from "~/types/node";
+import React, { FC } from 'react';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
+import { UploadType } from '~/constants/uploads';
+import { IEditorComponentProps } from '~/types/node';
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/EditorConfirmClose/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { Group } from "~/components/containers/Group";
-import { Button } from "~/components/input/Button";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
 
 interface IProps {
   onApprove: () => void;

src/components/editors/EditorConfirmClose/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables.scss";
+@import "src/styles/variables.scss";
 
 @keyframes appear {
   0% {

src/components/editors/EditorFiller/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import { Filler } from "~/components/containers/Filler";
-import { IEditorComponentProps } from "~/types/node";
-import styles from "./styles.module.scss";
+import React, { FC } from 'react';
+import { Filler } from '~/components/containers/Filler';
+import { IEditorComponentProps } from '~/types/node';
+import styles from './styles.module.scss';
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import { EditorUploadButton } from "~/components/editors/EditorUploadButton";
-import { UploadType } from "~/constants/uploads";
-import { IEditorComponentProps } from "~/types/node";
+import React, { FC } from 'react';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
+import { UploadType } from '~/constants/uploads';
+import { IEditorComponentProps } from '~/types/node';
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/EditorPublicSwitch/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useCallback } from "react";
-import { IEditorComponentProps } from "~/types/node";
-import { Button } from "~/components/input/Button";
-import { Icon } from "~/components/input/Icon";
-import styles from "./styles.module.scss";
-import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
+import React, { FC, useCallback } from 'react';
+import { IEditorComponentProps } from '~/types/node';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import styles from './styles.module.scss';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 interface IProps extends IEditorComponentProps {}
 

src/components/editors/EditorUploadButton/index.tsx

@@ -1,12 +1,12 @@
-import React, { ChangeEvent, FC, useCallback } from "react";
-import styles from "./styles.module.scss";
-import { Icon } from "~/components/input/Icon";
-import { UploadType } from "~/constants/uploads";
-import { IEditorComponentProps } from "~/types/node";
-import { getFileType } from "~/utils/uploader";
-import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
-import { Button } from "~/components/input/Button";
-import { useUploaderContext } from "~/utils/context/UploaderContextProvider";
+import React, { ChangeEvent, FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { UploadType } from '~/constants/uploads';
+import { IEditorComponentProps } from '~/types/node';
+import { getFileType } from '~/utils/uploader';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { Button } from '~/components/input/Button';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
 
 type IProps = IEditorComponentProps & {
   accept?: string;

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -1,22 +1,22 @@
-import React, { ChangeEvent, FC, useCallback, useEffect } from "react";
-import styles from "./styles.module.scss";
-import { UploadSubject, UploadTarget, UploadType } from "~/constants/uploads";
-import { getURL } from "~/utils/dom";
-import { Icon } from "~/components/input/Icon";
-import { PRESETS } from "~/constants/urls";
-import { IEditorComponentProps } from "~/types/node";
-import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
-import { getFileType } from "~/utils/uploader";
-import { useUploader } from "~/hooks/data/useUploader";
+import React, { ChangeEvent, FC, useCallback, useEffect } from 'react';
+import styles from './styles.module.scss';
+import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
+import { getURL } from '~/utils/dom';
+import { Icon } from '~/components/input/Icon';
+import { PRESETS } from '~/constants/urls';
+import { IEditorComponentProps } from '~/types/node';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { getFileType } from '~/utils/uploader';
+import { useUploader } from '~/hooks/data/useUploader';
 
 type IProps = IEditorComponentProps & {};
 
 const EditorUploadCoverButton: FC<IProps> = () => {
   const { values, setFieldValue } = useNodeFormContext();
-  const { uploadFiles, files, pendingImages } = useUploader(
+  const { uploadFile, files, pendingImages } = useUploader(
     UploadSubject.Editor,
     UploadTarget.Nodes,
-    []
+    values.cover ? [values.cover] : []
   );
 
   const background = values.cover ? getURL(values.cover, PRESETS['300']) : null;
@@ -27,14 +27,15 @@ const EditorUploadCoverButton: FC<IProps> = () => {
   }, [setFieldValue]);
 
   const onInputChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
+    async (event: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(event.target.files || [])
         .filter(file => getFileType(file) === UploadType.Image)
         .slice(0, 1);
 
-      uploadFiles(files);
+      const result = await uploadFile(files[0]);
+      setFieldValue('cover', result);
     },
-    [uploadFiles]
+    [uploadFile, setFieldValue]
   );
 
   useEffect(() => {

src/components/editors/ImageEditor/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
-import { ImageGrid } from "~/components/editors/ImageGrid";
-import styles from "./styles.module.scss";
-import { NodeEditorProps } from "~/types/node";
-import { UploadDropzone } from "~/components/upload/UploadDropzone";
-import { useUploaderContext } from "~/utils/context/UploaderContextProvider";
-import { values } from "ramda";
+import React, { FC } from 'react';
+import { ImageGrid } from '~/components/editors/ImageGrid';
+import styles from './styles.module.scss';
+import { NodeEditorProps } from '~/types/node';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import { values } from 'ramda';
 
 type IProps = NodeEditorProps;
 

src/components/editors/ImageGrid/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useCallback } from "react";
-import { SortEnd } from "react-sortable-hoc";
-import styles from "./styles.module.scss";
-import { IFile } from "~/redux/types";
-import { moveArrItem } from "~/utils/fn";
-import { SortableImageGrid } from "~/components/editors/SortableImageGrid";
-import { UploadStatus } from "~/store/uploader/UploaderStore";
-import { useWindowSize } from "~/hooks/dom/useWindowSize";
+import React, { FC, useCallback } from 'react';
+import { SortEnd } from 'react-sortable-hoc';
+import styles from './styles.module.scss';
+import { IFile } from '~/types';
+import { moveArrItem } from '~/utils/fn';
+import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
+import { UploadStatus } from '~/store/uploader/UploaderStore';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
 
 interface IProps {
   files: IFile[];

src/components/editors/SortableAudioGrid/index.tsx

@@ -3,7 +3,7 @@ import { SortableContainer } from 'react-sortable-hoc';
 import { AudioUpload } from '~/components/upload/AudioUpload';
 import styles from './styles.module.scss';
 import { SortableAudioGridItem } from '~/components/editors/SortableAudioGridItem';
-import { IFile } from '~/redux/types';
+import { IFile } from '~/types';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { UploadStatus } from '~/store/uploader/UploaderStore';
 

src/components/editors/SortableImageGrid/index.tsx

@@ -3,7 +3,7 @@ import { SortableContainer } from 'react-sortable-hoc';
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import styles from './styles.module.scss';
 import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
-import { IFile } from '~/redux/types';
+import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import classNames from 'classnames';

src/components/editors/TextEditor/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback } from "react";
-import styles from "./styles.module.scss";
-import { Textarea } from "~/components/input/Textarea";
-import { path } from "ramda";
-import { NodeEditorProps } from "~/types/node";
-import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
-import { useRandomPhrase } from "~/constants/phrases";
+import React, { FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import { Textarea } from '~/components/input/Textarea';
+import { path } from 'ramda';
+import { NodeEditorProps } from '~/types/node';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { useRandomPhrase } from '~/constants/phrases';
 
 type IProps = NodeEditorProps & {};
 

src/components/editors/VideoEditor/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useCallback, useMemo } from "react";
-import styles from "./styles.module.scss";
-import { path } from "ramda";
-import { InputText } from "~/components/input/InputText";
-import classnames from "classnames";
-import { getYoutubeThumb } from "~/utils/dom";
-import { NodeEditorProps } from "~/types/node";
-import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
+import React, { FC, useCallback, useMemo } from 'react';
+import styles from './styles.module.scss';
+import { path } from 'ramda';
+import { InputText } from '~/components/input/InputText';
+import classnames from 'classnames';
+import { getYoutubeThumb } from '~/utils/dom';
+import { NodeEditorProps } from '~/types/node';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 

src/components/flow/CellShade/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useMemo } from "react";
-import styles from "./styles.module.scss";
-import { DEFAULT_DOMINANT_COLOR } from "~/constants/node";
-import { DivProps } from "~/utils/types";
-import classNames from "classnames";
-import { transparentize } from "color2k";
-import { normalizeBrightColor } from "~/utils/color";
+import React, { FC, useMemo } from 'react';
+import styles from './styles.module.scss';
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+import { transparentize } from 'color2k';
+import { normalizeBrightColor } from '~/utils/color';
 
 interface Props extends DivProps {
   color?: string;

src/components/flow/CellShade/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .shade {
   background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);

src/components/flow/FlowCell/index.tsx

@@ -1,15 +1,15 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { NavLink } from "react-router-dom";
-import { CellShade } from "~/components/flow/CellShade";
-import { FlowDisplay, INode } from "~/redux/types";
-import { FlowCellText } from "~/components/flow/FlowCellText";
-import classNames from "classnames";
-import { FlowCellMenu } from "~/components/flow/FlowCellMenu";
-import { useFlowCellControls } from "~/hooks/flow/useFlowCellControls";
-import { useClickOutsideFocus } from "~/hooks/dom/useClickOutsideFocus";
-import { MenuDots } from "~/components/common/MenuDots";
-import { FlowCellImage } from "~/components/flow/FlowCellImage";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { NavLink } from 'react-router-dom';
+import { CellShade } from '~/components/flow/CellShade';
+import { FlowDisplay, INode } from '~/types';
+import { FlowCellText } from '~/components/flow/FlowCellText';
+import classNames from 'classnames';
+import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
+import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
+import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
+import { MenuDots } from '~/components/common/MenuDots';
+import { FlowCellImage } from '~/components/flow/FlowCellImage';
 
 interface Props {
   id: INode['id'];

src/components/flow/FlowCell/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .cell {
   @include inner_shadow;

src/components/flow/FlowCellImage/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import { IMGProps } from "~/utils/types";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
+import React, { FC } from 'react';
+import { IMGProps } from '~/utils/types';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
 
 interface Props extends IMGProps {
   height?: number;

src/components/flow/FlowCellImageLazyLoad/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from "react";
-import LazyLoad from "react-lazyload";
-import { IMGProps } from "~/utils/types";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
+import React, { FC } from 'react';
+import LazyLoad from 'react-lazyload';
+import { IMGProps } from '~/utils/types';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
 
 interface Props extends IMGProps {
   height?: number;

src/components/flow/FlowCellMenu/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { Icon } from "~/components/input/Icon";
-import classNames from "classnames";
-import { Toggle } from "~/components/input/Toggle";
-import { Group } from "~/components/containers/Group";
-import { FlowDisplayVariant } from "~/redux/types";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import classNames from 'classnames';
+import { Toggle } from '~/components/input/Toggle';
+import { Group } from '~/components/containers/Group';
+import { FlowDisplayVariant } from '~/types';
 
 interface Props {
   onClose: () => void;

src/components/flow/FlowCellMenu/styles.module.scss

@@ -1,4 +1,4 @@
-@import "~/styles/variables";
+@import "src/styles/variables";
 
 .dropdown {
   @include outer_shadow;

src/components/flow/FlowCellText/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, ReactElement } from "react";
-import { Markdown } from "~/components/containers/Markdown";
-import { DivProps } from "~/utils/types";
-import classNames from "classnames";
-import styles from "./styles.module.scss";
-import { formatText } from "~/utils/dom";
+import React, { FC, ReactElement } from 'react';
+import { Markdown } from '~/components/containers/Markdown';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import { formatText } from '~/utils/dom';
 
 interface Props extends DivProps {
   children: string;