Merge pull request #13 from saifabusaleh/delete-item-feature

add delete item feature

src/bg/background.js

@@ -5,6 +5,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     else if ("getTheme" in request) {
         getTheme(sendResponse);
     }
+    else if ("clear" in request) {
+        clearHandler(request, sendResponse);
+    }
     else {
         getClippings(request, sendResponse);
     }
@@ -29,14 +32,24 @@ const getTheme = (sendResponse) => {
     });
 }
 
+const clearHandler = (request, sendResponse) => {
+    chrome.storage.sync.get("clippings", (result) => {
+        let clippings;
+        if (request.timestamp) {
+            clippings = result.clippings || [];
+            clippings = clippings.filter((clip) => clip.creationDate !== request.timestamp);
+        } else clippings = [];
+        chrome.storage.sync.set({ clippings }, () => {
+            sendResponse({ clippings });
+        });
+    });
+}
+
 
 const getClippings = (request, sendResponse) => {
     chrome.storage.sync.get("clippings", (result) => {
         let clippings = result.clippings || [];
-        if (request.clear) {
-            clippings = [];
-        }
-        else if (request.selection) {
+        if (request.selection) {
             clippings = [...clippings, { text: request.selection, creationDate: new Date().toLocaleString() }];
         }
         chrome.storage.sync.set({ clippings }, () => {

src/browser_actions/main.css

@@ -106,4 +106,14 @@ body {
 input {
     border-radius: 4px;
     border: 1px solid var(--fg);
+}
+
+svg.delete-item {
+    background-color: #6a737d;
+    border-radius: 6px;
+}
+
+#delete-button {
+    border: none;
+    background-color: transparent;
 }

src/browser_actions/popup.js

@@ -1,6 +1,7 @@
-let clippingsList, clippingListElement, notFoundTextElement, themePath, htmlElement;
+let clippingsList, clippingListElement, notFoundTextElement, themePath, htmlElement, searchText;
 const sunSvgPath = "M12.727 3.722A.736.736 0 0011.996 3a.734.734 0 00-.723.722v1.742c0 .39.332.721.723.721a.736.736 0 00.731-.721V3.722zm3.376 3.16a.735.735 0 000 1.02.726.726 0 001.031 0l1.239-1.236a.73.73 0 000-1.028.73.73 0 00-1.015 0l-1.255 1.244zm-9.245 1.02a.724.724 0 001.022 0c.283-.265.283-.746.009-1.02l-1.24-1.244a.748.748 0 00-1.022 0 .743.743 0 00-.008 1.02l1.239 1.244zm5.138-.132c-2.32 0-4.24 1.916-4.24 4.23 0 2.314 1.92 4.239 4.24 4.239 2.311 0 4.232-1.925 4.232-4.239s-1.92-4.23-4.232-4.23zm8.272 4.952c.4 0 .732-.332.732-.722a.736.736 0 00-.732-.722h-1.737a.734.734 0 00-.724.722c0 .39.333.722.724.722h1.737zM3.723 11.278A.734.734 0 003 12c0 .39.333.722.723.722h1.738c.399 0 .732-.332.732-.722a.736.736 0 00-.732-.722H3.723zm13.403 4.828a.74.74 0 00-1.023 0 .735.735 0 000 1.02l1.255 1.244a.73.73 0 001.015-.008.72.72 0 000-1.02l-1.247-1.236zM5.619 17.334a.743.743 0 00-.008 1.02.75.75 0 001.03.008l1.24-1.236a.727.727 0 00.008-1.02.75.75 0 00-1.031 0l-1.24 1.228zm7.108 1.202a.736.736 0 00-.731-.721.734.734 0 00-.723.721v1.742c0 .39.332.722.723.722a.736.736 0 00.731-.722v-1.742z";
 const moonSvgPath = "M15.977 14.456c-3.839 0-6.294-2.393-6.294-6.217 0-.79.192-1.92.447-2.505a.9.9 0 00.078-.332A.401.401 0 009.79 5c-.078 0-.249.021-.405.078C6.76 6.122 5 8.93 5 11.888 5 16.035 8.179 19 12.337 19c3.058 0 5.705-1.842 6.585-4.142.064-.162.078-.332.078-.395a.437.437 0 00-.419-.438.98.98 0 00-.305.064 7.979 7.979 0 01-2.299.367z";
+const deleteSvg = `<svg class="delete-item" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill="#fff"  d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>`
 
 window.onload = () => {
     renderClippingOnLoad();
@@ -42,41 +43,82 @@ const renderClippings = (clippings) => {
         addClip(clip);
     });
 }
-
-const addClip = (clip) => {
-    const clippingListItem = document.createElement("li");
+const createClipTextElement = (text) => {
     const textDiv = document.createElement("div");
-    textDiv.textContent = clip.text;
+    textDiv.textContent = text;
     textDiv.className = "text";
-    textDiv.title = clip.text.trim();
+    textDiv.title = text.trim();
+    return textDiv;
+}
+
+const createClipDateElement = (creationDate) => {
     const dateDiv = document.createElement("div");
-    dateDiv.textContent = clip.creationDate;
+    dateDiv.textContent = creationDate;
     dateDiv.className = "creation-date";
+    return dateDiv;
+}
+
+const createClipDeleteButtonElement = (creationDate) => {
+    const deleteButton = document.createElement('button');
+    deleteButton.id = "delete-button";
+    deleteButton.innerHTML = deleteSvg;
+    deleteButton.addEventListener('click', () => {
+        onDeleteItemClick(creationDate);
+    });
+    return deleteButton;
+}
+
+const addClip = (clip) => {
+    const clippingListItem = document.createElement("li");
+    const textDiv = createClipTextElement(clip.text);
+    const dateDiv = createClipDateElement(clip.creationDate);
+
+    const deleteButton = createClipDeleteButtonElement(clip.creationDate);
+
     clippingListItem.appendChild(textDiv);
     clippingListItem.appendChild(dateDiv);
+    clippingListItem.appendChild(deleteButton);
     clippingListElement.appendChild(clippingListItem);
 }
 
 const onSearchInputKeyup = (e) => {
-    const searchText = e.target.value.toLowerCase();
-    performSearch(searchText);
+    this.searchText = e.target.value.toLowerCase();
+    const filteredList = filterClippingsList(clippingsList, this.searchText);
+    handleSearch(this.searchText, filteredList);
 }
 
-const performSearch = (searchText) => {
-    const filteredList = clippingsList.filter((item) => item.text.toLowerCase().includes(searchText));
+const handleSearch = (searchText, filteredList) => {
+    clippingListElement.classList.remove("hide");
     notFoundTextElement.innerHTML = "";
-    if (filteredList.length > 0) {
-        clippingListElement.classList.remove("hide");
+    if (filteredList && filteredList.length > 0) {
         renderClippings(filteredList);
-    } else {
+    } else if (searchText && searchText.length) {
         notFoundTextElement.innerHTML = `There are no results for "${searchText}"`;
         clippingListElement.classList.add("hide");
     }
 }
 
 const onResetClick = () => {
     chrome.runtime.sendMessage({ clear: true });
-    renderClippings();
+    clippingsList = []
+    clippingListElement.innerHTML = "";
+    if (this.searchText && this.searchText.length) {
+        handleSearch(this.searchText, []);
+    } else {
+        renderClippings();
+    }
+}
+
+const onDeleteItemClick = (timestamp) => {
+    chrome.runtime.sendMessage({ clear: true, timestamp }, (response) => {
+        clippingsList = response.clippings;
+        if (this.searchText && this.searchText.length) {
+            const filteredList = filterClippingsList(clippingsList, this.searchText);
+            handleSearch(this.searchText, filteredList);
+        } else {
+            renderClippings(response.clippings);
+        }
+    });
 }
 
 const onClipClick = (e) => {
@@ -97,14 +139,18 @@ const renderClippingOnLoad = () => {
     });
 }
 
+const filterClippingsList = (clippings, text) => {
+    return clippings.filter((item) => item.text.toLowerCase().includes(text))
+}
+
 const debounce = (fn, timeoutInterval) => {
     let timer;
 
     return (...args) => {
         if (timer) {
             clearTimeout(timer);
         }
-        timer = setTimeout(fn, timeoutInterval, ...args)
+        timer = setTimeout(fn, timeoutInterval, ...args);
     };
 }