Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dapp to classbased #1326

Merged
merged 3 commits into from
Dec 1, 2023
Merged

Dapp to classbased #1326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6682424
ui web input & chat box added
pritipsingh Dec 1, 2023
8c10f85
components added
pritipsingh Dec 1, 2023
09eddb0
ui changes
pritipsingh Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
"@mui/lab": "^5.0.0-alpha.72",
"@mui/material": "^5.5.0",
"@pushprotocol/ledgerlive": "latest",
"@pushprotocol/restapi": "1.4.38",
"@pushprotocol/restapi": "1.4.44",
"@pushprotocol/socket": "0.5.3",
"@pushprotocol/uiweb": "1.1.19",
"@pushprotocol/uiweb": "1.1.20",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/dom": "^9.0.1",
"@testing-library/jest-dom": "^4.2.4",
Expand Down
131 changes: 56 additions & 75 deletions src/components/chat/w2wChat/chatBox/ChatBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import ScrollToBottom from 'react-scroll-to-bottom';
import { useClickAway } from 'react-use';
import styled, { useTheme } from 'styled-components';
import { produce } from 'immer';

import { ChatViewList, MessageInput } 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';
Expand Down Expand Up @@ -99,7 +99,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
const groupInfoRef = useRef<HTMLInputElement>(null);
const { connectedUser, setConnectedUser, createUserIfNecessary } = useContext(ChatUserContext);
const { videoObject } = useContext(VideoCallContext);

const [chatId, setChatId] = useState<string>("");
const listInnerRef = useRef<HTMLDivElement>(null);
const topRef = useRef<HTMLDivElement>(null);
const bottomRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -127,6 +127,11 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
const navigate = useNavigate();
const location = useLocation();

useEffect(() => {
let chatid= currentChat?.did || currentChat?.groupInformation?.chatId
setChatId(chatid);
},[currentChat, account])

useEffect(() => {
// if ens is resolved, update browse to match ens name is it doesn't match
if (ensName && location.pathname !== `/chat/${ensName}`) {
Expand Down Expand Up @@ -443,6 +448,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
}
};

console.log("current id", chatId)
const handleCloseSuccessSnackbar = (event?: React.SyntheticEvent | Event, reason?: string): void => {
if (reason === 'clickaway') {
return;
Expand Down Expand Up @@ -645,87 +651,35 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
>
{/* style={{overflow: "scroll",backgroundColor:'red'}} */}
{/* <CustomScrollContent initialScrollBehavior="smooth"> */}
{Loading ? (
<SpinnerWrapper>
<LoaderSpinner
type={LOADER_TYPE.SEAMLESS}
spinnerSize={40}
/>
</SpinnerWrapper>
) : (

<>
{chatsLoading && (
<SpinnerWrapper height="35px">
<LoaderSpinner
type={LOADER_TYPE.SEAMLESS}
spinnerSize={40}
/>
</SpinnerWrapper>
)}

<div ref={topRef}>
{messages?.map((msg, i) => {
//const isLast = i === messages.length - 1
//const noTail = !isLast && messages[i + 1]?.fromDID === msg.fromDID

showTime = false;
if (i >= 0) {
const duration = new Date(messages[i]?.timestamp);
const dateString = duration.toDateString();
if (dateString !== time || i === 0) {
showTime = true;
time = dateString;
}
}
return (
<div key={i}>
{!showTime ? null : (
<HeaderMessage
index={i}
time={time}
isGroup={isGroup}
/>
)}
<Chats
msg={
(!currentChat?.groupInformation?.isPublic && checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser, isGroup }))
? ''
: msg
}
caip10={walletToCAIP10({ account: account! })}
messageBeingSent={messageBeingSent}
isGroup={isGroup}
/>

</div>
);
})}

<ChatContainer>
<ChatViewList chatId={chatId} limit={10}/>

</ChatContainer>
</div>
<HeaderMessage
messages={messages}
isGroup={isGroup}
/>

{checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser, isGroup }) && (
<Chats
msg={{
...messages[0],
messageContent: getIntentMessage(currentChat, isGroup),
messageType: 'Intent',
}}
caip10={walletToCAIP10({ account: account! })}
messageBeingSent={messageBeingSent}
ApproveIntent={() => ApproveIntent('Approved')}
isGroup={isGroup}
/>
<ChatContainer>
<ChatViewList chatId={chatId}/>
</ChatContainer>

)}
</>
)}

{/* </CustomScrollContent> */}
<div ref={bottomRef}></div>
</MessageContainer>


</MessageContainer>
{checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser,isGroup }) ? null : (
<>
<Typebar
<MessageInputWrapper >
<MessageInput chatId={chatId} />
</MessageInputWrapper>
{/* <Typebar
messageBeingSent={messageBeingSent}
setNewMessage={setNewMessage}
newMessage={newMessage}
Expand All @@ -736,7 +690,8 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
setSnackbarText={setSnackbarText}
isJoinGroup = {(!checkIfChatExist({ chats:inbox, currentChat, connectedUser,isGroup }) && isGroup)}
approveIntent= {ApproveIntent}
/>
/> */}

</>
)}
</>
Expand All @@ -750,7 +705,33 @@ const SpinnerWrapper = styled.div`
margin-top: 20px;
height: ${(props) => props.height || '90px'};
`;
const MessageInputWrapper = styled.div`

width: 98%;
display: flex;
justify-content: center;
position: absolute;
bottom: 8px;

z-index: 99;


`
const ChatContainer = styled.div`
overflow-x : hidden;
align-items: unset;
display: block;
justify-content: flex-start;
position: absolute;
top: 20px;
bottom: 0px;
left: 0;
right: 0;
margin: 0;
width: 100%;


`
const MessageContainer = styled(ItemVV2)`
align-items: unset;
display: block;
Expand Down
2 changes: 2 additions & 0 deletions src/contexts/ChatUserContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const ChatUserContextProvider = (props) => {
const [connectedUser, setConnectedUser] = useState<ConnectedUser>();
const { account, provider } = useAccount();



//this blocked loading is a modal which shows during the PGP keys generation time
const [blockedLoading, setBlockedLoading] = useState<BlockedLoadingI>({
enabled: false,
Expand Down
20 changes: 10 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5442,9 +5442,9 @@ __metadata:
"@mui/lab": ^5.0.0-alpha.72
"@mui/material": ^5.5.0
"@pushprotocol/ledgerlive": latest
"@pushprotocol/restapi": 1.4.38
"@pushprotocol/restapi": 1.4.44
"@pushprotocol/socket": 0.5.3
"@pushprotocol/uiweb": 1.1.19
"@pushprotocol/uiweb": 1.1.20
"@reduxjs/toolkit": ^1.7.1
"@testing-library/dom": ^6.12.2
"@testing-library/jest-dom": ^4.2.4
Expand Down Expand Up @@ -5643,9 +5643,9 @@ __metadata:
languageName: node
linkType: hard

"@pushprotocol/restapi@npm:1.4.38":
version: 1.4.38
resolution: "@pushprotocol/restapi@npm:1.4.38"
"@pushprotocol/restapi@npm:1.4.44":
version: 1.4.44
resolution: "@pushprotocol/restapi@npm:1.4.44"
dependencies:
"@ambire/signature-validator": ^1.3.1
"@metamask/eth-sig-util": ^5.0.2
Expand All @@ -5666,7 +5666,7 @@ __metadata:
viem: ^1.3.0
peerDependencies:
ethers: ^5.6.8
checksum: 25a2159b4bc27a71b3cd9021e2fdeef9b4a61c9302e1357b3ff45e3f3e6615390bd22aa942a2a0cefc6835925a728c1bb7f3eaafd012cf664041b83766cd5ee5
checksum: fd20dd507d4b0c0022b3f39a310e8b52f2493040d54b44c5988df152ca4966a5624313990a73766aae19020fe01e104427230af24e8f4bfe7fb961cd10367e6d
languageName: node
linkType: hard

Expand Down Expand Up @@ -5706,9 +5706,9 @@ __metadata:
languageName: node
linkType: hard

"@pushprotocol/uiweb@npm:1.1.19":
version: 1.1.19
resolution: "@pushprotocol/uiweb@npm:1.1.19"
"@pushprotocol/uiweb@npm:1.1.20":
version: 1.1.20
resolution: "@pushprotocol/uiweb@npm:1.1.20"
dependencies:
"@livekit/components-react": ^1.2.2
"@livekit/components-styles": ^1.0.6
Expand Down Expand Up @@ -5740,7 +5740,7 @@ __metadata:
axios: ^0.27.2
react: ">=16.8.0"
styled-components: ^6.0.8
checksum: 1180e8a37039825f5bfd518b1e7675b3bc2a95b7a511cddb22d0390cf742cfb7589dc28b59fc82bfc8f43ed1da9324374653275d0a5f88452b8b2fa83dd607df
checksum: 4df4b3661b5ec5ef92e319dbd9620c47793d729ee2161e4afbebc704d68f45b07bdf0a6fbc8e935e3def0e009a297168e79fc9bf2073284289f8cd7c9362f70c
languageName: node
linkType: hard

Expand Down