Expose a prop allowing users to specify a custom fallback image by jingdid · Pull Request #88 · yifaneye/react-gallery-carousel

jingdid · 2023-05-03T05:12:12Z

This change allows a user to specify a custom fallback image by setting a placeholderImg prop to a url like so:
<Carousel images={images} placeholderImg="https://placekitten.com/400/230" />

If the placeholder image url provided is invalid, the repository's default placeholder image is used instead.

Addresses issue #86

yifaneye · 2023-05-09T00:58:15Z

Hi @jingdid ! Thank you very much! I will review it today!

yifaneye

Thank you for your contribution! Your code looks good. But I left some comments.

yifaneye · 2023-05-10T10:40:05Z

yarn.lock

Would you like to tell me what is the reason for the changes here? Could you please keep the yarn lockfile unchanged?

Apologies, I did not notice I had changed the yarn lockfile. I think this is just a consequence of my trying to get the demo to run locally. I don't think any of my changes should actually require updates to the lockfile - I will remove this when I next update this pull request.

yifaneye · 2023-05-10T11:27:26Z

src/components/Image/Image.js

+  const [isLoading, setIsLoading] = useState(true);
+  const [isValidFallback, setIsValidFallback] = useState(false);
+  useEffect(() => {
+    fetch(props.placeholderImg).then(res => {


Does this implementation support local file paths?

Tested it with a local file and it should support them.

yifaneye · 2023-05-10T11:38:40Z

src/components/Carousel/props.js

  hasDotButtonsAtMax: largeWidgetPositions,
  hasCaptionsAtMax: largeWidgetPositions,
  hasThumbnailsAtMax: PropTypes.bool,
+  placeholderImg: PropTypes.string,


I'd suggest renaming it to fallbackImg.

And also in other props.

yifaneye · 2023-05-10T11:40:33Z

src/components/Image/Image.js

+    fetch(props.placeholderImg).then(res => {
+      setIsValidFallback(res.status === 200);
+      setIsLoading(false);
+    }).catch((_reason) => {


Here, finally statement can be used to combine setIsLoading(false);.

This block has now been moved out of this file, and is used in such a way now that finally should no longer be needed.

yifaneye · 2023-05-10T11:43:45Z

src/components/Image/Image.js

+    }).catch((_reason) => {
+      setIsLoading(false);
+    })
+  }, []);


Here is an error message:

ESLint: React Hook useEffect has a missing dependency: 'props.placeholderImg'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

yifaneye · 2023-05-10T11:45:43Z

src/components/Image/Image.js

+  const [isValidFallback, setIsValidFallback] = useState(false);
+  useEffect(() => {
+    fetch(props.placeholderImg).then(res => {
+      setIsValidFallback(res.status === 200);


Could it be "HTTP 304 Not Modified" in some cases?

I've changed it to check for res.ok instead now, which should address this issue.

yifaneye · 2023-05-10T11:51:42Z

src/components/Image/Image.js

+    }).catch((_reason) => {
+      setIsLoading(false);
+    })
+  }, []);


Here is an error message:
ESLint: React Hook useEffect has a missing dependency: 'props.placeholderImg'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

yifaneye · 2023-05-10T11:55:15Z

src/components/Image/Image.js


+  // This block checks whether the user specified fallback image actually works or not
+  const [isLoading, setIsLoading] = useState(true);
+  const [isValidFallback, setIsValidFallback] = useState(false);


What's the reason for handling the error of the fallback image? The fallback image is likely to be a static image, which is quite stable. The user can handle it using their code if they want to, isn't it?

We can simply assign the fallback image in the handleError function.

This was intended to catch cases where a user provides an invalid/broken url for the fallback image - in that event, I wanted to make sure that the carousel would end up falling back onto the built-in placeholder again.

yifaneye

Thank you for your contribution! Your code looks good. But I left some comments.

- Refactor so that fallback image validity is only check once rather than making a request for every image in the carousel - Allow thumbnails to also use fallback image - Gracefully use default placeholder if fallback image prop is not specified

jingdid · 2024-11-15T21:39:30Z

@yifaneye Welcome back! Apologies for the bother, but any chance you could re-review this pull request? I've since addressed your comments while also improving the changed behavior.

yifaneye and others added 2 commits January 29, 2023 00:11

Update version number (yifaneye#85)

a3f452b

Expose a prop allowing users to specify a custom fallback image

ce1e5ca

yifaneye requested changes May 10, 2023

View reviewed changes

yifaneye changed the base branch from master to dev May 10, 2023 12:00

jingdid requested a review from yifaneye July 4, 2023 08:27

Uh oh!

Conversation

jingdid commented May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yifaneye commented May 9, 2023

Uh oh!

yifaneye left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yifaneye left a comment

Choose a reason for hiding this comment

Uh oh!

jingdid commented Nov 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jingdid commented May 3, 2023 •

edited

Loading