From 428c7e7a06c38bfb9578ee22db10ee90eca08ca9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 6 Mar 2021 12:18:23 +0700
Subject: [PATCH] #35 added containers everywhere

---
 .../node/NodeImageSwiperBlock/index.tsx       |   9 +
 src/containers/flow/FlowLayout/index.tsx      |  43 ++--
 src/containers/main/Container/index.tsx       |  13 ++
 .../main/Container/styles.module.scss         |   7 +
 .../main/MainLayout/styles.module.scss        |   1 -
 src/containers/node/BorisLayout/index.tsx     |  97 ++++-----
 src/containers/node/NodeLayout/index.tsx      | 188 +++++++++---------
 7 files changed, 200 insertions(+), 158 deletions(-)
 create mode 100644 src/components/node/NodeImageSwiperBlock/index.tsx
 create mode 100644 src/containers/main/Container/index.tsx
 create mode 100644 src/containers/main/Container/styles.module.scss

diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
new file mode 100644
index 00000000..89b71494
--- /dev/null
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+interface IProps {}
+
+const NodeImageSwiperBlock: FC<IProps> = () => (
+    <div>SWIPER</div>
+)
+
+export { NodeImageSwiperBlock };
diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx
index 179781b6..cf263080 100644
--- a/src/containers/flow/FlowLayout/index.tsx
+++ b/src/containers/flow/FlowLayout/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { selectFlow } from '~/redux/flow/selectors';
@@ -10,6 +10,7 @@ import { FlowHero } from '~/components/flow/FlowHero';
 import styles from './styles.module.scss';
 import { IState } from '~/redux/store';
 import { FlowStamp } from '~/components/flow/FlowStamp';
+import { Container } from '~/containers/main/Container';
 
 const mapStateToProps = (state: IState) => ({
   flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)),
@@ -61,28 +62,30 @@ const FlowLayoutUnconnected: FC<IProps> = ({
   }, []);
 
   return (
-    <div className={styles.grid}>
-      <div className={styles.hero}>
-        <FlowHero heroes={heroes} />
-      </div>
+    <Container>
+      <div className={styles.grid}>
+        <div className={styles.hero}>
+          <FlowHero heroes={heroes} />
+        </div>
 
-      <div className={styles.stamp}>
-        <FlowStamp
-          recent={recent}
-          updated={updated}
-          search={search}
-          flowChangeSearch={flowChangeSearch}
-          onLoadMore={onLoadMoreSearch}
+        <div className={styles.stamp}>
+          <FlowStamp
+            recent={recent}
+            updated={updated}
+            search={search}
+            flowChangeSearch={flowChangeSearch}
+            onLoadMore={onLoadMoreSearch}
+          />
+        </div>
+
+        <FlowGrid
+          nodes={nodes}
+          user={user}
+          onSelect={nodeGotoNode}
+          onChangeCellView={flowSetCellView}
         />
       </div>
-
-      <FlowGrid
-        nodes={nodes}
-        user={user}
-        onSelect={nodeGotoNode}
-        onChangeCellView={flowSetCellView}
-      />
-    </div>
+    </Container>
   );
 };
 
diff --git a/src/containers/main/Container/index.tsx b/src/containers/main/Container/index.tsx
new file mode 100644
index 00000000..d5045fd1
--- /dev/null
+++ b/src/containers/main/Container/index.tsx
@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  className?: string;
+}
+
+const Container: FC<IProps> = ({ className, children }) => (
+  <div className={classNames(styles.container, className)}>{children}</div>
+);
+
+export { Container };
diff --git a/src/containers/main/Container/styles.module.scss b/src/containers/main/Container/styles.module.scss
new file mode 100644
index 00000000..8da5ff08
--- /dev/null
+++ b/src/containers/main/Container/styles.module.scss
@@ -0,0 +1,7 @@
+@import "~/styles/variables.scss";
+
+.container {
+  width: 100%;
+  max-width: $content_width;
+  margin: auto;
+}
diff --git a/src/containers/main/MainLayout/styles.module.scss b/src/containers/main/MainLayout/styles.module.scss
index e87b6e31..918061ea 100644
--- a/src/containers/main/MainLayout/styles.module.scss
+++ b/src/containers/main/MainLayout/styles.module.scss
@@ -19,7 +19,6 @@
   flex: 1;
   position: relative;
   width: 100%;
-  max-width: $content_width;
   display: flex;
   padding-bottom: 29px;
   flex-direction: column;
diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index 49ef20d2..57127226 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -19,6 +19,7 @@ import { selectBorisStats } from '~/redux/boris/selectors';
 import { authSetUser } from '~/redux/auth/actions';
 import { nodeLoadNode } from '~/redux/node/actions';
 import { borisLoadStats } from '~/redux/boris/actions';
+import { Container } from '~/containers/main/Container';
 
 type IProps = {};
 
@@ -55,59 +56,61 @@ const BorisLayout: FC<IProps> = () => {
   }, [dispatch]);
 
   return (
-    <div className={styles.wrap}>
-      <div className={styles.cover} />
+    <Container>
+      <div className={styles.wrap}>
+        <div className={styles.cover} />
 
-      <div className={styles.image}>
-        <div className={styles.caption}>
-          <div className={styles.caption_text}>{title}</div>
+        <div className={styles.image}>
+          <div className={styles.caption}>
+            <div className={styles.caption_text}>{title}</div>
+          </div>
+
+          <img src={boris} alt="Борис" />
         </div>
 
-        <img src={boris} alt="Борис" />
-      </div>
+        <div className={styles.container}>
+          <Card className={styles.content}>
+            <Group className={styles.grid}>
+              {user.is_user && <NodeCommentForm isBefore nodeId={node.current.id} />}
 
-      <div className={styles.container}>
-        <Card className={styles.content}>
-          <Group className={styles.grid}>
-            {user.is_user && <NodeCommentForm isBefore nodeId={node.current.id} />}
-
-            {node.is_loading_comments ? (
-              <NodeNoComments is_loading count={7} />
-            ) : (
-              <NodeComments
-                comments={comments}
-                count={node.comment_count}
-                user={user}
-                order="ASC"
-              />
-            )}
-          </Group>
-
-          <Footer />
-        </Card>
-
-        <Group className={styles.stats}>
-          <Sticky>
-            <Group className={styles.stats__container}>
-              <div className={styles.stats__about}>
-                <h4>Господи-боженьки, где это я?</h4>
-
-                <p>
-                  Всё впорядке, это &mdash; главный штаб Суицидальных Роботов, строителей Убежища.
-                </p>
-                <p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
-                <p>Все виновные будут наказаны. Невиновные, впрочем, тоже. </p>
-                <p className="grey">//&nbsp;Такова&nbsp;жизнь.</p>
-              </div>
-
-              <div className={styles.stats__wrap}>
-                <BorisStats stats={stats} />
-              </div>
+              {node.is_loading_comments ? (
+                <NodeNoComments is_loading count={7} />
+              ) : (
+                <NodeComments
+                  comments={comments}
+                  count={node.comment_count}
+                  user={user}
+                  order="ASC"
+                />
+              )}
             </Group>
-          </Sticky>
-        </Group>
+
+            <Footer />
+          </Card>
+
+          <Group className={styles.stats}>
+            <Sticky>
+              <Group className={styles.stats__container}>
+                <div className={styles.stats__about}>
+                  <h4>Господи-боженьки, где это я?</h4>
+
+                  <p>
+                    Всё впорядке, это &mdash; главный штаб Суицидальных Роботов, строителей Убежища.
+                  </p>
+                  <p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
+                  <p>Все виновные будут наказаны. Невиновные, впрочем, тоже. </p>
+                  <p className="grey">//&nbsp;Такова&nbsp;жизнь.</p>
+                </div>
+
+                <div className={styles.stats__wrap}>
+                  <BorisStats stats={stats} />
+                </div>
+              </Group>
+            </Sticky>
+          </Group>
+        </div>
       </div>
-    </div>
+    </Container>
   );
 };
 
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 00c3ef7c..45e4b59d 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -12,14 +12,9 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import {
-  INodeComponentProps,
-  NODE_COMPONENTS,
-  NODE_HEADS,
-  NODE_INLINES,
-} from '~/redux/node/constants';
+import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
-import { path, pick, prop } from 'ramda';
+import { pick, prop } from 'ramda';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
@@ -36,6 +31,7 @@ import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { ITag } from '~/redux/types';
 import { URLS } from '~/constants/urls';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { Container } from '~/containers/main/Container';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -154,96 +150,108 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
       <>
         {!!head && createNodeBlock(head)}
 
-        <Card className={styles.node} seamless>
-          {!!block && createNodeBlock(block)}
+        <Container>
+          <Card className={styles.node} seamless>
+            {!!block && createNodeBlock(block)}
 
-          <NodePanel
-            node={pick(
-              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at', 'like_count'],
-              node
-            )}
-            layout={layout}
-            can_edit={can_edit}
-            can_like={can_like}
-            can_star={can_star}
-            onEdit={onEdit}
-            onLike={onLike}
-            onStar={onStar}
-            onLock={onLock}
-            is_loading={is_loading}
-          />
+            <NodePanel
+              node={pick(
+                [
+                  'title',
+                  'user',
+                  'is_liked',
+                  'is_heroic',
+                  'deleted_at',
+                  'created_at',
+                  'like_count',
+                ],
+                node
+              )}
+              layout={layout}
+              can_edit={can_edit}
+              can_like={can_like}
+              can_star={can_star}
+              onEdit={onEdit}
+              onLike={onLike}
+              onStar={onStar}
+              onLock={onLock}
+              is_loading={is_loading}
+            />
 
-          {node.deleted_at ? (
-            <NodeDeletedBadge />
-          ) : (
-            <Group>
-              <Padder>
-                <Group horizontal className={styles.content}>
-                  <Group className={styles.comments}>
-                    {inline && <div className={styles.inline}>{createNodeBlock(inline)}</div>}
+            {node.deleted_at ? (
+              <NodeDeletedBadge />
+            ) : (
+              <Group>
+                <Padder>
+                  <Group horizontal className={styles.content}>
+                    <Group className={styles.comments}>
+                      {inline && <div className={styles.inline}>{createNodeBlock(inline)}</div>}
 
-                    {is_loading || is_loading_comments || (!comments.length && !inline) ? (
-                      <NodeNoComments is_loading={is_loading_comments || is_loading} />
-                    ) : (
-                      <NodeComments
-                        count={comment_count}
-                        comments={comments}
-                        user={user}
-                        order="DESC"
-                      />
-                    )}
+                      {is_loading || is_loading_comments || (!comments.length && !inline) ? (
+                        <NodeNoComments is_loading={is_loading_comments || is_loading} />
+                      ) : (
+                        <NodeComments
+                          count={comment_count}
+                          comments={comments}
+                          user={user}
+                          order="DESC"
+                        />
+                      )}
 
-                    {is_user && !is_loading && <NodeCommentForm nodeId={node.id} />}
-                  </Group>
+                      {is_user && !is_loading && <NodeCommentForm nodeId={node.id} />}
+                    </Group>
 
-                  <div className={styles.panel}>
-                    <Sticky>
-                      <Group style={{ flex: 1, minWidth: 0 }}>
-                        {!is_loading && (
-                          <NodeTags
-                            is_editable={is_user}
-                            tags={node.tags}
-                            onChange={onTagsChange}
-                            onTagClick={onTagClick}
-                          />
-                        )}
-
-                        {is_loading && <NodeRelatedPlaceholder />}
-
-                        {!is_loading &&
-                          related &&
-                          related.albums &&
-                          !!node?.id &&
-                          Object.keys(related.albums)
-                            .filter(album => related.albums[album].length > 0)
-                            .map(album => (
-                              <NodeRelated
-                                title={
-                                  <Link to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
-                                    {album}
-                                  </Link>
-                                }
-                                items={related.albums[album]}
-                                key={album}
-                              />
-                            ))}
-
-                        {!is_loading &&
-                          related &&
-                          related.similar &&
-                          related.similar.length > 0 && (
-                            <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
+                    <div className={styles.panel}>
+                      <Sticky>
+                        <Group style={{ flex: 1, minWidth: 0 }}>
+                          {!is_loading && (
+                            <NodeTags
+                              is_editable={is_user}
+                              tags={node.tags}
+                              onChange={onTagsChange}
+                              onTagClick={onTagClick}
+                            />
                           )}
-                      </Group>
-                    </Sticky>
-                  </div>
-                </Group>
-              </Padder>
-            </Group>
-          )}
 
-          <Footer />
-        </Card>
+                          {is_loading && <NodeRelatedPlaceholder />}
+
+                          {!is_loading &&
+                            related &&
+                            related.albums &&
+                            !!node?.id &&
+                            Object.keys(related.albums)
+                              .filter(album => related.albums[album].length > 0)
+                              .map(album => (
+                                <NodeRelated
+                                  title={
+                                    <Link
+                                      to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}
+                                    >
+                                      {album}
+                                    </Link>
+                                  }
+                                  items={related.albums[album]}
+                                  key={album}
+                                />
+                              ))}
+
+                          {!is_loading &&
+                            related &&
+                            related.similar &&
+                            related.similar.length > 0 && (
+                              <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
+                            )}
+                        </Group>
+                      </Sticky>
+                    </div>
+                  </Group>
+                </Padder>
+              </Group>
+            )}
+
+            <Footer />
+          </Card>
+        </Container>
 
         <SidebarRouter prefix="/post:id" />
       </>