#23 added lab node layout (sample)

src/containers/lab/LabGrid/index.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
-import { selectFlowNodes } from '~/redux/flow/selectors';
 import styles from './styles.module.scss';
 import { LabNode } from '~/containers/lab/LabNode';
+import { selectLabListNodes } from '~/redux/lab/selectors';
 
 interface IProps {}
 
 const LabGrid: FC<IProps> = () => {
-  const nodes = useShallowSelect(selectFlowNodes);
+  const nodes = useShallowSelect(selectLabListNodes);
 
   return (
     <div className={styles.wrap}>

src/containers/lab/LabLayout/index.tsx

@@ -1,27 +1,37 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { Card } from '~/components/containers/Card';
 import { Sticky } from '~/components/containers/Sticky';
 import { Container } from '~/containers/main/Container';
 import { LabGrid } from '~/containers/lab/LabGrid';
+import { useDispatch } from 'react-redux';
+import { labGetList } from '~/redux/lab/actions';
 
 interface IProps {}
 
-const LabLayout: FC<IProps> = () => (
-  <div>
-    <Container>
-      <div className={styles.wrap}>
-        <div className={styles.content}>
-          <LabGrid />
+const LabLayout: FC<IProps> = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(labGetList());
+  }, [dispatch]);
+
+  return (
+    <div>
+      <Container>
+        <div className={styles.wrap}>
+          <div className={styles.content}>
+            <LabGrid />
+          </div>
+          <div className={styles.panel}>
+            <Sticky>
+              <Card>Test</Card>
+            </Sticky>
+          </div>
         </div>
-        <div className={styles.panel}>
-          <Sticky>
-            <Card>Test</Card>
-          </Sticky>
-        </div>
-      </div>
-    </Container>
-  </div>
-);
+      </Container>
+    </div>
+  );
+};
 
 export { LabLayout };

src/containers/lab/LabNode/index.tsx

@@ -2,6 +2,9 @@ import React, { FC } from 'react';
 import { INode } from '~/redux/types';
 import { NodePanelInner } from '~/components/node/NodePanelInner';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import styles from './styles.module.scss';
+import { Card } from '~/components/containers/Card';
+import { NodePanelLab } from '~/components/node/NodePanelLab';
 
 interface IProps {
   node: INode;
@@ -10,24 +13,18 @@ interface IProps {
 const LabNode: FC<IProps> = ({ node }) => {
   const { inline, block, head } = useNodeBlocks(node, false);
 
-  return (
-    <div>
-      <NodePanelInner
-        node={node}
-        canEdit
-        canLike
-        canStar
-        isLoading={false}
-        onEdit={console.log}
-        onLike={console.log}
-        onStar={console.log}
-        onLock={console.log}
-      />
+  console.log(node.id, { inline, block, head });
+
+  return (
+    <Card seamless className={styles.wrap}>
+      <div className={styles.head}>
+        <NodePanelLab node={node} />
+      </div>
 
-      {inline}
-      {block}
       {head}
-    </div>
+      {block}
+      {inline}
+    </Card>
   );
 };
 

src/containers/lab/LabNode/styles.module.scss

@@ -0,0 +1,10 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  min-width: 0;
+}
+
+.head {
+  background-color: transparentize(black, 0.9);
+  border-radius: $radius $radius 0 0;
+}

src/containers/main/MainRouter/index.tsx

@@ -7,21 +7,29 @@ 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 { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectAuthUser } from '~/redux/auth/selectors';
 
 interface IProps {}
 
 const MainRouter: FC<IProps> = () => {
+  const { is_user } = useShallowSelect(selectAuthUser);
   const location = useLocation();
 
   return (
     <Switch location={location}>
       <Route exact path={URLS.BASE} component={FlowLayout} />
-      <Route exact path={URLS.LAB} component={LabLayout} />
       <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} />
 
+      {is_user && (
+        <>
+          <Route exact path={URLS.LAB} component={LabLayout} />
+        </>
+      )}
+
       <Redirect to="/" />
     </Switch>
   );