Skip to content

Commit

Permalink
Added Recommended Chat feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Harsh Rajat authored and Harsh Rajat committed Feb 25, 2024
1 parent 00ebe51 commit 324dfc8
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 48 deletions.
74 changes: 74 additions & 0 deletions src/components/chat/recommended/Recommended.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
// React + Web3 Essentials
import React, { useState } from "react";

// External Packages
import { ChatPreview } from '@pushprotocol/uiweb';
import styled, { css, useTheme } from 'styled-components';

// Internal Compoonents
import { ItemVV2 } from 'components/reusables/SharedStylingV2';

// Internal Configs
import recommendedChatsList from 'config/RecommendedChatsList';

// Interface

// Constants

// Create Module
const Recommended = ({ bg, onChatSelected }) => {
// States
const [chatId, setChatId] = useState('');

const getChatParticipant = (chatParticipant) => {
let chatParticipantAlias;

for (let i = 0; i < recommendedChatsList.length; i++) {
if (recommendedChatsList[i].payload.chatParticipant === chatParticipant) {
chatParticipantAlias = recommendedChatsList[i].chatParticipantAlias;
}
}

return chatParticipantAlias;
}

// RENDER
return (
<Container
bg={bg}
>
{recommendedChatsList.map((item, index) => {
return (
<ChatPreview
key={index}
chatPreviewPayload={item.payload}
selected={item.payload.chatId === chatId ? true : false}
setSelected={(chatId, chatParticipant) => {const chatParticipantRemapped = getChatParticipant(chatParticipant); setChatId(chatId); onChatSelected(chatId, chatParticipantRemapped)}}
/>
)
})}
</Container>
);
}
export default Recommended;

// css styles
const Container = styled(ItemVV2)`
flex: initial;
flex-wrap: nowrap;
background: ${props => props.bg || 'transparent'};
border-radius: 24px;
padding: 10px;
&:before {
content: "RECOMMENDED";
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 0.05em;
color: #657795;
display: flex;
align-self: flex-start;
padding: 5px 10px 0px 10px;
}
`
34 changes: 15 additions & 19 deletions src/components/chat/w2wChat/chatBox/ChatBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,27 @@ import { useLocation, useNavigate } from 'react-router-dom';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import Snackbar from '@mui/material/Snackbar';
import * as PushAPI from '@pushprotocol/restapi';
import { ChatProfile, ChatViewList, MessageInput, UserProfile } from '@pushprotocol/uiweb';
import 'font-awesome/css/font-awesome.min.css';
import { produce } from 'immer';
import { CID } from 'ipfs-http-client';
import { BsDashLg } from 'react-icons/bs';
import { MdOutlineArrowBackIos } from 'react-icons/md';
import ScrollToBottom from 'react-scroll-to-bottom';
import { useClickAway } from 'react-use';
import styled, { useTheme } from 'styled-components';
import { produce } from 'immer';
import { ChatProfile, ChatViewList, MessageInput, UserProfile } from '@pushprotocol/uiweb';

// Internal Components
import { ReactComponent as Info } from 'assets/chat/group-chat/info.svg';
import { ReactComponent as InfoDark } from 'assets/chat/group-chat/infodark.svg';
import { ReactComponent as More } from 'assets/chat/group-chat/more.svg';
import { ReactComponent as MoreDark } from 'assets/chat/group-chat/moredark.svg';
import videoCallIcon from 'assets/icons/videoCallIcon.svg';
import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
import { Content } from 'components/SharedStyling';
import Recommended from 'components/chat/recommended/Recommended';
import { ButtonV2, ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
import Tooltip from 'components/reusables/tooltip/Tooltip';
import { Content } from 'components/SharedStyling';
import { checkIfChatExist } from 'helpers/w2w/user';
import { useAccount, useDeviceWidthCheck } from 'hooks';
import { useResolveWeb3Name } from 'hooks/useResolveWeb3Name';
Expand Down Expand Up @@ -155,20 +157,10 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
};

const InfoMessages = [
{ id: 1, content: 'You can send up to 10 group requests in alpha' },
// { id: 2, content: 'You can send a chat request to anyone including non-whitelisted users' },
// { id: 3, content: 'You can chat with non-whitelisted users but they cannot send a chat request to anyone.' },
{
id: 4,
content: 'You will have access to 1000 latest messages. Encryption is enabled after a chat request is accepted',
},
{ id: 5, content: 'Messages will only be encrypted if the receiver has encryption keys' },
// {
// id: 6,
// content:
// 'Due to certain limitations Push Chat does not support Ledger Wallet yet. We are working on adding support.',
// },
{ id: 7, content: 'Access to more chat requests and messages will be added in the near future' },
{ id: 1, content: 'Say Hi to your wallet friends!' },
{ id: 2, content: 'Or join groups of your favorite projects and chat with other members.' },
{ id: 3, content: 'Or create your own gated groups based on your requirements' },
{ id: 4, content: 'And experience the future of Web3 communication!' },
];

return (
Expand Down Expand Up @@ -214,6 +206,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
</Atag>

<ItemBody>
<Recommended bg="#e2078021" onChatSelected={(chatId, chatParticipant) => setChat(chatId, chatParticipant)} />
{InfoMessages.map((item) => (
<WelcomeContent key={item.id}>
<BsDashLg className="icon" />
Expand Down Expand Up @@ -410,7 +403,8 @@ const Container = styled(Content)`
`;

const WelcomeItem = styled(ItemVV2)`
width: 369px;
width: 420px;
min-width: 300px;
display: flex;
justify-content: center;
margin: auto auto;
Expand Down Expand Up @@ -438,6 +432,8 @@ const WelcomeContent = styled.div`
`;

const ItemBody = styled.div`
padding: 0px 20px;
@media (min-width: 768px) and (max-height: 1080px) {
overflow-y: scroll;
height: 300px;
Expand Down
46 changes: 46 additions & 0 deletions src/config/RecommendedChatsList.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
const RecommendedChatLists = [
{
"chatParticipantAlias": "eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666",
"payload": {
"chatId": "0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666",
"chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAMVJREFUSEtjvOC34D8DFNzaWghjMqh598PZyOJwQTwMXHqRxRlHnsWrmAXhQY0r9PJ4HOFSk77sx6qMGDXIGhlHnsW4EhcxqZdUNUSlalINJUb94LMY2dW4Cg1kV1OiHqUAocQgUh06cBYTk49xBS+uBEVM2U5UATIyLCbVl6QGO86gHr4Wk1pWk1qAIEcBRUXm0Ld4tADBlh9JzVpEFZnIqdrj4CaCjTpSExdyI3CHvR/cfJTaaeRZPNqFwdaZI7U1iSsUAZha8UXyHURfAAAAAElFTkSuQmCC",
"chatParticipant": "Push AI Bot",
"chatGroup": true,
"chatTimestamp": null,
"chatMsg": {
"messageType": "Text",
"messageContent": "Interact for Humor, Sassyness gauranteed!"
}
}
},
{
"chatParticipantAlias": "eip155:0x71Ffa5771E8019787190D098586EFe02026a3c8C",
"payload": {
"chatId": "0x71Ffa5771E8019787190D098586EFe02026a3c8C",
"chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAANNJREFUSEtjTPF78p8BC1gYvw2bMMli8Qu9sOphHNkWX3aqJhiU52StsaoxenyUoF7dfa1wNShBPTIsZl07C2uqRk6NyCkcVyrFpQZX7mAceRbjysfISZSSoMaV1HEWIMPXYuTEhSslI/uemFSNSz1ylKGk6pFhMam1EyVBjRwFJFeLI8NiXL7EVTgQU+AQFdTDy2LzCfHwahG5hYCryCTYzGBgYMAVQsgNDcaRZzGpBQgxQU1M2U5UqibVssFtMXK1iNw2xtV+JtX3uMxEqRZHhMUA5oH9q+BaxVUAAAAASUVORK5CYII=",
"chatParticipant": "Push Developer",
"chatGroup": true,
"chatTimestamp": null,
"chatMsg": {
"messageType": "Text",
"messageContent": "Ask any coding related questions here!"
}
}
},
{
"chatParticipantAlias": "eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666",
"payload": {
"chatId": "4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68",
"chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAxElEQVR4AcXBsU1DUQyG0S/WW4EGMQETMIRX8BxpXFpCLMACXuGOlC5DhNZKcaUnBP85l8+P7wcntBc7sZIzDDFDzBA7eNJeTLGSKVZyRnsxxUomQ8wQM8SO9uI/tReTIWaIGWJHrGRqL6b2Yrq/fbHzcruyEyuZDDFDzBA7eBIr2Wm/shMrOcMQM8QMsaO9mGIlf6m9mAwxQ8wQO2IlU3vxG+3FTqxkMsQMMUPs8l6vDzZiJVN7sRMrmdqLHUPMEDPEfgBK0S/MKDp40gAAAABJRU5ErkJggg==",
"chatParticipant": "eip155:0xf8250D363BD1F25f52F10C21188fe82c68C049c4",
"chatGroup": true,
"chatTimestamp": null,
"chatMsg": {
"messageType": "Text",
"messageContent": "Hi! Stay tuned, while BRB IRL dev tour has wrapped up, We still have BRB Online with challenges from global projects that still needs to be solved: https://push.org/brb"
}
}
}
]

export default RecommendedChatLists;
62 changes: 33 additions & 29 deletions src/sections/chat/ChatSidebarSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,35 @@ import { Web3Provider } from '@ethersproject/providers';
import React, { useContext, useEffect, useState } from 'react';

// External Packages
import { ethers } from 'ethers';
import { AiOutlineQrcode } from 'react-icons/ai';
import { useSelector } from 'react-redux';
import { useClickAway } from 'react-use';
import styled, { useTheme } from 'styled-components';
import { useSelector } from 'react-redux';
import { ethers } from 'ethers';

// Internal Compoonents
import { ChatPreview, ChatPreviewList, UserProfile } from '@pushprotocol/uiweb';
import { ReactComponent as CreateGroupIcon } from 'assets/chat/group-chat/creategroup.svg';
import { ReactComponent as CreateGroupFillIcon } from 'assets/chat/group-chat/creategroupfill.svg';
import NewTag from 'components/NewTag';
import Recommended from 'components/chat/recommended/Recommended';
import ProfileHeader from 'components/chat/w2wChat/profile';
import SearchBar from 'components/chat/w2wChat/searchBar/SearchBar';
import { ButtonV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
import { AppContext } from 'contexts/AppContext';
import StyleHelper from 'helpers/StyleHelper';
import { getIsNewTagVisible } from 'helpers/TimerHelper';
import { caip10ToWallet } from 'helpers/w2w';
import { fetchIntent } from 'helpers/w2w/user';
import { Context } from 'modules/chat/ChatModule';
import { Feeds } from 'types/chat';
import { caip10ToWallet } from 'helpers/w2w';
import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
import { AppContext } from 'contexts/AppContext';
import NewTag from 'components/NewTag';

// Internal Configs
import GLOBALS from 'config/Globals';
import { appConfig } from '../../config';
import { useAccount } from 'hooks';
import { GlobalContext } from 'contexts/GlobalContext';
import { useAccount } from 'hooks';
import { appConfig } from '../../config';


const createGroupOnMouseEnter = [
Expand Down Expand Up @@ -84,6 +85,9 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
const [showQR, setShowQR] = useState<boolean>(false);
const containerRef = React.useRef(null);

// set recommended chats
const [showRecommended, setShowRecommended] = useState(false);

const { userPushSDKInstance } = useSelector((state: any) => {
return state.user;
});
Expand Down Expand Up @@ -305,30 +309,30 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
style={{ display: activeTab == 0 ? 'flex' : 'none' }}
overflow="scroll"
>

{!(wallet?.accounts?.length > 0) && RecommendedChatData.map((recommendedChat) => (
<ChatPreview
chatPreviewPayload={
recommendedChat
}
badge={{ count: 2 }}
selected={false}
setSelected={console.log("Selected")}
// setSelected={setSelectedChatId(recommendedChat.chatId)}
{/* Only show recommended chats if there are no chats */}
{showRecommended &&
<Recommended
bg="#f5f5f5"
onChatSelected={async (chatid, chatParticipant) => { console.log(chatParticipant); setSelectedChatId(await formatChatParticipant(chatParticipant, chatid)) }}
/>
))}


}

{/* Only show recommended chats if there are no chats */}
{!showRecommended &&
<ChatPreviewList
listType="CHATS"
onChatSelected={async (chatid, chatParticipant) => { console.log(chatParticipant, chatid); setSelectedChatId(await formatChatParticipant(chatParticipant, chatid)) }}

<ChatPreviewList
listType="CHATS"
onChatSelected={async (chatid, chatParticipant) => { console.log(chatParticipant, chatid); setSelectedChatId(await formatChatParticipant(chatParticipant, chatid)) }}

onUnreadCountChange={(count) => {
// console.log('Count is: ', count);
}}
/>
onUnreadCountChange={(count) => {
// console.log('Count is: ', count);
}}
onPreload={(chats) => {
if (chats.length == 0) {
setShowRecommended(true);
}
}}
/>
}
</ItemVV2>

{/* Set Requests */}
Expand Down

0 comments on commit 324dfc8

Please sign in to comment.