From 639d3a70cebf706b3062da01ec832ed78afd976d Mon Sep 17 00:00:00 2001 From: jamessspanggg Date: Wed, 19 Aug 2020 16:28:16 +0800 Subject: [PATCH 1/7] Shift suggest date button to bottom --- .../buttons/ChatSuggestDatesButton.js | 1 + src/components/chat/modules/ChatDialog.js | 3 + .../chat/modules/ChatDialogFloatingButtons.js | 76 +++++++++++++++++++ .../chat/modules/ChatDialogMessages.js | 12 +++ .../chat/modules/ChatDialogUserRow.js | 45 ----------- 5 files changed, 92 insertions(+), 45 deletions(-) create mode 100644 src/components/chat/modules/ChatDialogFloatingButtons.js diff --git a/src/components/buttons/ChatSuggestDatesButton.js b/src/components/buttons/ChatSuggestDatesButton.js index 6c555524..19444fcc 100644 --- a/src/components/buttons/ChatSuggestDatesButton.js +++ b/src/components/buttons/ChatSuggestDatesButton.js @@ -2,6 +2,7 @@ import styled from 'styled-components'; import { colors } from '../../../utils/constants/colors'; const ChatSuggestDatesButton = styled.button` + border-radius: 20px; background: ${colors.chatSuggestDateButtonBackground}; :active { diff --git a/src/components/chat/modules/ChatDialog.js b/src/components/chat/modules/ChatDialog.js index f97f7808..c5e86a9e 100644 --- a/src/components/chat/modules/ChatDialog.js +++ b/src/components/chat/modules/ChatDialog.js @@ -121,9 +121,12 @@ const ChatDialogContent = ({ )} { + const [showSuggestDateModal, setShowSuggestDateModal] = useState(false); + + const handleShowSuggestDateModal = () => setShowSuggestDateModal(true); + const handleCloseSuggestDateModal = () => setShowSuggestDateModal(false); + + const router = useRouter(); + + const sendFirstCalendarMessage = async (calendarRawString) => { + const method = + postType === donations ? 'sendInitialCalendarMessageForDonation' : 'sendInitialCalendarMessageForWish'; + const [rawChat, rawFirstMessage] = await api.chats[method](postId, calendarRawString); + const chatId = rawChat.data().chatId; + setIsNewChat(false); + setSelectedChatId(chatId); + router.push(`/chat`, `/chat?chatId=${chatId}`, { shallow: true }); + }; + + const handleSendCalendarMessage = (selectedDates) => { + if (selectedDates.length > 0) { + const message = selectedDates + .map((selectedDate) => getFormattedDateRange(selectedDate.startDate, selectedDate.endDate)) + .join(','); // dates are separated by comma + if (isNewChat) { + sendFirstCalendarMessage(message) + .then(() => {}) + .catch((err) => console.error(err)); + } else { + api.chats.sendCalendarMessage(selectedChatId, message).catch((err) => console.error(err)); + } + } + handleCloseSuggestDateModal(); + }; + + return ( + + + + + + + ); +}; + +export default ChatDialogFloatingButtons; diff --git a/src/components/chat/modules/ChatDialogMessages.js b/src/components/chat/modules/ChatDialogMessages.js index 47c6cd0e..111035ff 100644 --- a/src/components/chat/modules/ChatDialogMessages.js +++ b/src/components/chat/modules/ChatDialogMessages.js @@ -10,6 +10,7 @@ import { wishes } from '../../../../utils/constants/postType'; import { CHAT_MESSAGES_BATCH_SIZE } from '../../../../utils/api/constants'; import { LeftMessageSection, RightMessageSection } from './ChatMessageSection'; import useWindowDimensions from '../../../../utils/hooks/useWindowDimensions'; +import ChatDialogFloatingButtons from './ChatDialogFloatingButtons'; /** * To be changed if any of the heights change, the extra "+1 or +2" for the top/bottom borders @@ -45,9 +46,12 @@ const MessageContainer = styled.div` */ const ChatDialogMessages = ({ postType, + postId, loggedInUser, selectedChatId, + setSelectedChatId, isNewChat, + setIsNewChat, navBarHeight, inputRowHeight, isShowPostDetails, @@ -224,6 +228,14 @@ const ChatDialogMessages = ({ /> ); })} +
diff --git a/src/components/chat/modules/ChatDialogUserRow.js b/src/components/chat/modules/ChatDialogUserRow.js index 4e01c7df..a216c6b7 100644 --- a/src/components/chat/modules/ChatDialogUserRow.js +++ b/src/components/chat/modules/ChatDialogUserRow.js @@ -1,21 +1,14 @@ import React, { useState, useEffect } from 'react'; import { Button, Stack } from '@kiwicom/orbit-components/lib'; -import CalendarModal from '../../calendar/modules/CalendarModal'; import AppreciationMessageModal from '../../modal/AppreciationMessageModal'; import ConfirmCompletionModal from '../../modal/ConfirmCompletionModal'; import ProfileAvatar from '../../imageContainers/ProfileAvatar'; import BlackText from '../../text/BlackText'; -import SuggestDateButton from '../../../components/buttons/ChatSuggestDatesButton'; import CompleteButton from '../../../components/buttons/ChatCompleteButton'; import styled from 'styled-components'; -import { colors } from '../../../../utils/constants/colors'; import { CardSection } from '@kiwicom/orbit-components/lib/Card'; import { PENDING, COMPLETED } from '../../../../utils/constants/postStatus'; import StatusTag from '../../../components/tags/StatusTag'; -import { donations } from '../../../../utils/constants/postType'; -import { useRouter } from 'next/router'; -import api from '../../../../utils/api'; -import { getFormattedDateRange } from '../../../../utils/api/time'; const AvatarContainer = styled.div` float: left; @@ -55,18 +48,14 @@ const ChatDialogUserRow = ({ postOwnerId, postEnquirerId, }) => { - const [showSuggestDateModal, setShowSuggestDateModal] = useState(false); const [showAppreciationMessageModal, setShowAppreciationMessageModal] = useState(false); const [showConfirmCompletionModal, setShowConfirmCompletionModal] = useState(false); const [status, setStatus] = useState(postStatus); - const router = useRouter(); const handleCloseAppreciationMessageModal = () => setShowAppreciationMessageModal(false); const handleShowAppreciationMessageModal = () => setShowAppreciationMessageModal(true); const handleCloseConfirmCompletionModal = () => setShowConfirmCompletionModal(false); const handleSetStatusToComplete = () => setStatus(COMPLETED); - const handleShowSuggestDateModal = () => setShowSuggestDateModal(true); - const handleCloseSuggestDateModal = () => setShowSuggestDateModal(false); const handleCompletePost = () => { setShowConfirmCompletionModal(true); @@ -77,32 +66,6 @@ const ChatDialogUserRow = ({ setStatus(postStatus); }, [postStatus]); - const handleSendCalendarMessage = (selectedDates) => { - if (selectedDates.length > 0) { - const message = selectedDates - .map((selectedDate) => getFormattedDateRange(selectedDate.startDate, selectedDate.endDate)) - .join(','); // dates are separated by comma - if (isNewChat) { - sendFirstCalendarMessage(message) - .then(() => {}) - .catch((err) => console.error(err)); - } else { - api.chats.sendCalendarMessage(selectedChatId, message).catch((err) => console.error(err)); - } - } - handleCloseSuggestDateModal(); - }; - - const sendFirstCalendarMessage = async (calendarRawString) => { - const method = - postType === donations ? 'sendInitialCalendarMessageForDonation' : 'sendInitialCalendarMessageForWish'; - const [rawChat, rawFirstMessage] = await api.chats[method](postId, calendarRawString); - const chatId = rawChat.data().chatId; - setIsNewChat(false); - setSelectedChatId(chatId); - router.push(`/chat`, `/chat?chatId=${chatId}`, { shallow: true }); - }; - const profileHref = `/profile/${oppositeUser.id || oppositeUser.userId}`; return ( @@ -117,14 +80,6 @@ const ChatDialogUserRow = ({ - - {status === PENDING ? ( @@ -68,8 +63,8 @@ const ChatDialogFloatingButtons = ({ onHide={handleCloseSuggestDateModal} sendCalendarMessage={handleSendCalendarMessage} /> - - + + ); }; From da333b587dcfd580ded7a3e36f20b3fe8b5c5853 Mon Sep 17 00:00:00 2001 From: jamessspanggg Date: Thu, 20 Aug 2020 00:27:32 +0800 Subject: [PATCH 4/7] Adjust height of user row in mobile view --- src/components/chat/modules/ChatDialogMessages.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/modules/ChatDialogMessages.js b/src/components/chat/modules/ChatDialogMessages.js index 111035ff..a986daac 100644 --- a/src/components/chat/modules/ChatDialogMessages.js +++ b/src/components/chat/modules/ChatDialogMessages.js @@ -24,7 +24,7 @@ const desktopHeights = { const mobileHeights = { chatDialogBackButton: 44, - chatDialogUserRow: 108 + 1, + chatDialogUserRow: 72 + 1, chatDialogSeePostRow: 74 + 1, chatDialogMessagesPadding: 32 + 2, }; From f3405b444eedc1ab7b8a7e4d3811bdf0dceac59c Mon Sep 17 00:00:00 2001 From: jamessspanggg Date: Sun, 30 Aug 2020 23:19:41 +0800 Subject: [PATCH 5/7] Use context for floating buttons --- .../chat/modules/ChatDialogFloatingButtons.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/chat/modules/ChatDialogFloatingButtons.js b/src/components/chat/modules/ChatDialogFloatingButtons.js index 7c714032..ae80f088 100644 --- a/src/components/chat/modules/ChatDialogFloatingButtons.js +++ b/src/components/chat/modules/ChatDialogFloatingButtons.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import { Button, Stack } from '@kiwicom/orbit-components/lib'; import CalendarModal from '../../calendar/modules/CalendarModal'; import SuggestDateButton from '../../../components/buttons/ChatSuggestDatesButton'; @@ -7,18 +7,17 @@ import styled from 'styled-components'; import { getFormattedDateRange } from '../../../../utils/api/time'; import { donations } from '../../../../utils/constants/postType'; import { useRouter } from 'next/router'; +import ChatContext from '../context'; +import { setSelectedChatId, setIsNewChat } from '../actions'; +import { getSelectedChatId, getIsNewChat } from '../selectors'; const ButtonsContainer = styled.div` overflow-x: scroll; `; -const ChatDialogFloatingButtons = ({ - postType, - postId, - isNewChat, - setIsNewChat, - selectedChatId, - setSelectedChatId, -}) => { +const ChatDialogFloatingButtons = ({ postType, postId }) => { + const { state, dispatch } = useContext(ChatContext); + const isNewChat = getIsNewChat(state); + const selectedChatId = getSelectedChatId(state); const [showSuggestDateModal, setShowSuggestDateModal] = useState(false); const handleShowSuggestDateModal = () => setShowSuggestDateModal(true); @@ -31,8 +30,8 @@ const ChatDialogFloatingButtons = ({ postType === donations ? 'sendInitialCalendarMessageForDonation' : 'sendInitialCalendarMessageForWish'; const [rawChat, rawFirstMessage] = await api.chats[method](postId, calendarRawString); const chatId = rawChat.data().chatId; - setIsNewChat(false); - setSelectedChatId(chatId); + dispatch(setIsNewChat(false)); + dispatch(setSelectedChatId(chatId)); router.push(`/chat`, `/chat?chatId=${chatId}`, { shallow: true }); }; From 0d0bb69895161f8247bf1850a4753e9616877374 Mon Sep 17 00:00:00 2001 From: jamessspanggg Date: Sun, 30 Aug 2020 23:25:36 +0800 Subject: [PATCH 6/7] Remove unnecessary passing of props --- src/components/chat/modules/ChatDialogMessages.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/chat/modules/ChatDialogMessages.js b/src/components/chat/modules/ChatDialogMessages.js index 3faf5055..66b3f6c5 100644 --- a/src/components/chat/modules/ChatDialogMessages.js +++ b/src/components/chat/modules/ChatDialogMessages.js @@ -229,10 +229,6 @@ const ChatDialogMessages = ({ postType, postId, inputRowHeight, isShowPostDetail dispatch(setIsNewChat(isNewChat))} - selectedChatId={selectedChatId} - setSelectedChatId={(selectedChatId) => dispatch(setSelectedChatId(selectedChatId))} />
From e16e1aa79dc6a4a9d2250302acd65065c16323f0 Mon Sep 17 00:00:00 2001 From: jamessspanggg Date: Sun, 30 Aug 2020 23:30:43 +0800 Subject: [PATCH 7/7] Run prettier --- src/components/chat/modules/ChatDialogMessages.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/chat/modules/ChatDialogMessages.js b/src/components/chat/modules/ChatDialogMessages.js index 66b3f6c5..54d9c890 100644 --- a/src/components/chat/modules/ChatDialogMessages.js +++ b/src/components/chat/modules/ChatDialogMessages.js @@ -226,10 +226,7 @@ const ChatDialogMessages = ({ postType, postId, inputRowHeight, isShowPostDetail /> ); })} - +