Skip to content

[feat]: Add functionality to delete a wish #8

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.

Sign up for GitHub

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

Open
Mohimkhan wants to merge 8 commits into
base: main
Choose a base branch
from
Open

[feat]: Add functionality to delete a wish #8

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
12b2b1a
Create Modal.jsx
Mohimkhan Nov 12, 2023
5aecb18
(feat): Added Modal styles
Mohimkhan Nov 12, 2023
e83a169
Added some extra styles to make modal responsive and more attractive
Mohimkhan Nov 12, 2023
b55fa91
(feat): Added functionality to delete wish with confirmation (#2)
Mohimkhan Nov 12, 2023
f3caa14
Remove unnecessary logs
Mohimkhan Nov 12, 2023
b827944
Added styles for the delete section
Mohimkhan Nov 16, 2023
8f7698c
(feat): Added functionality to delete one or more items
Mohimkhan Nov 16, 2023
2cd38db
resolve all the conflicts
Mohimkhan Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/BucketListItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
import { createEffect, createSignal } from 'solid-js';
import {Modal} from './Modal';

export function BucketListItem(props) {
const [isOpen, setIsOpen] = createSignal(false);

const handleDeleteItem = ()=>{
props.setItems((items) => {
Copy link
Copy Markdown
Contributor

@atapas atapas Nov 13, 2023

Choose a reason for hiding this comment

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

As the issue talks about deleting one or more wishes.. it is better to add a delete link at the top of the wish list.. it will help us to select one or more wishes and then click on the single delete button.

the modal looks good.

Copy link
Copy Markdown
Author

@Mohimkhan Mohimkhan Nov 13, 2023

Choose a reason for hiding this comment

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

Apologies for not being able to implement the desired feature initially. Could you please confirm if I understand correctly? You're suggesting adding a delete button at the top of the wishlist. Users can then select multiple items and delete them with a single click. If my interpretation is incorrect, please provide clarification. Thank you for your feedback.

Copy link
Copy Markdown
Author

@Mohimkhan Mohimkhan Nov 15, 2023

Choose a reason for hiding this comment

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

Sir @atapas, I've implemented the feature. Please check the attached video. If it looks good, I'll proceed with the changes. Any feedback is welcome.

2023-11-15-06-35-02.mp4

const itemsWithoutTheDeletedOne = items.filter((item) =>
props.item !== item
);
return itemsWithoutTheDeletedOne;
});
setIsOpen(false);
}

return (
<>
{isOpen() && <Modal text='Are you sure? You want to delete this! 😕' setIsOpen={setIsOpen} handleDeleteItem={handleDeleteItem} />}

<li
class="list-item"
style={{
Expand All @@ -23,6 +41,10 @@ export function BucketListItem(props) {
/>
{props.item.text}
</label>
<button type="button" onclick={()=> setIsOpen(true)}>
X
</button>
</li>
</>
);
}
37 changes: 37 additions & 0 deletions src/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
export function Modal(props) {
return (
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="btn-close"
onclick={()=>props.setIsOpen(false)}
>X</button>
</div>
<div class="modal-body">
<p>{props.text}</p>
</div>
<div class="modal-footer">
<div class="btn-group">
<button
type="button"
class="btn-confirm"
onclick={()=>props.handleDeleteItem()}>
Yes
</button>
<button
type="button"
class="btn-reject"
onclick={()=> props.setIsOpen(false)}>
No
</button>
</div>
</div>
</div>
</div>
</div>
);
}
110 changes: 110 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
Expand All @@ -20,6 +21,12 @@ li{
list-style: none;
}

button {
outline: none;
border: none;
cursor: pointer;
}

.container {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -55,5 +62,108 @@ li{
vertical-align: middle;
}

.list-item {
display: flex;
justify-content: center;
align-items: center;
}

.list-item button {
margin-left: 1rem;
padding: .5rem 1rem;
transform: scale(.9);
background-color: crimson;
color: white;
font-weight: bold;
transition: all 100ms ease-in;
}

.list-item button:hover {
opacity: .8;
transform: scale(1.1);
}

/* Modal */
.modal {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
inset: 0;
background-color: rgba(1,1,1,.5);
backdrop-filter: blur(3px);
z-index: 100;
}

.modal-dialog {
max-width: 400px;
min-width: 190px;
padding: 1rem;
background-color: white;
height: auto;
}

.modal-body p {
font-size: .8rem;
}

@media only screen and (min-width: 500px) {
.modal-dialog {
padding: 2rem 1.5rem;
height: 205px;
}

.modal-body p {
font-size: 1.5rem;
}
}

.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
}

.btn-close {
padding: .5rem 1rem;
}

.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
}

.btn-group {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}

.btn-confirm {
background-color: limegreen;
font-weight: bold;
padding: .5rem 1rem;
color: white;
}

.btn-reject {
background-color: crimson;
font-weight: bold;
padding: .5rem 1rem;
color: white;
}

.btn-confirm,
.btn-reject {
transition: all 50ms ease-out;
}

:is(.btn-confirm, .btn-reject):hover,
:is(.btn-confirm, .btn-reject):focus {
transform: scale(1.1);
}