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
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 all 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
1 change: 1 addition & 0 deletions src/AddToBucket.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export function AddToBucket(props) {
id: crypto.randomUUID(),
text: newItem(),
complete: false,
delete: false,
},
...items,
];
Expand Down
48 changes: 47 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,63 @@
import { createSignal } from "solid-js";
import { BucketListItem } from "./BucketListItem";
import { AddToBucket } from "./AddToBucket";
import Modal from './Modal';

import { getWishes } from "./util/localStorageUtil";
import { getWishes, saveWish } from "./util/localStorageUtil";

function App() {
const [items, setItems] = createSignal(getWishes());
const [isOpen, setIsOpen] = createSignal(false);

const handleOneOrMoreDeleteItem = () => {
setItems((items) => {
const ItemsWithoutTheDeletedOnes = items.filter(
(item) => item.delete === false
);
saveWish(ItemsWithoutTheDeletedOnes);
return ItemsWithoutTheDeletedOnes;
});
};

const noOfItemsToBeDeleted = () => {
const itemsToBeDeleted = items().filter((item) => item.delete);
return itemsToBeDeleted.length;
};


return (
<div class="container flex flex-col justify-center items-center gap-4">
<h1 class="text-4xl font-bold">Solid Bucket List</h1>
<AddToBucket setItems={setItems} />
<div class="flex justify-center sm:justify-between items-center flex-wrap gap-6">
<p class="flex justify-center items-center flex-col">
<span class="font-bold">No of items to be deleted</span>
<span class="font-bold">{noOfItemsToBeDeleted()}</span>
</p>
<button
type="button"
class="bg-[crimson] text-white py-2 px-4 rounded-lg font-bold text-center cursor-pointer hover:bg-red-500"
onclick={() => setIsOpen(true)}
>
{noOfItemsToBeDeleted() > 1 ? 'Delete All' : 'Delete'}
</button>
</div>

{isOpen() && (
<Modal
title="Delete Confirmation"
text={
noOfItemsToBeDeleted() === 0
? `You haven't selected any item 😕`
: `Are you sure? You want to delete ${
noOfItemsToBeDeleted() > 1 ? 'those' : 'this'
}! 😕`
}
setIsOpen={setIsOpen}
handleOneOrMoreDeleteItem={handleOneOrMoreDeleteItem}
noOfItemsToBeDeleted={noOfItemsToBeDeleted}
/>
)}
<ul class="text-2xl">
<For each={items()}>
{(item) => <BucketListItem item={item} setItems={setItems} />}
Expand Down
92 changes: 62 additions & 30 deletions src/BucketListItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,65 @@
import { saveWish } from "./util/localStorageUtil";
import { saveWish } from './util/localStorageUtil';

export function BucketListItem(props) {
return (
<li>
<label
class="flex gap-2 items-center"
className={
props.item.complete ? "text-gray-400 line-through" : "text-gray-700"
}
>
<input
type="checkbox"
class="w-5 h-5"
checked={props.item.complete}
onChange={() => {
props.setItems((items) => {
const newItems = items.map((item) =>
props.item === item
? { ...item, complete: !item.complete }
: item

);
saveWish(newItems);
return newItems;
});
}}
/>
{props.item.text}
</label>
</li>
);
const handleButtonClick = () => {
props.setItems((items) => {
Copy link
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
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
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 newItems = items.map((item) =>
props.item === item ? { ...item, delete: !item.delete } : item
);
saveWish(newItems);
return newItems;
});
};

return (
<>
<li class="flex justify-between items-center gap-x-10">
<label
class="flex gap-2 items-center"
className={
props.item.complete
? 'text-gray-400 line-through'
: 'text-gray-700'
}
>
<input
type="checkbox"
class="w-5 h-5"
checked={props.item.complete}
onChange={() => {
props.setItems((items) => {
const newItems = items.map((item) =>
props.item === item
? { ...item, complete: !item.complete }
: item
);
saveWish(newItems);
return newItems;
});
}}
/>
{props.item.text}
</label>
<button
class="inline-flex items-center justify-center p-2 text-red-500 hover:bg-red-100 focus:outline-none focus:bg-red-100 focus:text-red-700 transition duration-300 ease-in-out"
onClick={handleButtonClick}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill={props.item.delete ? 'crimson' : 'none'}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.item.delete ? '#c0c0c0' : 'currentcolor'}
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
</button>
</li>
</>
);
}
40 changes: 40 additions & 0 deletions src/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
export default function Modal(props) {
return (
<div class="flex justify-center items-center w-full h-full absolute z-[100] bg-[rgba(1,1,1,0.5)] inset-0 backdrop-blur-sm">
<div class="max-w-[400px] min-w-[190px] h-auto p-4 bg-white text-black sm:py-8 sm:px-6 mx-4 sm:mx-0">
<div>
<div class="flex justify-between items-center h-[50px]">
<h5 class="modal-title font-bold">{props.title}</h5>
<button
type="button"
class="btn-close py-2 px-4 bg-gray-200 hover:bg-gray-300"
onclick={()=>props.setIsOpen(false)}
>X</button>
</div>
<div class="modal-body py-4">
<p class="text-sm sm:text-2xl">{props.text}</p>
</div>
{props.noOfItemsToBeDeleted() === 0 ? null : (<div class="modal-footer flex justify-end items-center">
<div class="btn-group flex justify-center items-center gap-4">
<button
type="button"
class="btn-confirm bg-[limegreen] text-white font-bold py-2 px-4 transition-all duration-75 scale-100 ease-out rounded-md hover:scale-[1.1]"
onclick={()=>{
props.setIsOpen(false);
props.handleOneOrMoreDeleteItem();
}}>
Yes
</button>
<button
type="button"
class="btn-reject bg-[crimson] text-white font-bold py-2 px-4 transition-all duration-75 scale-100 ease-out rounded-md hover:scale-[1.1]"
onclick={()=> props.setIsOpen(false)}>
No
</button>
</div>
</div>)}
</div>
</div>
</div>
);
}
Loading