feat: connecting article action buttons

StampyAI · Feb 13, 2024 · e65fe0a · e65fe0a
1 parent db55f7b
commit e65fe0a
Showing 1 changed file with 31 additions and 26 deletions.
diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -6,9 +6,9 @@ import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
 import Button, {CompositeButton} from '~/components/Button'
 import type {Glossary, GlossaryEntry, PageId, Question} from '~/server-utils/stampy'
 import './article.css'
-import {forEach} from "lodash";
-import {Simulate} from "react-dom/test-utils";
-import keyUp = Simulate.keyUp;
+import {forEach} from 'lodash'
+import {Simulate} from 'react-dom/test-utils'
+import keyUp = Simulate.keyUp
 
 const footnoteHTML = (el: HTMLDivElement, e: HTMLAnchorElement): string | null => {
   const id = e.getAttribute('href') || ''
@@ -151,48 +151,47 @@ const ArticleFooter = (question: Question) => {
       month: 'short',
     })
 
-  const actionIds = {helpful:false, unhelpful:false};
+  const actionIds = {helpful: false, unhelpful: false}
 
   const loadActionTaken = () => {
     forEach(actionIds, (value, key) => {
-        try {
-            actionIds[key]= localStorage.getItem(`${question.pageid}-${key}`) === 'true';
-        } catch (e) {
-            // This will happen when local storage is disabled
-            actionIds[key]= false;
-        }
+      try {
+        actionIds[key] = localStorage.getItem(`${question.pageid}-${key}`) === 'true'
+      } catch (e) {
+        // This will happen when local storage is disabled
+        actionIds[key] = false
+      }
     })
   }
 
   const actionParams = (actionType) => {
     return new URLSearchParams({
-      pageid:question.pageid,
+      pageid: question.pageid,
       actionTaken: actionIds[actionType].toString(),
       action: actionType,
     })
   }
   const switchAction = (actionType) => {
-    if(actionIds[actionType]) {
-      actionIds[actionType==="helpful"?'unhelpful':'helpful'] = false;
+    if (actionIds[actionType]) {
+      actionIds[actionType === 'helpful' ? 'unhelpful' : 'helpful'] = false
     }
   }
   const handleAction = async (actionTaken) => {
-    actionIds[actionTaken] = !actionIds[actionTaken];
-    switchAction(actionTaken);
-    const searchParams = actionParams(actionTaken);
-    const response = await fetch('/questions/actions', {method: 'POST', body: searchParams});
-
-    if (response.ok !== true){
-      actionIds[actionTaken] = !actionIds[actionTaken];
-      switchAction(actionTaken);
+    actionIds[actionTaken] = !actionIds[actionTaken]
+    switchAction(actionTaken)
+    const searchParams = actionParams(actionTaken)
+    const response = await fetch('/questions/actions', {method: 'POST', body: searchParams})
+
+    if (response.ok !== true) {
+      actionIds[actionTaken] = !actionIds[actionTaken]
+      switchAction(actionTaken)
       return
     }
     try {
       forEach(actionIds, (value, key) => {
-        localStorage.setItem(`${question.pageid}-${key}`, actionIds[key].toString());
+        localStorage.setItem(`${question.pageid}-${key}`, actionIds[key].toString())
       })
-    } catch (e) {
-    }
+    } catch (e) {}
   }
 
   loadActionTaken()
@@ -208,11 +207,17 @@ const ArticleFooter = (question: Question) => {
       <span>Did this page help you?</span>
 
       <CompositeButton>
-        <Button className={["secondary", actionIds["helpful"]?'focused':''].join(' ')} action={() => handleAction("helpful")}>
+        <Button
+          className={['secondary', actionIds['helpful'] ? 'focused' : ''].join(' ')}
+          action={() => handleAction('helpful')}
+        >
           <ThumbUpIcon />
           <span className="teal-500">Yes</span>
         </Button>
-        <Button className={["secondary", actionIds["unhelpful"]?'focused':''].join(' ')} action={() => handleAction("unhelpful")}>
+        <Button
+          className={['secondary', actionIds['unhelpful'] ? 'focused' : ''].join(' ')}
+          action={() => handleAction('unhelpful')}
+        >
           <ThumbDownIcon />
           <span className="teal-500">No</span>
         </Button>