Format all files with no breaking changes
Lint all files using `npm run lint -- --fix`.
Format all files using `prettier --write "**/*.{ts,tsx,js,jsx,json}"`
No breaking change, only code style is modified.
Gitlab: #29
Change-Id: I4f034a7fb4d3eea10bcd3e38b44a65a1046de62f
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index e0b8e49..aab6dc1 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,17 +1,16 @@
import Modal from 'react-modal';
-import authManager from '../AuthManager'
-import ConversationAvatar from './ConversationAvatar'
-import Conversation from '../../../model/Conversation'
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom"
-import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material'
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
+import Conversation from '../../../model/Conversation';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material';
import { RemoveContactIcon, VideoCallIcon } from './svgIcons';
import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
-import { QRCodeCanvas} from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
import { setRefreshFromSlice } from '../../redux/appSlice';
import { useAppDispatch } from '../../redux/hooks';
-
const customStyles = {
content: {
// right: "auto",
@@ -21,68 +20,68 @@
// padding: "16px"
// top: "1364px",
- left: "94px",
- width: "180px",
- height: "262px",
- background: "#FFFFFF 0% 0% no-repeat padding-box",
- boxShadow: "3px 3px 7px #00000029",
- borderRadius: "5px 20px 20px 20px",
- opacity: "1",
+ left: '94px',
+ width: '180px',
+ height: '262px',
+ background: '#FFFFFF 0% 0% no-repeat padding-box',
+ boxShadow: '3px 3px 7px #00000029',
+ borderRadius: '5px 20px 20px 20px',
+ opacity: '1',
- textAlign: "left",
- font: "normal normal normal 12px/26px Ubuntu",
- letterSpacing: "0px",
- color: "#000000",
+ textAlign: 'left',
+ font: 'normal normal normal 12px/26px Ubuntu',
+ letterSpacing: '0px',
+ color: '#000000',
},
};
const cancelStyles = {
content: {
- left: "94px",
- width: "300px",
- height: "220px",
- background: "#FFFFFF 0% 0% no-repeat padding-box",
- boxShadow: "3px 3px 7px #00000029",
- borderRadius: "20px",
- opacity: "1",
+ left: '94px',
+ width: '300px',
+ height: '220px',
+ background: '#FFFFFF 0% 0% no-repeat padding-box',
+ boxShadow: '3px 3px 7px #00000029',
+ borderRadius: '20px',
+ opacity: '1',
- textAlign: "left",
- font: "normal normal normal 12px/26px Ubuntu",
- letterSpacing: "0px",
- color: "#000000",
+ textAlign: 'left',
+ font: 'normal normal normal 12px/26px Ubuntu',
+ letterSpacing: '0px',
+ color: '#000000',
},
};
const contactDetailsStyles = {
content: {
- left: "94px",
- width: "450px",
- height: "450px",
- background: "#FFFFFF 0% 0% no-repeat padding-box",
- boxShadow: "3px 3px 7px #00000029",
- borderRadius: "20px",
- opacity: "1",
+ left: '94px',
+ width: '450px',
+ height: '450px',
+ background: '#FFFFFF 0% 0% no-repeat padding-box',
+ boxShadow: '3px 3px 7px #00000029',
+ borderRadius: '20px',
+ opacity: '1',
- textAlign: "left",
- font: "normal normal normal 12px/26px Ubuntu",
- letterSpacing: "0px",
- color: "#000000",
+ textAlign: 'left',
+ font: 'normal normal normal 12px/26px Ubuntu',
+ letterSpacing: '0px',
+ color: '#000000',
},
};
const stackStyles = {
- flexDirection: "row",
- marginBottom: "4px",
- spacing: "40px",
+ flexDirection: 'row',
+ marginBottom: '4px',
+ spacing: '40px',
flex: 1,
- alignItems: "center",
+ alignItems: 'center',
};
const iconTextStyle = {
- marginRight: "10px",
+ marginRight: '10px',
};
-const iconColor = "#005699";
+const iconColor = '#005699';
export default function ConversationListItem(props) {
const { conversationId, contactId } = useParams();
@@ -98,10 +97,8 @@
const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
const [blockOrRemove, setBlockOrRemove] = useState(true);
- const [userId, setUserId] = useState(
- conversation?.getFirstMember()?.contact.getUri()
- );
- const [isSwarm, setIsSwarm] = useState("true");
+ const [userId, setUserId] = useState(conversation?.getFirstMember()?.contact.getUri());
+ const [isSwarm, setIsSwarm] = useState('true');
const openModal = (e) => {
e.preventDefault();
@@ -117,43 +114,37 @@
let subtitle;
function afterOpenModal() {
// references are now sync'd and can be accessed.
- subtitle.style.color = "#f00";
+ subtitle.style.color = '#f00';
}
const getContactDetails = () => {
const controller = new AbortController();
authManager
- .fetch(
- `/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`,
- {
- signal: controller.signal,
- }
- )
+ .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`, {
+ signal: controller.signal,
+ })
.then((res) => res.json())
.then((result) => {
- console.log("CONTACT LIST - DETAILS: ", result);
+ console.log('CONTACT LIST - DETAILS: ', result);
})
- .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
+ .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
};
const removeOrBlock = (typeOfRemove) => {
console.log(typeOfRemove);
setBlockOrRemove(false);
- console.log("EEEH", typeOfRemove, conversation.getAccountId(), userId);
+ console.log('EEEH', typeOfRemove, conversation.getAccountId(), userId);
const controller = new AbortController();
authManager
- .fetch(
- `/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`,
- {
- signal: controller.signal,
- method: "DELETE",
- }
- )
+ .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`, {
+ signal: controller.signal,
+ method: 'DELETE',
+ })
.then((res) => res.json())
.then((result) => {
- console.log("propre");
+ console.log('propre');
dispatch(setRefreshFromSlice());
})
.catch((e) => {
@@ -163,10 +154,7 @@
closeModalDelete();
};
-
- const uri = conversation.getId()
- ? `conversation/${conversation.getId()}`
- : `addContact/${userId}`;
+ const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
if (conversation instanceof Conversation) {
return (
<div onContextMenu={openModal}>
@@ -219,7 +207,7 @@
<Stack
onClick={() => {
- console.log("open details contact for: ");
+ console.log('open details contact for: ');
closeModal();
openModalDetails();
getContactDetails();
@@ -269,35 +257,33 @@
style={contactDetailsStyles}
contentLabel="Détails contact"
>
- <Stack direction={"row"} alignContent="flex-end">
- <Stack direction={"column"}>
- <div style={{ height: "100px" }}>
- <ConversationAvatar
- displayName={conversation.getDisplayNameNoFallback()}
- />
+ <Stack direction={'row'} alignContent="flex-end">
+ <Stack direction={'column'}>
+ <div style={{ height: '100px' }}>
+ <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
</div>
<div
style={{
- fontSize: "20px",
- marginBottom: "20px",
- height: "20px",
+ fontSize: '20px',
+ marginBottom: '20px',
+ height: '20px',
}}
>
Informations
</div>
<Typography variant="caption">Nom d'utilisateur</Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
<Typography variant="caption">Identifiant </Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
<div
style={{
flex: 1,
- height: "150px",
- direction: "column",
- flexDirection: "column",
+ height: '150px',
+ direction: 'column',
+ flexDirection: 'column',
// alignSelf: "flex-end",
}}
>
@@ -307,54 +293,52 @@
<Typography variant="caption">est un swarm </Typography>
</Stack>
- <Stack direction={"column"}>
+ <Stack direction={'column'}>
<div
style={{
- fontWeight: "bold",
- fontSize: "20px",
- height: "100px",
+ fontWeight: 'bold',
+ fontSize: '20px',
+ height: '100px',
}}
>
- {conversation.getDisplayNameNoFallback() + "(resolved name)"}
+ {conversation.getDisplayNameNoFallback() + '(resolved name)'}
</div>
<div
style={{
- height: "40px",
+ height: '40px',
}}
/>
<Typography variant="caption">
- <div style={{ fontWeight: "bold" }}>
- {conversation.getDisplayNameNoFallback()}
- </div>
+ <div style={{ fontWeight: 'bold' }}>{conversation.getDisplayNameNoFallback()}</div>
</Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
<Typography variant="caption">
- <div style={{ fontWeight: "bold" }}> {userId}</div>
+ <div style={{ fontWeight: 'bold' }}> {userId}</div>
</Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
- <div height={"40px"}>
+ <div height={'40px'}>
<QRCodeCanvas value={`${userId}`} />
</div>
<Typography variant="caption">
- <div style={{ fontWeight: "bold" }}> {isSwarm}</div>
+ <div style={{ fontWeight: 'bold' }}> {isSwarm}</div>
</Typography>
</Stack>
</Stack>
<div
onClick={closeModalDetails}
style={{
- width: "100px",
- borderStyle: "solid",
- textAlign: "center",
- borderRadius: "5px",
- marginLeft: "150px",
- marginTop: "10px",
+ width: '100px',
+ borderStyle: 'solid',
+ textAlign: 'center',
+ borderRadius: '5px',
+ marginLeft: '150px',
+ marginTop: '10px',
}}
>
<Typography variant="caption">Fermer</Typography>
@@ -370,49 +354,39 @@
contentLabel="Merci de confirmer"
>
<Typography variant="h4">Merci de confirmer</Typography>
- <Stack
- direction={"column"}
- justifyContent="space-around"
- spacing={"75px"}
- >
- <div style={{ textAlign: "center", marginTop: "10%" }}>
+ <Stack direction={'column'} justifyContent="space-around" spacing={'75px'}>
+ <div style={{ textAlign: 'center', marginTop: '10%' }}>
<Typography variant="body2">
- Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"}{" "}
- ce contact?
+ Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
</Typography>
</div>
- <Stack
- direction={"row"}
- top={"25px"}
- alignSelf="center"
- spacing={1}
- >
+ <Stack direction={'row'} top={'25px'} alignSelf="center" spacing={1}>
<Box
onClick={() => {
- if (blockOrRemove) removeOrBlock("block");
- else removeOrBlock("remove");
+ if (blockOrRemove) removeOrBlock('block');
+ else removeOrBlock('remove');
}}
style={{
- width: "100px",
- textAlign: "center",
- borderStyle: "solid",
- borderColor: "red",
- borderRadius: "10px",
- color: "red",
+ width: '100px',
+ textAlign: 'center',
+ borderStyle: 'solid',
+ borderColor: 'red',
+ borderRadius: '10px',
+ color: 'red',
}}
>
- {blockOrRemove ? "Bloquer" : "Supprimer"}
+ {blockOrRemove ? 'Bloquer' : 'Supprimer'}
</Box>
<Box
onClick={closeModalDelete}
style={{
- width: "100px",
- textAlign: "center",
- paddingLeft: "12px",
- paddingRight: "12px",
- borderStyle: "solid",
- borderRadius: "10px",
+ width: '100px',
+ textAlign: 'center',
+ paddingLeft: '12px',
+ paddingRight: '12px',
+ borderStyle: 'solid',
+ borderRadius: '10px',
}}
>
Annuler
@@ -426,19 +400,12 @@
button
alignItems="flex-start"
selected={isSelected}
- onClick={() =>
- navigate(`/account/${conversation.getAccountId()}/${uri}`)
- }
+ onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}
>
<ListItemAvatar>
- <ConversationAvatar
- displayName={conversation.getDisplayNameNoFallback()}
- />
+ <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
</ListItemAvatar>
- <ListItemText
- primary={conversation.getDisplayName()}
- secondary={conversation.getDisplayUri()}
- />
+ <ListItemText primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
</ListItem>
</div>
);