add loader for contact list and addConversation

Author: AlexNi245

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

@@ -21,7 +21,7 @@ import { closeLoader, startLoader } from '../Loader/Loader';
 
 export default function AddConversation() {
     const { state, dispatch } = useContext(GlobalContext);
-    const { addConversation, setSelectedContact } =
+    const { addConversation, setSelectedContactName } =
         useContext(ConversationContext);
 
     const [name, setName] = useState<string>('');
@@ -89,7 +89,7 @@ export default function AddConversation() {
             });
 
             const newContact = await addConversation(aliasName);
-            setSelectedContact(newContact);
+            setSelectedContactName(newContact.name);
             closeLoader();
 
             // close the modal

packages/messenger-widget/src/components/Contacts/Contacts.tsx

@@ -5,42 +5,27 @@ import { useContext, useEffect, useState } from 'react';
 import loader from '../../assets/images/loader.svg';
 import threeDotsIcon from '../../assets/images/three-dots.svg';
 import { AuthContext } from '../../context/AuthContext';
+import { ConversationContext } from '../../context/ConversationContext';
 import { useMainnetProvider } from '../../hooks/mainnetprovider/useMainnetProvider';
 import { useTopLevelAlias } from '../../hooks/topLevelAlias/useTopLevelAlias';
 import { DashboardProps } from '../../interfaces/props';
-import { ContactPreview } from '../../interfaces/utils';
 import { GlobalContext } from '../../utils/context-utils';
-import {
-    CacheType,
-    ModalStateType,
-    RightViewSelected,
-} from '../../utils/enum-type-utils';
+import { RightViewSelected } from '../../utils/enum-type-utils';
 import { ContactMenu } from '../ContactMenu/ContactMenu';
-import { closeLoader, startLoader } from '../Loader/Loader';
 import './Contacts.css';
 import {
-    addNewConversationFound,
-    fetchAndUpdateUnreadMsgCount,
     fetchMessageSizeLimit,
     onContactSelected,
-    resetContactListOnHide,
     setContactHeightToMaximum,
-    setContactIndexSelectedFromCache,
-    setContactList,
     showMenuInBottom,
-    updateContactDetailsOfNewContact,
     updateContactOnAccountChange,
-    updateSelectedContact,
-    updateUnreadMsgCount,
 } from './bl';
-import { ConversationContext } from '../../context/ConversationContext';
-import { initialState } from '../../contexts/Shared';
 
 export function Contacts(props: DashboardProps) {
     // fetches context api data
     const { state, dispatch } = useContext(GlobalContext);
     const { account, deliveryServiceToken } = useContext(AuthContext);
-    const { contacts, initialized, setSelectedContact, selectedContact } =
+    const { contacts, initialized, setSelectedContactName, selectedContact } =
         useContext(ConversationContext);
     const mainnetProvider = useMainnetProvider();
     const { resolveAliasToTLD } = useTopLevelAlias();
@@ -59,12 +44,6 @@ export function Contacts(props: DashboardProps) {
         setContactHeightToMaximum(!isAddrEnsName ? true : false);
     }, [account?.ensName]);
 
-    // handles any change in socket or session
-    useEffect(() => {
-        console.log(' initialized', initialized);
-        console.log('contacts', contacts);
-    }, [initialized]);
-
     // handles change in accounts
     useEffect(() => {
         if (
@@ -93,19 +72,14 @@ export function Contacts(props: DashboardProps) {
         //TODO add websocket listener for add conversation
     }, [state.accounts.contacts]);
 
-    // handles contact selected
-    useEffect(() => {
-        //TODO add click handler to select contact
-    }, [state.accounts.selectedContact]);
-
     // handles active contact removal
     useEffect(() => {
         if (
             selectedContact !== null &&
             state.uiView.selectedRightView !== RightViewSelected.Chat &&
             state.uiView.selectedRightView !== RightViewSelected.ContactInfo
         ) {
-            setSelectedContact(undefined);
+            setSelectedContactName(undefined);
         }
     }, [state.uiView.selectedRightView]);
 
@@ -192,7 +166,9 @@ export function Contacts(props: DashboardProps) {
                                             : 'contact-details-container-active'
                                         : '',
                                 )}
-                                onClick={() => setSelectedContact(data)}
+                                onClick={() =>
+                                    setSelectedContactName(data.name)
+                                }
                             >
                                 <div
                                     className="col-12 d-flex flex-row align-items-center 
@@ -249,8 +225,8 @@ export function Contacts(props: DashboardProps) {
 
                                             {selectedContact?.contactDetails
                                                 .account.ensName === id ? (
-                                                !state.modal.addConversation
-                                                    .active ? (
+                                                selectedContact.message !==
+                                                null ? (
                                                     <div>
                                                         <div className="action-container">
                                                             <img

packages/messenger-widget/src/components/Loader/Loader.tsx

@@ -7,13 +7,13 @@ import { GlobalContext } from '../../utils/context-utils';
 export const closeLoader = () => {
     console.log('stop loader');
     const loader = document.getElementsByClassName('loading')[0] as HTMLElement;
-    //   loader.setAttribute('style', 'display:none !important');
+    loader.setAttribute('style', 'display:none !important');
 };
 
 export const startLoader = () => {
     console.log('start loader');
     const loader = document.getElementsByClassName('loading')[0] as HTMLElement;
-    //  loader.setAttribute('style', 'display:flex !important');
+    loader.setAttribute('style', 'display:flex !important');
 };
 
 export function Loader() {

packages/messenger-widget/src/context/ConversationContext.tsx

@@ -7,15 +7,15 @@ export type ConversationContextType = {
     contacts: ContactPreview[];
     conversationCount: number;
     selectedContact?: ContactPreview;
-    setSelectedContact: (contact: ContactPreview | undefined) => void;
+    setSelectedContactName: (contactEnsName: string | undefined) => void;
     initialized: boolean;
     addConversation: (ensName: string) => ContactPreview;
 };
 
 export const ConversationContext = React.createContext<ConversationContextType>(
     {
         contacts: [],
-        setSelectedContact: (contact: ContactPreview | undefined) => {},
+        setSelectedContactName: (contactEnsName: string | undefined) => {},
         conversationCount: 0,
         initialized: false,
         selectedContact: undefined,
@@ -35,7 +35,7 @@ export const ConversationContextProvider = ({
         contacts,
         conversationCount,
         initialized,
-        setSelectedContact,
+        setSelectedContactName,
         selectedContact,
     } = useConversation();
 
@@ -46,7 +46,7 @@ export const ConversationContextProvider = ({
                 contacts,
                 conversationCount,
                 initialized,
-                setSelectedContact,
+                setSelectedContactName,
                 selectedContact,
             }}
         >

packages/messenger-widget/src/hooks/conversation/useConversation.tsx

@@ -20,8 +20,8 @@ export const useConversation = () => {
     } = useContext(StorageContext);
 
     const [contacts, setContacts] = useState<Array<ContactPreview>>([]);
-    const [selectedContact, setSelectedContact] = useState<
-        ContactPreview | undefined
+    const [selectedContactName, setSelectedContactName] = useState<
+        string | undefined
     >(undefined);
     const [conversationsInitialized, setConversationsInitialized] =
         useState<boolean>(false);
@@ -30,16 +30,21 @@ export const useConversation = () => {
 
     const { account } = useContext(AuthContext);
 
+    const selectedContact = useMemo(() => {
+        return contacts.find(
+            (contact) =>
+                contact.contactDetails.account.ensName === selectedContactName,
+        );
+    }, [selectedContactName, contacts]);
+
     //For now we do not support pagination hence we always fetch all pages
     useEffect(() => {
         setConversationsInitialized(false);
-        setSelectedContact(undefined);
+        setSelectedContactName(undefined);
         setContacts([]);
         const init = async (page: number = 0) => {
             const currentConversationsPage = await getConversations(page);
 
-            console.log('current conversaition page', currentConversationsPage);
-
             //Hydrate the contacts by fetching their profile and DS profile
             const newContacts = await Promise.all(
                 currentConversationsPage.map((contact) =>
@@ -83,7 +88,7 @@ export const useConversation = () => {
 
         const newContact: ContactPreview = {
             name: getAccountDisplayName(ensName, 25),
-            message: '',
+            message: null,
             image: humanIcon,
             unreadMsgCount: 0,
             contactDetails: {
@@ -130,7 +135,7 @@ export const useConversation = () => {
         conversationCount,
         addConversation,
         initialized: conversationsInitialized,
-        setSelectedContact,
+        setSelectedContactName,
         selectedContact,
     };
 };

packages/messenger-widget/src/views/LeftView/LeftView.tsx

@@ -9,21 +9,27 @@ import {
     ModalStateType,
     UiViewStateType,
 } from '../../utils/enum-type-utils';
-import { startLoader } from '../../components/Loader/Loader';
+import { closeLoader, startLoader } from '../../components/Loader/Loader';
 import Menu from '../../components/Menu/Menu';
+import { ConversationContext } from '../../context/ConversationContext';
 
 export default function LeftView(props: DashboardProps) {
     // fetches context api data
     const { state, dispatch } = useContext(GlobalContext);
+    const { initialized } = useContext(ConversationContext);
 
     // handles starting loader on page load
     useEffect(() => {
-        dispatch({
-            type: ModalStateType.LoaderContent,
-            payload: 'Fetching contacts...',
-        });
-        startLoader();
-    }, []);
+        if (!initialized) {
+            dispatch({
+                type: ModalStateType.LoaderContent,
+                payload: 'Fetching contacts...',
+            });
+            startLoader();
+            return;
+        }
+        closeLoader();
+    }, [initialized]);
 
     // method to open menu item
     const openMenuItem = () => {