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

Drag and Drop functionality for Stacks #303

Merged
merged 21 commits into from
Jan 30, 2021
Merged

Conversation

nelsonni
Copy link
Member

Description:

Stack interactions were not re-implemented during the React refactoring process, so the only possible interactions were the creation of a new Stack that contained the top two cards in the Redux store when clicking on a button on the canvas. This PR reintroduces the ability to create new Stack instances by dragging and dropping cards on top of each other (as well as dropping cards onto existing stacks, and dropping stacks onto existing stacks). Cards can also be removed from a Stack instance by dragging them off of the stack.

This PR signifies the following version changes:

  • MAJOR version increase
  • MINOR version increase
  • PATCH version increase

Changes:

This PR makes the following changes:

  • CanvasComponent handles updating Card and Stack positions when dragged, and removing Card instances from a Stack when dragged away from the stack.
  • CardComponent handles creating a Stack when a card is dropped onto a card, and appending a card to a Stack when a card is dropped onto a stack.
  • StackComponent handles moving a card into the Stack when a previously captured card is dropped onto a new stack, and merging captured cards into a single Stack when a stack is dropped onto a stack.
  • Card.captured property typing updated to represent the UUID of the capturing Stack instead of a boolean flag indicating whether the card is currently captured.
  • Webpack rules configuration updated to prefer use over loader (adhering to standards described in Webpack 5 release notes).
  • handlers split into cards and stacks for consistent Redux Action Creator testing and usage.
  • Test suite expanded to cover cards and stacks, as well as updates for validating StackComponent drag-and-drop interactions.

Checklist:

Before submitting this PR, I have verified that my code:

  • Resides on a fix/ or feat/ branch that was initially branched off from development.
  • Passes code linting (yarn lint) and unit testing (yarn test).
  • Successfully builds a distribution package (yarn package).

Additionally, I have verified that:

  • My name is listed in the Contributors section, or this PR includes a request to add my name.
  • I have read and am aware of the CONTRIBUTING guide for this project.

@nelsonni nelsonni added the feature Feature requests or improvements label Jan 26, 2021
@nelsonni nelsonni added this to the v1.0.0 milestone Jan 26, 2021
@nelsonni nelsonni requested a review from jettseale January 26, 2021 03:56
@nelsonni
Copy link
Member Author

Tests are failing due to the introduction of "importsNotUsedAsValues": "preserve" option in tsconfig.json in commit 0a5bcb7. This issue is further described in #308.

Copy link
Collaborator

@jettseale jettseale left a comment

Choose a reason for hiding this comment

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

Picking up a stack and dropping it back down in the same location causes the stack to disappear and triggers several warnings stating that it has "encountered two children with the same key." Once you add in a check to see if the pickup and drop locations are the same (similar to what you did with the card components), this PR can be approved.

@nelsonni
Copy link
Member Author

nelsonni commented Jan 30, 2021

@jettseale Commit feba14f should address that "encountered two children with the same key" issue. Also, commit e22e52a includes a fix for when a card is dragged between two stacks, which was previously allowing the dragged card to become duplicated onto both stacks. This was caused by not including a clean-up step when both the dropTarget and dropSource are part of a stack.

@nelsonni nelsonni merged commit f54cfb0 into development Jan 30, 2021
@nelsonni nelsonni deleted the feat/stack-drag-n-drop branch January 30, 2021 21:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants