From 44ca7938e7f1aa7ef5fa2a52d69a3eae04406fb8 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Thu, 17 Sep 2020 13:43:16 +0500
Subject: [PATCH] feat: add ability to unpin using the pin ui

---
 apps/web/src/components/list-item/index.js |  4 +---
 apps/web/src/components/note/index.js      | 11 +++++++----
 apps/web/src/components/notebook/index.js  | 11 ++++++-----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/list-item/index.js b/apps/web/src/components/list-item/index.js
index 47614fb6c..c3275a43a 100644
--- a/apps/web/src/components/list-item/index.js
+++ b/apps/web/src/components/list-item/index.js
@@ -110,9 +110,7 @@ function ListItem(props) {
         <Flex
           variant="rowCenter"
           bg="primary"
-          onClick={() => {
-            //TODO unpin
-          }}
+          onClick={() => props.unpin && props.unpin()}
           sx={{
             position: "absolute",
             top: -15,
diff --git a/apps/web/src/components/note/index.js b/apps/web/src/components/note/index.js
index bd4c4a6a8..96504753a 100644
--- a/apps/web/src/components/note/index.js
+++ b/apps/web/src/components/note/index.js
@@ -17,6 +17,11 @@ import { showItemDeletedToast } from "../../common/toasts";
 import { showUnpinnedToast } from "../../common/toasts";
 import { showToast } from "../../utils/toast";
 
+const pin = async (note) => {
+  await store.pin(note.id);
+  if (note.pinned) await showUnpinnedToast(note.id, "note");
+};
+
 function menuItems(note, context) {
   return [
     { title: "colors", component: Colors },
@@ -28,10 +33,7 @@ function menuItems(note, context) {
     },
     {
       title: note.pinned ? "Unpin" : "Pin",
-      onClick: async () => {
-        await store.pin(note.id);
-        if (note.pinned) await showUnpinnedToast(note.id, "note");
-      },
+      onClick: pin.bind(this, note),
       onlyPro: true,
     },
     {
@@ -123,6 +125,7 @@ function Note(props) {
       body={note.headline}
       id={note.id}
       index={index}
+      unpin={pin.bind(this, note)}
       onClick={() => {
         if (note.conflicted) {
           setHashParam({ diff: note.id });
diff --git a/apps/web/src/components/notebook/index.js b/apps/web/src/components/notebook/index.js
index 6a766a701..d43a34174 100644
--- a/apps/web/src/components/notebook/index.js
+++ b/apps/web/src/components/notebook/index.js
@@ -6,15 +6,15 @@ import * as Icon from "../icons";
 import { showEditNoteDialog } from "../dialogs/addnotebookdialog";
 import { confirm } from "../dialogs/confirm";
 import { showItemDeletedToast, showUnpinnedToast } from "../../common/toasts";
-
+const pin = async (notebook, index) => {
+  await store.pin(notebook, index);
+  if (notebook.pinned) showUnpinnedToast(notebook.id, "notebook");
+};
 function menuItems(notebook, index) {
   return [
     {
       title: notebook.pinned ? "Unpin" : "Pin",
-      onClick: async () => {
-        await store.pin(notebook, index);
-        if (notebook.pinned) showUnpinnedToast(notebook.id, "notebook");
-      },
+      onClick: () => pin(notebook, index),
     },
     {
       title: "Edit",
@@ -58,6 +58,7 @@ class Notebook extends React.Component {
         selectable
         item={notebook}
         onClick={onClick}
+        unpin={() => pin(notebook, index)}
         title={notebook.title}
         body={notebook.description}
         subBody={