NodeLayout

src/containers/App.tsx

@@ -14,6 +14,7 @@ import { URLS } from '~/constants/urls';
 import { Modal } from '~/containers/dialogs/Modal';
 import { selectModal } from '~/redux/modal/selectors';
 import { BlurWrapper } from '~/components/containers/BlurWrapper';
+import { NodeLayout } from './node/NodeLayout';
 
 const mapStateToProps = selectModal;
 const mapDispatchToProps = {};
@@ -23,19 +24,20 @@ type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {
 const Component: FC<IProps> = ({ is_shown }) => (
   <ConnectedRouter history={history}>
     <BlurWrapper is_blurred={is_shown}>
-        <MainLayout>
-          <Modal />
-          <Sprites />
+      <MainLayout>
+        <Modal />
+        <Sprites />
 
-          <Switch>
-            <Route exact path={URLS.BASE} component={FlowLayout} />
-            <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
-            <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-            <Route path="/examples/horizontal" component={HorizontalExample} />
+        <Switch>
+          <Route exact path={URLS.BASE} component={FlowLayout} />
+          <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
+          <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
+          <Route path="/examples/horizontal" component={HorizontalExample} />
+          <Route path="/post:id" component={NodeLayout} />
 
-            <Redirect to="/" />
-          </Switch>
-        </MainLayout>
+          <Redirect to="/" />
+        </Switch>
+      </MainLayout>
     </BlurWrapper>
   </ConnectedRouter>
 );

src/containers/flow/FlowLayout/index.tsx

@@ -2,14 +2,17 @@ import React, { FC } from 'react';
 import { connect } from 'react-redux';
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { selectFlow } from '~/redux/flow/selectors';
+import * as NODE_ACTIONS from '~/redux/node/actions';
 
 const mapStateToProps = selectFlow;
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = { nodeLoadNode: NODE_ACTIONS.nodeLoadNode };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const FlowLayoutUnconnected: FC<IProps> = ({ nodes }) => <FlowGrid nodes={nodes} />;
+const FlowLayoutUnconnected: FC<IProps> = ({ nodes, nodeLoadNode }) => (
+  <FlowGrid nodes={nodes} onSelect={nodeLoadNode} />
+);
 
 const FlowLayout = connect(
   mapStateToProps,

src/containers/node/NodeLayout/index.tsx

@@ -1,10 +1,70 @@
-import React, { FC } from 'react';
+import React, { FC, createElement } from 'react';
+import { RouteComponentProps } from 'react-router';
+import range from 'ramda/es/range';
+import { selectNode } from '~/redux/node/selectors';
+import { Card } from '~/components/containers/Card';
+import { ImageSwitcher } from '~/components/node/ImageSwitcher';
+import { NodePanel } from '~/components/node/NodePanel';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { Comment } from '~/components/node/Comment';
+
+import { Tags } from '~/components/node/Tags';
+import { NodeRelated } from '~/components/node/NodeRelated';
 import * as styles from './styles.scss';
+import { NodeComments } from '~/components/node/NodeComments';
+import { NodeTags } from '~/components/node/NodeTags';
+import { NodeImageBlockPlaceholder } from '~/components/node/NodeImageBlockPlaceholder';
+import { NODE_COMPONENTS } from '~/redux/node/constants';
 
-interface IProps {}
+const mapStateToProps = selectNode;
+const mapDispatchToProps = {};
 
-const NodeLayout: FC<IProps> = () => (
-  <div />
-);
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps &
+  RouteComponentProps<{ id: string }> & {};
+
+const NodeLayout: FC<IProps> = ({
+  match: {
+    params: { id },
+  },
+  is_loading,
+  current: node,
+}) => {
+  const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
+  const view = block && block[is_loading ? 'placeholder' : 'component'];
+
+  return (
+    <Card className={styles.node} seamless>
+      {view && createElement(view, { node })}
+
+      <NodeImageBlockPlaceholder />
+
+      <NodePanel />
+
+      <Group>
+        <Padder>
+          <Group horizontal className={styles.content}>
+            <Group className={styles.comments}>
+              <NodeNoComments />
+              <NodeComments />
+            </Group>
+
+            <div className={styles.panel}>
+              <Group style={{ flex: 1 }}>
+                <NodeTags />
+
+                <NodeRelated title="First album" />
+
+                <NodeRelated title="Second album" />
+              </Group>
+            </div>
+          </Group>
+        </Padder>
+      </Group>
+    </Card>
+  );
+};
 
 export { NodeLayout };

src/containers/node/NodeLayout/styles.scss

@@ -0,0 +1,33 @@
+.content {
+  align-items: stretch !important;
+
+  @include vertical_at_tablet;
+}
+
+.comments {
+  flex: 3 1;
+}
+
+.panel {
+  flex: 1 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-left: $gap / 2;
+
+  @include tablet {
+    padding-left: 0;
+  }
+}
+
+.node {
+  background: $node_bg;
+  box-shadow: $node_shadow;
+}
+
+.buttons {
+  background: $node_buttons_bg;
+  flex: 1;
+  border-radius: $panel_radius;
+  box-shadow: $comment_shadow;
+}