Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dam-app-base): replace react-searchable-hoc with dndkit #7431

Conversation

ethan-ozelius-contentful
Copy link
Contributor

@ethan-ozelius-contentful ethan-ozelius-contentful commented Apr 26, 2024

Purpose

Migrate react-sortable-hoc to dndkit, since react-sortable-hoc is no longer supported, and is not compatible with versions of react higher than v16.

This will unblock us from upgrading to react v18.

Approach

Swap out react-sortable-hoc wrappers for newer style dndkit hooks.

Screenshots

dnd-kit

Copy link

netlify bot commented Apr 26, 2024

Deploy Preview for ecommerce-app-base-components canceled.

Name Link
🔨 Latest commit dc11d88
🔍 Latest deploy log https://app.netlify.com/sites/ecommerce-app-base-components/deploys/6631451446317e000896f407

@ethan-ozelius-contentful ethan-ozelius-contentful force-pushed the eozelius/replace-react-searchable-hoc-with-dndkit branch 2 times, most recently from 34ee30a to 27e6221 Compare April 26, 2024 20:55
@@ -121,164 +128,206 @@ const AdditionalDataDisplay = ({ additionalData }: AdditionalDataDisplayProps) =
);
};

const DragHandle = SortableHandle<DragHandleProps>(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component stayed the same, other than removing the SortableHandle<DragHandleProps> wrapper that was exposed by react-sortable-hoc.

@ethan-ozelius-contentful ethan-ozelius-contentful force-pushed the eozelius/replace-react-searchable-hoc-with-dndkit branch 2 times, most recently from 60c6cf7 to b58aa46 Compare April 29, 2024 21:36

const SortableItem = SortableElement<SortableElementProps>((props: SortableElementProps) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the SortableItem component also stays much the same. Just swapping out react-sortable-hoc's SortableElement wrapper for dndkit's useSortable() hook. And passing the response to <Card>


export class SortableComponent extends React.Component<Props> {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge SortableComponent and SortableList into one component.

@ethan-ozelius-contentful ethan-ozelius-contentful marked this pull request as ready for review April 29, 2024 21:48
@ethan-ozelius-contentful ethan-ozelius-contentful requested a review from a team as a code owner April 29, 2024 21:48
jsdalton
jsdalton previously approved these changes Apr 29, 2024
@ethan-ozelius-contentful ethan-ozelius-contentful merged commit c0a859d into master Apr 30, 2024
10 of 11 checks passed
@ethan-ozelius-contentful ethan-ozelius-contentful deleted the eozelius/replace-react-searchable-hoc-with-dndkit branch April 30, 2024 19:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants