refs #152 Change visibility of posts

src/components/compose/Status.tsx

@@ -1,7 +1,7 @@
-import { Form, Button, ButtonToolbar, Schema, Whisper, Input, Popover } from 'rsuite'
+import { Form, Button, ButtonToolbar, Schema, Whisper, Input, Popover, Dropdown } from 'rsuite'
 import { useState, useEffect, useRef, forwardRef } from 'react'
 import { Icon } from '@rsuite/icons'
-import { BsEmojiLaughing } from 'react-icons/bs'
+import { BsEmojiLaughing, BsPaperclip, BsMenuButtonWide, BsGlobe, BsUnlock, BsLock, BsEnvelope } from 'react-icons/bs'
 import { Entity, MegalodonInterface } from 'megalodon'
 import Picker from '@emoji-mart/react'
 
@@ -38,6 +38,7 @@ const Status: React.FC<Props> = props => {
  })
  const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
  const [loading, setLoading] = useState<boolean>(false)
+ const [visibility, setVisibility] = useState<'public' | 'unlisted' | 'private' | 'direct'>('public')
 
  const formRef = useRef<any>()
  const statusRef = useRef<HTMLDivElement>()
@@ -75,6 +76,7 @@ const Status: React.FC<Props> = props => {
  useEffect(() => {
  if (props.in_reply_to) {
  setFormValue({ status: `@${props.in_reply_to.account.acct} ` })
+ setVisibility(props.in_reply_to.visibility)
  }
  }, [props.in_reply_to])
 
@@ -94,7 +96,13 @@ const Status: React.FC<Props> = props => {
  } else {
  setLoading(true)
  try {
- await post(props.client, formValue, props.in_reply_to?.id)
+ let options = { visibility: visibility }
+ if (props.in_reply_to) {
+ options = Object.assign({}, options, {
+ in_reply_to_id: props.in_reply_to.id
+ })
+ }
+ await props.client.postStatus(formValue.status, options)
  clear()
  } finally {
  setLoading(false)
@@ -137,9 +145,36 @@ const Status: React.FC<Props> = props => {
  </Popover>
  ))
 
+ const VisibilityDropdown = ({ onClose, left, top, className }, ref) => {
+ const handleSelect = (key: string) => {
+ onClose()
+ if (key === 'public' || key === 'unlisted' || key === 'private' || key === 'direct') {
+ setVisibility(key)
+ }
+ }
+ return (
+ <Popover ref={ref} className={className} style={{ left, top }} full>
+ <Dropdown.Menu onSelect={handleSelect}>
+ <Dropdown.Item eventKey={'public'} icon={<Icon as={BsGlobe} />}>
+ Public
+ </Dropdown.Item>
+ <Dropdown.Item eventKey={'unlisted'} icon={<Icon as={BsUnlock} />}>
+ Unlisted
+ </Dropdown.Item>
+ <Dropdown.Item eventKey={'private'} icon={<Icon as={BsLock} />}>
+ Private
+ </Dropdown.Item>
+ <Dropdown.Item eventKey={'direct'} icon={<Icon as={BsEnvelope} />}>
+ Direct
+ </Dropdown.Item>
+ </Dropdown.Menu>
+ </Popover>
+ )
+ }
+
  return (
  <Form fluid model={model} ref={formRef} onChange={setFormValue} formValue={formValue}>
- <Form.Group controlId="status" style={{ position: 'relative' }}>
+ <Form.Group controlId="status" style={{ position: 'relative', marginBottom: '4px' }}>
  {/** @ts-ignore **/}
  <Form.Control rows={5} name="status" accepter={Textarea} ref={statusRef} />
  <Whisper trigger="click" placement="bottomStart" ref={emojiPickerRef} speaker={<EmojiPicker />}>
@@ -148,6 +183,21 @@ const Status: React.FC<Props> = props => {
  </Button>
  </Whisper>
  </Form.Group>
+ <Form.Group controlId="actions">
+ <ButtonToolbar>
+ <Button appearance="subtle" disabled>
+ <Icon as={BsPaperclip} style={{ fontSize: '1.1em' }} />
+ </Button>
+ <Button appearance="subtle" disabled>
+ <Icon as={BsMenuButtonWide} style={{ fontSize: '1.1em' }} />
+ </Button>
+ <Whisper placement="bottomStart" trigger="click" speaker={VisibilityDropdown}>
+ <Button appearance="subtle">
+ <Icon as={privacyIcon(visibility)} style={{ fontSize: '1.1em' }} />
+ </Button>
+ </Whisper>
+ </ButtonToolbar>
+ </Form.Group>
  <Form.Group>
  <ButtonToolbar style={{ justifyContent: 'flex-end' }}>
  <Button appearance="primary" type="submit" onClick={handleSubmit} loading={loading}>
@@ -159,17 +209,19 @@ const Status: React.FC<Props> = props => {
  )
 }
 
-const Textarea = forwardRef<HTMLTextAreaElement>((props, ref) => <Input {...props} as="textarea" ref={ref} />)
-
-const post = async (client: MegalodonInterface, value: FormValue, in_reply_to_id?: string) => {
- let options = {}
- if (in_reply_to_id) {
- options = Object.assign({}, options, {
- in_reply_to_id
- })
+const privacyIcon = (visibility: 'public' | 'unlisted' | 'private' | 'direct') => {
+ switch (visibility) {
+ case 'public':
+ return BsGlobe
+ case 'unlisted':
+ return BsUnlock
+ case 'private':
+ return BsLock
+ case 'direct':
+ return BsEnvelope
  }
- const res = await client.postStatus(value.status, options)
- return res
 }
 
+const Textarea = forwardRef<HTMLTextAreaElement>((props, ref) => <Input {...props} as="textarea" ref={ref} />)
+
 export default Status