From 1320f0851f409cda12ef1c9073ab82512f321de7 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 7 Nov 2019 12:20:17 +0700
Subject: [PATCH] added imagecaching

---
 .../containers/CommentWrapper/index.tsx          |  3 ++-
 src/components/containers/PageCover/index.tsx    |  3 ++-
 .../editors/EditorUploadCoverButton/index.tsx    |  3 ++-
 .../editors/SortableImageGrid/index.tsx          |  3 ++-
 src/components/flow/Cell/index.tsx               |  2 +-
 src/components/flow/FlowHero/index.tsx           |  6 +++---
 src/components/flow/FlowRecent/index.tsx         |  6 +++---
 src/components/main/UserButton/index.tsx         |  6 +++++-
 src/components/node/CommentContent/index.tsx     |  3 ++-
 .../node/NodeAudioImageBlock/index.tsx           |  3 ++-
 src/components/node/NodeImageBlock/index.tsx     | 16 ++++------------
 .../node/NodeImageSlideBlock/index.tsx           |  5 +++--
 src/components/node/NodeRelatedItem/index.tsx    | 10 +++++++---
 src/constants/urls.ts                            |  1 +
 src/index.tsx                                    |  6 +++---
 src/utils/dom.ts                                 |  2 +-
 16 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/components/containers/CommentWrapper/index.tsx b/src/components/containers/CommentWrapper/index.tsx
index e93b61dc..8ebe6e13 100644
--- a/src/components/containers/CommentWrapper/index.tsx
+++ b/src/components/containers/CommentWrapper/index.tsx
@@ -6,6 +6,7 @@ import { Card } from '../Card';
 import { IUser } from '~/redux/auth/types';
 import { getURL } from '~/utils/dom';
 import path from 'ramda/es/path';
+import { PRESETS } from '~/constants/urls';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   // photo?: string;
@@ -33,7 +34,7 @@ const CommentWrapper: FC<IProps> = ({
     <div className={styles.thumb}>
       <div
         className={styles.thumb_image}
-        style={{ backgroundImage: `url("${getURL(path(['photo'], user))}")` }}
+        style={{ backgroundImage: `url("${getURL(path(['photo'], user), PRESETS.avatar)}")` }}
       />
       <div className={styles.thumb_user}>~{path(['username'], user)}</div>
     </div>
diff --git a/src/components/containers/PageCover/index.tsx b/src/components/containers/PageCover/index.tsx
index cf4d05dc..af7fdaed 100644
--- a/src/components/containers/PageCover/index.tsx
+++ b/src/components/containers/PageCover/index.tsx
@@ -5,6 +5,7 @@ import { selectNode } from '~/redux/node/selectors';
 import { connect } from 'react-redux';
 import pick from 'ramda/es/pick';
 import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
 
 const mapStateToProps = state => pick(['current_cover_image'], selectNode(state));
 
@@ -15,7 +16,7 @@ const PageCoverUnconnected: FC<IProps> = memo(({ current_cover_image }) =>
     ? createPortal(
         <div
           className={styles.wrap}
-          style={{ backgroundImage: `url("${getURL(current_cover_image)}")` }}
+          style={{ backgroundImage: `url("${getURL(current_cover_image, PRESETS.cover)}")` }}
         />,
         document.body
       )
diff --git a/src/components/editors/EditorUploadCoverButton/index.tsx b/src/components/editors/EditorUploadCoverButton/index.tsx
index dc8fc43c..43fb28d2 100644
--- a/src/components/editors/EditorUploadCoverButton/index.tsx
+++ b/src/components/editors/EditorUploadCoverButton/index.tsx
@@ -9,6 +9,7 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
+import { PRESETS } from '~/constants/urls';
 
 const mapStateToProps = state => {
   const { statuses, files } = selectUploads(state);
@@ -78,7 +79,7 @@ const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
     setData({ ...data, cover: null });
   }, [setData, data]);
 
-  const background = data.cover ? getURL(data.cover) : null;
+  const background = data.cover ? getURL(data.cover, PRESETS['300']) : null;
   const status = cover_temp && path([cover_temp], statuses);
   const preview = status && path(['preview'], status);
 
diff --git a/src/components/editors/SortableImageGrid/index.tsx b/src/components/editors/SortableImageGrid/index.tsx
index 96eac82e..79eae46c 100644
--- a/src/components/editors/SortableImageGrid/index.tsx
+++ b/src/components/editors/SortableImageGrid/index.tsx
@@ -6,6 +6,7 @@ import { SortableImageGridItem } from '~/components/editors/SortableImageGridIte
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
 import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
 
 const SortableImageGrid = SortableContainer(
   ({
@@ -27,7 +28,7 @@ const SortableImageGrid = SortableContainer(
         .filter(file => file && file.id)
         .map((file, index) => (
           <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
+            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDrop} />
           </SortableImageGridItem>
         ))}
 
diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index c0ae09b6..2637a4aa 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -110,7 +110,7 @@ const Cell: FC<IProps> = ({
           }}
           onClick={onClick}
         >
-          <img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" />
+          <img src={getURL({ url: thumbnail }, PRESETS.cover)} onLoad={onImageLoad} alt="" />
         </div>
       )}
     </div>
diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index 07b3cae9..35c4f015 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import * as styles from './styles.scss';
 import { getURL } from '~/utils/dom';
 import { withRouter, RouteComponentProps } from 'react-router';
-import { URLS } from '~/constants/urls';
+import { URLS, PRESETS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
 
 type IProps = RouteComponentProps & {
@@ -103,12 +103,12 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
             [styles.is_visible]: loaded.includes(hero.id),
             [styles.is_active]: current === hero.id,
           })}
-          style={{ backgroundImage: `url("${getURL({ url: hero.thumbnail })}")` }}
+          style={{ backgroundImage: `url("${getURL({ url: hero.thumbnail }, PRESETS.hero)}")` }}
           key={hero.id}
           onClick={onClick}
         >
           <img
-            src={getURL({ url: hero.thumbnail })}
+            src={getURL({ url: hero.thumbnail }, PRESETS.hero)}
             alt={hero.thumbnail}
             onLoad={onLoad(hero.id)}
           />
diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx
index 7923851c..64f04aa7 100644
--- a/src/components/flow/FlowRecent/index.tsx
+++ b/src/components/flow/FlowRecent/index.tsx
@@ -3,7 +3,7 @@ import * as styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { getURL, getPrettyDate } from '~/utils/dom';
 import { Link } from 'react-router-dom';
-import { URLS } from '~/constants/urls';
+import { URLS, PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
 
 interface IProps {
@@ -18,7 +18,7 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => (
         <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
           <div
             className={classNames(styles.thumb, styles.new)}
-            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail })}")` }}
+            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")` }}
           />
 
           <div className={styles.info}>
@@ -33,7 +33,7 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => (
         <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
           <div
             className={styles.thumb}
-            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail })}")` }}
+            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")` }}
           />
           <div className={styles.info}>
             <div className={styles.title}>{node.title}</div>
diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx
index 0ee80dd0..6bf70b84 100644
--- a/src/components/main/UserButton/index.tsx
+++ b/src/components/main/UserButton/index.tsx
@@ -4,6 +4,7 @@ import styles from './styles.scss';
 import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
 import { IUser } from '~/redux/auth/types';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   user: Partial<IUser>;
@@ -14,7 +15,10 @@ const UserButton: FC<IProps> = ({ user: { username, photo }, onLogout }) => (
   <div className={styles.wrap}>
     <Group horizontal className={styles.user_button}>
       <div>{username}</div>
-      <div className={styles.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
+      <div
+        className={styles.user_avatar}
+        style={{ backgroundImage: `url('${getURL(photo, PRESETS.avatar)}')` }}
+      >
         {(!photo || !photo.id) && <Icon icon="profile" />}
       </div>
     </Group>
diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx
index cbba18a2..1e293693 100644
--- a/src/components/node/CommentContent/index.tsx
+++ b/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>
diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx
index c3883c4e..893d54c8 100644
--- a/src/components/node/NodeAudioImageBlock/index.tsx
+++ b/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>
   );
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index b6d69ded..350f8448 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/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)}
diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 077e4938..271d4c70 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/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)}
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index 09eec397..93a57aad 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/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>
   );
 });
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 2b335f66..71e4bd8e 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -19,4 +19,5 @@ export const PRESETS = {
   placeholder: 'placeholder',
   cover: 'cover',
   hero: 'hero',
+  avatar: 'avatar',
 };
diff --git a/src/index.tsx b/src/index.tsx
index 4c1563e9..c001fa32 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -62,7 +62,6 @@ render(
 );
 
 /*
-  - better dialogs: https://codepen.io/muemue/pen/abbEMMy
   - comment editing
   - boris with comments
   - profile modal
@@ -71,7 +70,6 @@ render(
   - relocate files
   - import videos
   - import graffiti
-  - imagecaching at backend
   - password restore
   - signup?
   - text post can also has songs http://vault48.org/post5052
@@ -82,6 +80,8 @@ render(
   - social integration (assimilate)
 
   Done:
-
+  - better dialogs: https://codepen.io/muemue/pen/abbEMMy
+  - imagecaching at backend
   - social integration (login, signup)
+
 */
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index af3af5f2..a6c51350 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -72,7 +72,7 @@ export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof
     .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
 };
 
-export const getImageSize = (file: IFile, size?: string): string => getURL(file);
+// export const getImageSize = (file: IFile, size?: string): string => getURL(file);
 // `${process.env.API_HOST}${image}`.replace('{size}', size);
 
 export const formatText = (text: string): string =>