refactor to Sync wishes with localStorage in more efficient way

.gitignore

@@ -1,2 +1,5 @@
 node_modules
-dist
+dist
+
+#editor based
+.idea

src/AddToBucket.jsx

@@ -1,6 +1,5 @@
 import { createSignal } from "solid-js";
 
-import { saveWish } from "./util/localStorageUtil";
 
 export function AddToBucket(props) {
   const [newItem, setNewItem] = createSignal('');
@@ -30,7 +29,6 @@ export function AddToBucket(props) {
               },
               ...items,
             ];
-            saveWish(allWishes);
             return allWishes;
           });
           setNewItem('');

src/App.jsx

@@ -1,11 +1,9 @@
-import { createSignal } from "solid-js";
 import { BucketListItem } from "./BucketListItem";
 import { AddToBucket } from "./AddToBucket";
-
-import { getWishes } from "./util/localStorageUtil";
+import useBucketList from "./hooks/useBucketList";
 
 function App() {
-  const [items, setItems] = createSignal(getWishes());
+  const [items, setItems] = useBucketList();
 
 
   return (

src/BucketListItem.jsx

@@ -1,4 +1,4 @@
-import { saveWish } from "./util/localStorageUtil";
+
 
 export function BucketListItem(props) {
   return (
@@ -21,7 +21,6 @@ export function BucketListItem(props) {
                 : item
 
               );
-              saveWish(newItems);
               return newItems;
             });
           }}

src/hooks/useBucketList.js

@@ -0,0 +1,20 @@
+// Desc: Custom hook to manage bucket list items to local storage
+
+import { createEffect, createSignal } from "solid-js";
+
+function useBucketList() {
+    const [items, setItems] = createSignal([]);
+
+    createEffect(() => {
+        const bucketList = localStorage.getItem('bucket-list');
+        if (bucketList) setItems(JSON.parse(bucketList));
+
+      });
+
+      createEffect(() => {
+        localStorage.setItem('bucket-list', JSON.stringify(items()));
+      });
+      return [items, setItems];
+}
+
+export default useBucketList