removed profile redux items

src/containers/boris/BorisComments/index.tsx

@@ -1,13 +1,13 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
-import { NodeCommentForm } from '~/components/node/NodeCommentForm';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { NodeComments } from '~/containers/node/NodeComments';
-import { Footer } from '~/components/main/Footer';
-import { CommentContextProvider, useCommentContext } from '~/utils/context/CommentContextProvider';
-import { useUserContext } from '~/utils/context/UserContextProvider';
-import { useNodeContext } from '~/utils/context/NodeContextProvider';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Group } from "~/components/containers/Group";
+import { NodeCommentForm } from "~/components/node/NodeCommentForm";
+import { NodeNoComments } from "~/components/node/NodeNoComments";
+import { NodeComments } from "~/containers/node/NodeComments";
+import { Footer } from "~/components/main/Footer";
+import { CommentContextProvider, useCommentContext } from "~/utils/context/CommentContextProvider";
+import { useUserContext } from "~/utils/context/UserContextProvider";
+import { useNodeContext } from "~/utils/context/NodeContextProvider";
 
 interface IProps {}
 

src/containers/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/containers/dialogs/EditorDialog/index.tsx

@@ -1,24 +1,24 @@
-import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
-import styles from './styles.module.scss';
-import { NODE_EDITORS } from '~/constants/node';
-import { BetterScrollDialog } from '../BetterScrollDialog';
-import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
-import { prop } from 'ramda';
-import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
-import { EditorButtons } from '~/components/editors/EditorButtons';
-import { UploadSubject, UploadTarget } from '~/constants/uploads';
-import { FormikProvider } from 'formik';
-import { INode } from '~/redux/types';
-import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
-import { useTranslatedError } from '~/hooks/data/useTranslatedError';
-import { useCloseOnEscape } from '~/hooks';
-import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
-import { IDialogProps } from '~/types/modal';
-import { useUploader } from '~/hooks/data/useUploader';
-import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
-import { observer } from 'mobx-react-lite';
+import React, { createElement, FC, useCallback, useMemo, useState } from "react";
+import styles from "./styles.module.scss";
+import { NODE_EDITORS } from "~/constants/node";
+import { BetterScrollDialog } from "../BetterScrollDialog";
+import { CoverBackdrop } from "~/components/containers/CoverBackdrop";
+import { prop } from "ramda";
+import { useNodeFormFormik } from "~/hooks/node/useNodeFormFormik";
+import { EditorButtons } from "~/components/editors/EditorButtons";
+import { UploadSubject, UploadTarget } from "~/constants/uploads";
+import { FormikProvider } from "formik";
+import { INode } from "~/redux/types";
+import { ModalWrapper } from "~/components/dialogs/ModalWrapper";
+import { useTranslatedError } from "~/hooks/data/useTranslatedError";
+import { useCloseOnEscape } from "~/hooks";
+import { EditorConfirmClose } from "~/components/editors/EditorConfirmClose";
+import { DialogComponentProps } from "~/types/modal";
+import { useUploader } from "~/hooks/data/useUploader";
+import { UploaderContextProvider } from "~/utils/context/UploaderContextProvider";
+import { observer } from "mobx-react-lite";
 
-interface Props extends IDialogProps {
+interface Props extends DialogComponentProps {
   node: INode;
   onSubmit: (node: INode) => Promise<unknown>;
 }

src/containers/dialogs/LoginDialog/index.tsx

@@ -17,7 +17,7 @@ import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
 import { OAUTH_EVENT_TYPES } from '~/redux/types';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
 import { useTranslatedError } from '~/hooks/data/useTranslatedError';
-import { IDialogProps } from '~/types/modal';
+import { DialogComponentProps } from '~/types/modal';
 import { useShowModal } from '~/hooks/modal/useShowModal';
 import { Dialog } from '~/constants/modal';
 
@@ -32,7 +32,9 @@ const mapDispatchToProps = {
   authGotOauthLoginEvent: ACTIONS.authGotOauthLoginEvent,
 };
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps &
+  DialogComponentProps & {};
 
 const LoginDialogUnconnected: FC<IProps> = ({
   error,

src/containers/dialogs/LoginDialogButtons/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, MouseEventHandler } 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 { ISocialProvider } from '~/redux/auth/types';
+import React, { FC, MouseEventHandler } 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 { ISocialProvider } from "~/redux/auth/types";
 
 interface IProps {
   openOauthWindow: (provider: ISocialProvider) => MouseEventHandler;

src/containers/dialogs/LoginSocialRegisterButtons/index.tsx

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

src/containers/dialogs/LoginSocialRegisterDialog/index.tsx

@@ -11,7 +11,7 @@ import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { useCloseOnEscape } from '~/hooks';
 import { LoginSocialRegisterButtons } from '~/containers/dialogs/LoginSocialRegisterButtons';
 import { Toggle } from '~/components/input/Toggle';
-import { IDialogProps } from '~/types/modal';
+import { DialogComponentProps } from '~/types/modal';
 
 const mapStateToProps = selectAuthRegisterSocial;
 const mapDispatchToProps = {
@@ -20,7 +20,9 @@ const mapDispatchToProps = {
   authSendRegisterSocial: AUTH_ACTIONS.authSendRegisterSocial,
 };
 
-type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps &
+  DialogComponentProps & {};
 
 const phrase = [
   'Сушёный кабачок особенно хорош в это время года, знаете ли.',

src/containers/dialogs/Modal/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
-import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
-import { DIALOG_CONTENT } from '~/constants/modal';
-import { useModalStore } from '~/store/modal/useModalStore';
-import { has } from 'ramda';
-import { observer } from 'mobx-react-lite';
+import React, { FC } from "react";
+import { ModalWrapper } from "~/components/dialogs/ModalWrapper";
+import { DIALOG_CONTENT } from "~/constants/modal";
+import { useModalStore } from "~/store/modal/useModalStore";
+import { has } from "ramda";
+import { observer } from "mobx-react-lite";
 
 type IProps = {};
 

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -10,9 +10,9 @@ import { useBlockBackButton } from '~/hooks/navigation/useBlockBackButton';
 import { useModal } from '~/hooks/modal/useModal';
 import { observer } from 'mobx-react';
 import { IFile } from '~/redux/types';
-import { IDialogProps } from '~/types/modal';
+import { DialogComponentProps } from '~/types/modal';
 
-export interface PhotoSwipeProps extends IDialogProps {
+export interface PhotoSwipeProps extends DialogComponentProps {
   items: IFile[];
   index: number;
 }

src/containers/dialogs/ProfileDialog/index.tsx

@@ -1,73 +1,43 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC } from 'react';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { ProfileInfo } from '~/containers/profile/ProfileInfo';
-import { connect } from 'react-redux';
-import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { IAuthState } from '~/redux/auth/types';
-import { pick } from 'ramda';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { Tabs } from '~/components/dialogs/Tabs';
 import { ProfileDescription } from '~/components/profile/ProfileDescription';
 import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 import { ProfileSettings } from '~/components/profile/ProfileSettings';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
-import { IDialogProps } from '~/types/modal';
+import { DialogComponentProps } from '~/types/modal';
+import { useUser } from '~/hooks/user/userUser';
+import { useGetProfile } from '~/hooks/profile/useGetProfile';
+import { ProfileProvider } from '~/utils/providers/ProfileProvider';
 
-const mapStateToProps = state => ({
-  profile: selectAuthProfile(state),
-  user: pick(['id'], selectAuthUser(state)),
-});
+export interface ProfileDialogProps extends DialogComponentProps {
+  username: string;
+}
 
-const mapDispatchToProps = {
-  authSetProfile: AUTH_ACTIONS.authSetProfile,
-};
-
-type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const PROFILE_HEADERS = {};
-
-const PROFILE_FOOTERS = {};
-
-const ProfileDialogUnconnected: FC<IProps> = ({
-  onRequestClose,
-  authSetProfile,
-
-  profile: { is_loading, user, tab },
-  user: { id },
-}) => {
-  const setTab = useCallback((val: IAuthState['profile']['tab']) => authSetProfile({ tab: val }), [
-    authSetProfile,
-  ]);
+const ProfileDialog: FC<ProfileDialogProps> = ({ username, onRequestClose }) => {
+  const { isLoading, profile } = useGetProfile(username);
+  const { id } = useUser();
 
   return (
-    <Tabs>
-      <BetterScrollDialog
-        header={
-          <ProfileInfo
-            is_own={user && user.id === id}
-            is_loading={is_loading}
-            user={user}
-            tab={tab}
-            setTab={setTab}
-            content={PROFILE_HEADERS[tab]}
-          />
-        }
-        footer={PROFILE_FOOTERS[tab]}
-        backdrop={<CoverBackdrop cover={user && user.cover} />}
-        onClose={onRequestClose}
-      >
-        <Tabs.Content>
-          <ProfileDescription />
-          <ProfileMessages />
-          <ProfileSettings />
-          <ProfileAccounts />
-        </Tabs.Content>
-      </BetterScrollDialog>
-    </Tabs>
+    <ProfileProvider username={username}>
+      <Tabs>
+        <BetterScrollDialog
+          header={<ProfileInfo isOwn={profile.id === id} isLoading={isLoading} />}
+          backdrop={<CoverBackdrop cover={profile.cover} />}
+          onClose={onRequestClose}
+        >
+          <Tabs.Content>
+            <ProfileDescription />
+            <ProfileMessages />
+            <ProfileSettings />
+            <ProfileAccounts />
+          </Tabs.Content>
+        </BetterScrollDialog>
+      </Tabs>
+    </ProfileProvider>
   );
 };
 
-const ProfileDialog = connect(mapStateToProps, mapDispatchToProps)(ProfileDialogUnconnected);
-
 export { ProfileDialog };

src/containers/dialogs/RestorePasswordDialog/index.tsx

@@ -12,7 +12,7 @@ import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';
 import { useCloseOnEscape } from '~/hooks';
-import { IDialogProps } from '~/types/modal';
+import { DialogComponentProps } from '~/types/modal';
 
 const mapStateToProps = state => ({
   restore: selectAuthRestore(state),
@@ -20,7 +20,9 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = pick(['authRestorePassword', 'authSetRestore'], AUTH_ACTIONS);
 
-type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+type IProps = DialogComponentProps &
+  ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {};
 
 const RestorePasswordDialogUnconnected: FC<IProps> = ({
   restore: { error, is_loading, is_succesfull, user },

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -1,21 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useState, VFC } from 'react';
-import { useDispatch } from 'react-redux';
-import { BetterScrollDialog } from '../BetterScrollDialog';
-import { Group } from '~/components/containers/Group';
-import { InputText } from '~/components/input/InputText';
-import { Button } from '~/components/input/Button';
-import styles from './styles.module.scss';
+import React, { useCallback, useEffect, useMemo, useState, VFC } from "react";
+import { useDispatch } from "react-redux";
+import { BetterScrollDialog } from "../BetterScrollDialog";
+import { Group } from "~/components/containers/Group";
+import { InputText } from "~/components/input/InputText";
+import { Button } from "~/components/input/Button";
+import styles from "./styles.module.scss";
 
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { selectAuthRestore } from '~/redux/auth/selectors';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { Icon } from '~/components/input/Icon';
-import { useCloseOnEscape } from '~/hooks';
-import { IDialogProps } from '~/types/modal';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { IAuthState } from '~/redux/auth/types';
+import * as AUTH_ACTIONS from "~/redux/auth/actions";
+import { selectAuthRestore } from "~/redux/auth/selectors";
+import { ERROR_LITERAL } from "~/constants/errors";
+import { Icon } from "~/components/input/Icon";
+import { useCloseOnEscape } from "~/hooks";
+import { DialogComponentProps } from "~/types/modal";
+import { useShallowSelect } from "~/hooks/data/useShallowSelect";
+import { IAuthState } from "~/redux/auth/types";
 
-interface RestoreRequestDialogProps extends IDialogProps {}
+interface RestoreRequestDialogProps extends DialogComponentProps {}
 
 const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }) => {
   const dispatch = useDispatch();

src/containers/dialogs/TestDialog/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import { BetterScrollDialog } from '../BetterScrollDialog';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import { BetterScrollDialog } from "../BetterScrollDialog";
+import styles from "./styles.module.scss";
 
 interface IProps {}
 

src/containers/flow/FlowStamp/index.tsx

@@ -1,17 +1,17 @@
-import React, { FC, FormEvent, useCallback, useMemo } from 'react';
-import { InputText } from '~/components/input/InputText';
-import { FlowRecent } from '~/components/flow/FlowRecent';
+import React, { FC, FormEvent, useCallback, useMemo } from "react";
+import { InputText } from "~/components/input/InputText";
+import { FlowRecent } from "~/components/flow/FlowRecent";
 
-import styles from '~/containers/flow/FlowStamp/styles.module.scss';
-import { FlowSearchResults } from '~/components/flow/FlowSearchResults';
-import { Icon } from '~/components/input/Icon';
-import { Group } from '~/components/containers/Group';
-import { Toggle } from '~/components/input/Toggle';
-import classNames from 'classnames';
-import { Superpower } from '~/components/boris/Superpower';
-import { experimentalFeatures } from '~/constants/features';
-import { useSearchContext } from '~/utils/providers/SearchProvider';
-import { useFlowContext } from '~/utils/context/FlowContextProvider';
+import styles from "~/containers/flow/FlowStamp/styles.module.scss";
+import { FlowSearchResults } from "~/components/flow/FlowSearchResults";
+import { Icon } from "~/components/input/Icon";
+import { Group } from "~/components/containers/Group";
+import { Toggle } from "~/components/input/Toggle";
+import classNames from "classnames";
+import { Superpower } from "~/components/boris/Superpower";
+import { experimentalFeatures } from "~/constants/features";
+import { useSearchContext } from "~/utils/providers/SearchProvider";
+import { useFlowContext } from "~/utils/context/FlowContextProvider";
 
 interface IProps {
   isFluid: boolean;

src/containers/lab/LabStats/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { LabBanner } from '~/components/lab/LabBanner';
-import { Group } from '~/components/containers/Group';
-import { LabTags } from '~/components/lab/LabTags';
-import { LabHeroes } from '~/components/lab/LabHeroes';
-import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
-import { SubTitle } from '~/components/common/SubTitle';
-import { useLabContext } from '~/utils/context/LabContextProvider';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { LabBanner } from "~/components/lab/LabBanner";
+import { Group } from "~/components/containers/Group";
+import { LabTags } from "~/components/lab/LabTags";
+import { LabHeroes } from "~/components/lab/LabHeroes";
+import { FlowRecentItem } from "~/components/flow/FlowRecentItem";
+import { SubTitle } from "~/components/common/SubTitle";
+import { useLabContext } from "~/utils/context/LabContextProvider";
 
 interface IProps {}
 

src/containers/main/BottomContainer/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { PlayerView } from '~/containers/player/PlayerView';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { PlayerView } from "~/containers/player/PlayerView";
 
 type IProps = {};
 

src/containers/main/Container/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 interface IProps {
   className?: string;

src/containers/main/MainRouter/index.tsx

@@ -1,14 +1,14 @@
-import React, { FC } from 'react';
-import { URLS } from '~/constants/urls';
-import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
-import { Redirect, Route, Switch, useLocation } from 'react-router';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectAuthUser } from '~/redux/auth/selectors';
-import { ProfileLayout } from '~/layouts/ProfileLayout';
-import FlowPage from '~/pages';
-import BorisPage from '~/pages/boris';
-import NodePage from '~/pages/node/[id]';
-import LabPage from '~/pages/lab';
+import React, { FC } from "react";
+import { URLS } from "~/constants/urls";
+import { ErrorNotFound } from "~/containers/pages/ErrorNotFound";
+import { Redirect, Route, Switch, useLocation } from "react-router";
+import { useShallowSelect } from "~/hooks/data/useShallowSelect";
+import { selectAuthUser } from "~/redux/auth/selectors";
+import { ProfileLayout } from "~/layouts/ProfileLayout";
+import FlowPage from "~/pages";
+import BorisPage from "~/pages/boris";
+import NodePage from "~/pages/node/[id]";
+import LabPage from "~/pages/lab";
 
 interface IProps {}
 

src/containers/main/SidebarRouter/index.tsx

@@ -1,11 +1,10 @@
-import React, { FC } from 'react';
-import { createPortal } from 'react-dom';
-import { Route, Switch } from 'react-router';
-import { TagSidebar } from '~/containers/sidebars/TagSidebar';
-import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar';
-import { Authorized } from '~/components/containers/Authorized';
-import { SubmitBar } from '~/components/bars/SubmitBar';
-import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog';
+import React, { FC } from "react";
+import { createPortal } from "react-dom";
+import { Route, Switch } from "react-router";
+import { TagSidebar } from "~/containers/sidebars/TagSidebar";
+import { Authorized } from "~/components/containers/Authorized";
+import { SubmitBar } from "~/components/bars/SubmitBar";
+import { EditorCreateDialog } from "~/containers/dialogs/EditorCreateDialog";
 
 interface IProps {
   prefix?: string;
@@ -18,7 +17,6 @@ const SidebarRouter: FC<IProps> = ({ prefix = '', isLab }) => {
       <Switch>
         <Route path={`${prefix}/create/:type`} component={EditorCreateDialog} />
         <Route path={`${prefix}/tag/:tag`} component={TagSidebar} />
-        <Route path={`${prefix}/~:username`} component={ProfileSidebar} />
       </Switch>
 
       <Authorized>

src/containers/node/NodeBottomBlock/index.tsx

@@ -1,20 +1,20 @@
-import React, { FC } from 'react';
-import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
-import { Group } from '~/components/containers/Group';
-import { Padder } from '~/components/containers/Padder';
-import { NodeCommentForm } from '~/components/node/NodeCommentForm';
-import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
-import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
-import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
-import StickyBox from 'react-sticky-box';
-import styles from './styles.module.scss';
-import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
-import { useNodeContext } from '~/utils/context/NodeContextProvider';
-import { useCommentContext } from '~/utils/context/CommentContextProvider';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { NodeComments } from '~/containers/node/NodeComments';
-import { useUserContext } from '~/utils/context/UserContextProvider';
-import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider';
+import React, { FC } from "react";
+import { NodeDeletedBadge } from "~/components/node/NodeDeletedBadge";
+import { Group } from "~/components/containers/Group";
+import { Padder } from "~/components/containers/Padder";
+import { NodeCommentForm } from "~/components/node/NodeCommentForm";
+import { NodeRelatedBlock } from "~/components/node/NodeRelatedBlock";
+import { useNodeBlocks } from "~/hooks/node/useNodeBlocks";
+import { NodeTagsBlock } from "~/components/node/NodeTagsBlock";
+import StickyBox from "react-sticky-box";
+import styles from "./styles.module.scss";
+import { NodeAuthorBlock } from "~/components/node/NodeAuthorBlock";
+import { useNodeContext } from "~/utils/context/NodeContextProvider";
+import { useCommentContext } from "~/utils/context/CommentContextProvider";
+import { NodeNoComments } from "~/components/node/NodeNoComments";
+import { NodeComments } from "~/containers/node/NodeComments";
+import { useUserContext } from "~/utils/context/UserContextProvider";
+import { useNodeRelatedContext } from "~/utils/context/NodeRelatedContextProvider";
 
 interface IProps {
   commentsOrder: 'ASC' | 'DESC';

src/containers/node/NodeComments/index.tsx

@@ -1,13 +1,13 @@
-import React, { FC, memo, useMemo } from 'react';
+import React, { FC, memo, useMemo } from "react";
 
-import styles from './styles.module.scss';
-import { ICommentGroup } from '~/redux/types';
-import { canEditComment } from '~/utils/node';
-import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
-import { useCommentContext } from '~/utils/context/CommentContextProvider';
-import { Comment } from '~/components/comment/Comment';
-import { useUserContext } from '~/utils/context/UserContextProvider';
-import { useNodeContext } from '~/utils/context/NodeContextProvider';
+import styles from "./styles.module.scss";
+import { ICommentGroup } from "~/redux/types";
+import { canEditComment } from "~/utils/node";
+import { useGrouppedComments } from "~/hooks/node/useGrouppedComments";
+import { useCommentContext } from "~/utils/context/CommentContextProvider";
+import { Comment } from "~/components/comment/Comment";
+import { useUserContext } from "~/utils/context/UserContextProvider";
+import { useNodeContext } from "~/utils/context/NodeContextProvider";
 
 interface IProps {
   order: 'ASC' | 'DESC';

src/containers/player/PlayerView/index.tsx

@@ -1,6 +1,6 @@
-import React, { VFC } from 'react';
-import { PlayerBar } from '~/components/bars/PlayerBar';
-import { useAudioPlayer } from '~/utils/providers/AudioPlayerProvider';
+import React, { VFC } from "react";
+import { PlayerBar } from "~/components/bars/PlayerBar";
+import { useAudioPlayer } from "~/utils/providers/AudioPlayerProvider";
 
 interface PlayerViewProps {}
 

src/containers/profile/ProfileAvatar/index.tsx

@@ -1,76 +0,0 @@
-import React, { ChangeEvent, FC, useCallback } from 'react';
-import styles from './styles.module.scss';
-import { connect } from 'react-redux';
-import { getURL } from '~/utils/dom';
-import { pick } from 'ramda';
-import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
-import { PRESETS } from '~/constants/urls';
-import { UploadSubject, UploadTarget } from '~/constants/uploads';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { Icon } from '~/components/input/Icon';
-import { useUploader } from '~/hooks/data/useUploader';
-import { observer } from 'mobx-react-lite';
-import { showErrorToast } from '~/utils/errors/showToast';
-
-const mapStateToProps = state => ({
-  user: pick(['id'], selectAuthUser(state)),
-  profile: pick(['is_loading', 'user'], selectAuthProfile(state)),
-});
-
-const mapDispatchToProps = {
-  authPatchUser: AUTH_ACTIONS.authPatchUser,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const ProfileAvatarUnconnected: FC<IProps> = observer(
-  ({ user: { id }, profile: { is_loading, user }, authPatchUser }) => {
-    const uploader = useUploader(
-      UploadSubject.Avatar,
-      UploadTarget.Profiles,
-      user?.photo ? [] : []
-    );
-
-    const onInputChange = useCallback(
-      async (event: ChangeEvent<HTMLInputElement>) => {
-        try {
-          if (!event.target.files?.length) {
-            return;
-          }
-
-          const photo = await uploader.uploadFile(event.target.files[0]);
-          authPatchUser({ photo });
-        } catch (error) {
-          showErrorToast(error);
-        }
-      },
-      [uploader, authPatchUser]
-    );
-
-    const can_edit = !is_loading && id && id === user?.id;
-
-    const backgroundImage = is_loading
-      ? undefined
-      : `url("${user && getURL(user.photo, PRESETS.avatar)}")`;
-
-    return (
-      <div
-        className={styles.avatar}
-        style={{
-          backgroundImage,
-        }}
-      >
-        {can_edit && <input type="file" onInput={onInputChange} />}
-        {can_edit && (
-          <div className={styles.can_edit}>
-            <Icon icon="photo_add" />
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-const ProfileAvatar = connect(mapStateToProps, mapDispatchToProps)(ProfileAvatarUnconnected);
-
-export { ProfileAvatar };

src/containers/profile/ProfileAvatar/styles.module.scss

@@ -1,55 +0,0 @@
-@import "src/styles/variables";
-
-.avatar {
-  @include outer_shadow();
-
-  border-radius: $radius;
-  width: 100px;
-  height: 100px;
-  background: $content_bg 50% 50% no-repeat;
-  background-size: cover;
-  position: absolute;
-  bottom: 0;
-  left: $gap;
-  cursor: pointer;
-
-  input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
-
-  &:hover {
-    svg {
-      fill: $red;
-    }
-  }
-}
-
-.can_edit {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  touch-action: none;
-  // background: red;
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  padding: $gap / 2;
-  box-sizing: border-box;
-  background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
-  border-radius: $radius;
-
-  svg {
-    width: 32px;
-    height: 32px;
-    fill: white;
-    transition: fill 0.25s;
-  }
-}

src/containers/profile/ProfileInfo/index.tsx

@@ -1,44 +1,39 @@
-import React, { FC, ReactNode } from 'react';
-import { IAuthState, IUser } from '~/redux/auth/types';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import { getPrettyDate } from '~/utils/dom';
-import { ProfileTabs } from '../ProfileTabs';
-import { ProfileAvatar } from '../ProfileAvatar';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Group } from "~/components/containers/Group";
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import { getPrettyDate } from "~/utils/dom";
+import { ProfileTabs } from "../ProfileTabs";
+import { ProfileAvatar } from "~/components/profile/ProfileAvatar";
+import { useProfileContext } from "~/utils/providers/ProfileProvider";
 
 interface IProps {
-  user?: IUser;
-  tab: string;
-
-  is_loading?: boolean;
-  is_own?: boolean;
-
-  setTab?: (tab: IAuthState['profile']['tab']) => void;
-
-  content?: ReactNode;
+  isLoading?: boolean;
+  isOwn: boolean;
 }
 
-const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab, content = null }) => (
-  <div>
-    <Group className={styles.wrap} horizontal>
-      <ProfileAvatar />
+const ProfileInfo: FC<IProps> = ({ isOwn }) => {
+  const { updatePhoto, profile, isLoading } = useProfileContext();
 
-      <div className={styles.field}>
-        <div className={styles.name}>
-          {is_loading ? <Placeholder width="80%" /> : user?.fullname || user?.username}
+  return (
+    <div>
+      <Group className={styles.wrap} horizontal>
+        <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={profile.photo} />
+
+        <div className={styles.field}>
+          <div className={styles.name}>
+            {isLoading ? <Placeholder width="80%" /> : profile?.fullname || profile?.username}
+          </div>
+
+          <div className={styles.description}>
+            {isLoading ? <Placeholder /> : getPrettyDate(profile?.last_seen)}
+          </div>
         </div>
+      </Group>
 
-        <div className={styles.description}>
-          {is_loading ? <Placeholder /> : getPrettyDate(user?.last_seen)}
-        </div>
-      </div>
-    </Group>
-
-    <ProfileTabs tab={tab} is_own={!!is_own} setTab={setTab} />
-
-    {content}
-  </div>
-);
+      <ProfileTabs is_own={isOwn} />
+    </div>
+  );
+};
 
 export { ProfileInfo };

src/containers/profile/ProfileLoader/index.tsx

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

src/containers/profile/ProfileMessages/index.tsx

@@ -2,18 +2,17 @@ import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Message } from '~/components/profile/Message';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectAuthProfile } from '~/redux/auth/selectors';
 import { useMessages } from '~/hooks/messages/useMessages';
 import { useUser } from '~/hooks/user/userUser';
+import { useProfileContext } from '~/utils/providers/ProfileProvider';
 
 const ProfileMessages: FC = () => {
-  const profile = useShallowSelect(selectAuthProfile);
+  const { profile, isLoading: isLoadingProfile } = useProfileContext();
   const user = useUser();
-  const { messages, isLoading } = useMessages(profile.user?.username || '');
+  const { messages, isLoading: isLoadingMessages } = useMessages(profile?.username || '');
 
-  if (!messages.length || profile.is_loading)
-    return <NodeNoComments is_loading={isLoading || profile.is_loading} />;
+  if (!messages.length || isLoadingProfile)
+    return <NodeNoComments is_loading={isLoadingMessages || isLoadingProfile} />;
 
   if (messages.length <= 0) {
     return null;
@@ -42,7 +41,7 @@ const ProfileMessages: FC = () => {
           <Message message={message} incoming={user.id !== message.from.id} key={message.id} />
         ))}
 
-      {!isLoading && messages.length > 0 && (
+      {!isLoadingMessages && messages.length > 0 && (
         <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
       )}
     </div>

src/containers/profile/ProfilePageLeft/index.tsx

@@ -1,42 +1,40 @@
-import React, { FC } from 'react';
-import { IAuthState } from '~/redux/auth/types';
-import { formatText } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import { Placeholder } from '~/components/placeholders/Placeholder';
+import React, { FC } from "react";
+import { IUser } from "~/redux/auth/types";
+import { formatText } from "~/utils/dom";
+import { PRESETS } from "~/constants/urls";
+import { Placeholder } from "~/components/placeholders/Placeholder";
 
-import styles from './styles.module.scss';
-import { Avatar } from '~/components/common/Avatar';
-import { Markdown } from '~/components/containers/Markdown';
+import styles from "./styles.module.scss";
+import { Avatar } from "~/components/common/Avatar";
+import { Markdown } from "~/components/containers/Markdown";
 
 interface IProps {
-  profile: IAuthState['profile'];
+  profile: IUser;
+  isLoading: boolean;
   username: string;
 }
 
-const ProfilePageLeft: FC<IProps> = ({ username, profile }) => {
+const ProfilePageLeft: FC<IProps> = ({ username, profile, isLoading }) => {
   return (
     <div className={styles.wrap}>
       <Avatar
         username={username}
-        url={profile.user?.photo?.url}
+        url={profile?.photo?.url}
         className={styles.avatar}
         preset={PRESETS['600']}
       />
 
       <div className={styles.region}>
-        <div className={styles.name}>
-          {profile.is_loading ? <Placeholder /> : profile?.user?.fullname}
-        </div>
-
+        <div className={styles.name}>{isLoading ? <Placeholder /> : profile?.fullname}</div>`
         <div className={styles.username}>
-          {profile.is_loading ? <Placeholder /> : `~${profile?.user?.username}`}
+          {isLoading ? <Placeholder /> : `~${profile?.username}`}
         </div>
       </div>
 
-      {profile && profile.user && profile.user.description && (
+      {!!profile?.description && (
         <Markdown
           className={styles.description}
-          dangerouslySetInnerHTML={{ __html: formatText(profile.user.description) }}
+          dangerouslySetInnerHTML={{ __html: formatText(profile.description) }}
         />
       )}
     </div>

src/containers/profile/ProfilePageStats/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { StatsRow } from '~/components/common/StatsRow';
-import { SubTitle } from '~/components/common/SubTitle';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { StatsRow } from "~/components/common/StatsRow";
+import { SubTitle } from "~/components/common/SubTitle";
 
 interface Props {}
 

src/containers/profile/ProfileTabs/index.tsx

@@ -1,15 +1,12 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { IAuthState } from '~/redux/auth/types';
-import { Tabs } from '~/components/dialogs/Tabs';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Tabs } from "~/components/dialogs/Tabs";
 
 interface IProps {
-  tab: string;
   is_own: boolean;
-  setTab?: (tab: IAuthState['profile']['tab']) => void;
 }
 
-const ProfileTabs: FC<IProps> = ({ tab, is_own, setTab }) => {
+const ProfileTabs: FC<IProps> = ({ is_own }) => {
   const items = ['Профиль', 'Сообщения', ...(is_own ? ['Настройки'] : [])];
 
   return (

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,69 +0,0 @@
-import React, { FC, useCallback, useEffect } from 'react';
-import styles from './styles.module.scss';
-import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
-import { connect } from 'react-redux';
-import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
-import pick from 'ramda/es/pick';
-import { ProfileSidebarInfo } from '~/components/profile/ProfileSidebarInfo';
-import { Filler } from '~/components/containers/Filler';
-import { Route, Switch, useHistory, useRouteMatch } from 'react-router';
-import * as USER_ACTIONS from '~/redux/auth/actions';
-import { ProfileSidebarMenu } from '~/components/profile/ProfileSidebarMenu';
-import { useCloseOnEscape } from '~/hooks';
-import { Icon } from '~/components/input/Icon';
-import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
-import classNames from 'classnames';
-
-const mapStateToProps = state => ({
-  profile: selectAuthProfile(state),
-  user: pick(['id'], selectAuthUser(state)),
-});
-
-const mapDispatchToProps = {
-  authLoadProfile: USER_ACTIONS.authLoadProfile,
-};
-
-type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const ProfileSidebarUnconnected: FC<Props> = ({
-  profile: { is_loading, user },
-  user: { id },
-  authLoadProfile,
-}) => {
-  const {
-    params: { username },
-    url,
-  } = useRouteMatch<{ username: string }>();
-
-  useEffect(() => {
-    authLoadProfile(username);
-  }, [authLoadProfile, username]);
-
-  const history = useHistory();
-  const basePath = url.replace(new RegExp(`\/~${username}$`), '');
-  const onClose = useCallback(() => history.push(basePath), [basePath, history]);
-
-  useCloseOnEscape(onClose);
-
-  return (
-    <SidebarWrapper>
-      <div className={styles.close} onClick={onClose}>
-        <Icon icon="close" size={32} />
-      </div>
-
-      <Switch>
-        <Route path={`${url}/settings`} component={ProfileSidebarSettings} />
-      </Switch>
-
-      <div className={classNames(styles.wrap, styles.secondary)}>
-        {!!user && <ProfileSidebarInfo is_loading={is_loading} user={user} />}
-        <ProfileSidebarMenu path={url} />
-        <Filler />
-      </div>
-    </SidebarWrapper>
-  );
-};
-
-const ProfileSidebar = connect(mapStateToProps, mapDispatchToProps)(ProfileSidebarUnconnected);
-
-export { ProfileSidebar };

src/containers/sidebars/ProfileSidebar/styles.module.scss

@@ -1,33 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  @include sidebar_content;
-
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 2;
-
-  &.secondary {
-    background: transparentize($content_bg, 0.2);
-  }
-}
-
-.close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: $gap / 2;
-  background: $content_bg;
-  z-index: 6;
-  border-radius: 0 0 0 $radius;
-  cursor: pointer;
-  transition: all 100ms;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    fill: $red;
-  }
-}

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useEffect, useRef } from 'react';
-import styles from './styles.module.scss';
-import { createPortal } from 'react-dom';
-import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
-import { useCloseOnEscape } from '~/hooks';
+import React, { FC, useEffect, useRef } from "react";
+import styles from "./styles.module.scss";
+import { createPortal } from "react-dom";
+import { clearAllBodyScrollLocks, disableBodyScroll } from "body-scroll-lock";
+import { useCloseOnEscape } from "~/hooks";
 
 interface IProps {
   onClose?: () => void;

src/containers/tags/Tags/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, HTMLAttributes, useCallback, useMemo, useState } from 'react';
-import { TagField } from '~/components/containers/TagField';
-import { ITag } from '~/redux/types';
-import { uniq } from 'ramda';
-import { Tag } from '~/components/tags/Tag';
-import { TagInput } from '~/containers/tags/TagInput';
-import { separateTags } from '~/utils/tag';
+import React, { FC, HTMLAttributes, useCallback, useMemo, useState } from "react";
+import { TagField } from "~/components/containers/TagField";
+import { ITag } from "~/redux/types";
+import { uniq } from "ramda";
+import { Tag } from "~/components/tags/Tag";
+import { TagInput } from "~/containers/tags/TagInput";
+import { separateTags } from "~/utils/tag";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];