From 77daa458cf720f6cc21e4d63df3249cdd9fe8452 Mon Sep 17 00:00:00 2001
From: SatsAllDay <128755788+SatsAllDay@users.noreply.github.com>
Date: Mon, 11 Sep 2023 20:20:44 -0400
Subject: [PATCH] Visual Character counter for post titles, poll options (#466)

* Indicate how many chars remain for title field and poll options

Live counter update to help authors know how many more chars they have
to use in their post titles, and also poll options

* Use InputInner for consistency

* Refactor to reuse title hint across all forms

* Character(s)

* Move maxLength hint impl to InputInner, per PR feedback

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
---
 components/bounty-form.js     | 10 +++++++++-
 components/discussion-form.js |  2 ++
 components/form.js            |  6 ++++++
 components/job-form.js        |  2 ++
 components/link-form.js       |  2 ++
 components/poll-form.js       |  4 +++-
 6 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/bounty-form.js b/components/bounty-form.js
index 7d0696e3..41c8da17 100644
--- a/components/bounty-form.js
+++ b/components/bounty-form.js
@@ -10,6 +10,7 @@ import { SubSelectInitial } from './sub-select-form'
 import CancelButton from './cancel-button'
 import { useCallback } from 'react'
 import { normalizeForwards } from '../lib/form'
+import { MAX_TITLE_LENGTH } from '../lib/constants'
 
 export function BountyForm ({
   item,
@@ -98,7 +99,14 @@ export function BountyForm ({
       storageKeyPrefix={item ? undefined : 'bounty'}
     >
       {children}
-      <Input label={titleLabel} name='title' required autoFocus clear />
+      <Input
+        label={titleLabel}
+        name='title'
+        required
+        autoFocus
+        clear
+        maxLength={MAX_TITLE_LENGTH}
+      />
       <Input
         label={bountyLabel} name='bounty' required
         append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
diff --git a/components/discussion-form.js b/components/discussion-form.js
index 08b15575..00b5ec79 100644
--- a/components/discussion-form.js
+++ b/components/discussion-form.js
@@ -14,6 +14,7 @@ import { SubSelectInitial } from './sub-select-form'
 import CancelButton from './cancel-button'
 import { useCallback } from 'react'
 import { normalizeForwards } from '../lib/form'
+import { MAX_TITLE_LENGTH } from '../lib/constants'
 
 export function DiscussionForm ({
   item, sub, editThreshold, titleLabel = 'title',
@@ -101,6 +102,7 @@ export function DiscussionForm ({
             })
           }
         }}
+        maxLength={MAX_TITLE_LENGTH}
       />
       <MarkdownInput
         topLevel
diff --git a/components/form.js b/components/form.js
index 9b5fd655..50addf6b 100644
--- a/components/form.js
+++ b/components/form.js
@@ -20,6 +20,7 @@ import { USER_SEARCH } from '../fragments/users'
 import TextareaAutosize from 'react-textarea-autosize'
 import { useToast } from './toast'
 import { useInvoiceable } from './invoice'
+import { numWithUnits } from '../lib/format'
 
 export function SubmitButton ({
   children, variant, value, onClick, disabled, cost, ...props
@@ -320,6 +321,11 @@ function InputInner ({
           {hint}
         </BootstrapForm.Text>
       )}
+      {props.maxLength && (
+        <BootstrapForm.Text>
+          {`${numWithUnits(props.maxLength - (field.value || '').length, { abbreviate: false, unitSingular: 'character', unitPlural: 'characters' })} remaining`}
+        </BootstrapForm.Text>
+      )}
     </>
   )
 }
diff --git a/components/job-form.js b/components/job-form.js
index a710fb3b..938c515b 100644
--- a/components/job-form.js
+++ b/components/job-form.js
@@ -17,6 +17,7 @@ import Avatar from './avatar'
 import ActionTooltip from './action-tooltip'
 import { jobSchema } from '../lib/validate'
 import CancelButton from './cancel-button'
+import { MAX_TITLE_LENGTH } from '../lib/constants'
 
 function satsMin2Mo (minute) {
   return minute * 30 * 24 * 60
@@ -116,6 +117,7 @@ export default function JobForm ({ item, sub }) {
           required
           autoFocus
           clear
+          maxLength={MAX_TITLE_LENGTH}
         />
         <Input
           label='company'
diff --git a/components/link-form.js b/components/link-form.js
index d5f2c243..ae760181 100644
--- a/components/link-form.js
+++ b/components/link-form.js
@@ -15,6 +15,7 @@ import Moon from '../svgs/moon-fill.svg'
 import { SubSelectInitial } from './sub-select-form'
 import CancelButton from './cancel-button'
 import { normalizeForwards } from '../lib/form'
+import { MAX_TITLE_LENGTH } from '../lib/constants'
 
 export function LinkForm ({ item, sub, editThreshold, children }) {
   const router = useRouter()
@@ -146,6 +147,7 @@ export function LinkForm ({ item, sub, editThreshold, children }) {
               txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()))
           }
         }}
+        maxLength={MAX_TITLE_LENGTH}
       />
       <Input
         label='url'
diff --git a/components/poll-form.js b/components/poll-form.js
index 2dc7db80..6a9eb4f7 100644
--- a/components/poll-form.js
+++ b/components/poll-form.js
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { gql, useApolloClient, useMutation } from '@apollo/client'
 import Countdown from './countdown'
 import AdvPostForm, { AdvPostInitial } from './adv-post-form'
-import { MAX_POLL_NUM_CHOICES } from '../lib/constants'
+import { MAX_POLL_CHOICE_LENGTH, MAX_POLL_NUM_CHOICES, MAX_TITLE_LENGTH } from '../lib/constants'
 import FeeButton, { EditFeeButton } from './fee-button'
 import Delete from './delete'
 import Button from 'react-bootstrap/Button'
@@ -76,6 +76,7 @@ export function PollForm ({ item, sub, editThreshold, children }) {
         label='title'
         name='title'
         required
+        maxLength={MAX_TITLE_LENGTH}
       />
       <MarkdownInput
         topLevel
@@ -92,6 +93,7 @@ export function PollForm ({ item, sub, editThreshold, children }) {
         hint={editThreshold
           ? <div className='text-muted fw-bold'><Countdown date={editThreshold} /></div>
           : null}
+        maxLength={MAX_POLL_CHOICE_LENGTH}
       />
       <AdvPostForm edit={!!item} />
       <div className='mt-3'>