Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 1 | /* |
| 2 | * Copyright (C) 2022 Savoir-faire Linux Inc. |
| 3 | * |
| 4 | * This program is free software; you can redistribute it and/or modify |
| 5 | * it under the terms of the GNU Affero General Public License as |
| 6 | * published by the Free Software Foundation; either version 3 of the |
| 7 | * License, or (at your option) any later version. |
| 8 | * |
| 9 | * This program is distributed in the hope that it will be useful, |
| 10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 12 | * GNU Affero General Public License for more details. |
| 13 | * |
| 14 | * You should have received a copy of the GNU Affero General Public |
| 15 | * License along with this program. If not, see |
| 16 | * <https://www.gnu.org/licenses/>. |
| 17 | */ |
| 18 | |
| 19 | import { Person } from '@mui/icons-material'; |
| 20 | import { Box, ListItem, ListItemAvatar, ListItemText } from '@mui/material'; |
| 21 | import List from '@mui/material/List'; |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 22 | import { ContactDetails as ContactDetailType } from 'jami-web-common'; |
| 23 | import { useEffect, useMemo, useState } from 'react'; |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 24 | import Modal from 'react-modal'; |
| 25 | |
| 26 | import { useAuthContext } from '../contexts/AuthProvider'; |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 27 | import ContactDetailDialog from './ContactDetailDialog'; |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 28 | import ConversationAvatar from './ConversationAvatar'; |
| 29 | |
| 30 | const customStyles = { |
| 31 | content: { |
| 32 | top: '50%', |
| 33 | left: '50%', |
| 34 | right: 'auto', |
| 35 | bottom: 'auto', |
| 36 | marginRight: '-50%', |
| 37 | transform: 'translate(-50%, -50%)', |
| 38 | }, |
| 39 | }; |
| 40 | |
| 41 | export default function ContactList() { |
| 42 | const { axiosInstance } = useAuthContext(); |
| 43 | |
| 44 | // const { accountId } = useAppSelector((state) => state.userInfo); |
| 45 | // const dispatch = useAppDispatch(); |
| 46 | |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 47 | const [contacts, setContacts] = useState<Array<ContactDetailType>>([]); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 48 | const [currentContactId, setCurrentContactId] = useState<string>(''); |
| 49 | const [parentModalOpen, setParentModalOpen] = useState<boolean>(false); |
| 50 | const [childModalOpen, setChildModalOpen] = useState<boolean>(false); |
| 51 | const [isBlocking, setIsBlocking] = useState(true); |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 52 | const [contactDetail, setContactDetail] = useState<ContactDetailType>({ |
| 53 | added: '', |
| 54 | confirmed: '', |
| 55 | conversationId: '', |
| 56 | id: '', |
| 57 | }); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 58 | const closeParentModal = () => setParentModalOpen(false); |
| 59 | const openChildModal = () => setChildModalOpen(true); |
| 60 | const closeChildModal = () => setChildModalOpen(false); |
| 61 | |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 62 | const [contactDetailDialogOpen, setContactDetailDialogOpen] = useState<boolean>(false); |
| 63 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 64 | const handleClickContact = (id: string): void => { |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 65 | setCurrentContactId(id); |
| 66 | setParentModalOpen(true); |
| 67 | }; |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 68 | |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 69 | const getContactDetails = () => { |
| 70 | axiosInstance |
| 71 | .get<ContactDetailType>(`/contacts/${currentContactId}`) |
| 72 | .then(({ data }) => { |
| 73 | setContactDetail(data); |
| 74 | }) |
| 75 | .catch((err) => { |
| 76 | console.log('ERROR GET CONTACT DETAILS: ', err); |
| 77 | }); |
| 78 | }; |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 79 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 80 | const removeContact = (): void => { |
| 81 | console.log('Removing contact'); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 82 | |
| 83 | //Not sure if the server handles empty contact id |
| 84 | if (currentContactId === '') { |
| 85 | throw 'currentContactId is empty'; |
| 86 | } |
| 87 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 88 | //TODO: put all urls in a single file that can be imported and referenced later |
| 89 | const url = `/contacts/${currentContactId}`; |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 90 | |
| 91 | axiosInstance(url, { |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 92 | method: 'DELETE', |
| 93 | }) |
| 94 | .then((res) => { |
| 95 | if (res.status === 204) { |
| 96 | //removes the contact from UI, but does not make another request to fetch all contacts |
| 97 | setContacts((prev) => { |
| 98 | return prev.filter((contact) => contact.id !== currentContactId); |
| 99 | }); |
| 100 | //TODO: show notification of success |
| 101 | } |
| 102 | }) |
| 103 | .catch((err) => { |
| 104 | console.log(`ERROR removing CONTACT : ${currentContactId} `, err); |
| 105 | }); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 106 | |
| 107 | closeChildModal(); |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 108 | closeParentModal(); |
| 109 | }; |
| 110 | |
| 111 | const blockContact = (): void => { |
| 112 | console.log('remove or block'); |
| 113 | |
| 114 | //Not sure if the server handles empty contact id |
| 115 | if (currentContactId === '') { |
| 116 | throw 'currentContactId is empty'; |
| 117 | } |
| 118 | |
| 119 | const url = `/contacts/${currentContactId}/block`; |
| 120 | |
| 121 | axiosInstance(url, { |
| 122 | method: 'POST', |
| 123 | }) |
| 124 | .then((res) => { |
| 125 | if (res.status === 204) { |
| 126 | //TODO: Integrate behaviours after blocking a contact |
| 127 | } |
| 128 | }) |
| 129 | .catch((err) => { |
| 130 | console.log(`ERROR blocking CONTACT : ${currentContactId} `, err); |
| 131 | }); |
| 132 | |
| 133 | closeChildModal(); |
| 134 | closeParentModal(); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 135 | }; |
| 136 | |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 137 | const ContactDetailDialogElement = useMemo(() => { |
| 138 | const onClosingContactDetailDialog = () => setContactDetailDialogOpen(false); |
| 139 | |
| 140 | return ( |
| 141 | <ContactDetailDialog |
| 142 | contactDetail={contactDetail} |
| 143 | open={contactDetailDialogOpen} |
| 144 | onClose={onClosingContactDetailDialog} |
| 145 | /> |
| 146 | ); |
| 147 | }, [contactDetail, contactDetailDialogOpen]); |
| 148 | |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 149 | useEffect(() => { |
| 150 | const controller = new AbortController(); |
| 151 | axiosInstance |
| 152 | .get(`/contacts`, { |
| 153 | signal: controller.signal, |
| 154 | }) |
| 155 | .then(({ data }) => { |
| 156 | console.log('CONTACTS: ', data); |
| 157 | setContacts(data); |
| 158 | }); |
| 159 | return () => controller.abort(); |
| 160 | }, [axiosInstance]); |
| 161 | |
| 162 | return ( |
| 163 | <> |
| 164 | <Modal |
| 165 | isOpen={parentModalOpen} |
| 166 | onRequestClose={closeParentModal} |
| 167 | style={customStyles} |
| 168 | contentLabel="Example Modal" |
| 169 | > |
| 170 | <button onClick={closeParentModal}>close</button> |
| 171 | |
| 172 | <div style={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}> |
| 173 | <button |
| 174 | onClick={() => { |
| 175 | console.log('open dialog Supprimer: '); |
| 176 | setIsBlocking(false); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 177 | openChildModal(); |
| 178 | }} |
| 179 | > |
| 180 | <Person /> Supprimer contact |
| 181 | </button> |
| 182 | |
| 183 | <button |
| 184 | onClick={() => { |
| 185 | console.log('open dialog BLOCK: '); |
| 186 | setIsBlocking(true); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 187 | openChildModal(); |
| 188 | }} |
| 189 | > |
| 190 | <Person /> Bloquer le contact |
| 191 | </button> |
| 192 | |
| 193 | <button |
| 194 | onClick={() => { |
| 195 | console.log('open details contact for: '); |
| 196 | closeParentModal(); |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 197 | setContactDetailDialogOpen(true); |
| 198 | getContactDetails(); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 199 | }} |
| 200 | > |
| 201 | <Person /> Détails du contact |
| 202 | </button> |
| 203 | </div> |
| 204 | </Modal> |
| 205 | |
| 206 | <Modal |
| 207 | isOpen={childModalOpen} |
| 208 | onRequestClose={closeChildModal} |
| 209 | style={customStyles} |
| 210 | contentLabel="Merci de confirmer" |
| 211 | > |
| 212 | <Box> |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 213 | <div> |
| 214 | Voulez vous vraiment {isBlocking ? 'bloquer' : 'supprimer'} ce contact {currentContactId}? |
| 215 | </div> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 216 | <br /> |
| 217 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 218 | <button onClick={isBlocking ? blockContact : removeContact}>{isBlocking ? 'bloquer' : 'supprimer'}</button> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 219 | |
| 220 | <button onClick={closeChildModal}>Annuler</button> |
| 221 | </Box> |
| 222 | </Modal> |
| 223 | |
Ziwei Wang | e8d7703 | 2023-01-11 15:57:38 -0500 | [diff] [blame] | 224 | {ContactDetailDialogElement} |
| 225 | |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 226 | <List> |
| 227 | {contacts?.map((contact) => ( |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 228 | <ListItem alignItems="flex-start" key={contact.id} onClick={() => handleClickContact(contact.id)}> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 229 | <ListItemAvatar> |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 230 | <ConversationAvatar /> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 231 | </ListItemAvatar> |
| 232 | <ListItemText primary={contact.id} secondary={contact.id} /> |
| 233 | </ListItem> |
| 234 | ))} |
| 235 | </List> |
| 236 | </> |
| 237 | ); |
| 238 | } |