#23 added superpowers ui tab

src/containers/node/BorisLayout/index.tsx

@@ -17,9 +17,14 @@ import { Container } from '~/containers/main/Container';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import { BorisComments } from '~/components/boris/BorisComments';
 import { URLS } from '~/constants/urls';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, Link } from 'react-router-dom';
 import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
 import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
+import { Superpower } from '~/components/boris/Superpower';
+import { Tabs } from '~/components/dialogs/Tabs';
+import { Tab } from '~/components/dialogs/Tab';
+import { useHistory, useLocation } from 'react-router';
+import { Card } from '~/components/containers/Card';
 
 type IProps = {};
 
@@ -63,6 +68,9 @@ const BorisLayout: FC<IProps> = () => {
     [dispatch]
   );
 
+  const history = useHistory();
+  const location = useLocation();
+
   return (
     <Container>
       <div className={styles.wrap}>
@@ -77,18 +85,38 @@ const BorisLayout: FC<IProps> = () => {
         </div>
 
         <div className={styles.container}>
-          {
-            <Switch>
-              <Route path={`${URLS.BORIS}/ui`} component={BorisUIDemo} />
+          <Card className={styles.content}>
+            <Superpower>
+              <Tabs>
+                <Tab
+                  active={location.pathname === URLS.BORIS}
+                  onClick={() => history.push(URLS.BORIS)}
+                >
+                  Комментарии
+                </Tab>
 
-              <BorisComments
-                isLoadingComments={node.is_loading_comments}
-                commentCount={node.comment_count}
-                node={node.current}
-                comments={node.comments}
-              />
-            </Switch>
-          }
+                <Tab
+                  active={location.pathname === `${URLS.BORIS}/ui`}
+                  onClick={() => history.push(`${URLS.BORIS}/ui`)}
+                >
+                  UI Demo
+                </Tab>
+              </Tabs>
+            </Superpower>
+
+            {
+              <Switch>
+                <Route path={`${URLS.BORIS}/ui`} component={BorisUIDemo} />
+
+                <BorisComments
+                  isLoadingComments={node.is_loading_comments}
+                  commentCount={node.comment_count}
+                  node={node.current}
+                  comments={node.comments}
+                />
+              </Switch>
+            }
+          </Card>
 
           <Group className={styles.stats}>
             <StickyBox className={styles.sticky} offsetTop={72} offsetBottom={10}>

src/containers/node/BorisLayout/styles.module.scss

@@ -20,7 +20,7 @@
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background: 50% 0% no-repeat url('../../../sprites/boris_bg.svg');
+  background: 50% 0 no-repeat url('../../../sprites/boris_bg.svg');
   background-size: cover;
 }
 
@@ -151,3 +151,8 @@
     }
   }
 }
+
+.content {
+  position: relative;
+  z-index: 1;
+}

src/containers/profile/ProfileLayout/index.tsx

@@ -29,7 +29,9 @@ const ProfileLayoutUnconnected: FC<IProps> = ({ history, nodeSetCoverImage }) =>
   useEffect(() => {
     if (user && user.id && user.cover) {
       nodeSetCoverImage(user.cover);
-      return () => nodeSetCoverImage(null);
+      return () => {
+        nodeSetCoverImage(undefined);
+      };
     }
   }, [user]);
 

src/containers/profile/ProfileTabs/index.tsx

@@ -2,6 +2,8 @@ import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { IAuthState } from '~/redux/auth/types';
+import { Tabs } from '~/components/dialogs/Tabs';
+import { Tab } from '~/components/dialogs/Tab';
 
 interface IProps {
   tab: string;
@@ -19,30 +21,20 @@ const ProfileTabs: FC<IProps> = ({ tab, is_own, setTab }) => {
   );
 
   return (
-    <div className={styles.wrap}>
-      <div
-        className={classNames(styles.tab, { [styles.active]: tab === 'profile' })}
-        onClick={changeTab('profile')}
-      >
+    <Tabs>
+      <Tab active={tab === 'profile'} onClick={changeTab('profile')}>
         Профиль
-      </div>
-      <div
-        className={classNames(styles.tab, { [styles.active]: tab === 'messages' })}
-        onClick={changeTab('messages')}
-      >
+      </Tab>
+
+      <Tab active={tab === 'messages'} onClick={changeTab('messages')}>
         Сообщения
-      </div>
+      </Tab>
       {is_own && (
-        <>
-          <div
-            className={classNames(styles.tab, { [styles.active]: tab === 'settings' })}
-            onClick={changeTab('settings')}
-          >
-            Настройки
-          </div>
-        </>
+        <Tab active={tab === 'settings'} onClick={changeTab('settings')}>
+          Настройки
+        </Tab>
       )}
-    </div>
+    </Tabs>
   );
 };