feat: allow to close current chat

distributeaid · Jan 22, 2020 · 711065f · 711065f
1 parent 74a557e
commit 711065f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 18 deletions.
diff --git a/src/Chat/Twilio/ChannelView.tsx b/src/Chat/Twilio/ChannelView.tsx
@@ -194,13 +194,15 @@ export const ChannelView = ({
 		})
 	})
 
+	const [initialLoad, setInitialLoad] = useState<boolean>(true)
 	const loadOlderMessages = (channel: Channel, scrollToBeginning = true) => {
 		if (scrollToBeginning) {
 			setScrollTo('beginning')
 		}
 		channel
 			.getMessages(10, messages.lastIndex && messages.lastIndex - 1)
 			.then(messages => {
+				setInitialLoad(false)
 				updateMessages(prevMessages => ({
 					...prevMessages,
 					messages: [
@@ -212,6 +214,7 @@ export const ChannelView = ({
 			})
 			.catch(err => {
 				console.error(err)
+				setInitialLoad(false)
 			})
 	}
 
@@ -252,24 +255,39 @@ export const ChannelView = ({
 				<Title>
 					Chat: <strong>#{selectedChannel}</strong>
 				</Title>
-				{!isMinimized && (
-					<MinimizeButton
-						onClick={() => {
-							memoMinimized(true)
-						}}
-					>
-						_
-					</MinimizeButton>
-				)}
-				{isMinimized && (
-					<MinimizeButton
-						onClick={() => {
-							memoMinimized(false)
-						}}
-					>
-						+
-					</MinimizeButton>
-				)}
+				<span>
+					{joinedChannels.length > 1 && (
+						<MinimizeButton
+							onClick={e => {
+								e.stopPropagation()
+								onSwitchChannel(
+									joinedChannels.find(c => c !== selectedChannel) as string,
+								)
+								onCloseChannel(selectedChannel)
+							}}
+						>
+							X
+						</MinimizeButton>
+					)}
+					{!isMinimized && (
+						<MinimizeButton
+							onClick={() => {
+								memoMinimized(true)
+							}}
+						>
+							_
+						</MinimizeButton>
+					)}
+					{isMinimized && (
+						<MinimizeButton
+							onClick={() => {
+								memoMinimized(false)
+							}}
+						>
+							+
+						</MinimizeButton>
+					)}
+				</span>
 			</Header>
 			{!isMinimized && (
 				<>
@@ -282,6 +300,14 @@ export const ChannelView = ({
 									Load older messages
 								</TextButton>
 							)}
+							{initialLoad && (
+								<StatusItem
+									status={{
+										message: 'Loading messages...',
+										timestamp: new Date(),
+									}}
+								/>
+							)}
 							{messages.messages.map(m =>
 								'status' in m ? (
 									<StatusItem key={m.sid} status={m.status} />

diff --git a/src/Chat/components/ChannelView.ts b/src/Chat/components/ChannelView.ts
@@ -50,11 +50,13 @@ export const MinimizeButton = styled(Button)`
 	${Header} & {
 		color: inherit;
 	}
+	cursor: pointer;
 `
 
 export const SendButton = styled(Button)`
 	background-color: #fff;
 	margin-left: 0.5rem;
+	cursor: pointer;
 `
 
 export const MessageInput = styled.input`