Add a waiting button to team->create channel (#14632)

keybase · Nov 9, 2018 · 6ed078d · 6ed078d
1 parent c64f8b7
commit 6ed078d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 58 deletions.
diff --git a/shared/actions/teams.js b/shared/actions/teams.js
@@ -904,6 +904,7 @@ const _saveChannelMembership = function(action: TeamsGen.SaveChannelMembershipPa
 function* _createChannel(action: TeamsGen.CreateChannelPayload) {
   const {channelname, description, teamname, rootPath, sourceSubPath, destSubPath} = action.payload
   yield Saga.put(TeamsGen.createSetTeamCreationError({error: ''}))
+  yield Saga.put(WaitingGen.createIncrementWaiting({key: Constants.createChannelWaitingKey(teamname)}))
   try {
     const result = yield Saga.call(RPCChatTypes.localNewConversationLocalRpcPromise, {
       identifyBehavior: RPCTypes.tlfKeysTLFIdentifyBehavior.chatGui,
@@ -953,6 +954,8 @@ function* _createChannel(action: TeamsGen.CreateChannelPayload) {
     )
   } catch (error) {
     yield Saga.put(TeamsGen.createSetChannelCreationError({error: error.desc}))
+  } finally {
+    yield Saga.put(WaitingGen.createDecrementWaiting({key: Constants.createChannelWaitingKey(teamname)}))
   }
 }
 

diff --git a/shared/chat/create-channel/index.desktop.js b/shared/chat/create-channel/index.desktop.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import {Avatar, Box, Button, Icon, Input, PopupDialog, Text, ButtonBar} from '../../common-adapters'
+import * as Constants from '../../constants/teams'
+import * as Kb from '../../common-adapters'
 import {globalStyles, globalColors, globalMargins, platformStyles} from '../../styles'
 import type {Props} from './index.types'
 
@@ -10,63 +11,68 @@ const errorHeader = (errorText: string) => {
   }
 
   return (
-    <Box style={{..._boxStyle, backgroundColor: globalColors.red}}>
-      <Text
+    <Kb.Box style={{..._boxStyle, backgroundColor: globalColors.red}}>
+      <Kb.Text
         style={{margin: globalMargins.tiny, textAlign: 'center', width: '100%'}}
         type="BodySemibold"
         backgroundMode={'HighRisk'}
       >
         {errorText}
-      </Text>
-    </Box>
+      </Kb.Text>
+    </Kb.Box>
   )
 }
 
 const CreateChannel = (props: Props) => (
-  <PopupDialog onClose={props.onClose} styleCover={_styleCover} styleContainer={_styleContainer}>
-    <Box style={{..._boxStyle, paddingTop: globalMargins.medium}}>
-      <Avatar isTeam={true} teamname={props.teamname} size={32} />
-      <Text type="BodySmallSemibold" style={{marginTop: globalMargins.xtiny}}>
+  <Kb.PopupDialog onClose={props.onClose} styleCover={_styleCover} styleContainer={_styleContainer}>
+    <Kb.Box style={{..._boxStyle, paddingTop: globalMargins.medium}}>
+      <Kb.Avatar isTeam={true} teamname={props.teamname} size={32} />
+      <Kb.Text type="BodySmallSemibold" style={{marginTop: globalMargins.xtiny}}>
         {props.teamname}
-      </Text>
-      <Text type="Header" style={{marginBottom: globalMargins.tiny, marginTop: globalMargins.tiny}}>
+      </Kb.Text>
+      <Kb.Text type="Header" style={{marginBottom: globalMargins.tiny, marginTop: globalMargins.tiny}}>
         New chat channel
-      </Text>
-    </Box>
+      </Kb.Text>
+    </Kb.Box>
     {errorHeader(props.errorText)}
-    <Box style={_boxStyle}>
-      <Box style={_backStyle} onClick={props.onBack}>
-        <Icon style={_backIcon} type="iconfont-arrow-left" />
-        <Text type="BodyPrimaryLink" onClick={props.onBack}>
+    <Kb.Box style={_boxStyle}>
+      <Kb.Box style={_backStyle} onClick={props.onBack}>
+        <Kb.Icon style={_backIcon} type="iconfont-arrow-left" />
+        <Kb.Text type="BodyPrimaryLink" onClick={props.onBack}>
           Back
-        </Text>
-      </Box>
-      <Box style={_inputStyle}>
-        <Input
+        </Kb.Text>
+      </Kb.Box>
+      <Kb.Box style={_inputStyle}>
+        <Kb.Input
           autoFocus={true}
           style={{minWidth: 450}}
           hintText="Channel name"
           value={props.channelname}
           onEnterKeyDown={props.onSubmit}
           onChangeText={channelname => props.onChannelnameChange(channelname)}
         />
-      </Box>
-      <Box style={_inputStyle}>
-        <Input
+      </Kb.Box>
+      <Kb.Box style={_inputStyle}>
+        <Kb.Input
           autoFocus={false}
           style={{minWidth: 450}}
           hintText="Description or topic (optional)"
           value={props.description}
           onEnterKeyDown={props.onSubmit}
           onChangeText={description => props.onDescriptionChange(description)}
         />
-      </Box>
-      <ButtonBar>
-        <Button type="Secondary" onClick={props.onClose} label="Cancel" />
-        <Button type="Primary" onClick={props.onSubmit} label="Save" />
-      </ButtonBar>
-    </Box>
-  </PopupDialog>
+      </Kb.Box>
+      <Kb.ButtonBar>
+        <Kb.Button type="Secondary" onClick={props.onClose} label="Cancel" />
+        <Kb.WaitingButton
+          waitingKey={Constants.createChannelWaitingKey(props.teamname)}
+          type="Primary"
+          onClick={props.onSubmit}
+          label="Save"
+        />
+      </Kb.ButtonBar>
+    </Kb.Box>
+  </Kb.PopupDialog>
 )
 
 const _inputStyle = {

diff --git a/shared/chat/create-channel/index.native.js b/shared/chat/create-channel/index.native.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import {Avatar, Box, Button, HeaderHoc, Input, Text, ButtonBar} from '../../common-adapters'
+import * as Constants from '../../constants/teams'
+import * as Kb from '../../common-adapters'
 import {globalStyles, globalColors, globalMargins} from '../../styles'
 import {renameProp, compose, withProps} from 'recompose'
 import type {Props} from './index.types'
@@ -11,62 +12,67 @@ const errorHeader = (errorText: string) => {
   }
 
   return (
-    <Box
+    <Kb.Box
       style={{
         backgroundColor: globalColors.red,
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <Text
+      <Kb.Text
         style={{margin: globalMargins.tiny, textAlign: 'center', width: '100%'}}
         type="BodySemibold"
         backgroundMode={'HighRisk'}
       >
         {errorText}
-      </Text>
-    </Box>
+      </Kb.Text>
+    </Kb.Box>
   )
 }
 
 const CreateChannel = (props: Props) => (
-  <Box>
+  <Kb.Box>
     {errorHeader(props.errorText)}
-    <Box style={_boxStyle}>
-      <Box style={_inputStyle}>
-        <Input
+    <Kb.Box style={_boxStyle}>
+      <Kb.Box style={_inputStyle}>
+        <Kb.Input
           autoFocus={true}
           hintText="Channel name"
           value={props.channelname}
           onChangeText={channelname => props.onChannelnameChange(channelname)}
         />
-      </Box>
-      <Box style={_inputStyle}>
-        <Input
+      </Kb.Box>
+      <Kb.Box style={_inputStyle}>
+        <Kb.Input
           autoCorrect={true}
           autoFocus={false}
           hintText="Description or topic (optional)"
           value={props.description}
           onChangeText={description => props.onDescriptionChange(description)}
         />
-      </Box>
-      <ButtonBar>
-        <Button type="Primary" onClick={props.onSubmit} label="Save" />
-      </ButtonBar>
-    </Box>
-  </Box>
+      </Kb.Box>
+      <Kb.ButtonBar>
+        <Kb.WaitingButton
+          waitingKey={Constants.createChannelWaitingKey(props.teamname)}
+          type="Primary"
+          onClick={props.onSubmit}
+          label="Save"
+        />
+      </Kb.ButtonBar>
+    </Kb.Box>
+  </Kb.Box>
 )
 
 const Header = (props: Props) => (
-  <Box style={_headerStyle}>
-    <Box style={{...globalStyles.flexBoxRow, alignItems: 'center', height: 15}}>
-      <Avatar isTeam={true} teamname={props.teamname} size={16} />
-      <Text type="BodySmallSemibold" style={{marginLeft: globalMargins.xtiny}} lineClamp={1}>
+  <Kb.Box style={_headerStyle}>
+    <Kb.Box style={{...globalStyles.flexBoxRow, alignItems: 'center', height: 15}}>
+      <Kb.Avatar isTeam={true} teamname={props.teamname} size={16} />
+      <Kb.Text type="BodySmallSemibold" style={{marginLeft: globalMargins.xtiny}} lineClamp={1}>
         {props.teamname}
-      </Text>
-    </Box>
-    <Text type="BodyBig">New channel</Text>
-  </Box>
+      </Kb.Text>
+    </Kb.Box>
+    <Kb.Text type="BodyBig">New channel</Kb.Text>
+  </Kb.Box>
 )
 
 const _headerStyle = {
@@ -88,5 +94,5 @@ export default compose(
   withProps(props => ({
     customComponent: <Header {...props} />,
   })),
-  HeaderHoc
+  Kb.HeaderHoc
 )(CreateChannel)
diff --git a/shared/constants/teams.js b/shared/constants/teams.js
@@ -21,6 +21,7 @@ export const rpcMemberStatusToStatus = invert(RPCTypes.teamsTeamMemberStatus)
 export const teamWaitingKey = (teamname: Types.Teamname) => `team:${teamname}`
 export const addToTeamByEmailWaitingKey = (teamname: Types.Teamname) => `teamAddByEmail:${teamname}`
 export const getChannelsWaitingKey = (teamname: Types.Teamname) => `getChannels:${teamname}`
+export const createChannelWaitingKey = (teamname: Types.Teamname) => `createChannel:${teamname}`
 export const settingsWaitingKey = (teamname: Types.Teamname) => `teamSettings:${teamname}`
 export const retentionWaitingKey = (teamname: Types.Teamname) => `teamRetention:${teamname}`
 export const addMemberWaitingKey = (teamname: Types.Teamname, username: string) =>