Move MAX_GRAPHEME_LENGTH to constants.ts (#735)

src/lib/constants.ts

@@ -4,6 +4,8 @@ export const FEEDBACK_FORM_URL =
 export const MAX_DISPLAY_NAME = 64
 export const MAX_DESCRIPTION = 256
 
+export const MAX_GRAPHEME_LENGTH = 300
+
 // Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html
 // but increasing limit per user feedback
 export const MAX_ALT_TEXT = 1000

src/view/com/composer/Composer.tsx

@@ -37,8 +37,7 @@ import {useExternalLinkFetch} from './useExternalLinkFetch'
 import {isDesktopWeb, isAndroid} from 'platform/detection'
 import {GalleryModel} from 'state/models/media/gallery'
 import {Gallery} from './photos/Gallery'
-
-const MAX_GRAPHEME_LENGTH = 300
+import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
 
 type Props = ComposerOpts & {
   onClose: () => void
@@ -310,7 +309,7 @@ export const ComposePost = observer(function ComposePost({
               onError={setError}
               accessible={true}
               accessibilityLabel="Write post"
-              accessibilityHint="Compose posts up to 300 characters in length"
+              accessibilityHint={`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`}
             />
           </View>
 

src/view/com/composer/char-progress/CharProgress.tsx

@@ -7,9 +7,9 @@ import ProgressCircle from 'react-native-progress/Circle'
 import ProgressPie from 'react-native-progress/Pie'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
+import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
 
-const MAX_LENGTH = 300
-const DANGER_LENGTH = MAX_LENGTH
+const DANGER_LENGTH = MAX_GRAPHEME_LENGTH
 
 export function CharProgress({count}: {count: number}) {
   const pal = usePalette('default')
@@ -17,7 +17,9 @@ export function CharProgress({count}: {count: number}) {
   const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
   return (
     <>
-      <Text style={[s.mr10, {color: textColor}]}>{MAX_LENGTH - count}</Text>
+      <Text style={[s.mr10, {color: textColor}]}>
+        {MAX_GRAPHEME_LENGTH - count}
+      </Text>
       <View>
         {count > DANGER_LENGTH ? (
           <ProgressPie
@@ -25,7 +27,10 @@ export function CharProgress({count}: {count: number}) {
             borderWidth={4}
             borderColor={circleColor}
             color={circleColor}
-            progress={Math.min((count - MAX_LENGTH) / MAX_LENGTH, 1)}
+            progress={Math.min(
+              (count - MAX_GRAPHEME_LENGTH) / MAX_GRAPHEME_LENGTH,
+              1,
+            )}
           />
         ) : (
           <ProgressCircle
@@ -33,7 +38,7 @@ export function CharProgress({count}: {count: number}) {
             borderWidth={1}
             borderColor={pal.colors.border}
             color={circleColor}
-            progress={count / MAX_LENGTH}
+            progress={count / MAX_GRAPHEME_LENGTH}
           />
         )}
       </View>