notifications: for nodes

src/components/node/NodeRelated/index.tsx

@@ -3,7 +3,7 @@ import React, { FC, ReactElement } from 'react';
 import { Hoverable } from '~/components/common/Hoverable';
 import { SubTitle } from '~/components/common/SubTitle';
 import { Group } from '~/components/containers/Group';
-import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
+import { NodeThumbnail } from '~/components/node/NodeThumbnail';
 import { INode } from '~/types';
 
 import styles from './styles.module.scss';
@@ -21,7 +21,7 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
       <div className={styles.grid}>
         {items.map((item) => (
           <Hoverable key={item.id} className={styles.item}>
-            <NodeRelatedItem item={item} />
+            <NodeThumbnail item={item} />
           </Hoverable>
         ))}
       </div>

src/components/node/NodeRelated/placeholder.tsx

@@ -3,7 +3,7 @@ import React, { FC, memo } from 'react';
 import classNames from 'classnames';
 
 import { Group } from '~/components/containers/Group';
-import cell_style from '~/components/node/NodeRelatedItem/styles.module.scss';
+import cell_style from '~/components/node/NodeThumbnail/styles.module.scss';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { range } from '~/utils/ramda';
 

src/components/node/NodeThumbnail/index.tsx

@@ -8,13 +8,17 @@ import { Icon } from '~/components/input/Icon';
 import { imagePresets } from '~/constants/urls';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
-import { INode } from '~/types';
 import { getURL, getURLFromString } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-type IProps = {
-  item: Partial<INode>;
+type NodeThumbnailProps = {
+  item: {
+    thumbnail?: string;
+    title?: string;
+    is_promoted?: boolean;
+    id?: number;
+  };
 };
 
 type CellSize = 'small' | 'medium' | 'large';
@@ -33,7 +37,7 @@ const getTitleLetters = (title?: string): string => {
     : words[0].substr(0, 2).toUpperCase();
 };
 
-const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
+const NodeThumbnail: FC<NodeThumbnailProps> = memo(({ item }) => {
   const onClick = useGotoNode(item.id);
   const [is_loaded, setIsLoaded] = useState(false);
   const [width, setWidth] = useState(0);
@@ -118,4 +122,4 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   );
 });
 
-export { NodeRelatedItem };
+export { NodeThumbnail };