#23 fixed submit button appearance for lab

src/components/bars/SubmitBar/index.tsx

@@ -1,28 +1,37 @@
 import React, { FC, useCallback } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Icon } from '~/components/input/Icon';
-import * as NODE_ACTIONS from '~/redux/node/actions';
-import { DIALOGS } from '~/redux/modal/constants';
+import { nodeCreate } from '~/redux/node/actions';
 
 import styles from './styles.module.scss';
 import { NODE_TYPES } from '~/redux/node/constants';
+import classNames from 'classnames';
 
-const mapStateToProps = null;
-const mapDispatchToProps = {
-  nodeCreate: NODE_ACTIONS.nodeCreate,
-  // showDialog: MODAL_ACTIONS.modalShowDialog,
-};
+interface Props {
+  isLab?: boolean;
+}
 
-type IProps = typeof mapDispatchToProps & {};
+const SubmitBar: FC<Props> = ({ isLab }) => {
+  const dispatch = useDispatch();
 
-const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
-  const onOpenImageEditor = useCallback(() => nodeCreate(NODE_TYPES.IMAGE), [nodeCreate]);
-  const onOpenTextEditor = useCallback(() => nodeCreate(NODE_TYPES.TEXT), [nodeCreate]);
-  const onOpenVideoEditor = useCallback(() => nodeCreate(NODE_TYPES.VIDEO), [nodeCreate]);
-  const onOpenAudioEditor = useCallback(() => nodeCreate(NODE_TYPES.AUDIO), [nodeCreate]);
+  const onOpenImageEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.IMAGE, isLab)), [
+    dispatch,
+  ]);
+
+  const onOpenTextEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.TEXT, isLab)), [
+    dispatch,
+  ]);
+
+  const onOpenVideoEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.VIDEO, isLab)), [
+    dispatch,
+  ]);
+
+  const onOpenAudioEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.AUDIO, isLab)), [
+    dispatch,
+  ]);
 
   return (
-    <div className={styles.wrap}>
+    <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
       <div className={styles.panel}>
         <div onClick={onOpenImageEditor}>
           <Icon icon="image" />
@@ -48,9 +57,4 @@ const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
   );
 };
 
-const SubmitBar = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SubmitBarUnconnected);
-
 export { SubmitBar };

src/components/bars/SubmitBar/styles.module.scss

@@ -1,8 +1,11 @@
 @import "src/styles/variables";
 
 .wrap {
-  position: absolute;
-  right: -($bar_height + $gap);
+  position: fixed;
+  bottom: 0;
+  right: 50%;
+  transform: translate($content_width / 2 + $bar_height + $gap, 0);
+  z-index: 4;
 
   &:hover {
     .panel {
@@ -11,9 +14,8 @@
   }
 
   @media (max-width: $content_width + ($bar_height + $gap) * 2) {
-    position: relative;
     right: 0;
-    margin-left: $gap;
+    transform: translate(0, 0);
   }
 }
 
@@ -34,6 +36,10 @@
     width: 32px;
     height: 32px;
   }
+
+  .lab & {
+    background: $blue_gradient;
+  }
 }
 
 .panel {

src/containers/main/BottomContainer/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { PlayerBar } from '~/components/bars/PlayerBar';
-import { SubmitBar } from '~/components/bars/SubmitBar';
 import { selectUser } from '~/redux/auth/selectors';
 import { pick } from 'ramda';
 import { connect } from 'react-redux';
@@ -14,8 +13,6 @@ const BottomContainerUnconnected: FC<IProps> = ({ is_user }) => (
   <div className={styles.wrap}>
     <div className={styles.content}>
       <PlayerBar />
-
-      {is_user && <SubmitBar />}
     </div>
   </div>
 );

src/containers/main/MainRouter/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { URLS } from '~/constants/urls';
-import { FlowLayout } from '~/containers/flow/FlowLayout';
-import { NodeLayout } from '~/containers/node/NodeLayout';
-import { BorisLayout } from '~/containers/node/BorisLayout';
+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 '~/containers/lab/LabLayout';
+import { LabLayout } from '~/layouts/LabLayout';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectAuthUser } from '~/redux/auth/selectors';
 

src/containers/main/SidebarRouter/index.tsx

@@ -1,17 +1,30 @@
 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';
 
 interface IProps {
   prefix?: string;
+  isLab?: boolean;
 }
 
-const SidebarRouter: FC<IProps> = ({ prefix = '' }) => (
-  <Switch>
-    <Route path={`${prefix}/tag/:tag`} component={TagSidebar} />
-    <Route path={`${prefix}/~:username`} component={ProfileSidebar} />
-  </Switch>
-);
+const SidebarRouter: FC<IProps> = ({ prefix = '', isLab }) => {
+  return createPortal(
+    <>
+      <Switch>
+        <Route path={`${prefix}/tag/:tag`} component={TagSidebar} />
+        <Route path={`${prefix}/~:username`} component={ProfileSidebar} />
+      </Switch>
+
+      <Authorized>
+        <SubmitBar isLab={isLab} />
+      </Authorized>
+    </>,
+    document.body
+  );
+};
 
 export { SidebarRouter };

src/layouts/BorisLayout/index.tsx

@@ -17,7 +17,7 @@ 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, Link } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
 import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
 import { Superpower } from '~/components/boris/Superpower';
@@ -25,6 +25,7 @@ import { Tabs } from '~/components/dialogs/Tabs';
 import { Tab } from '~/components/dialogs/Tab';
 import { useHistory, useLocation } from 'react-router';
 import { Card } from '~/components/containers/Card';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 type IProps = {};
 
@@ -144,6 +145,8 @@ const BorisLayout: FC<IProps> = () => {
           </Group>
         </div>
       </div>
+
+      <SidebarRouter prefix="/" />
     </Container>
   );
 };

src/layouts/BorisLayout/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import "~/styles/variables";
 
 .wrap {
   display: flex;
@@ -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;
 }
 

src/layouts/FlowLayout/index.tsx

@@ -11,6 +11,7 @@ import styles from './styles.module.scss';
 import { IState } from '~/redux/store';
 import { FlowStamp } from '~/components/flow/FlowStamp';
 import { Container } from '~/containers/main/Container';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 const mapStateToProps = (state: IState) => ({
   flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)),
@@ -85,6 +86,8 @@ const FlowLayoutUnconnected: FC<IProps> = ({
           onChangeCellView={flowSetCellView}
         />
       </div>
+
+      <SidebarRouter prefix="/" />
     </Container>
   );
 };

src/layouts/FlowLayout/styles.module.scss

@@ -12,7 +12,7 @@ $cols: $content_width / $cell;
 .grid {
   display: grid;
 
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, 1fr); 
   grid-template-rows: 50vh $cell;
   grid-auto-rows: $cell;
 

src/layouts/LabLayout/index.tsx

@@ -16,6 +16,7 @@ import { Filler } from '~/components/containers/Filler';
 import { LabStats } from '~/containers/lab/LabStats';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectLabList, selectLabListNodes, selectLabStatsLoading } from '~/redux/lab/selectors';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 interface IProps {}
 
@@ -44,6 +45,8 @@ const LabLayout: FC<IProps> = () => {
           </div>
         </div>
       </Container>
+
+      <SidebarRouter prefix="/lab" isLab />
     </div>
   );
 };

src/redux/node/actions.ts

@@ -87,9 +87,10 @@ export const nodeSetTags = (tags: ITag[]) => ({
   tags,
 });
 
-export const nodeCreate = (node_type: INode['type']) => ({
+export const nodeCreate = (node_type: INode['type'], isLab?: boolean) => ({
   type: NODE_ACTIONS.CREATE,
   node_type,
+  isLab,
 });
 
 export const nodeEdit = (id: INode['id']) => ({

src/redux/node/sagas.ts

@@ -227,10 +227,18 @@ function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
   } catch {}
 }
 
-function* onCreateSaga({ node_type: type }: ReturnType<typeof nodeCreate>) {
+function* onCreateSaga({ node_type: type, isLab }: ReturnType<typeof nodeCreate>) {
   if (!type || !has(type, NODE_EDITOR_DIALOGS)) return;
 
-  yield put(nodeSetEditor({ ...EMPTY_NODE, ...(NODE_EDITOR_DATA[type] || {}), type }));
+  yield put(
+    nodeSetEditor({
+      ...EMPTY_NODE,
+      ...(NODE_EDITOR_DATA[type] || {}),
+      type,
+      is_promoted: !isLab,
+    })
+  );
+
   yield put(modalShowDialog(NODE_EDITOR_DIALOGS[type]));
 }