limit title length to 80 characters

components/discussion-form.js

@@ -6,11 +6,7 @@ import ActionTooltip from '../components/action-tooltip'
 import TextareaAutosize from 'react-textarea-autosize'
 import Countdown from './countdown'
 import AdvPostForm, { AdvPostInitial, AdvPostSchema } from './adv-post-form'
-
+import { MAX_TITLE_LENGTH } from '../lib/constants'
-export const DiscussionSchema = Yup.object({
-  title: Yup.string().required('required').trim(),
-  ...AdvPostSchema
-})
 
 export function DiscussionForm ({
   item, editThreshold, titleLabel = 'title',
@@ -29,7 +25,9 @@ export function DiscussionForm ({
   )
 
   const DiscussionSchema = Yup.object({
-    title: Yup.string().required('required').trim(),
+    title: Yup.string().required('required').trim()
+      .max(MAX_TITLE_LENGTH,
+        ({ max, value }) => `${Math.abs(max - value.length)} too many`),
     ...AdvPostSchema(client)
   })
 

components/link-form.js

@@ -8,6 +8,7 @@ import AdvPostForm, { AdvPostInitial, AdvPostSchema } from './adv-post-form'
 import { ITEM_FIELDS } from '../fragments/items'
 import Item from './item'
 import AccordianItem from './accordian-item'
+import { MAX_TITLE_LENGTH } from '../lib/constants'
 
 // eslint-disable-next-line
 const URL = /^((https?|ftp):\/\/)?(www.)?(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i
@@ -42,7 +43,9 @@ export function LinkForm ({ item, editThreshold }) {
   )
 
   const LinkSchema = Yup.object({
-    title: Yup.string().required('required').trim(),
+    title: Yup.string().required('required').trim()
+      .max(MAX_TITLE_LENGTH,
+        ({ max, value }) => `${Math.abs(max - value.length)} too many`),
     url: Yup.string().matches(URL, 'invalid url').required('required'),
     ...AdvPostSchema(client)
   })
@@ -55,9 +58,9 @@ export function LinkForm ({ item, editThreshold }) {
         ...AdvPostInitial
       }}
       schema={LinkSchema}
-      onSubmit={async ({ boost, ...values }) => {
+      onSubmit={async ({ boost, title, ...values }) => {
         const { error } = await upsertLink({
-          variables: { id: item?.id, boost: Number(boost), ...values }
+          variables: { id: item?.id, boost: Number(boost), title: title.trim(), ...values }
         })
         if (error) {
           throw new Error({ message: error.toString() })

lib/constants.js

@@ -10,3 +10,4 @@ export const UPLOAD_TYPES_ALLOW = [
   'image/webp'
 ]
 export const COMMENT_DEPTH_LIMIT = 10
+export const MAX_TITLE_LENGTH = 80