refactor sdk (#3)

Additional props for loading and error has been added for better error handling and rendering

Author: ali-718

README.md

@@ -2,6 +2,15 @@
 
 A simple reactjs library to resize image on fly.
 
+## What is assetcrush ?
+
+[assetcrush](https://assetcrush.com/) is an image resize service for on the fly dynamic resize. If
+your users are uploading images of various sizes and then you are
+consuming those images on different devices then this service is ideal
+for your use. Since every device has different dimensions our sdk will
+make sure to get the rightly resized image for you via assetcrush resize
+service.
+
 ### Installation
 
 ```
@@ -57,6 +66,25 @@ export default App;
 
 </code>
 
+
+### Props
+
+| Prop     | Type     | Required | Note            |
+| -------- | -------- | -------- | --------------- |
+| `url`    | `string` | yes      | image url       |
+| `width`  | `string` | no       | width of image  |
+| `height` | `string` | no       | height of image |
+| `animated` | `bool` | no       | image fade in effect |
+| `reloadIconColor` | `string` | no       | color of reload icon if image fails |
+| `spinnerIcon` | `string` | no       | spinner component icon while image loads |
+| `spinnerColor` | `string` | no       | color of spinner |
+| `hideSpinner` | `bool` | no       | render spinner while image loads or not |
+| `onError` | `func` | no       | if image fails to load (returns error details) |
+| `onLoad` | `func` | no       | if image loads successfully (returns image headers) |
+
+Any additional props are passed down to underlying `<img />` element.
+
+
 ### ImageCrushAdoptive
 
 Its the more adoptive method to use you don't need to pass width and height it will inherit width and height from outermost wrapped div
@@ -87,54 +115,34 @@ export default App;
 
 | Prop     | Type     | Required | Note            |
 | -------- | -------- | -------- | --------------- |
+| `backgroundColor`    | `string` | no      | color of background layer of image       |
+| `debounce` | `number` | no       | image layout handler debounce |
+| `wrapperStyle` | `object` | no       | style object for outermost div |
 | `url`    | `string` | yes      | image url       |
 | `width`  | `string` | no       | width of image  |
 | `height` | `string` | no       | height of image |
+| `animated` | `bool` | no       | image fade in effect |
+| `reloadIconColor` | `string` | no       | color of reload icon if image fails |
+| `spinnerIcon` | `string` | no       | spinner component icon while image loads |
+| `spinnerColor` | `string` | no       | color of spinner |
+| `hideSpinner` | `bool` | no       | render spinner while image loads or not |
+| `onError` | `func` | no       | if image fails to load (returns error details) |
+| `onLoad` | `func` | no       | if image loads successfully (returns image headers) |
 
-Any additional props are passed down to underlying `<img />` element.
+Any additional props are passed down to underlying `<img />` component.
 
 ## Run example
 
 ```javascript
 git clone https://github.com/assetcrush/reactjs-sdk.git
 cd reactjs-sdk/example
 yarn install # or npm install
-```
-
-## Adoptive resize sample
 
-Adoptive method to use this sdk is wrapping it inside div and using ref for responsive width and height
-
-<code>
-
-```javascript
-import React, { useRef } from "react";
-import { ImageCrush } from "@assetcrush/reactjs-sdk";
-
-const testUrl =
-  "https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg";
-
-function App() {
-  const ref = useRef();
-
-  return (
-    <div ref={useRef()} style={{ width: 50, height: 50 }}>
-      <ImageCrush
-        url={testUrl}
-        width={ref.current?.clientWidth}
-        height={ref.current?.clientHeight}
-      />
-    </div>
-  );
-}
 
 export default App;
 ```
 
-</code>
-
 ## to run with npm
-
 ```javascript
 npm start
 ```
@@ -144,6 +152,10 @@ npm start
 ```javascript
 yarn start
 ```
+## Testing with Jest
+
+Make sure to add `jest.useFakeTimers();` to your test file.
+See [Stackoverflow](https://stackoverflow.com/questions/50793885/referenceerror-you-are-trying-to-import-a-file-after-the-jest-environment-has) post and [jest timer mocks](https://jestjs.io/docs/timer-mocks)
 
 ## Seeing issues or any feedback or feature suggest ?
 

example/src/App.css

@@ -0,0 +1,28 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import "./styles.css";
+
+export const ErrorRender = ({
+  reloadIconColor = "gray",
+  handleRetry = () => {},
+  icon: Icon,
+  height,
+}) => {
+  const handler = useRef();
+
+  const _handleRetry = useCallback(() => {
+    clearTimeout(handler.current);
+
+    handler.current = setTimeout(handleRetry, 300);
+  }, [handleRetry]);
+
+  if (Icon) return <div onClick={_handleRetry}>{Icon}</div>;
+  return (
+    <span
+      style={{ color: reloadIconColor, fontSize: height / 2 }}
+      onClick={_handleRetry}
+      className="assetcrush-reload"
+    >
+      &#x21bb;
+    </span>
+  );
+};

example/src/modules/ErrorRender/ErrorRender.js

@@ -0,0 +1,8 @@
+.assetcrush-reload {
+    font-family: Lucida Sans Unicode;
+    cursor: pointer;
+    font-size: '100%';
+    width: '100%';
+    height: '100%';
+    font-weight: bold;
+  }

example/src/modules/ErrorRender/styles.css

@@ -1,32 +1,91 @@
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { ErrorRender } from "./ErrorRender/ErrorRender";
 import { getKey } from "./key";
+import { Spinner } from "./Spinner/Spinner";
+import "./styles.css";
 
 const baseServiceUrl = "https://service.assetcrush.com";
 
-const ImageCrush = ({ url, width, height, ...props }) => {
+const ImageCrush = ({
+  animated = true,
+  reloadIconColor,
+  reloadIcon,
+  spinnerIcon,
+  spinnerColor = "#fff",
+  hideSpinner = false,
+  onError = () => null,
+  onLoad = () => null,
+  url,
+  width,
+  height,
+  acEnv = "production",
+  ...props
+}) => {
   const [image, setImage] = useState("");
+  const [isError, setIsError] = useState(false);
 
-  useEffect(() => {
-    if (!url) return;
+  const handleError = useCallback(
+    (e) => {
+      onError(e);
+      setIsError(true);
+    },
+    [setIsError]
+  );
+
+  const fetchImage = useCallback(() => {
+    setIsError(false);
 
     const _width = width || "auto";
     const _height = height || "auto";
     const imageUrl = `${baseServiceUrl}?width=${_width}&height=${_height}&original_uri=${encodeURIComponent(
       url
     )}`;
     const key = getKey();
+    let headers = {};
 
-    fetch(imageUrl, { headers: { "assetcrush-key": key } })
-      .then((r) => r.blob())
+    fetch(imageUrl, { headers: { "assetcrush-key": key, "ac-env": acEnv } })
+      .then((r) => {
+        headers = r.headers;
+        return r.blob();
+      })
       .then((d) => {
         if (typeof window === undefined) return;
+        if (!d.type.includes("image")) {
+          throw new Error("Object is not a valid image");
+        }
         setImage(window.URL.createObjectURL(d));
-      });
+        return Promise.resolve();
+      })
+      .then(() => onLoad(headers))
+      .catch(handleError);
+  }, [setIsError]);
+
+  
+  const handleRetry = useCallback(() => {
+    fetchImage();
+  }, [fetchImage]);
+
+  useEffect(() => {
+    if (!url) return;
+    fetchImage();
   }, [url, width, height]);
 
-  if (!image) return null;
+  if (isError)
+    return (
+      <ErrorRender
+        width={width}
+        height={height}
+        reloadIconColor={reloadIconColor}
+        icon={reloadIcon}
+        handleRetry={handleRetry}
+      />
+    );
+  if (!image)
+    return (
+      <>{!hideSpinner && <Spinner icon={spinnerIcon} color={spinnerColor} />}</>
+    );
 
-  return <img src={image} {...props} />;
+  return <img className={animated && "assetcrush-fade-in-Image"} src={image} {...props} />;
 };
 
 export default memo(ImageCrush);

example/src/modules/ImageCrush.js

@@ -1,29 +1,46 @@
 import React, {
   memo,
+  useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from "react";
 import ImageCrush from "./ImageCrush";
 
-const ImageCrushAdoptive = ({ url }) => {
-  const [width, setWidth] = useState("");
-  const [height, setHeight] = useState("");
+const styles = (backgroundColor) =>  ({
+ wrapperStyle: { height: "inherit", width: "inherit", background: backgroundColor, display:'flex', alignItems:'center', justifyContent: 'center' }
+})
+
+const ImageCrushAdoptive = ({  backgroundColor = '#f9f9f9', url, debounce = 100, wrapperStyle, ...restProps }) => {
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const [currentHeight, setCurrentHeight] = useState(0)
   const ref = useRef();
+  const _wrapperStyle = wrapperStyle ||  styles(backgroundColor).wrapperStyle;
+  
 
-  useLayoutEffect(() => {
+  const onLayout = useCallback(() => {
     const _width = ref?.current?.clientWidth;
     const _height = ref?.current?.clientHeight;
+    setCurrentHeight(_height)
+    if (_width > width || _height > height) {
+      setWidth(_width);
+      setHeight(_height);
+    }
+  }, [setWidth,setHeight, setCurrentHeight])
 
-    setWidth(_width);
-    setHeight(_height);
+  useLayoutEffect(() => {
+   const handler = setTimeout(onLayout, debounce);
+
+   return () => clearTimeout(handler);
   }, []);
 
+
   return (
-    <div style={{ height: "inherit", width: "inherit" }} ref={ref}>
-      {width && height && (
-        <ImageCrush url={url} width={width} height={height} />
+    <div style={_wrapperStyle} ref={ref}>
+      {!!width && !!height && (
+        <ImageCrush url={url} width={width} height={currentHeight} {...restProps} />
       )}
     </div>
   );

example/src/modules/ImageCrushAdoptive.js

@@ -0,0 +1,34 @@
+import React from "react";
+import "./styles.css";
+
+export const Spinner = ({icon:Icon, backgroundColor = 'gray'}) => {
+  if (Icon) return Icon;
+  return (
+    <>
+    <style>
+      {`
+      .assetcrush-lds-roller div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: ${backgroundColor};
+        margin: -4px 0 0 -4px;
+      }
+      `}
+    </style>
+    <div className="assetcrush-lds-roller">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    </>
+  );
+};