fixed pushing tags

src/components/node/NodeRelated/index.tsx

@@ -2,12 +2,14 @@ import React, { FC, HTMLAttributes } from 'react';
 import { range } from 'ramda';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
+import { INode } from '~/redux/types';
+import { getURL } from '~/utils/dom';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {}
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  items: Partial<INode>[];
+};
 
-const NodeRelated: FC<IProps> = ({
-  title,
-}) => (
+const NodeRelated: FC<IProps> = ({ title, items }) => (
   <Group className={styles.wrap}>
     <div className={styles.title}>
       <div className={styles.line} />
@@ -15,9 +17,13 @@ const NodeRelated: FC<IProps> = ({
       <div className={styles.line} />
     </div>
     <div className={styles.grid}>
-      {
-        range(1, 7).map(el => (<div className={styles.item} key={el} />))
-      }
+      {items.map(item => (
+        <div
+          className={styles.item}
+          key={item.id}
+          style={{ backgroundImage: `url("${getURL({ url: item.thumbnail })}")` }}
+        />
+      ))}
     </div>
   </Group>
 );

src/components/node/NodeRelated/styles.scss

@@ -7,15 +7,20 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-auto-rows: auto;
   grid-column-gap: $gap;
   grid-row-gap: $gap;
+
+  @include tablet {
+    grid-template-columns: repeat(6, 1fr);
+  }
 }
 
 .item {
-  background: darken($content_bg, 2%);
+  background: darken($content_bg, 2%) 50% 50% no-repeat;
+  background-size: cover;
   padding-bottom: 100%;
   border-radius: $cell_radius;
 }

src/components/node/Tags/index.tsx

@@ -12,6 +12,7 @@ import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import { Tag } from '~/components/node/Tag';
 import uniq from 'ramda/es/uniq';
+import assocPath from 'ramda/es/assocPath';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];
@@ -65,9 +66,14 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
   );
 
   const onSubmit = useCallback(() => {
-    if (!data.length) return;
-    onTagsChange(uniq([...tags, ...data]).map(tag => tag.title));
-  }, [tags, data, onTagsChange]);
+    const title = input && input.trim();
+    const items = title ? [...data, { title }] : data;
+
+    if (!items.length) return;
+    setData(items);
+    setInput('');
+    onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
+  }, [tags, data, onTagsChange, input, setInput]);
 
   useEffect(() => {
     setData(data.filter(({ title }) => !tags.some(tag => tag.title.trim() === title.trim())));

src/constants/api.ts

@@ -13,6 +13,7 @@ export const API = {
     GET_NODE: (id: number | string) => `/node/${id}`,
 
     COMMENT: (id: INode['id']) => `/node/${id}/comment`,
+    RELATED: (id: INode['id']) => `/node/${id}/related`,
     UPDATE_TAGS: (id: INode['id']) => `/node/${id}/tags`,
     POST_LIKE: (id: INode['id']) => `/node/${id}/like`,
     POST_STAR: (id: INode['id']) => `/node/${id}/heroic`,

src/containers/node/NodeLayout/index.tsx

@@ -42,7 +42,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     match: {
       params: { id },
     },
-    node: { is_loading, is_loading_comments, comments = [], current: node },
+    node: { is_loading, is_loading_comments, comments = [], current: node, related },
     user,
     user: { is_user },
     nodeLoadNode,
@@ -123,9 +123,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                 <Group style={{ flex: 1, minWidth: 0 }}>
                   <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
 
-                  <NodeRelated title="First album" />
-
-                  <NodeRelated title="Second album" />
+                  {related && related.similar && (
+                    <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
+                  )}
                 </Group>
               </div>
             </Group>

src/redux/node/actions.ts

@@ -48,6 +48,11 @@ export const nodeSetComments = (comments: IComment[]) => ({
   type: NODE_ACTIONS.SET_COMMENTS,
 });
 
+export const nodeSetRelated = (related: INodeState['related']) => ({
+  related,
+  type: NODE_ACTIONS.SET_RELATED,
+});
+
 export const nodeSetCommentData = (id: number, comment: IComment) => ({
   id,
   comment,

src/redux/node/api.ts

@@ -2,6 +2,7 @@ import { api, configWithToken, resultMiddleware, errorMiddleware } from '~/utils
 import { INode, IResultWithStatus, IComment } from '../types';
 import { API } from '~/constants/api';
 import { nodeUpdateTags, nodeLike, nodeStar } from './actions';
+import { INodeState } from './reducer';
 
 export const postNode = ({
   access,
@@ -58,12 +59,24 @@ export const getNodeComments = ({
 }: {
   id: number;
   access: string;
-}): Promise<IResultWithStatus<{ comment: Comment }>> =>
+}): Promise<IResultWithStatus<{ comments: Comment[] }>> =>
   api
     .get(API.NODE.COMMENT(id), configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
 
+export const getNodeRelated = ({
+  id,
+  access,
+}: {
+  id: number;
+  access: string;
+}): Promise<IResultWithStatus<{ related: INodeState['related'] }>> =>
+  api
+    .get(API.NODE.RELATED(id), configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);
+
 export const updateNodeTags = ({
   id,
   tags,

src/redux/node/constants.ts

@@ -34,6 +34,7 @@ export const NODE_ACTIONS = {
 
   POST_COMMENT: `${prefix}POST_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
+  SET_RELATED: `${prefix}SET_RELATED`,
 
   UPDATE_TAGS: `${prefix}UPDATE_TAGS`,
   SET_TAGS: `${prefix}SET_TAGS`,

src/redux/node/handlers.ts

@@ -11,6 +11,7 @@ import {
   nodeSetTags,
   nodeSetEditor,
   nodeSetCoverImage,
+  nodeSetRelated,
 } from './actions';
 import { INodeState } from './reducer';
 
@@ -36,6 +37,9 @@ const setSendingComment = (
 const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetComments>) =>
   assocPath(['comments'], comments, state);
 
+const setRelated = (state: INodeState, { related }: ReturnType<typeof nodeSetRelated>) =>
+  assocPath(['related'], related, state);
+
 const setCommentData = (
   state: INodeState,
   { id, comment }: ReturnType<typeof nodeSetCommentData>
@@ -59,6 +63,7 @@ export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,
   [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
+  [NODE_ACTIONS.SET_RELATED]: setRelated,
   [NODE_ACTIONS.SET_COMMENT_DATA]: setCommentData,
   [NODE_ACTIONS.SET_TAGS]: setTags,
   [NODE_ACTIONS.SET_EDITOR]: setEditor,

src/redux/node/reducer.ts

@@ -7,6 +7,10 @@ export type INodeState = Readonly<{
   editor: INode;
   current: INode;
   comments: IComment[];
+  related: {
+    albums: Record<string, Partial<INode[]>>;
+    similar: Partial<INode[]>;
+  };
   comment_data: Record<number, IComment>;
   current_cover_image: IFile;
 
@@ -28,6 +32,7 @@ const INITIAL_STATE: INodeState = {
   current: { ...EMPTY_NODE },
   comment_data: { 0: { ...EMPTY_COMMENT } },
   comments: [],
+  related: null,
   current_cover_image: null,
 
   is_loading: false,

src/redux/node/sagas.ts

@@ -1,4 +1,4 @@
-import { takeLatest, call, put, select, delay } from 'redux-saga/effects';
+import { takeLatest, call, put, select, delay, all } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 
 import { NODE_ACTIONS, EMPTY_NODE, EMPTY_COMMENT, NODE_EDITOR_DATA } from './constants';
@@ -19,6 +19,7 @@ import {
   nodeSetEditor,
   nodeEdit,
   nodeLike,
+  nodeSetRelated,
 } from './actions';
 import {
   postNode,
@@ -28,6 +29,7 @@ import {
   updateNodeTags,
   postNodeLike,
   postNodeStar,
+  getNodeRelated,
 } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
@@ -112,11 +114,19 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
 
   // todo: load comments
   const {
-    data: { comments },
-  } = yield call(reqWrapper, getNodeComments, { id });
+    comments: {
+      data: { comments },
+    },
+    related: {
+      data: { related },
+    },
+  } = yield all({
+    comments: call(reqWrapper, getNodeComments, { id }),
+    related: call(reqWrapper, getNodeRelated, { id }),
+  });
 
   yield put(nodeSetComments(comments || []));
-
+  yield put(nodeSetRelated(related || []));
   yield put(nodeSetLoadingComments(false));
 
   return;