From 74ced4b534530061ca04288d32a8dd2801c8c2ff Mon Sep 17 00:00:00 2001
From: Minhajul Karim <project@zaagsys.com>
Date: Sun, 10 Dec 2023 12:04:12 +0600
Subject: [PATCH 1/2] Add a component to clear done wishes

---
 src/App.jsx             | 3 ++-
 src/ClearDoneWishes.jsx | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/ClearDoneWishes.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 141ce20..968de93 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,18 @@
 import { createSignal } from "solid-js";
 import { BucketListItem } from "./BucketListItem";
 import { AddToBucket } from "./AddToBucket";
+import { ClearDoneWishes } from "./ClearDoneWishes";
 
 import { getWishes } from "./util/localStorageUtil";
 
 function App() {
   const [items, setItems] = createSignal(getWishes());
 
-
   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} />
+      <ClearDoneWishes />
       <ul class="text-2xl">
         <For each={items()}>
           {(item) => <BucketListItem item={item} setItems={setItems} />}
diff --git a/src/ClearDoneWishes.jsx b/src/ClearDoneWishes.jsx
new file mode 100644
index 0000000..ae8339c
--- /dev/null
+++ b/src/ClearDoneWishes.jsx
@@ -0,0 +1,7 @@
+export function ClearDoneWishes() {
+  return (
+    <button class="px-3 py-1.5 text-xl rounded-md bg-blue-600 text-white capitalize">
+      clear done wishes
+    </button>
+  );
+}

From 60b1c82dad9d4ad627c1c24797d1db6fe0702cf9 Mon Sep 17 00:00:00 2001
From: Minhajul Karim <project@zaagsys.com>
Date: Sun, 10 Dec 2023 12:17:10 +0600
Subject: [PATCH 2/2] Clear done wishes from application state & from local
 storage after clicking the 'clear done wishes' button

---
 src/App.jsx             |  2 +-
 src/ClearDoneWishes.jsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 968de93..13c23a3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,7 @@ function App() {
     <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} />
-      <ClearDoneWishes />
+      <ClearDoneWishes setItems={setItems} />
       <ul class="text-2xl">
         <For each={items()}>
           {(item) => <BucketListItem item={item} setItems={setItems} />}
diff --git a/src/ClearDoneWishes.jsx b/src/ClearDoneWishes.jsx
index ae8339c..fe028af 100644
--- a/src/ClearDoneWishes.jsx
+++ b/src/ClearDoneWishes.jsx
@@ -1,6 +1,18 @@
-export function ClearDoneWishes() {
+import { saveWish } from "./util/localStorageUtil";
+
+export function ClearDoneWishes(props) {
   return (
-    <button class="px-3 py-1.5 text-xl rounded-md bg-blue-600 text-white capitalize">
+    <button
+      class="px-3 py-1.5 text-xl rounded-md bg-blue-600 text-white capitalize"
+      onClick={(e) => {
+        e.preventDefault();
+        props.setItems((items) => {
+          const updatedWishes = items.filter((item) => !item.complete);
+          saveWish(updatedWishes);
+          return updatedWishes;
+        });
+      }}
+    >
       clear done wishes
     </button>
   );