using localstorage to track existing vibetag toggle for a post

ghobs91 · Apr 19, 2024 · fc5bbe2 · fc5bbe2
1 parent 767a5ef
commit fc5bbe2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 34 deletions.
diff --git a/src/components/status.css b/src/components/status.css
@@ -1460,13 +1460,18 @@ li.timeline-item-container > .status-link {
   border-color: var(--reblog-color);
 }
 .status .action > button.plain.clickbait-button.checked {
-  color: rgb(242, 164, 164);
-  background-color: #f00;
+  color: rgb(47, 8, 8);
+  background-color: #9d2a2a;
 }
 .status .action > button.plain.positive-button.checked {
-  background-color: #326a2e;;
-  color: green;
+  background-color: #1db812;
+  color: rgb(56, 89, 31);
 }
+
+.disabled-vibe-button {
+  cursor: default !important;
+}
+
 @keyframes reblogged {
   5% {
     transform: translate(-2px, -2px);

diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -388,34 +388,42 @@ function Status({
   }, [mediaAttachments]);
 
   const vibeLabelClickbait = async () => {
-    try {
-      states.statuses[sKey] = {
-        ...status,
-        labeledClickbait: !labeledClickbait,
-        labeledClickbaitCount: vibeCountDict['clickbait'].length,
-      };
-      sendVibeEvent(status.id, 'mastodon', 'clickbait');
-    } catch (e) {
-      console.error(e);
-      // Revert optimistism
-      states.statuses[sKey] = status;
-      return false;
+    const alreadyChecked = localStorage.getItem(status.id);
+    if (!alreadyChecked) {
+      try {
+        states.statuses[sKey] = {
+          ...status,
+          labeledClickbait: !labeledClickbait,
+          labeledClickbaitCount: vibeCountDict['clickbait'].length,
+        };
+        sendVibeEvent(status.id, 'mastodon', 'clickbait');
+      } catch (e) {
+        console.error(e);
+        // Revert optimistism
+        states.statuses[sKey] = status;
+        return false;
+      }
+    } else {
+      return;
     }
   };
 
   const vibeLabelPositive = async () => {
-    try {
-      states.statuses[sKey] = {
-        ...status,
-        labeledPositiveVibe: !labeledPositiveVibe,
-        labeledPositiveVibeCount: vibeCountDict['positive'].length,
-      };
-      sendVibeEvent(status.id, 'mastodon', 'positive');
-    } catch (e) {
-      console.error(e);
-      // Revert optimistism
-      states.statuses[sKey] = status;
-      return false;
+    const alreadyChecked = localStorage.getItem(status.id);
+    if (!alreadyChecked) {
+      try {
+        states.statuses[sKey] = {
+          ...status,
+          labeledPositiveVibe: !labeledPositiveVibe,
+          labeledPositiveVibeCount: vibeCountDict['positive'].length,
+        };
+        sendVibeEvent(status.id, 'mastodon', 'positive');
+      } catch (e) {
+        console.error(e);
+        // Revert optimistism
+        states.statuses[sKey] = status;
+        return false;
+      }
     }
   };
 
@@ -1589,30 +1597,31 @@ function Status({
             <div class={`actions ${_deleted ? 'disabled' : ''}`}>
               <div class="action has-count">
                 <VibeTagButton
-                  checked={labeledClickbait}
+                  checked={localStorage.getItem(status.id) === 'clickbait'}
                   title={['Clickbait']}
                   alt={['Clickbait']}
-                  class="clickbait-button vibetag-button"
+                  class={`clickbait-button vibetag-button ${localStorage.getItem(status.id) ? 'disabled-vibe-button': ''}`}
                   icon="bait"
                   text="Clickbait"
                   count={labeledClickbaitCount}
                   onClick={vibeLabelClickbait}
                   style="color: #e95252"
+                  disabled={localStorage.getItem(status.id)}
                 />
               </div>
               <div class="action has-count">
                 <VibeTagButton
-                  checked={labeledPositiveVibe}
+                  checked={localStorage.getItem(status.id) === 'positive'}
                   title={['Positive']}
                   alt={['Positive']}
-                  class="positive-button vibetag-button"
+                  class={`positive-button vibetag-button ${localStorage.getItem(status.id) ? 'disabled-vibe-button': ''}`}
                   icon="positive"
                   text="Positive Vibes"
                   count={labeledPositiveVibeCount}
                   onClick={vibeLabelPositive}
                   style="color: #93e952"
+                  disabled={localStorage.getItem(status.id)}
                 />
-
               </div>
             </div>
 
@@ -2242,6 +2251,7 @@ function VibeTagButton({
   icon,
   text,
   onClick,
+  disabled,
   ...props
 }) {
   if (typeof title === 'string') {
@@ -2269,6 +2279,7 @@ function VibeTagButton({
       type="button"
       title={buttonTitle}
       class={`plain ${className} ${checked ? 'checked' : ''}`}
+      disabled={disabled}
       onClick={(e) => {
         if (!onClick) return;
         e.preventDefault();

diff --git a/src/utils/vibe-tag.js b/src/utils/vibe-tag.js
@@ -15,7 +15,9 @@ export let vibeCountDict = {
 export function createNostrUser() {
     let sk = generateSecretKey() // `sk` is a Uint8Array
     let skHex = bytesToHex(sk) 
+    let pk = getPublicKey(sk)
     localStorage.setItem('nostrUserSecret', skHex);
+    localStorage.setItem('nostrUserPubkey', pk);
 }
 
 export async function sendVibeEvent(vibeSubject, vibeSubjectType, vibeTag) {
@@ -35,8 +37,8 @@ export async function sendVibeEvent(vibeSubject, vibeSubjectType, vibeTag) {
     const signedEvent = finalizeEvent(eventTemplate, sk)
     await relay.publish(signedEvent)
     setVibeTagCount(vibeSubject, vibeTag)
+    localStorage.setItem(vibeSubject, vibeTag);
     relay.close()
-
 }
 
 export async function getVibeTagCount(vibeTag) {