From 28ac88ec64858565951a4f0d8b4cd96d3be5cc77 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 21 Jun 2021 17:56:23 +0700
Subject: [PATCH] added error handling on image load

---
 src/components/media/ImagePreloader/index.tsx | 31 ++++++++++++++-----
 .../media/ImagePreloader/styles.module.scss   | 24 ++++++++++++++
 src/sprites/Sprites.tsx                       |  8 +++++
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx
index 6eed8472..31b43dab 100644
--- a/src/components/media/ImagePreloader/index.tsx
+++ b/src/components/media/ImagePreloader/index.tsx
@@ -6,6 +6,7 @@ import styles from './styles.module.scss';
 import { IFile } from '~/redux/types';
 import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   file: IFile;
@@ -17,9 +18,11 @@ interface IProps {
 const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
   const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
   const [loaded, setLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
 
   const onImageLoad = useCallback(() => {
     setLoaded(true);
+    setHasError(false);
 
     if (onLoad) {
       onLoad();
@@ -30,6 +33,10 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
     setMaxHeight(window.innerHeight - 140);
   }, [setMaxHeight]);
 
+  const onError = useCallback(() => {
+    setHasError(true);
+  }, [setHasError]);
+
   useEffect(() => {
     window.addEventListener('resize', onResize);
 
@@ -64,12 +71,14 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
 
         <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
 
-        <image
-          xlinkHref={getURL(file, PRESETS['300'])}
-          width="100%"
-          height="100%"
-          filter="url(#f1)"
-        />
+        {!hasError && (
+          <image
+            xlinkHref={getURL(file, PRESETS['300'])}
+            width="100%"
+            height="100%"
+            filter="url(#f1)"
+          />
+        )}
       </svg>
 
       <img
@@ -80,9 +89,17 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
         onLoad={onImageLoad}
         style={{ maxHeight }}
         onClick={onClick}
+        onError={onError}
       />
 
-      {!loaded && <LoaderCircle className={styles.icon} size={64} />}
+      {!loaded && !hasError && <LoaderCircle className={styles.icon} size={64} />}
+
+      {hasError && (
+        <div className={styles.error}>
+          <div className={styles.error__text}>Не удалось получить картинку</div>
+          <Icon icon="warn" size={64} />
+        </div>
+      )}
     </>
   );
 };
diff --git a/src/components/media/ImagePreloader/styles.module.scss b/src/components/media/ImagePreloader/styles.module.scss
index e792017a..0db4b813 100644
--- a/src/components/media/ImagePreloader/styles.module.scss
+++ b/src/components/media/ImagePreloader/styles.module.scss
@@ -28,3 +28,27 @@
     fill: currentColor;
   }
 }
+
+.error {
+  position: absolute;
+  right: 30px;
+  bottom: 40px;
+  opacity: 0.4;
+  color: $orange;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: $orange;
+  }
+
+  &__text {
+    max-width: 200px;
+    text-align: right;
+    margin-right: $gap;
+    font: $font_16_semibold;
+    line-height: 24px;
+  }
+}
diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx
index 949c302d..ee948c65 100644
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@@ -302,6 +302,14 @@ const Sprites: FC = () => (
       />
     </g>
 
+    <g id="warn">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path
+        stroke="none"
+        d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
+      />
+    </g>
+
     <g id="hot">
       <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
       <path