added imagecaching

src/components/node/CommentContent/index.tsx

@@ -10,6 +10,7 @@ import append from 'ramda/es/append';
 import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   comment: IComment;
@@ -46,7 +47,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
           <div className={styles.images}>
             {groupped.image.map(file => (
               <div key={file.id}>
-                <img src={getURL(file)} alt={file.name} />
+                <img src={getURL(file, PRESETS['300'])} alt={file.name} />
               </div>
             ))}
           </div>

src/components/node/NodeAudioImageBlock/index.tsx

@@ -4,6 +4,7 @@ import * as styles from './styles.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import path from 'ramda/es/path';
 import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   node: INode;
@@ -19,7 +20,7 @@ const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
     <div className={styles.wrap}>
       <div
         className={styles.slide}
-        style={{ backgroundImage: `url("${getURL(path([0], images))}")` }}
+        style={{ backgroundImage: `url("${getURL(path([0], images), PRESETS.hero)}")` }}
       />
     </div>
   );

src/components/node/NodeImageBlock/index.tsx

@@ -1,19 +1,11 @@
-import React, {
-  FC,
-  useMemo,
-  useState,
-  useEffect,
-  RefObject,
-  LegacyRef,
-  useRef,
-  useCallback,
-} from 'react';
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
 import classNames from 'classnames';
-import { getImageSize } from '~/utils/dom';
+import { getURL } from '~/utils/dom';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   is_loading: boolean;
@@ -82,7 +74,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
             >
               <img
                 className={styles.image}
-                src={getImageSize(file, 'node')}
+                src={getURL(file, PRESETS['1400'])}
                 alt=""
                 key={file.id}
                 onLoad={onImageLoad(index)}

src/components/node/NodeImageSlideBlock/index.tsx

@@ -3,9 +3,10 @@ import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
 import classNames from 'classnames';
-import { getImageSize } from '~/utils/dom';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { NODE_SETTINGS } from '~/redux/node/constants';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   is_loading: boolean;
@@ -206,7 +207,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
           >
             <img
               className={styles.image}
-              src={getImageSize(file, 'node')}
+              src={getURL(file, PRESETS['1400'])}
               alt=""
               key={file.id}
               onLoad={onImageLoad(index)}

src/components/node/NodeRelatedItem/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, memo, useCallback, useState } from 'react';
 import * as styles from './styles.scss';
 import classNames from 'classnames';
 import { INode } from '~/redux/types';
-import { URLS } from '~/constants/urls';
+import { URLS, PRESETS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { getURL } from '~/utils/dom';
 
@@ -22,10 +22,14 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
     >
       <div
         className={styles.thumb}
-        style={{ backgroundImage: `url("${getURL({ url: item.thumbnail })}")` }}
+        style={{ backgroundImage: `url("${getURL({ url: item.thumbnail }, PRESETS.avatar)}")` }}
       />
 
-      <img src={getURL({ url: item.thumbnail })} alt="loader" onLoad={() => setIsLoaded(true)} />
+      <img
+        src={getURL({ url: item.thumbnail }, PRESETS.avatar)}
+        alt="loader"
+        onLoad={() => setIsLoaded(true)}
+      />
     </div>
   );
 });