Description We are encountering a bug in our stage environment that is very hard to reproduce locally, but not impossible. This is the same bug dealt with in several previous PRs like for example #871 (here I'm working on another component that uses the same paragon component and therefore encounters the same bug). Since I was able to reproduce it locally, it is definitely not just a bug affecting only 2U-specific things. Expected behavior open a course with files select a different sorting order (for example oldest to newest) you should be able to select the different option you should be able to successfully apply it Actual behavior on stage environment you can't select different option you can't apply different option Previous steps Previously, I reproduced this locally by just adding the latest version of SelectableBox as a copy into this repo and importing it from there. Then, under the mistaken assumption that there was a missing context provider, I added that and it got fixed locally. However it turned out to not work on stage. Measures taken in this PR I replaced the entire SelectableBox component with all subcomponents with a version from @edx/paragon@21.5.6, which was apparently the version in the commit that didn't have the error yet. In theory, this would just fix the problem, though I have my doubts. But it's worth a try. I only imported it in one place, in this SortAndFilter modal. I added console logging for onChange events which seem to the problem, as they are not triggering a change in the value of the context on stage. I see little choice than to log them to get more info. This will only affect the component that's not working.
71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
import classNames from 'classnames';
|
|
import { useState, useEffect } from 'react';
|
|
import newId from './newId';
|
|
|
|
const omitUndefinedProperties = (obj = {}) => Object.entries(obj)
|
|
.reduce((acc, [key, value]) => {
|
|
if (value !== undefined) {
|
|
acc[key] = value;
|
|
}
|
|
return acc;
|
|
}, {});
|
|
|
|
const callAllHandlers = (...handlers) => {
|
|
const unifiedEventHandler = (event) => {
|
|
handlers
|
|
.filter(handler => typeof handler === 'function')
|
|
.forEach(handler => handler(event));
|
|
};
|
|
return unifiedEventHandler;
|
|
};
|
|
|
|
const useHasValue = ({ defaultValue, value }) => {
|
|
const [hasUncontrolledValue, setHasUncontrolledValue] = useState(!!defaultValue || defaultValue === 0);
|
|
const hasValue = !!value || value === 0 || hasUncontrolledValue;
|
|
const handleInputEvent = (e) => setHasUncontrolledValue(e.target.value);
|
|
return [hasValue, handleInputEvent];
|
|
};
|
|
|
|
const useIdList = (uniqueIdPrefix, initialList) => {
|
|
const [idList, setIdList] = useState(initialList || []);
|
|
const addId = (idToAdd) => {
|
|
setIdList(oldIdList => [...oldIdList, idToAdd]);
|
|
return idToAdd;
|
|
};
|
|
const getNewId = () => {
|
|
const idToAdd = newId(`${uniqueIdPrefix}-`);
|
|
return addId(idToAdd);
|
|
};
|
|
const removeId = (idToRemove) => {
|
|
setIdList(oldIdList => oldIdList.filter(id => id !== idToRemove));
|
|
};
|
|
|
|
const useRegisteredId = (explicitlyRegisteredId) => {
|
|
const [registeredId, setRegisteredId] = useState(explicitlyRegisteredId);
|
|
useEffect(() => {
|
|
if (explicitlyRegisteredId) {
|
|
addId(explicitlyRegisteredId);
|
|
} else if (!registeredId) {
|
|
setRegisteredId(getNewId(uniqueIdPrefix));
|
|
}
|
|
return () => removeId(registeredId);
|
|
}, [registeredId, explicitlyRegisteredId]);
|
|
return registeredId;
|
|
};
|
|
|
|
return [idList, useRegisteredId];
|
|
};
|
|
|
|
const mergeAttributeValues = (...values) => {
|
|
const mergedValues = classNames(values);
|
|
return mergedValues || undefined;
|
|
};
|
|
|
|
export {
|
|
callAllHandlers,
|
|
useHasValue,
|
|
mergeAttributeValues,
|
|
useIdList,
|
|
omitUndefinedProperties,
|
|
};
|