refs #1068 Display max status length and count charactors

h3poteto · Aug 16, 2023 · f81db22 · f81db22
1 parent 9ad0bd0
commit f81db22
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/components/compose/Compose.tsx b/src/components/compose/Compose.tsx
@@ -72,9 +72,11 @@ const Compose: React.FC<Props> = props => {
  setClient(client)
  const f = async () => {
  const res = await client.verifyAccountCredentials()
- setDefaultVisibility(res.data.source.privacy as 'public' | 'unlisted' | 'private' | 'direct')
- setDefaultNSFW(res.data.source.sensitive)
- setDefaultLanguage(res.data.source.language)
+ if (res.data.source) {
+ setDefaultVisibility(res.data.source.privacy as 'public' | 'unlisted' | 'private' | 'direct')
+ setDefaultNSFW(res.data.source.sensitive)
+ setDefaultLanguage(res.data.source.language)
+ }
  }
  f()
  }, [fromAccount])

diff --git a/src/components/compose/Status.tsx b/src/components/compose/Status.tsx
@@ -107,6 +107,8 @@ const Status: React.FC<Props> = props => {
  const [language, setLanguage] = useState<string>('en')
  const [editMediaModal, setEditMediaModal] = useState(false)
  const [editMedia, setEditMedia] = useState<Entity.Attachment | null>(null)
+ const [maxCharacters, setMaxCharacters] = useState<number | null>(null)
+ const [remaining, setRemaining] = useState<number | null>(null)
 
  const formRef = useRef<any>()
  const cwRef = useRef<HTMLDivElement>()
@@ -122,6 +124,10 @@ const Status: React.FC<Props> = props => {
  }
 
  const f = async () => {
+ const instance = await props.client.getInstance()
+ if (instance.data.configuration.statuses.max_characters) {
+ setMaxCharacters(instance.data.configuration.statuses.max_characters)
+ }
  const emojis = await props.client.getInstanceCustomEmojis()
  setCustomEmojis([
  {
@@ -220,6 +226,13 @@ const Status: React.FC<Props> = props => {
  }
  }, [props.defaultLanguage, props.client])
 
+ // Set Remaining
+ useEffect(() => {
+ if (maxCharacters) {
+ setRemaining(maxCharacters - formValue.status.length)
+ }
+ }, [maxCharacters, formValue])
+
  const handleSubmit = async () => {
  if (loading) {
  return
@@ -534,6 +547,15 @@ const Status: React.FC<Props> = props => {
  <Icon as={BsEmojiLaughing} style={{ fontSize: '1.2em' }} />
  </Button>
  </Whisper>
+ {remaining !== null && (
+ <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+ {remaining >= 0 ? (
+ <span style={{ color: 'var(--rs-text-tertiary)' }}>{remaining}</span>
+ ) : (
+ <span style={{ color: 'red' }}>{remaining}</span>
+ )}
+ </div>
+ )}
  </Form.Group>
  {formValue.poll && <Form.Control name="poll" accepter={PollInputControl} fieldError={formError.poll} />}
  {formValue.scheduled_at && <Form.Control name="scheduled_at" accepter={DatePicker} format="yyyy-MM-dd HH:mm" />}