Quality transformation gets added twice (React SDK)

[leahwchang]

For which package is this issue?

React

Describe the issue in a sentence or two.

Hi, I have a custom reusable react "image" component that utilizes AdvancedImage. The component takes in a prop 'imageQuality' and it's a string, I have a function that simply chains .quality(imageQuality) to the cloudinary instance, which is then passed to AdvancedImage.

When I console log the tranformed url, I noticed that quality shows up twice... for example: https://res.cloudinary.com/myCloudName/image/upload/q_80/q_80/v1/xxxx.png

Any help is appreciated... thank you.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [ ] Performance - Performance issues [ x] Behaviour - Functions aren’t working as expected [ ] Documentation - Inconsistency between the docs and behaviour [ ] Incorrect Types [ ] Other (Specify)

related Cloudinary imports:

import { AdvancedImage, responsive, placeholder } from '@cloudinary/react'
import { Cloudinary } from '@cloudinary/url-gen';
import {scale, fill, limitFill, crop} from "@cloudinary/url-gen/actions/resize";
import {dpr} from "@cloudinary/url-gen/actions/delivery";

function that chains .quality to image instance:

// get image quality
    function getQuality(imageQuality) {
    if (imageQuality === 'auto') {
      return 'q_auto:best'
    } else if (typeof +imageQuality && !Number.isNaN(+imageQuality)) {
      return Number(imageQuality);
    }
  }
  
 // chain quality
  function chainQuality(baseImage, imageQuality) {
    let transformedImage = baseImage.quality(getQuality(imageQuality));
    return transformedImage;
  }

using reducer and useEffect to conditionally chain 'quality' function:

  function reducer(state, action) {
    switch (action.type) {
      case 'quality':
        return {...state, image: chainQuality(state.image, state.imageQuality)};
      // ... with other action types 
    }
  }

  const initialState = {
    image: img,
    imageQuality: imageQuality,
    // ... with other props
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    if (imageQuality) {
      dispatch({ type: 'quality' });
    }
    // ... with other dispatches
  }, []);

result/problem - quality shows up twice in url:

 console.log('state', state.image.toURL());
 // returns something like https://res.cloudinary.com/myCloudName/image/upload/q_80/q_80/v1/xxxx.png

Versions and Libraries (fill in the version numbers) Node - v16.16.0 NPM - 8.11.0

Package.json includes: "@cloudinary/react": "^1.4.1", "@cloudinary/url-gen": "^1.8.0",