Skip to content

Commit e170343

Browse files
AlexNi245AlexNi245
committed
add toggle and hide contacts
1 parent 90b81d3 commit e170343

File tree

12 files changed

+133
-374
lines changed

12 files changed

+133
-374
lines changed

‎packages/lib/storage/src/new/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export interface ConversationList extends Chunk {
7878

7979
export interface ConversationManifest extends Chunk {
8080
messageCounter: number;
81-
isHidden: false;
81+
isHidden: boolean;
8282
}
8383

8484
export interface MessageChunk extends Chunk {

‎packages/messenger-widget/src/components/AddConversation/AddConversation.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import './AddConversation.css';
33
import '../../styles/modal.css';
44
import closeIcon from '../../assets/images/cross.svg';
5-
import { INPUT_FIELD_CLASS, addContact, closeConversationModal } from './bl';
5+
import { INPUT_FIELD_CLASS, closeConversationModal } from './bl';
66
import { FormEvent, useContext, useState } from 'react';
77
import { GlobalContext } from '../../utils/context-utils';
88
import { showContactList } from '../../utils/common-utils';
@@ -58,7 +58,6 @@ export default function AddConversation() {
5858
}
5959
//Checks wether the name entered, is an tld name. If yes, the TLD is substituded with the alias name
6060
const aliasName = await resolveTLDtoAlias(name);
61-
console.log('lets gooooo');
6261
closeConversationModal(
6362
resetName,
6463
showErrorMessage,

‎packages/messenger-widget/src/components/AddConversation/bl.ts

-182
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,3 @@
1-
import { ethers } from 'ethers';
2-
import {
3-
AccountsType,
4-
Actions,
5-
CacheType,
6-
GlobalState,
7-
LeftViewSelected,
8-
ModalStateType,
9-
RightViewSelected,
10-
UiViewStateType,
11-
UserDbType,
12-
} from '../../utils/enum-type-utils';
13-
import {
14-
formatAddress,
15-
getAccountDisplayName,
16-
normalizeEnsName,
17-
} from '@dm3-org/dm3-lib-profile';
18-
import { closeLoader, startLoader } from '../Loader/Loader';
19-
import { ContactPreview, NewContact } from '../../interfaces/utils';
20-
import humanIcon from '../../assets/images/human.svg';
21-
221
// class for input field
232
export const INPUT_FIELD_CLASS =
243
'conversation-name font-weight-400 font-size-14 border-radius-6 w-100 line-height-24';
@@ -47,164 +26,3 @@ export const closeConversationModal = (
4726
resetName();
4827
resetInputFieldClass();
4928
};
50-
51-
// method to add new conversation in contacts
52-
export const addContact = async (
53-
state: GlobalState,
54-
name: string,
55-
ethAddress: string,
56-
dispatch: React.Dispatch<Actions>,
57-
resetName: Function,
58-
showErrorMessage: Function,
59-
resetInputFieldClass: Function,
60-
) => {
61-
// start loader
62-
dispatch({
63-
type: ModalStateType.LoaderContent,
64-
payload: 'Adding contact...',
65-
});
66-
67-
startLoader();
68-
69-
// check if its a valid address or a valid name
70-
const { normalizedAccountName, check } = await isEnsNameValid(name, state);
71-
72-
if (
73-
ethAddress &&
74-
name.split('.')[0] &&
75-
ethAddress.toLowerCase() === name.split('.')[0].toLowerCase()
76-
) {
77-
showErrorMessage(true, 'Invalid ENS name');
78-
closeLoader();
79-
return;
80-
}
81-
82-
if (!check) {
83-
showErrorMessage(true, 'Invalid ENS name');
84-
closeLoader();
85-
return;
86-
}
87-
88-
{
89-
// update states
90-
updateStates(
91-
state,
92-
dispatch,
93-
resetName,
94-
showErrorMessage,
95-
resetInputFieldClass,
96-
normalizedAccountName,
97-
);
98-
99-
// create empty conversation
100-
dispatch({
101-
type: UserDbType.createEmptyConversation,
102-
payload: normalizedAccountName,
103-
});
104-
105-
closeLoader();
106-
}
107-
};
108-
109-
// updates states and closes modal
110-
const updateStates = (
111-
state: GlobalState,
112-
dispatch: React.Dispatch<Actions>,
113-
resetName: Function,
114-
showErrorMessage: Function,
115-
resetInputFieldClass: Function,
116-
normalizedAccountName: string,
117-
) => {
118-
// add new contact item in the list
119-
const newContact: ContactPreview = {
120-
name: getAccountDisplayName(normalizedAccountName, 25),
121-
message: null,
122-
image: humanIcon,
123-
unreadMsgCount: 0,
124-
contactDetails: {
125-
account: {
126-
ensName: normalizedAccountName,
127-
profile: undefined,
128-
profileSignature: undefined,
129-
},
130-
deliveryServiceProfile: undefined,
131-
},
132-
isHidden: false,
133-
};
134-
135-
// close the modal
136-
closeConversationModal(resetName, showErrorMessage, resetInputFieldClass);
137-
138-
const addConversationData: NewContact = {
139-
active: true,
140-
ensName: normalizedAccountName,
141-
processed: false,
142-
};
143-
144-
// set new contact data
145-
dispatch({
146-
type: ModalStateType.AddConversationData,
147-
payload: addConversationData,
148-
});
149-
150-
// set left view to contacts
151-
dispatch({
152-
type: UiViewStateType.SetSelectedLeftView,
153-
payload: LeftViewSelected.Contacts,
154-
});
155-
156-
// set right view to chat
157-
dispatch({
158-
type: UiViewStateType.SetSelectedRightView,
159-
payload: RightViewSelected.Chat,
160-
});
161-
};
162-
163-
// updates hidden contact states
164-
const updateHiddenContact = (
165-
state: GlobalState,
166-
dispatch: React.Dispatch<Actions>,
167-
normalizedAccountName: string,
168-
aka: string | undefined,
169-
) => {
170-
if (!aka) {
171-
// unhide the contact
172-
dispatch({
173-
type: UserDbType.unhideContact,
174-
payload: normalizedAccountName,
175-
});
176-
} else {
177-
// set contact selected
178-
dispatch({
179-
type: AccountsType.SetSelectedContact,
180-
payload: state.accounts.contacts?.find(
181-
(contact) => contact.account.ensName === aka,
182-
),
183-
});
184-
}
185-
};
186-
187-
// check ENS name is valid or not
188-
const isEnsNameValid = async (name: string, state: GlobalState) => {
189-
let normalizedAccountName: string;
190-
191-
// check if it is valid address
192-
if (
193-
ethers.utils.isAddress(name) &&
194-
process.env.REACT_APP_ADDR_ENS_SUBDOMAIN
195-
) {
196-
normalizedAccountName = normalizeEnsName(
197-
formatAddress(name) + process.env.REACT_APP_ADDR_ENS_SUBDOMAIN,
198-
);
199-
return {
200-
normalizedAccountName: normalizedAccountName,
201-
check: true,
202-
};
203-
} else {
204-
normalizedAccountName = normalizeEnsName(name);
205-
return {
206-
normalizedAccountName: normalizedAccountName,
207-
check: true,
208-
};
209-
}
210-
};

‎packages/messenger-widget/src/components/ContactInfo/ContactInfo.tsx

+32-19
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
11
/* eslint-disable no-console */
2-
import '../../styles/profile-contact.css';
3-
import { Button } from '../Button/Button';
2+
import { ethers } from 'ethers';
43
import { useContext, useEffect, useState } from 'react';
5-
import { GlobalContext } from '../../utils/context-utils';
4+
import copyIcon from '../../assets/images/copy.svg';
65
import closeIcon from '../../assets/images/cross.svg';
7-
import { EnsDetails } from '../EnsDetails/EnsDetails';
6+
import profilePic from '../../assets/images/human.svg';
7+
import { ConversationContext } from '../../context/ConversationContext';
8+
import { useMainnetProvider } from '../../hooks/mainnetprovider/useMainnetProvider';
9+
import '../../styles/profile-contact.css';
10+
import { GlobalContext } from '../../utils/context-utils';
811
import {
9-
getContactSelected,
1012
hideContact,
1113
onClose,
1214
openEnsProfile,
1315
openEtherscan,
1416
} from '../../utils/ens-utils';
15-
import { IContactInfo } from '../../interfaces/utils';
16-
import profilePic from '../../assets/images/human.svg';
17+
import { Button } from '../Button/Button';
18+
import { EnsDetails } from '../EnsDetails/EnsDetails';
1719
import { closeLoader, startLoader } from '../Loader/Loader';
18-
import { ModalStateType } from '../../utils/enum-type-utils';
19-
import copyIcon from '../../assets/images/copy.svg';
20-
import { useMainnetProvider } from '../../hooks/mainnetprovider/useMainnetProvider';
21-
import { ConversationContext } from '../../context/ConversationContext';
22-
import { ethers } from 'ethers';
20+
import {
21+
RightViewSelected,
22+
UiViewStateType,
23+
} from '../../utils/enum-type-utils';
2324

2425
export function ContactInfo() {
2526
const { state, dispatch } = useContext(GlobalContext);
26-
const { selectedContact } = useContext(ConversationContext);
27+
const { selectedContact, hideContact } = useContext(ConversationContext);
2728
const mainnetProvider = useMainnetProvider();
2829

29-
const [contactDetails, setContactDetails] = useState<IContactInfo | null>(
30-
null,
31-
);
32-
3330
const [address, setAddress] = useState<string>('');
3431

3532
const copyText = async (text: string) => {
@@ -49,6 +46,18 @@ export function ContactInfo() {
4946
return address;
5047
};
5148

49+
const onClickOfHideContact = () => {
50+
if (!selectedContact) {
51+
return;
52+
}
53+
hideContact(selectedContact.name);
54+
//Close the message Modal and show the default one instead
55+
dispatch({
56+
type: UiViewStateType.SetSelectedRightView,
57+
payload: RightViewSelected.Default,
58+
});
59+
};
60+
5261
useEffect(() => {
5362
const fetchAddress = async () => {
5463
if (selectedContact) {
@@ -80,7 +89,11 @@ export function ContactInfo() {
8089

8190
<div className="profile-details-container text-primary-color">
8291
<img
83-
src={contactDetails ? contactDetails.image : profilePic}
92+
src={
93+
selectedContact?.contactDetails
94+
? selectedContact.image
95+
: profilePic
96+
}
8497
alt="profile-pic"
8598
className="border-radius-4 profile-image"
8699
/>
@@ -131,7 +144,7 @@ export function ContactInfo() {
131144
<div className="configure-btn-container">
132145
<Button
133146
buttonText="Hide Contact"
134-
actionMethod={() => hideContact(state, dispatch)}
147+
actionMethod={onClickOfHideContact}
135148
/>
136149
</div>
137150
</div>

‎packages/messenger-widget/src/components/ContactMenu/ContactMenu.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-console */
12
import { useContext } from 'react';
23
import detailsIcon from '../../assets/images/details.svg';
34
import hideIcon from '../../assets/images/hide.svg';
@@ -7,10 +8,13 @@ import {
78
RightViewSelected,
89
UiViewStateType,
910
} from '../../utils/enum-type-utils';
10-
import { hideContact } from '../../utils/ens-utils';
11+
12+
import { ConversationContext } from '../../context/ConversationContext';
1113

1214
export function ContactMenu(props: IContactMenu) {
1315
const { state, dispatch } = useContext(GlobalContext);
16+
const { hideContact, setSelectedContactName } =
17+
useContext(ConversationContext);
1418

1519
const onClickOfShowDetails = () => {
1620
dispatch({
@@ -20,7 +24,12 @@ export function ContactMenu(props: IContactMenu) {
2024
};
2125

2226
const onClickOfHideContact = () => {
23-
hideContact(state, dispatch);
27+
hideContact(props.contactDetails.name);
28+
//Close the message Modal and show the default one instead
29+
dispatch({
30+
type: UiViewStateType.SetSelectedRightView,
31+
payload: RightViewSelected.Default,
32+
});
2433
};
2534

2635
return (

0 commit comments

Comments
 (0)