Changeset View
Changeset View
Standalone View
Standalone View
web/modals/threads/settings/thread-settings-privacy-tab.react.js
Show All 12 Lines | import { | ||||
type ThreadChanges, | type ThreadChanges, | ||||
threadTypes, | threadTypes, | ||||
} 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 Button from '../../../components/button.react'; | |||||
import EnumSettingsOption from '../../../components/enum-settings-option.react'; | import EnumSettingsOption from '../../../components/enum-settings-option.react'; | ||||
import SWMansionIcon from '../../../SWMansionIcon.react'; | import SWMansionIcon from '../../../SWMansionIcon.react'; | ||||
import { useModalContext } from '../../modal-provider.react'; | import { useModalContext } from '../../modal-provider.react'; | ||||
import SubmitSection from './submit-section.react'; | |||||
import css from './thread-settings-privacy-tab.css'; | import css from './thread-settings-privacy-tab.css'; | ||||
const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes; | const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes; | ||||
const openStatements = [ | const openStatements = [ | ||||
{ | { | ||||
statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD], | statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD], | ||||
isStatementValid: true, | isStatementValid: true, | ||||
Show All 9 Lines | const secretStatements = [ | ||||
}, | }, | ||||
]; | ]; | ||||
type ThreadSettingsPrivacyTabProps = { | type ThreadSettingsPrivacyTabProps = { | ||||
+threadSettingsOperationInProgress: boolean, | +threadSettingsOperationInProgress: boolean, | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
+queuedChanges: ThreadChanges, | +queuedChanges: ThreadChanges, | ||||
+setQueuedChanges: SetState<ThreadChanges>, | +setQueuedChanges: SetState<ThreadChanges>, | ||||
+setErrorMessage: SetState<string>, | +setErrorMessage: SetState<?string>, | ||||
+errorMessage?: ?string, | |||||
}; | }; | ||||
function ThreadSettingsPrivacyTab( | function ThreadSettingsPrivacyTab( | ||||
props: ThreadSettingsPrivacyTabProps, | props: ThreadSettingsPrivacyTabProps, | ||||
): React.Node { | ): React.Node { | ||||
const { | const { | ||||
threadSettingsOperationInProgress, | threadSettingsOperationInProgress, | ||||
threadInfo, | threadInfo, | ||||
queuedChanges, | queuedChanges, | ||||
setQueuedChanges, | setQueuedChanges, | ||||
setErrorMessage, | setErrorMessage, | ||||
errorMessage, | |||||
} = props; | } = props; | ||||
const modalContext = useModalContext(); | const modalContext = useModalContext(); | ||||
const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
const callChangeThreadSettings = useServerCall(changeThreadSettings); | const callChangeThreadSettings = useServerCall(changeThreadSettings); | ||||
const changeQueued: boolean = React.useMemo( | const changeQueued: boolean = React.useMemo( | ||||
() => Object.values(queuedChanges).some(v => v !== null && v !== undefined), | () => Object.values(queuedChanges).some(v => v !== null && v !== undefined), | ||||
▲ Show 20 Lines • Show All 64 Lines • ▼ Show 20 Lines | ): React.Node { | ||||
); | ); | ||||
const lockIcon = React.useMemo( | const lockIcon = React.useMemo( | ||||
() => <SWMansionIcon icon="lock-on" size={24} />, | () => <SWMansionIcon icon="lock-on" size={24} />, | ||||
[], | [], | ||||
); | ); | ||||
return ( | return ( | ||||
<form method="POST"> | <form method="POST" className={css.container}> | ||||
<div className={css.form_title}>Chat type</div> | <div className={css.form_title}>Chat type</div> | ||||
<div className={css.enum_container}> | <div className={css.enum_container}> | ||||
<EnumSettingsOption | <EnumSettingsOption | ||||
selected={ | selected={ | ||||
(queuedChanges.type ?? threadInfo.type) === COMMUNITY_OPEN_SUBTHREAD | (queuedChanges.type ?? threadInfo.type) === COMMUNITY_OPEN_SUBTHREAD | ||||
} | } | ||||
onSelect={onOpenSelected} | onSelect={onOpenSelected} | ||||
icon={globeIcon} | icon={globeIcon} | ||||
title="Open" | title="Open" | ||||
statements={openStatements} | statements={openStatements} | ||||
/> | /> | ||||
<EnumSettingsOption | <EnumSettingsOption | ||||
selected={ | selected={ | ||||
(queuedChanges.type ?? threadInfo.type) === | (queuedChanges.type ?? threadInfo.type) === | ||||
COMMUNITY_SECRET_SUBTHREAD | COMMUNITY_SECRET_SUBTHREAD | ||||
} | } | ||||
onSelect={onSecretSelected} | onSelect={onSecretSelected} | ||||
icon={lockIcon} | icon={lockIcon} | ||||
title="Secret" | title="Secret" | ||||
statements={secretStatements} | statements={secretStatements} | ||||
/> | /> | ||||
</div> | </div> | ||||
<Button | <SubmitSection | ||||
type="submit" | |||||
onClick={onSubmit} | onClick={onSubmit} | ||||
disabled={threadSettingsOperationInProgress || !changeQueued} | disabled={threadSettingsOperationInProgress || !changeQueued} | ||||
className={css.save_button} | errorMessage={errorMessage} | ||||
> | > | ||||
Save | Save | ||||
</Button> | </SubmitSection> | ||||
</form> | </form> | ||||
); | ); | ||||
} | } | ||||
export default ThreadSettingsPrivacyTab; | export default ThreadSettingsPrivacyTab; |