Changeset View
Changeset View
Standalone View
Standalone View
web/modals/threads/settings/thread-settings-general-tab.react.js
Show All 14 Lines | import { | ||||
threadPermissions, | threadPermissions, | ||||
} from 'lib/types/thread-types'; | } from 'lib/types/thread-types'; | ||||
import { | import { | ||||
useDispatchActionPromise, | useDispatchActionPromise, | ||||
useServerCall, | useServerCall, | ||||
} from 'lib/utils/action-utils'; | } from 'lib/utils/action-utils'; | ||||
import { firstLine } from 'lib/utils/string-utils'; | import { firstLine } from 'lib/utils/string-utils'; | ||||
import Button from '../../../components/button.react'; | |||||
import LoadingIndicator from '../../../loading-indicator.react'; | import LoadingIndicator from '../../../loading-indicator.react'; | ||||
import Input from '../../input.react'; | import Input from '../../input.react'; | ||||
import ColorSelector from '../color-selector.react'; | import ColorSelector from '../color-selector.react'; | ||||
import SubmitSection from './submit-section.react'; | |||||
import css from './thread-settings-general-tab.css'; | import css from './thread-settings-general-tab.css'; | ||||
type ThreadSettingsGeneralTabProps = { | type ThreadSettingsGeneralTabProps = { | ||||
+threadSettingsOperationInProgress: boolean, | +threadSettingsOperationInProgress: boolean, | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
+threadNamePlaceholder: string, | +threadNamePlaceholder: string, | ||||
+queuedChanges: ThreadChanges, | +queuedChanges: ThreadChanges, | ||||
+setQueuedChanges: SetState<ThreadChanges>, | +setQueuedChanges: SetState<ThreadChanges>, | ||||
+setErrorMessage: SetState<string>, | +setErrorMessage: SetState<?string>, | ||||
+errorMessage?: ?string, | |||||
}; | }; | ||||
function ThreadSettingsGeneralTab( | function ThreadSettingsGeneralTab( | ||||
props: ThreadSettingsGeneralTabProps, | props: ThreadSettingsGeneralTabProps, | ||||
): React.Node { | ): React.Node { | ||||
const { | const { | ||||
threadSettingsOperationInProgress, | threadSettingsOperationInProgress, | ||||
threadInfo, | threadInfo, | ||||
threadNamePlaceholder, | threadNamePlaceholder, | ||||
queuedChanges, | queuedChanges, | ||||
setQueuedChanges, | setQueuedChanges, | ||||
setErrorMessage, | setErrorMessage, | ||||
errorMessage, | |||||
} = props; | } = props; | ||||
const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
const callChangeThreadSettings = useServerCall(changeThreadSettings); | const callChangeThreadSettings = useServerCall(changeThreadSettings); | ||||
const nameInputRef = React.useRef(); | const nameInputRef = React.useRef(); | ||||
React.useEffect(() => { | React.useEffect(() => { | ||||
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines | ): React.Node { | ||||
const saveButtonContent = React.useMemo(() => { | const saveButtonContent = React.useMemo(() => { | ||||
if (threadSettingsOperationInProgress) { | if (threadSettingsOperationInProgress) { | ||||
return <LoadingIndicator status="loading" />; | return <LoadingIndicator status="loading" />; | ||||
} | } | ||||
return 'Save'; | return 'Save'; | ||||
}, [threadSettingsOperationInProgress]); | }, [threadSettingsOperationInProgress]); | ||||
return ( | return ( | ||||
<form method="POST"> | <form method="POST" className={css.container}> | ||||
<div> | <div> | ||||
<div className={css.form_title}>Chat name</div> | <div className={css.form_title}>Chat name</div> | ||||
<div className={css.form_content}> | <div className={css.form_content}> | ||||
<Input | <Input | ||||
type="text" | type="text" | ||||
value={firstLine(queuedChanges.name ?? threadInfo.name)} | value={firstLine(queuedChanges.name ?? threadInfo.name)} | ||||
placeholder={threadNamePlaceholder} | placeholder={threadNamePlaceholder} | ||||
onChange={onChangeName} | onChange={onChangeName} | ||||
Show All 20 Lines | <form method="POST" className={css.container}> | ||||
<div className={css.form_title}>Color</div> | <div className={css.form_title}>Color</div> | ||||
<div className={css.colorSelectorContainer}> | <div className={css.colorSelectorContainer}> | ||||
<ColorSelector | <ColorSelector | ||||
currentColor={queuedChanges.color ?? threadInfo.color} | currentColor={queuedChanges.color ?? threadInfo.color} | ||||
onColorSelection={onChangeColor} | onColorSelection={onChangeColor} | ||||
/> | /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<Button | <SubmitSection | ||||
type="submit" | errorMessage={errorMessage} | ||||
onClick={onSubmit} | onClick={onSubmit} | ||||
disabled={threadSettingsOperationInProgress || !changeQueued} | disabled={threadSettingsOperationInProgress || !changeQueued} | ||||
className={css.save_button} | |||||
> | > | ||||
{saveButtonContent} | {saveButtonContent} | ||||
</Button> | </SubmitSection> | ||||
</form> | </form> | ||||
); | ); | ||||
} | } | ||||
export default ThreadSettingsGeneralTab; | export default ThreadSettingsGeneralTab; |