Integrate contact detail
Add contact detail texts in locale
Wrap contact detail dialog component in useMemo to prevent re-render
Change-Id: I2db25b9dc860659c181ce8a6aab70cf000e2b238
diff --git a/client/src/components/ContactDetailDialog.tsx b/client/src/components/ContactDetailDialog.tsx
new file mode 100644
index 0000000..ee9daff
--- /dev/null
+++ b/client/src/components/ContactDetailDialog.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { ContactDetails as ContactDetailType } from 'jami-web-common';
+import { QRCodeCanvas } from 'qrcode.react';
+import { useTranslation } from 'react-i18next';
+
+import ConversationAvatar from './ConversationAvatar';
+import { InfosDialog } from './Dialog';
+import { DialogContentList } from './Dialog';
+
+interface ContactDetailDialogProps {
+ contactDetail: ContactDetailType;
+ open: boolean;
+ onClose: () => void;
+}
+
+const ContactDetailDialog = ({ contactDetail, open, onClose }: ContactDetailDialogProps) => {
+ const { t } = useTranslation();
+ const items = [
+ {
+ label: t('contact_details_name'),
+ value: contactDetail.id,
+ },
+ {
+ label: t('contact_details_identifier'),
+ value: contactDetail.id,
+ },
+ {
+ label: t('contact_details_qr_code'),
+ value: <QRCodeCanvas size={80} value={`${contactDetail.id}`} />,
+ },
+ ];
+
+ return (
+ <InfosDialog
+ open={open}
+ onClose={onClose}
+ icon={
+ <ConversationAvatar
+ sx={{ width: 'inherit', height: 'inherit' }}
+ displayName={contactDetail.id || contactDetail.id}
+ />
+ }
+ title={contactDetail.id}
+ content={<DialogContentList title={t('contact_details_dialog_title')} items={items} />}
+ />
+ );
+};
+
+export default ContactDetailDialog;
diff --git a/client/src/components/ContactList.tsx b/client/src/components/ContactList.tsx
index 3d6d76b..c1e516c 100644
--- a/client/src/components/ContactList.tsx
+++ b/client/src/components/ContactList.tsx
@@ -19,11 +19,12 @@
import { Person } from '@mui/icons-material';
import { Box, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
import List from '@mui/material/List';
-import { useEffect, useState } from 'react';
-// import Modal from '@mui/material/Modal';
+import { ContactDetails as ContactDetailType } from 'jami-web-common';
+import { useEffect, useMemo, useState } from 'react';
import Modal from 'react-modal';
import { useAuthContext } from '../contexts/AuthProvider';
+import ContactDetailDialog from './ContactDetailDialog';
import ConversationAvatar from './ConversationAvatar';
const customStyles = {
@@ -43,45 +44,38 @@
// const { accountId } = useAppSelector((state) => state.userInfo);
// const dispatch = useAppDispatch();
- const [contacts, setContacts] = useState<Array<any>>([]);
+ const [contacts, setContacts] = useState<Array<ContactDetailType>>([]);
const [currentContactId, setCurrentContactId] = useState<string>('');
const [parentModalOpen, setParentModalOpen] = useState<boolean>(false);
const [childModalOpen, setChildModalOpen] = useState<boolean>(false);
const [isBlocking, setIsBlocking] = useState(true);
- // const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
-
+ const [contactDetail, setContactDetail] = useState<ContactDetailType>({
+ added: '',
+ confirmed: '',
+ conversationId: '',
+ id: '',
+ });
const closeParentModal = () => setParentModalOpen(false);
const openChildModal = () => setChildModalOpen(true);
const closeChildModal = () => setChildModalOpen(false);
+ const [contactDetailDialogOpen, setContactDetailDialogOpen] = useState<boolean>(false);
+
const handleClickContact = (id: string): void => {
setCurrentContactId(id);
setParentModalOpen(true);
};
- // const openModalDetails = () => setModalDetailsIsOpen(true);
- // const getContactDetails = () => {
- // const controller = new AbortController();
- // // try {
- // // const { data } = await axiosInstance.get(`/contacts/${currentContactId}`, {
- // // signal: controller.signal,
- // // });
- // // console.log('CONTACT LIST - DETAILS: ', data);
- // // } catch (e) {
- // // console.log('ERROR GET CONTACT DETAILS: ', e);
- // // }
-
- // axiosInstance
- // .get(`/contacts/${currentContactId}`, {
- // signal: controller.signal,
- // })
- // .then((data) => {
- // console.log('CONTACT LIST - DETAILS: ', data);
- // })
- // .catch((err) => {
- // console.log('ERROR GET CONTACT DETAILS: ', err);
- // });
- // };
+ const getContactDetails = () => {
+ axiosInstance
+ .get<ContactDetailType>(`/contacts/${currentContactId}`)
+ .then(({ data }) => {
+ setContactDetail(data);
+ })
+ .catch((err) => {
+ console.log('ERROR GET CONTACT DETAILS: ', err);
+ });
+ };
const removeContact = (): void => {
console.log('Removing contact');
@@ -140,6 +134,18 @@
closeParentModal();
};
+ const ContactDetailDialogElement = useMemo(() => {
+ const onClosingContactDetailDialog = () => setContactDetailDialogOpen(false);
+
+ return (
+ <ContactDetailDialog
+ contactDetail={contactDetail}
+ open={contactDetailDialogOpen}
+ onClose={onClosingContactDetailDialog}
+ />
+ );
+ }, [contactDetail, contactDetailDialogOpen]);
+
useEffect(() => {
const controller = new AbortController();
axiosInstance
@@ -188,8 +194,8 @@
onClick={() => {
console.log('open details contact for: ');
closeParentModal();
- // openModalDetails();
- // getContactDetails();
+ setContactDetailDialogOpen(true);
+ getContactDetails();
}}
>
<Person /> Détails du contact
@@ -215,6 +221,8 @@
</Box>
</Modal>
+ {ContactDetailDialogElement}
+
<List>
{contacts?.map((contact) => (
<ListItem alignItems="flex-start" key={contact.id} onClick={() => handleClickContact(contact.id)}>