Add unhelpful button

app/components/icons-generated/Dislike.js

@@ -0,0 +1,38 @@
+import * as React from 'react'
+const SvgDislike = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    style={{
+      enableBackground: 'new 0 0 512 512',
+      transform: 'rotate(180deg)',
+    }}
+    xmlSpace="preserve"
+    {...props}
+  >
+    <path
+      d="M112 448c0 8.8-7.2 16-16 16H32c-8.8 0-16-7.2-16-16V224c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16v224z"
+      style={{
+        fill: '#6495ed',
+      }}
+    />
+    <path
+      d="M512 229.5c0-30.4-24.1-53.5-53.8-53.5H329.3c20.9-36.5 30.7-74.9 30.7-90.1 0-26.5-20.6-53.9-55.1-53.9-67.6 0-32.7 76.4-108.1 136.8l-33.6 24.8c-2.1 1.5-4.1 4-4.1 6.4 0 5.9 5.3 7.9 7.9 8v192.1c-3.9.5-7 3.9-7 7.9 0 2.6 1.3 5.1 3.6 6.7l50.5 33.4c27.7 20.5 61.9 31.8 96.4 31.8h56c29.7 0 53.8-24 53.8-53.5 0-1.6-.1-3.3-.2-4.9 18.7-8.8 30.8-27.3 30.8-48.1 0-6.3-1.2-12.6-3.5-18.5 20.2-7.9 34-27.4 34-49.7 0-8.8-2.2-17.5-6.5-25.2 21.6-7 37.1-27.2 37.1-50.5z"
+      style={{
+        fill: '#ffdead',
+      }}
+    />
+    <path
+      d="M96 191.1H32c-17.7 0-32 14.3-32 31.1v223.1c0 17.7 14.3 31.1 32 31.1h64c17.7 0 32-14.3 32-31.1V223.1c0-16.8-14.3-32-32-32zM112 448c0 8.8-7.2 16-16 16H32c-8.8 0-16-7.2-16-16V224c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16v224zm400-218.5c0-30.4-24.1-53.5-53.8-53.5H329.3c20.9-36.5 30.7-74.9 30.7-90.1 0-26.5-20.6-53.9-55.1-53.9-67.6 0-32.7 76.4-108.1 136.8l-33.6 24.8c-2.1 1.5-4.1 4-4.1 6.4 0 6 5.4 8 8 8 1.7 0 3.3-.5 4.8-1.6l33.7-25C285.8 117.1 253.2 48 304.8 48c24.5 0 39.2 19.3 39.2 37.9 0 12.1-9 49.7-30.7 85.6l-5.3 8c-.9 1.3-1.3 2.9-1.3 4.4 0 4.6 3.8 8 8 8h143.5c20.8 0 37.8 16.8 37.8 37.5 0 19.5-15.5 35.8-35.2 37.2-4.2.3-7.5 3.8-7.5 8 0 7.2 12.1 11.2 12.1 30.6 0 18-13 33.5-30.8 36.8-2.8.5-6.5 3.1-6.5 7.9 0 5.1 6.8 9.6 6.8 23.6 0 16.2-10.5 30.4-26.2 35.5-3.4 1.1-5.5 4.2-5.5 7.6 0 2.2 1.2 4.5 1.2 10 0 20.7-17 37.5-37.8 37.5h-56c-31.1 0-61.9-10.2-87.2-29l-50.9-33.7c-1.4-.9-2.9-1.3-4.4-1.3-4.4 0-8 3.6-8 8 0 2.6 1.3 5.1 3.6 6.7l50.6 33.4c27.7 20.5 61.9 31.8 96.4 31.8h56c29.7 0 53.8-24 53.8-53.5 0-1.6-.1-3.3-.2-4.9 18.7-8.8 30.8-27.3 30.8-48.1 0-6.3-1.2-12.6-3.5-18.5 20.2-7.9 34-27.4 34-49.7 0-8.8-2.2-17.5-6.5-25.2 21.4-7.1 36.9-27.3 36.9-50.6z"
+      style={{
+        fill: '#333',
+      }}
+    />
+    <path
+      className="dislike_svg__gray"
+      fill="#333"
+      d="M96 191.1H32c-17.7 0-32 14.3-32 31.1v223.1c0 17.7 14.3 31.1 32 31.1h64c17.7 0 32-14.3 32-31.1V223.1c0-16.8-14.3-32-32-32zM112 448c0 8.8-7.2 16-16 16H32c-8.8 0-16-7.2-16-16V224c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16v224zm400-218.5c0-30.4-24.1-53.5-53.8-53.5H329.3c20.9-36.5 30.7-74.9 30.7-90.1 0-26.5-20.6-53.9-55.1-53.9-67.6 0-32.7 76.4-108.1 136.8l-33.6 24.8c-2.1 1.5-4.1 4-4.1 6.4 0 6 5.4 8 8 8 1.7 0 3.3-.5 4.8-1.6l33.7-25C285.8 117.1 253.2 48 304.8 48c24.5 0 39.2 19.3 39.2 37.9 0 12.1-9 49.7-30.7 85.6l-5.3 8c-.9 1.3-1.3 2.9-1.3 4.4 0 4.6 3.8 8 8 8h143.5c20.8 0 37.8 16.8 37.8 37.5 0 19.5-15.5 35.8-35.2 37.2-4.2.3-7.5 3.8-7.5 8 0 7.2 12.1 11.2 12.1 30.6 0 18-13 33.5-30.8 36.8-2.8.5-6.5 3.1-6.5 7.9 0 5.1 6.8 9.6 6.8 23.6 0 16.2-10.5 30.4-26.2 35.5-3.4 1.1-5.5 4.2-5.5 7.6 0 2.2 1.2 4.5 1.2 10 0 20.7-17 37.5-37.8 37.5h-56c-31.1 0-61.9-10.2-87.2-29l-50.9-33.7c-1.4-.9-2.9-1.3-4.4-1.3-4.4 0-8 3.6-8 8 0 2.6 1.3 5.1 3.6 6.7l50.6 33.4c27.7 20.5 61.9 31.8 96.4 31.8h56c29.7 0 53.8-24 53.8-53.5 0-1.6-.1-3.3-.2-4.9 18.7-8.8 30.8-27.3 30.8-48.1 0-6.3-1.2-12.6-3.5-18.5 20.2-7.9 34-27.4 34-49.7 0-8.8-2.2-17.5-6.5-25.2 21.4-7.1 36.9-27.3 36.9-50.6z"
+    />
+  </svg>
+)
+export default SvgDislike

app/components/icons-generated/index.js

@@ -1,6 +1,7 @@
 export {default as Code} from './Code'
 export {default as DarkLight} from './DarkLight'
 export {default as Discord} from './Discord'
+export {default as Dislike} from './Dislike'
 export {default as Edit} from './Edit'
 export {default as Ellipsis} from './Ellipsis'
 export {default as Flag} from './Flag'

app/routes/questions/$question.tsx

@@ -155,6 +155,7 @@ export function Question({
                   <Tags tags={tags} selectQuestion={selectQuestion} />
                   <div className="actions">
                     <Action pageid={pageid} actionType={ActionType.HELPFUL} />
+                    <Action pageid={pageid} actionType={ActionType.UNHELPFUL} />
                     {answerEditLink && (
                       // TODO: on the first click (remember in localstorage), display a disclaimer popup text from https://stampy.ai/wiki/Edit_popup
                       <a

app/routes/questions/actions.tsx

@@ -3,14 +3,24 @@ import type {ActionArgs} from '@remix-run/cloudflare'
 import {Form, useSearchParams} from '@remix-run/react'
 import {redirect, json} from '@remix-run/cloudflare'
 import {makeColumnIncrementer} from '~/server-utils/stampy'
-import {DarkLight, Edit, Flag, Followup, Hide, Like, Search} from '~/components/icons-generated'
+import {
+  DarkLight,
+  Edit,
+  Flag,
+  Followup,
+  Hide,
+  Like,
+  Search,
+  Dislike,
+} from '~/components/icons-generated'
 
 export enum ActionType {
   DARKLIGHT = 'darkLight',
   EDIT = 'edit',
   FLAG = 'flag',
   FOLLOWUP = 'followup',
   HELPFUL = 'helpful',
+  UNHELPFUL = 'unhelpful',
   HIDE = 'hide',
   REQUEST = 'request',
   SEARCH = 'search',
@@ -50,6 +60,11 @@ const actions = {
     title: 'Helpful',
     handler: makeColumnIncrementer('Helpful'),
   },
+  unhelpful: {
+    Icon: Dislike,
+    title: 'Unhelpful',
+    handler: makeColumnIncrementer('Unhelpful'),
+  },
   hide: {
     Icon: Hide,
     title: 'Hide',

app/server-utils/stampy.ts

@@ -443,7 +443,7 @@ export const incAnswerColumn = async (column: string, pageid: PageId, subtract:
   const incBy = subtract ? -1 : 1
   const payload = {
     row: {
-      cells: [{column, value: (row.values.Helpful || 0) + incBy}],
+      cells: [{column, value: (row.values[column] || 0) + incBy}],
     },
   }
   const result = await sendToCoda(url, payload, 'PUT')