Changeset View
Changeset View
Standalone View
Standalone View
web/modals/threads/create/steps/subchannel-settings.react.js
- This file was added.
// @flow | |||||
atul: Elsewhere in the codebase we have a newline after the `// @flow` annotation | |||||
import * as React from 'react'; | |||||
import { threadTypeDescriptions } from 'lib/shared/thread-utils'; | |||||
import { threadTypes } from 'lib/types/thread-types'; | |||||
import EnumSettingsOption from '../../../../components/enum-settings-option.react'; | |||||
import SWMansionIcon from '../../../../SWMansionIcon.react'; | |||||
import Input from '../../../input.react'; | |||||
import css from './subchannel-settings.css'; | |||||
const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes; | |||||
type Visibilities = 'open' | 'closed'; | |||||
atulUnsubmitted Done Inline ActionsShould this be plural or just Visibility? atul: Should this be plural or just `Visibility`? | |||||
atulUnsubmitted Done Inline ActionsYou refer to the same type as VisibilityType in compose-subchannel-modal.react, would be good to match that for consistency atul: You refer to the same type as `VisibilityType` in `compose-subchannel-modal.react`, would be… | |||||
tomekUnsubmitted Done Inline ActionsOr even better, define it in one place and use in the other tomek: Or even better, define it in one place and use in the other | |||||
type Props = { | |||||
+channelName: string, | |||||
+onChangeChannelName: (SyntheticEvent<HTMLInputElement>) => void, | |||||
+visibilityType: Visibilities, | |||||
+onOpenTypeSelect: () => void, | |||||
+onClosedTypeSelect: () => void, | |||||
+announcement: boolean, | |||||
+onAnnouncementSelected: () => void, | |||||
}; | |||||
atulUnsubmitted Done Inline ActionsTypically we define the Props type for a component right before the component is defined. Eg in this case we'll probably want to move Props to around line 49. atul: Typically we define the `Props` type for a component right before the component is defined. Eg… | |||||
const openStatements = [ | |||||
{ | |||||
statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD], | |||||
isStatementValid: true, | |||||
styleStatementBasedOnValidity: false, | |||||
}, | |||||
]; | |||||
const secretStatements = [ | |||||
{ | |||||
statement: threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD], | |||||
isStatementValid: true, | |||||
styleStatementBasedOnValidity: false, | |||||
}, | |||||
]; | |||||
const announcementStatements = [ | |||||
{ | |||||
statement: 'Admins can create Announcement channels.', | |||||
isStatementValid: true, | |||||
styleStatementBasedOnValidity: false, | |||||
}, | |||||
]; | |||||
function SubchannelSettings(props: Props): React.Node { | |||||
const { | |||||
channelName, | |||||
onChangeChannelName, | |||||
visibilityType, | |||||
onOpenTypeSelect, | |||||
onClosedTypeSelect, | |||||
announcement, | |||||
onAnnouncementSelected, | |||||
} = props; | |||||
const globeIcon = React.useMemo( | |||||
() => <SWMansionIcon icon="globe-1" size={24} />, | |||||
[], | |||||
); | |||||
const lockIcon = React.useMemo( | |||||
() => <SWMansionIcon icon="lock-on" size={24} />, | |||||
[], | |||||
); | |||||
const flagIcon = React.useMemo( | |||||
() => <SWMansionIcon icon="flag-2" size={24} />, | |||||
atulUnsubmitted Done Inline ActionsI believe we can use the megaphone icon in the CommIcons component here instead atul: I believe we can use the `megaphone` icon in the `CommIcons` component here instead | |||||
[], | |||||
); | |||||
return ( | |||||
<> | |||||
<Input | |||||
type="text" | |||||
onChange={onChangeChannelName} | |||||
placeholder="Channel name" | |||||
value={channelName} | |||||
/> | |||||
<div className={css.wrapper}> | |||||
<div className={css.label}> Visibility </div> | |||||
tomekUnsubmitted Done Inline ActionsWhy do we have two empty spaces here? tomek: Why do we have two empty spaces here? | |||||
<EnumSettingsOption | |||||
title="Open" | |||||
statements={openStatements} | |||||
onSelect={onOpenTypeSelect} | |||||
selected={visibilityType === 'open'} | |||||
icon={globeIcon} | |||||
iconPosition="top" | |||||
/> | |||||
<EnumSettingsOption | |||||
title="Closed" | |||||
statements={secretStatements} | |||||
onSelect={onClosedTypeSelect} | |||||
selected={visibilityType === 'closed'} | |||||
icon={lockIcon} | |||||
iconPosition="top" | |||||
/> | |||||
</div> | |||||
<div className={css.wrapper}> | |||||
<div className={css.label}>Optional settings</div> | |||||
<EnumSettingsOption | |||||
title="Announcement" | |||||
statements={announcementStatements} | |||||
onSelect={onAnnouncementSelected} | |||||
selected={announcement} | |||||
icon={flagIcon} | |||||
iconPosition="top" | |||||
type="checkbox" | |||||
/> | |||||
</div> | |||||
</> | |||||
); | |||||
} | |||||
export default SubchannelSettings; |
Elsewhere in the codebase we have a newline after the // @flow annotation