cleaned profile page

src/containers/main/MainRouter/index.tsx

@@ -4,11 +4,11 @@ import { FlowLayout } from '~/layouts/FlowLayout';
 import { NodeLayout } from '~/layouts/NodeLayout';
 import { BorisLayout } from '~/layouts/BorisLayout';
 import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
-import { ProfilePage } from '~/containers/profile/ProfilePage';
 import { Redirect, Route, Switch, useLocation } from 'react-router';
 import { LabLayout } from '~/layouts/LabLayout';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectAuthUser } from '~/redux/auth/selectors';
+import { ProfileLayout } from '~/layouts/ProfileLayout';
 
 interface IProps {}
 
@@ -21,7 +21,7 @@ const MainRouter: FC<IProps> = () => {
       <Route path={URLS.NODE_URL(':id')} component={NodeLayout} />
       <Route path={URLS.BORIS} component={BorisLayout} />
       <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} />
-      <Route path={URLS.PROFILE_PAGE(':username')} component={ProfilePage} />
+      <Route path={URLS.PROFILE_PAGE(':username')} component={ProfileLayout} />
 
       {is_user && <Route path={URLS.LAB} component={LabLayout} />}
 

src/containers/profile/ProfilePage/index.tsx

@@ -1,54 +0,0 @@
-import React, { FC, useEffect } from 'react';
-import styles from './styles.module.scss';
-import { ProfilePageLeft } from '../ProfilePageLeft';
-import { Switch, Route, RouteComponentProps } from 'react-router';
-import { IState } from '~/redux/store';
-import { selectAuthProfile } from '~/redux/auth/selectors';
-import { connect } from 'react-redux';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-
-const mapStateToProps = (state: IState) => ({
-  profile: selectAuthProfile(state),
-});
-
-const mapDispatchToProps = {
-  authLoadProfile: AUTH_ACTIONS.authLoadProfile,
-};
-
-type Props = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  RouteComponentProps<{ username: string }> & {};
-
-const ProfilePageUnconnected: FC<Props> = ({
-  profile,
-  authLoadProfile,
-  match: {
-    params: { username },
-  },
-}) => {
-  useEffect(() => {
-    authLoadProfile(username);
-  }, [username]);
-
-  return (
-    <div className={styles.wrap}>
-      <div className={styles.right}>
-        <Switch>
-          <Route path="/profile/:username" render={() => <div>DEFAULT</div>} />
-          <Route path="/profile/:username/tab" render={() => <div>TAB</div>} />
-        </Switch>
-      </div>
-
-      <div className={styles.left}>
-        <ProfilePageLeft profile={profile} username={username} />
-      </div>
-    </div>
-  );
-};
-
-const ProfilePage = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ProfilePageUnconnected);
-
-export { ProfilePage };

src/layouts/ProfileLayout/index.tsx

@@ -0,0 +1,33 @@
+import React, { FC, useEffect } from 'react';
+import styles from './styles.module.scss';
+import { Route, RouteComponentProps, Switch } from 'react-router';
+import { useDispatch } from 'react-redux';
+import { authLoadProfile } from '~/redux/auth/actions';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectAuthProfile } from '~/redux/auth/selectors';
+import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
+import { Container } from '~/containers/main/Container';
+
+type Props = RouteComponentProps<{ username: string }> & {};
+
+const ProfileLayout: FC<Props> = ({
+  match: {
+    params: { username },
+  },
+}) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(authLoadProfile(username));
+  }, [username]);
+
+  const profile = useShallowSelect(selectAuthProfile);
+
+  return (
+    <Container className={styles.wrap}>
+      <ProfilePageLeft profile={profile} username={username} />
+    </Container>
+  );
+};
+
+export { ProfileLayout };

src/layouts/ProfileLayout/styles.module.scss

@@ -2,11 +2,9 @@
 
 .wrap {
   flex: 1;
-  background: $content_bg;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
-  box-shadow: $node_shadow;
   border-radius: $radius;
 }