From 6fb53273deb569f45b68444fcbaf938ead4d390b Mon Sep 17 00:00:00 2001 From: Sakul Budhathoki Date: Sun, 16 Jul 2023 21:04:50 -0600 Subject: [PATCH] ui fixes --- packages/components/friends/FriendsList.tsx | 19 ++- packages/components/requests/Request.tsx | 6 - .../screens/Message/components/ChatItem.tsx | 13 +- .../Message/components/ChatSection.tsx | 124 +++++++++--------- .../Message/components/CheckboxGroup.tsx | 8 +- .../Message/components/CreateGroup.tsx | 7 +- packages/weshnet/client/messageCreators.ts | 48 ------- packages/weshnet/client/messageHelpers.ts | 34 +++++ 8 files changed, 118 insertions(+), 141 deletions(-) delete mode 100644 packages/weshnet/client/messageCreators.ts create mode 100644 packages/weshnet/client/messageHelpers.ts diff --git a/packages/components/friends/FriendsList.tsx b/packages/components/friends/FriendsList.tsx index 6440058b1d..1756552a5f 100644 --- a/packages/components/friends/FriendsList.tsx +++ b/packages/components/friends/FriendsList.tsx @@ -10,6 +10,10 @@ import { useNSUserInfo } from "../../hooks/useNSUserInfo"; import { neutral22, neutralA3, secondaryColor } from "../../utils/style/colors"; import { fontSemibold13, fontSemibold11 } from "../../utils/style/fonts"; import { Conversation } from "../../utils/types/message"; +import { + getConversationAvatar, + getConversationName, +} from "../../weshnet/client/messageHelpers"; import { BrandText } from "../BrandText"; import FlexRow from "../FlexRow"; import { SVG } from "../SVG"; @@ -22,17 +26,16 @@ type FriendListProps = { const isOnline = true; const FriendList = ({ item, handleChatPress }: FriendListProps) => { - const { metadata } = useNSUserInfo( - item.members?.[0]?.tokenId || "sakul.tori" - ); - const onlineStatusBadgeColor = isOnline ? "green" : "yellow"; return ( - + { - {metadata.public_name || "Anon"} - - - - {isOnline ? "Online" : "Offline"} + {getConversationName(item)} diff --git a/packages/components/requests/Request.tsx b/packages/components/requests/Request.tsx index 4637de631b..2ea770ac23 100644 --- a/packages/components/requests/Request.tsx +++ b/packages/components/requests/Request.tsx @@ -51,12 +51,10 @@ const RequestList = ({ isOnline, data }: Props) => { const { setToastSuccess, setToastError } = useFeedbacks(); const [addLoading, setAddLoading] = useState(false); const [rejectLoading, setRejectLoading] = useState(false); - const { metadata } = useNSUserInfo(data.tokenId || "sakul.tori"); const onlineStatusBadgeColor = isOnline ? "green" : "yellow"; const handleAddFriend = async () => { - console.log(metadata); setAddLoading(true); try { const contactPk = bytesFromString(data?.contactId); @@ -114,10 +112,6 @@ const RequestList = ({ isOnline, data }: Props) => { {data?.name || "Anon"} - - - {isOnline ? "Online" : "Offline"} - diff --git a/packages/screens/Message/components/ChatItem.tsx b/packages/screens/Message/components/ChatItem.tsx index a1efc9bf9e..98204f4b7b 100644 --- a/packages/screens/Message/components/ChatItem.tsx +++ b/packages/screens/Message/components/ChatItem.tsx @@ -4,11 +4,9 @@ import { Platform, TouchableOpacity, View } from "react-native"; import { Avatar } from "react-native-paper"; import { useSelector } from "react-redux"; -import avatarPNG from "../../../../assets/icons/ava.png"; import { BrandText } from "../../../components/BrandText"; import FlexRow from "../../../components/FlexRow"; import { SpacerColumn, SpacerRow } from "../../../components/spacer"; -import { useNSUserInfo } from "../../../hooks/useNSUserInfo"; import { selectLastMessageByGroupPk } from "../../../store/slices/message"; import { useAppNavigation } from "../../../utils/navigation"; import { @@ -53,10 +51,7 @@ export const ChatItem = ({ data, onPress, isActive }: ChatItemProps) => { - + @@ -82,12 +77,6 @@ export const ChatItem = ({ data, onPress, isActive }: ChatItemProps) => { {moment(lastMessage?.timestamp).fromNow()} - {/* - */} )} diff --git a/packages/screens/Message/components/ChatSection.tsx b/packages/screens/Message/components/ChatSection.tsx index d06c3b162f..b5d3d6f499 100644 --- a/packages/screens/Message/components/ChatSection.tsx +++ b/packages/screens/Message/components/ChatSection.tsx @@ -42,6 +42,7 @@ import { } from "../../../utils/types/message"; import { GroupInfo_Reply } from "../../../weshnet"; import { weshClient } from "../../../weshnet/client"; +import { getNewConversationText } from "../../../weshnet/client/messageHelpers"; import { sendMessage } from "../../../weshnet/client/services"; import { subscribeMessages, @@ -239,8 +240,7 @@ export const ChatSection = ({ conversation }: ChatSectionProps) => { }} > - You created contact; Your contact request hasn't been accepted by{" "} - {conversation?.members?.[0]?.name || "Anon"}{" "} + {getNewConversationText(conversation)} )} @@ -343,69 +343,71 @@ export const ChatSection = ({ conversation }: ChatSectionProps) => { - - }> - {({ closeOpenedDropdown }) => ( - - )} - + {!!messages.length && ( + + }> + {({ closeOpenedDropdown }) => ( + + )} + - - - {!!replyTo?.message && ( - + + {!!replyTo?.message && ( + + + Reply to: {replyTo?.message} + + + )} + - - Reply to: {replyTo?.message} - - - )} - { - if (message.length) { - handleSend(); + height={Math.max(40, inputHeight)} + name="message" + placeHolder={ + replyTo?.message ? "Add reply message" : "Add a Message" } - }} - onContentSizeChange={(event) => { - setInputHeight(event.nativeEvent.contentSize.height); - }} - > - - - - + value={message} + onChangeText={setMessage} + label="" + textInputStyle={{ + height: Math.max(20, inputHeight - 20), + }} + onSubmitEditing={() => { + if (message.length) { + handleSend(); + } + }} + onContentSizeChange={(event) => { + setInputHeight(event.nativeEvent.contentSize.height); + }} + > + + + + + - + )} {!!file && ( = ({ - + + {item.name} diff --git a/packages/screens/Message/components/CreateGroup.tsx b/packages/screens/Message/components/CreateGroup.tsx index 559d530d45..0fbef0be7e 100644 --- a/packages/screens/Message/components/CreateGroup.tsx +++ b/packages/screens/Message/components/CreateGroup.tsx @@ -38,6 +38,10 @@ import { MultiMemberGroupCreate_Reply, } from "../../../weshnet"; import { weshClient, weshConfig } from "../../../weshnet/client"; +import { + getConversationAvatar, + getConversationName, +} from "../../../weshnet/client/messageHelpers"; import { activateGroup, sendMessage } from "../../../weshnet/client/services"; import { encodeJSON, stringFromBytes } from "../../../weshnet/client/utils"; @@ -64,7 +68,8 @@ export const CreateGroup = ({ onClose }: CreateGroupProps) => { const contactPk = item?.members?.[0].id; return { - name: "Anon", + name: getConversationName(item), + avatar: getConversationAvatar(item), contactPk, checked: checkedContacts.includes(contactPk), }; diff --git a/packages/weshnet/client/messageCreators.ts b/packages/weshnet/client/messageCreators.ts deleted file mode 100644 index afd7ae797f..0000000000 --- a/packages/weshnet/client/messageCreators.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Message } from "../../utils/types/message"; - -export const contactSent = (): Message => { - return {}; -}; - -export const contactAccepted = (): Message => { - return { - type: "accept-contact", - }; -}; - -export const contactRejected: Message = () => { - return {}; -}; - -export const groupCreated: Message = () => { - return {}; -}; - -export const groupJoinByMember: Message = () => { - return {}; -}; - -export const groupLeaveByMember: Message = () => { - return {}; -}; - -export const getLineTextByMessageType = ({ message }: { message: Message }) => { - switch (message.type) { - case "contact-request": - return `Anon has sent a contact`; - } -}; - -await sendMessage({ - groupPk: group.groupPk, - message: { - type: "group-create", - payload: { - message: "", - files: [], - metadata: { - groupName, - }, - }, - }, -}); diff --git a/packages/weshnet/client/messageHelpers.ts b/packages/weshnet/client/messageHelpers.ts new file mode 100644 index 0000000000..a97ab9a687 --- /dev/null +++ b/packages/weshnet/client/messageHelpers.ts @@ -0,0 +1,34 @@ +import { Conversation, Message } from "../../utils/types/message"; + +export const getLineTextByMessageType = ({ message }: { message: Message }) => { + switch (message.type) { + case "contact-request": + return `Anon has sent a contact`; + } +}; + +export const getNewConversationText = (conversation: Conversation) => { + if (conversation.type === "contact") { + return `Your contact request with ${ + conversation?.members?.[0]?.name || "Anon" + } is still pending and has not yet been accepted.`; + } else { + return "Congratulations on creating this group! Currently, there are no members who have joined yet."; + } +}; + +export const getConversationName = (conversation: Conversation) => { + if (conversation.type === "contact") { + return conversation?.members?.[0]?.name || "Anon"; + } else { + return "Group"; + } +}; + +export const getConversationAvatar = (conversation: Conversation) => { + if (conversation.type === "contact") { + return conversation?.members?.[0]?.avatar || ""; + } else { + return ""; + } +};