570 hide contact (#579)

* stashed files added * signin page ui * renamed file * fixed linting issues * integrated rainbow wallet * integrated metamask wallet & fixed home image strech issue * fixed error message * removed provider check * removed fontawesome library & added svg image * added user profile page * integrated user contact list * changed color of contact background on hover * created hamburger menu ui * removed unused import * fixed prettier issue * created contacts action menu * added contact menu list * UI for user contact page * contact info page * add conversation UI * integrated add conversation modal * integrated preferences modal * optimized code * removed unused code & fixed linting * changed let to const * UI for profile configuration * added error messages * Configure user profile * removed unused parameter * fixed prettier issue * env test * hide contact integrated * modified condition check --------- Co-authored-by: Bhupesh-MS <[email protected]> Co-authored-by: Heiko Burkhardt <[email protected]>
dm3-org · Aug 22, 2023 · 4626371 · 4626371
1 parent 0c11f56
commit 4626371
Show file tree

Hide file tree

Showing 14 changed files with 134 additions and 33 deletions.
diff --git a/packages/messenger-widget/src/adapters/contacts.ts b/packages/messenger-widget/src/adapters/contacts.ts
@@ -20,10 +20,12 @@ import {
     UserDbType,
 } from '../utils/enum-type-utils';
 import { fetchPendingConversations } from './messages';
+import { Config } from '../interfaces/config';
 
 export async function requestContacts(
     state: GlobalState,
     dispatch: React.Dispatch<Actions>,
+    config: Config,
 ) {
     const connection = state.connection;
     const deliveryServiceToken = state.auth.currentSession?.token!;
@@ -41,6 +43,25 @@ export async function requestContacts(
         createEmptyConversationEntry,
     );
 
+    // adds default contact in the list if it's not present (help.dm3.eth)
+    if (
+        config.defaultContact &&
+        !retrievedContacts.find(
+            (account: Account) =>
+                normalizeEnsName(account.ensName) ===
+                normalizeEnsName(config.defaultContact as string),
+        )
+    ) {
+        createEmptyConversationEntry(config.defaultContact);
+
+        retrievedContacts = await getContacts(
+            connection,
+            userDb,
+            deliveryServiceToken,
+            createEmptyConversationEntry,
+        );
+    }
+
     const contacts: Contact[] = await Promise.all(
         retrievedContacts.map(fetchDeliveryServiceProfile(connection)),
     );

diff --git a/packages/messenger-widget/src/components/ContactMenu/ContactMenu.tsx b/packages/messenger-widget/src/components/ContactMenu/ContactMenu.tsx
@@ -7,24 +7,33 @@ import {
     RightViewSelected,
     UiViewStateType,
 } from '../../utils/enum-type-utils';
+import { hideContact } from '../../utils/ens-utils';
 
 export function ContactMenu(props: ContactMenu) {
-    const { dispatch } = useContext(GlobalContext);
+    const { state, dispatch } = useContext(GlobalContext);
 
     const onClickOfShowDetails = () => {
         dispatch({
             type: UiViewStateType.SetSelectedRightView,
             payload: RightViewSelected.ContactInfo,
         });
-        props.closeContactMenu();
     };
 
     const onClickOfHideContact = () => {
-        props.closeContactMenu();
+        hideContact(state, dispatch);
     };
 
     return (
-        <div className="dropdown-content d-flex font-size-14 font-weight-400">
+        <div
+            className={'dropdown-content font-size-14 font-weight-400'.concat(
+                ' ',
+                state.cache.contacts &&
+                    props.index > 0 &&
+                    props.index >= state.cache.contacts?.length - 2
+                    ? 'dropdown-content-top-align'
+                    : '',
+            )}
+        >
             <div
                 className="d-flex align-items-center justify-content-start"
                 onClick={() => onClickOfShowDetails()}

diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.css b/packages/messenger-widget/src/components/Contacts/Contacts.css
@@ -44,6 +44,10 @@
     background-color: var(--normal-btn-hover);
 }
 
+.action-container:hover > .dropdown-content {
+    display: flex;
+}
+
 .action-dot {
     height: 0.8rem;
     width: 0.8rem;
@@ -79,12 +83,12 @@
     border-top: 2px solid var(--normal-btn-hover) !important;
     border-left: 2px solid var(--normal-btn-hover) !important;
     border-bottom: 2px solid var(--normal-btn-hover) !important;
-    background: linear-gradient(-259deg, #544393, #1F2029) !important;
+    background: linear-gradient(-259deg, #544393, #1f2029) !important;
     top: 0;
     bottom: 0;
     position: sticky;
     border-top-left-radius: 10px !important;
     border-bottom-left-radius: 10px !important;
     padding-left: 0.5rem !important;
     margin-left: 0.5rem !important;
-}
+}
diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.tsx b/packages/messenger-widget/src/components/Contacts/Contacts.tsx
@@ -8,6 +8,7 @@ import {
     setContactIndexSelectedFromCache,
     updateContactOnAccountChange,
     updateSelectedContact,
+    resetContactListOnHide,
 } from './bl';
 import { useContext, useEffect, useState } from 'react';
 import { GlobalContext } from '../../utils/context-utils';
@@ -25,7 +26,6 @@ export function Contacts(props: DashboardProps) {
     // local states to handle contact list and active contact
     const [contactSelected, setContactSelected] = useState<number | null>(null);
     const [contacts, setContacts] = useState<ContactPreview[]>([]);
-    const [openMenu, setOpenMenu] = useState<boolean>(false);
 
     // sets contact list to show on UI
     const setListOfContacts = (list: ContactPreview[]) => {
@@ -42,11 +42,6 @@ export function Contacts(props: DashboardProps) {
         globalConfig.ADDR_ENS_SUBDOMAIN(),
     );
 
-    // handles closing of contact menu list
-    const closeContactMenu = () => {
-        setOpenMenu(false);
-    };
-
     // handles contact box view
     useEffect(() => {
         setContactHeightToMaximum(!isAddrEnsName ? true : false);
@@ -65,7 +60,7 @@ export function Contacts(props: DashboardProps) {
                 payload: 'Fetching contacts...',
             });
             startLoader();
-            props.getContacts(state, dispatch, props.dm3Props);
+            props.getContacts(state, dispatch, props.dm3Props.config);
             setContactList(state, dispatch, setListOfContacts);
         }
     }, [state.auth?.currentSession?.token, state.connection.socket]);
@@ -78,7 +73,7 @@ export function Contacts(props: DashboardProps) {
                 payload: 'Fetching contacts...',
             });
             startLoader();
-            props.getContacts(state, dispatch, props.dm3Props);
+            props.getContacts(state, dispatch, props.dm3Props.config);
         }
     }, [state.userDb?.conversations, state.userDb?.conversationsCount]);
 
@@ -90,7 +85,9 @@ export function Contacts(props: DashboardProps) {
                 state.uiView.selectedRightView === RightViewSelected.Default)
         ) {
             setContactList(state, dispatch, setListOfContacts);
-        } else if (
+        }
+
+        if (
             state.modal.addConversation.active &&
             state.modal.addConversation.processed
         ) {
@@ -114,6 +111,16 @@ export function Contacts(props: DashboardProps) {
                 !state.modal.addConversation.processed
             ) {
                 updateSelectedContact(state, dispatch, setContactFromList);
+            } else if (
+                state.modal.addConversation.active &&
+                state.modal.addConversation.processed
+            ) {
+                updateContactOnAccountChange(
+                    state,
+                    dispatch,
+                    contacts,
+                    setListOfContacts,
+                );
             } else if (state.accounts.selectedContact) {
                 setContactSelected(
                     setContactIndexSelectedFromCache(
@@ -122,6 +129,8 @@ export function Contacts(props: DashboardProps) {
                         cacheContacts,
                     ),
                 );
+            } else if (state.modal.contactToHide) {
+                resetContactListOnHide(state, dispatch, setListOfContacts);
             }
         }
     }, [state.accounts.selectedContact]);
@@ -225,22 +234,15 @@ export function Contacts(props: DashboardProps) {
                                                         className="action-dot"
                                                         src={threeDotsIcon}
                                                         alt="action"
-                                                        onClick={() => {
-                                                            setOpenMenu(
-                                                                !openMenu,
-                                                            );
-                                                        }}
                                                     />
-                                                    {openMenu && (
+                                                    {
                                                         <ContactMenu
-                                                            closeContactMenu={
-                                                                closeContactMenu
-                                                            }
                                                             contactDetails={
                                                                 data
                                                             }
+                                                            index={index}
                                                         />
-                                                    )}
+                                                    }
                                                 </div>
                                             </div>
                                         ) : (

diff --git a/packages/messenger-widget/src/components/Contacts/bl.ts b/packages/messenger-widget/src/components/Contacts/bl.ts
@@ -226,3 +226,27 @@ export const updateContactOnAccountChange = async (
         }
     }
 };
+
+// reset's the contact list on hiding any contact
+export const resetContactListOnHide = (
+    state: GlobalState,
+    dispatch: React.Dispatch<Actions>,
+    setListOfContacts: Function,
+) => {
+    if (state.modal.contactToHide) {
+        const cachedContactList = state.cache.contacts?.filter(
+            (data) =>
+                data.contactDetails.account.ensName !==
+                state.modal.contactToHide,
+        );
+        dispatch({
+            type: CacheType.Contacts,
+            payload: cachedContactList as [],
+        });
+        setListOfContacts(cachedContactList);
+        dispatch({
+            type: ModalStateType.ContactToHide,
+            payload: undefined,
+        });
+    }
+};
diff --git a/packages/messenger-widget/src/components/DM3/DM3.tsx b/packages/messenger-widget/src/components/DM3/DM3.tsx
@@ -96,7 +96,7 @@ function DM3(props: Dm3Props) {
                 handleNewMessage(envelop, state, dispatch);
             });
             socket.on('joined', () => {
-                getContacts(state, dispatch);
+                getContacts(state, dispatch, props.config);
             });
             dispatch({ type: ConnectionType.ChangeSocket, payload: socket });
         }
@@ -119,7 +119,7 @@ function DM3(props: Dm3Props) {
             );
 
             state.connection.socket.on('joined', () => {
-                getContacts(state, dispatch);
+                getContacts(state, dispatch, props.config);
             });
         }
     }, [state.connection.socket, state.userDb?.conversations]);

diff --git a/packages/messenger-widget/src/components/DM3/bl.ts b/packages/messenger-widget/src/components/DM3/bl.ts
@@ -10,6 +10,7 @@ import {
     GlobalState,
     UserDbType,
 } from '../../utils/enum-type-utils';
+import { Config } from '../../interfaces/config';
 
 export function showSignIn(connectionState: ConnectionState): boolean {
     return (
@@ -35,6 +36,7 @@ export function connectionPhase(connectionState: ConnectionState): boolean {
 export const getContacts = (
     state: GlobalState,
     dispatch: React.Dispatch<Actions>,
+    config: Config,
 ) => {
     if (!state.userDb) {
         throw Error(
@@ -44,7 +46,7 @@ export const getContacts = (
 
     log('[getContacts]', 'info');
 
-    return requestContacts(state, dispatch);
+    return requestContacts(state, dispatch, config);
 };
 
 // method to handle new messages received

diff --git a/packages/messenger-widget/src/contexts/Modal.ts b/packages/messenger-widget/src/contexts/Modal.ts
@@ -21,6 +21,13 @@ export function modalReducer(state: Modal, action: ModalStateActions): Modal {
                 addConversation: action.payload,
             };
 
+        case ModalStateType.ContactToHide:
+            log(`[Contact to hide] Contact content ${action.payload}`, 'info');
+            return {
+                ...state,
+                contactToHide: action.payload,
+            };
+
         default:
             return state;
     }

diff --git a/packages/messenger-widget/src/contexts/Shared.ts b/packages/messenger-widget/src/contexts/Shared.ts
@@ -46,6 +46,7 @@ export const initialState: GlobalState = {
     },
     modal: {
         loaderContent: '',
+        contactToHide: undefined,
         addConversation: {
             active: false,
             ensName: undefined,

diff --git a/packages/messenger-widget/src/interfaces/context.ts b/packages/messenger-widget/src/interfaces/context.ts
@@ -48,6 +48,7 @@ export interface GlobalContextProviderProps {
 export interface Modal {
     loaderContent: string;
     addConversation: NewContact;
+    contactToHide: string | undefined;
 }
 
 export interface UiViewState {

diff --git a/packages/messenger-widget/src/interfaces/props.ts b/packages/messenger-widget/src/interfaces/props.ts
@@ -1,12 +1,12 @@
 import { Actions, GlobalState } from '../utils/enum-type-utils';
-import { Dm3Props } from './config';
+import { Config, Dm3Props } from './config';
 import { ContactPreview } from './utils';
 
 export interface DashboardProps {
     getContacts: (
         state: GlobalState,
         dispatch: React.Dispatch<Actions>,
-        props: Dm3Props,
+        props: Config,
     ) => Promise<void>;
     dm3Props: Dm3Props;
 }
@@ -18,5 +18,5 @@ export interface EnsDetails {
 
 export interface ContactMenu {
     contactDetails: ContactPreview;
-    closeContactMenu: Function;
+    index: number;
 }
diff --git a/packages/messenger-widget/src/styles/common.css b/packages/messenger-widget/src/styles/common.css
@@ -108,8 +108,13 @@ input:focus {
     z-index: 1;
     border: 1px solid #000000;
     border-radius: 5px;
-    margin-top: 0.5rem;
+    margin-top: 0.1rem;
     margin-left: -9rem;
+    display: none;
+}
+
+.dropdown-content-top-align {
+    margin-top: -6.9rem !important;
 }
 
 .dropdown-content div {

diff --git a/packages/messenger-widget/src/utils/ens-utils.ts b/packages/messenger-widget/src/utils/ens-utils.ts
@@ -2,8 +2,10 @@ import {
     AccountsType,
     Actions,
     GlobalState,
+    ModalStateType,
     RightViewSelected,
     UiViewStateType,
+    UserDbType,
 } from './enum-type-utils';
 import profilePic from '../assets/images/profile-pic.jpg';
 import { EnsProfileDetails } from '../interfaces/utils';
@@ -73,7 +75,28 @@ export const hideContact = (
     state: GlobalState,
     dispatch: React.Dispatch<Actions>,
 ) => {
-    // Body will be added when "Hide contact" task will be picked up
+    const ensName = state.accounts.selectedContact?.account.ensName;
+
+    if (ensName) {
+        dispatch({
+            type: ModalStateType.ContactToHide,
+            payload: ensName,
+        });
+        dispatch({
+            type: UserDbType.hideContact,
+            payload: {
+                ensName: ensName,
+            },
+        });
+        dispatch({
+            type: UiViewStateType.SetSelectedRightView,
+            payload: RightViewSelected.Default,
+        });
+        dispatch({
+            type: AccountsType.SetSelectedContact,
+            payload: undefined,
+        });
+    }
 };
 
 // method to close profile/contact info page