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'; |
| 22 | import { useEffect, useState } from 'react'; |
| 23 | // import Modal from '@mui/material/Modal'; |
| 24 | import Modal from 'react-modal'; |
| 25 | |
| 26 | import { useAuthContext } from '../contexts/AuthProvider'; |
| 27 | import ConversationAvatar from './ConversationAvatar'; |
| 28 | |
| 29 | const customStyles = { |
| 30 | content: { |
| 31 | top: '50%', |
| 32 | left: '50%', |
| 33 | right: 'auto', |
| 34 | bottom: 'auto', |
| 35 | marginRight: '-50%', |
| 36 | transform: 'translate(-50%, -50%)', |
| 37 | }, |
| 38 | }; |
| 39 | |
| 40 | export default function ContactList() { |
| 41 | const { axiosInstance } = useAuthContext(); |
| 42 | |
| 43 | // const { accountId } = useAppSelector((state) => state.userInfo); |
| 44 | // const dispatch = useAppDispatch(); |
| 45 | |
| 46 | const [contacts, setContacts] = useState<Array<any>>([]); |
| 47 | const [currentContactId, setCurrentContactId] = useState<string>(''); |
| 48 | const [parentModalOpen, setParentModalOpen] = useState<boolean>(false); |
| 49 | const [childModalOpen, setChildModalOpen] = useState<boolean>(false); |
| 50 | const [isBlocking, setIsBlocking] = useState(true); |
| 51 | // const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false); |
| 52 | |
| 53 | const closeParentModal = () => setParentModalOpen(false); |
| 54 | const openChildModal = () => setChildModalOpen(true); |
| 55 | const closeChildModal = () => setChildModalOpen(false); |
| 56 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 57 | const handleClickContact = (id: string): void => { |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 58 | setCurrentContactId(id); |
| 59 | setParentModalOpen(true); |
| 60 | }; |
| 61 | // const openModalDetails = () => setModalDetailsIsOpen(true); |
| 62 | |
| 63 | // const getContactDetails = () => { |
| 64 | // const controller = new AbortController(); |
| 65 | // // try { |
| 66 | // // const { data } = await axiosInstance.get(`/contacts/${currentContactId}`, { |
| 67 | // // signal: controller.signal, |
| 68 | // // }); |
| 69 | // // console.log('CONTACT LIST - DETAILS: ', data); |
| 70 | // // } catch (e) { |
| 71 | // // console.log('ERROR GET CONTACT DETAILS: ', e); |
| 72 | // // } |
| 73 | |
| 74 | // axiosInstance |
| 75 | // .get(`/contacts/${currentContactId}`, { |
| 76 | // signal: controller.signal, |
| 77 | // }) |
| 78 | // .then((data) => { |
| 79 | // console.log('CONTACT LIST - DETAILS: ', data); |
| 80 | // }) |
| 81 | // .catch((err) => { |
| 82 | // console.log('ERROR GET CONTACT DETAILS: ', err); |
| 83 | // }); |
| 84 | // }; |
| 85 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 86 | const removeContact = (): void => { |
| 87 | console.log('Removing contact'); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 88 | |
| 89 | //Not sure if the server handles empty contact id |
| 90 | if (currentContactId === '') { |
| 91 | throw 'currentContactId is empty'; |
| 92 | } |
| 93 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 94 | //TODO: put all urls in a single file that can be imported and referenced later |
| 95 | const url = `/contacts/${currentContactId}`; |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 96 | |
| 97 | axiosInstance(url, { |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 98 | method: 'DELETE', |
| 99 | }) |
| 100 | .then((res) => { |
| 101 | if (res.status === 204) { |
| 102 | //removes the contact from UI, but does not make another request to fetch all contacts |
| 103 | setContacts((prev) => { |
| 104 | return prev.filter((contact) => contact.id !== currentContactId); |
| 105 | }); |
| 106 | //TODO: show notification of success |
| 107 | } |
| 108 | }) |
| 109 | .catch((err) => { |
| 110 | console.log(`ERROR removing CONTACT : ${currentContactId} `, err); |
| 111 | }); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 112 | |
| 113 | closeChildModal(); |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 114 | closeParentModal(); |
| 115 | }; |
| 116 | |
| 117 | const blockContact = (): void => { |
| 118 | console.log('remove or block'); |
| 119 | |
| 120 | //Not sure if the server handles empty contact id |
| 121 | if (currentContactId === '') { |
| 122 | throw 'currentContactId is empty'; |
| 123 | } |
| 124 | |
| 125 | const url = `/contacts/${currentContactId}/block`; |
| 126 | |
| 127 | axiosInstance(url, { |
| 128 | method: 'POST', |
| 129 | }) |
| 130 | .then((res) => { |
| 131 | if (res.status === 204) { |
| 132 | //TODO: Integrate behaviours after blocking a contact |
| 133 | } |
| 134 | }) |
| 135 | .catch((err) => { |
| 136 | console.log(`ERROR blocking CONTACT : ${currentContactId} `, err); |
| 137 | }); |
| 138 | |
| 139 | closeChildModal(); |
| 140 | closeParentModal(); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 141 | }; |
| 142 | |
| 143 | useEffect(() => { |
| 144 | const controller = new AbortController(); |
| 145 | axiosInstance |
| 146 | .get(`/contacts`, { |
| 147 | signal: controller.signal, |
| 148 | }) |
| 149 | .then(({ data }) => { |
| 150 | console.log('CONTACTS: ', data); |
| 151 | setContacts(data); |
| 152 | }); |
| 153 | return () => controller.abort(); |
| 154 | }, [axiosInstance]); |
| 155 | |
| 156 | return ( |
| 157 | <> |
| 158 | <Modal |
| 159 | isOpen={parentModalOpen} |
| 160 | onRequestClose={closeParentModal} |
| 161 | style={customStyles} |
| 162 | contentLabel="Example Modal" |
| 163 | > |
| 164 | <button onClick={closeParentModal}>close</button> |
| 165 | |
| 166 | <div style={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}> |
| 167 | <button |
| 168 | onClick={() => { |
| 169 | console.log('open dialog Supprimer: '); |
| 170 | setIsBlocking(false); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 171 | openChildModal(); |
| 172 | }} |
| 173 | > |
| 174 | <Person /> Supprimer contact |
| 175 | </button> |
| 176 | |
| 177 | <button |
| 178 | onClick={() => { |
| 179 | console.log('open dialog BLOCK: '); |
| 180 | setIsBlocking(true); |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 181 | openChildModal(); |
| 182 | }} |
| 183 | > |
| 184 | <Person /> Bloquer le contact |
| 185 | </button> |
| 186 | |
| 187 | <button |
| 188 | onClick={() => { |
| 189 | console.log('open details contact for: '); |
| 190 | closeParentModal(); |
| 191 | // openModalDetails(); |
| 192 | // getContactDetails(); |
| 193 | }} |
| 194 | > |
| 195 | <Person /> Détails du contact |
| 196 | </button> |
| 197 | </div> |
| 198 | </Modal> |
| 199 | |
| 200 | <Modal |
| 201 | isOpen={childModalOpen} |
| 202 | onRequestClose={closeChildModal} |
| 203 | style={customStyles} |
| 204 | contentLabel="Merci de confirmer" |
| 205 | > |
| 206 | <Box> |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 207 | <div> |
| 208 | Voulez vous vraiment {isBlocking ? 'bloquer' : 'supprimer'} ce contact {currentContactId}? |
| 209 | </div> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 210 | <br /> |
| 211 | |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 212 | <button onClick={isBlocking ? blockContact : removeContact}>{isBlocking ? 'bloquer' : 'supprimer'}</button> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 213 | |
| 214 | <button onClick={closeChildModal}>Annuler</button> |
| 215 | </Box> |
| 216 | </Modal> |
| 217 | |
| 218 | <List> |
| 219 | {contacts?.map((contact) => ( |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 220 | <ListItem alignItems="flex-start" key={contact.id} onClick={() => handleClickContact(contact.id)}> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 221 | <ListItemAvatar> |
Ziwei Wang | 727dbbb | 2023-01-10 13:59:50 -0500 | [diff] [blame] | 222 | <ConversationAvatar /> |
Ziwei Wang | fea1d60 | 2023-01-09 17:16:01 -0500 | [diff] [blame] | 223 | </ListItemAvatar> |
| 224 | <ListItemText primary={contact.id} secondary={contact.id} /> |
| 225 | </ListItem> |
| 226 | ))} |
| 227 | </List> |
| 228 | </> |
| 229 | ); |
| 230 | } |