Skip to content

Commit

Permalink
feat: changed all the old apis in chat to class component ones
Browse files Browse the repository at this point in the history
  • Loading branch information
@KlausMikhaelson
KlausMikhaelson committed Nov 16, 2023
1 parent 1464b78 commit 3af1ca5
Show file tree
Hide file tree
Showing 18 changed files with 320 additions and 297 deletions.
2 changes: 1 addition & 1 deletion .husky/pre-commit
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
echo "\nRunning GIT hooks..."
yarn cleanbuild
yarn nx affected --target=lint
#yarn nx affected --target=test
yarn nx affected --target=test
6 changes: 3 additions & 3 deletions packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ const ChatViewComponentTest = () => {
return (
<div>
<h2>Chat UI Test page</h2>
<CreateGroupModal onClose={()=>{console.log('in close')}} />
{/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
<ChatViewComponentCard>
<CreateGroupModal onClose={()=>{console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
{/* <CreateGroupModal onClose={()=>{console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}

<ChatView
onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")}
chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68'
chatId='a5dad31b20c9aaf761221b57f6f0ab96b03a456525159378388e896475b1f943'
limit={10}
isConnected={true}
groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
Expand Down
13 changes: 7 additions & 6 deletions packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@ import {
pCAIP10ToWallet,
shortenText,
} from '../../../helpers';
import { formatTime } from '../../../helpers/timestamp';

const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
const { account } = useContext(ChatDataContext);
const theme = useContext(ThemeContext);
return (
<>
{chat.fromCAIP10.split(':')[1] !== account && (
{(chat.fromDID).split(':')[1] !== account && (
<Span
theme={theme}
alignSelf="start"
Expand All @@ -53,7 +54,7 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
const [pfp, setPfp] = useState<string>('');
const getUserPfp = async () => {
const pfp = await getPfp({
account: chat.fromCAIP10.split(':')[1],
account: chat.fromDID.split(':')[1],
env: env,
});
if (pfp) {
Expand All @@ -62,10 +63,10 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
};
useEffect(() => {
getUserPfp();
}, [account, chat.fromCAIP10]);
}, [account, chat.fromDID]);
return (
<Section justifyContent="start" alignItems="start">
{chat.fromCAIP10.split(':')[1] !== account && (
{(chat.fromDID || chat.fromDID).split(':')[1] !== account && (
<Section alignItems="start">
{pfp && (
<Image
Expand Down Expand Up @@ -123,7 +124,7 @@ const MessageCard = ({
isGroup: boolean;
}) => {
const theme = useContext(ThemeContext);
const time = moment(chat.timestamp).format('hh:mm a');
const time = formatTime(chat.timestamp)
return (
<MessageWrapper chat={chat} isGroup={isGroup} maxWidth="70%">
<Section
Expand Down Expand Up @@ -347,7 +348,7 @@ export const ChatViewBubble = ({ decryptedMessagePayload }: { decryptedMessagePa
});
const [isGroup, setIsGroup] = useState<boolean>(false);
useEffect(() => {
if (decryptedMessagePayload.toDID.split(':')[0] === 'eip155') {
if ((decryptedMessagePayload.toDID).split(':')[0] === 'eip155') {
if (isGroup) {
setIsGroup(false);
}
Expand Down
10 changes: 2 additions & 8 deletions packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const ApproveRequestBubble = ({
chatId,
setChatFeed,
}: IApproveRequestBubbleProps) => {
const { pgpPrivateKey } = useChatData();
const { pgpPrivateKey, alias } = useChatData();

const ApproveRequestText = {
GROUP: `You were invited to the group ${chatFeed?.groupInformation?.groupName}. Please accept to continue messaging in this group.`,
Expand All @@ -39,13 +39,7 @@ export const ApproveRequestBubble = ({

const handleApproveChatRequest = async () => {
try {
if (!pgpPrivateKey) {
return;
}

const response = await approveChatRequest({
chatId,
});
const response = await alias.chat.accept(chatId);
if (response) {
const updatedChatFeed = { ...(chatFeed as IFeeds) };
updatedChatFeed.intent = response;
Expand Down
150 changes: 71 additions & 79 deletions packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import useGetGroup from '../../../hooks/chat/useGetGroup';
import useGetChatProfile from '../../../hooks/useGetChatProfile';
import useFetchChat from '../../../hooks/chat/useFetchChat';
import { ApproveRequestBubble } from './ApproveRequestBubble';
import { formatTime } from '../../../helpers/timestamp';

/**
* @interface IThemeProps
Expand All @@ -51,7 +52,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
options: IChatViewListProps
) => {
const { chatId, limit = chatLimit, chatFilterList = [] } = options || {};
const { pgpPrivateKey, account, connectedProfile, setConnectedProfile } =
const { pgpPrivateKey, account, connectedProfile, setConnectedProfile, signer, alias, setAlias } =
useChatData();
const [chatFeed, setChatFeed] = useState<IFeeds>({} as IFeeds);
const [chatStatusText, setChatStatusText] = useState<string>('');
Expand All @@ -76,15 +77,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
setChatStatusText('');
}, [chatId, account, env]);

useEffect(() => {
(async () => {
if (!connectedProfile && account) {
const user = await fetchChatProfile({ profileId: account!, env });
if (user) setConnectedProfile(user);
}
})();
}, [account]);

useEffect(() => {
setMessages(undefined);
setConversationHash(undefined);
Expand All @@ -93,54 +85,60 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
//need to make a common method for fetching chatFeed to ruse in messageInput
useEffect(() => {
(async () => {
if (!account && !env) return;
const chat = await fetchChat({ chatId });
if (Object.keys(chat || {}).length) {
setConversationHash(chat?.threadhash as string);
setChatFeed(chat as IFeeds);
}
else {
let newChatFeed;
let group;
const result = await getNewChatUser({
searchText: chatId,
fetchChatProfile,
env,
});
if (result) {
newChatFeed = getDefaultFeedObject({ user: result });
if (alias) {
// console.log('chatss');
// console.log(account, env, 'chatss')
const chat = await fetchChat();
// console.log(chat, 'chatss calling main', alias)
if (chat) {
setConversationHash(chat?.threadhash as string);
setChatFeed(chat as IFeeds);
} else {
group = await getGroup({ searchText: chatId });
if (group) {
newChatFeed = getDefaultFeedObject({ groupInformation: group });
console.log('chatss calling elsez')
let newChatFeed;
let group;
const result = await getNewChatUser({
searchText: chatId,
fetchChatProfile,
env,
});
if (result) {
newChatFeed = getDefaultFeedObject({ user: result });
} else {
group = await getGroup({ searchText: chatId });
if (group) {
newChatFeed = getDefaultFeedObject({ groupInformation: group });
}
}
}
if (newChatFeed) {
if (!newChatFeed?.groupInformation) {
setChatStatusText(ChatStatus.FIRST_CHAT);
if (newChatFeed) {
if (!newChatFeed?.groupInformation) {
setChatStatusText(ChatStatus.FIRST_CHAT);
}
setConversationHash(newChatFeed.threadhash as string);
setChatFeed(newChatFeed);
} else {
setChatStatusText(ChatStatus.INVALID_CHAT);
}
setConversationHash(newChatFeed.threadhash as string);
setChatFeed(newChatFeed);
} else {
setChatStatusText(ChatStatus.INVALID_CHAT);
}
setLoading(false);
}
setLoading(false);
})();
}, [chatId, pgpPrivateKey, account, env]);
}, [chatId, pgpPrivateKey, account, env, alias]);

//moniters socket changes
useEffect(() => {
console.log('messagesSinceLastConnection', account, messagesSinceLastConnection, checkIfSameChat(messagesSinceLastConnection, account!, chatId))
if (checkIfSameChat(messagesSinceLastConnection, account!, chatId)) {
const updatedChatFeed = chatFeed;
updatedChatFeed.msg = messagesSinceLastConnection;
if (!Object.keys(messages || {}).length) {
setFilteredMessages([
messagesSinceLastConnection,
] as IMessageIPFSWithCID[]);

setConversationHash(messagesSinceLastConnection.cid);
} else {
console.log('messagesSinceLastConnection in group')
const newChatViewList = appendUniqueMessages(
messages as Messagetype,
[messagesSinceLastConnection],
Expand Down Expand Up @@ -168,12 +166,12 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
}, [groupInformationSinceLastConnection]);

useEffect(() => {
if (conversationHash) {
// if (conversationHash) {
(async function () {
await getMessagesCall();
})();
}
}, [conversationHash, pgpPrivateKey, account, env,chatFeed]);
// }
}, [conversationHash, pgpPrivateKey, account, env, chatFeed, alias]);

useEffect(() => {
scrollToBottom();
Expand All @@ -191,10 +189,11 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
}
}, [messages]);

useEffect(()=>{
console.log('chatHistory')

if(chatFeed && !chatFeed?.groupInformation?.isPublic && account)
{
useEffect(() => {

if (chatFeed && !chatFeed?.groupInformation?.isPublic && account) {
chatFeed?.groupInformation?.members.forEach((acc) => {
if (
acc.wallet.toLowerCase() === walletToPCAIP10(account!).toLowerCase()
Expand All @@ -203,17 +202,17 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
}
});
}
},[account,chatFeed])
}, [account, chatFeed])

//methods
const scrollToBottom = () => {
setTimeout(()=>{
setTimeout(() => {
if (listInnerRef.current) {
listInnerRef.current.scrollTop = listInnerRef.current.scrollHeight +100;
listInnerRef.current.scrollTop = listInnerRef.current.scrollHeight + 100;

}
},0)
}, 0)

};

const onScroll = async () => {
Expand All @@ -233,23 +232,17 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
};

const getMessagesCall = async () => {
let threadHash = null;
if (!messages) {
threadHash = conversationHash;
} else {
threadHash = messages?.lastThreadHash;
}

if (
threadHash &&
((account && pgpPrivateKey&& chatFeed && !chatFeed?.groupInformation) ||
(chatFeed && chatFeed?.groupInformation))
) {

const chatHistory = await historyMessages({
limit: limit,
threadHash,
});
// if (!messages) {
// threadHash = conversationHash;
// } else {
// threadHash = messages?.lastThreadHash;
// }

if (alias && chatId) {
console.log('chatHistory')

const chatHistory = await historyMessages({chatId});
console.log(chatHistory, 'chatHistory')
if (chatHistory?.length) {
if (Object.keys(messages || {}) && messages?.messages.length) {
const newChatViewList = appendUniqueMessages(
Expand Down Expand Up @@ -279,7 +272,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
}
};

const ifBlurChat = () =>{
const ifBlurChat = () => {
return !!(
chatFeed &&
chatFeed?.groupInformation &&
Expand All @@ -293,7 +286,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
dateNum: string;
};
const renderDate = ({ chat, dateNum }: RenderDataType) => {
const timestampDate = dateToFromNowDaily(chat.timestamp as number);
const timestampDate = formatTime(chat.timestamp);
dates.add(dateNum);
return (
<Span
Expand Down Expand Up @@ -328,9 +321,9 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
{!loading && (
<>
{chatFeed &&
(chatFeed.publicKey ||
(chatFeed?.groupInformation &&
!chatFeed?.groupInformation?.isPublic)) ? (
(chatFeed.publicKey ||
(chatFeed?.groupInformation &&
!chatFeed?.groupInformation?.isPublic)) ? (
<EncryptionMessage id={ENCRYPTION_KEYS.ENCRYPTED} />
) : (
<EncryptionMessage
Expand Down Expand Up @@ -365,17 +358,17 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
{messages?.messages &&
messages?.messages?.map(
(chat: IMessageIPFS, index: number) => {
const dateNum = moment(chat.timestamp).format('L');
const dateNum = formatTime(chat.timestamp);
const position =
pCAIP10ToWallet(chat.fromDID).toLowerCase() !==
account?.toLowerCase()
account?.toLowerCase()
? 0
: 1;
return (
<>
{dates.has(dateNum)
? null
: renderDate({ chat, dateNum })}
: dateNum ? renderDate({ chat, dateNum }) : null}
<Section
justifyContent={position ? 'end' : 'start'}
margin="7px"
Expand All @@ -390,7 +383,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
{chatFeed &&
account &&
checkIfIntent({
chat: chatFeed as IFeeds,
chat: chatFeed as any,
account: account!,
}) && (
<ApproveRequestBubble
Expand All @@ -408,7 +401,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
};

//styles
const ChatViewListCard = styled(Section)<IThemeProps>`
const ChatViewListCard = styled(Section) <IThemeProps>`
&::-webkit-scrollbar-thumb {
background: ${(props) => props.theme.scrollbarColor};
border-radius: 10px;
Expand All @@ -425,4 +418,3 @@ const ChatViewListCard = styled(Section)<IThemeProps>`
overscroll-behavior: contain;
scroll-behavior: smooth;
`;

Loading

0 comments on commit 3af1ca5

Please sign in to comment.