Fix lint errors
Manually fix all lint errors.
Some errors could not be fixed, a TODO comment was added.
To fix errors caused by `react-hooks/exhaustive-deps`, missing
dependencies were added to the dependencies array of some `useEffect`
calls.
We need to make sure that all `useEffect` call work as intended before
merging
Gitlab: #29
Change-Id: I939a99b0be53795ecc28d25b5067f037403f5e08
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 7ad89da..23b23f6 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -131,8 +131,8 @@
Appareils associés
</Typography>
<Typography gutterBottom variant="h5" component="h2">
- {devices.map((device) => (
- <ListItem>
+ {devices.map((device, i) => (
+ <ListItem key={i}>
<GroupRounded />
<ListItemText id="switch-list-label-rendezvous" primary={device[1]} secondary={device[0]} />
</ListItem>
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index d8e6add..09885ca 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -63,7 +63,6 @@
method: 'DELETE',
})
.then((res) => res.json())
- .then((result) => {})
.catch((e) => console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e));
closeModalDelete();
};
@@ -80,7 +79,7 @@
setContacts(result);
});
return () => controller.abort();
- }, [blockOrRemove]);
+ }, [accountId, blockOrRemove]);
return (
<div className="rooms-list">
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 4bea190..40057b3 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -274,7 +274,7 @@
Informations
</div>
- <Typography variant="caption">Nom d'utilisateur</Typography>
+ <Typography variant="caption">Nom d'utilisateur</Typography>
<div style={{ height: '20px' }} />
<Typography variant="caption">Identifiant </Typography>
<div style={{ height: '20px' }} />
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 51e9254..69727d5 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -9,30 +9,30 @@
import MessageList from './MessageList';
import SendMessageForm from './SendMessageForm';
-const ConversationView = (props) => {
+const ConversationView = ({ accountId, conversationId, ...props }) => {
const socket = useContext(SocketContext);
const [conversation, setConversation] = useState();
const [messages, setMessages] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(false);
- const conversationQuery = useConversationQuery(props.accountId, props.conversationId);
- const messagesQuery = useMessagesQuery(props.accountId, props.conversationId);
- const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId);
+ const conversationQuery = useConversationQuery(accountId, conversationId);
+ const messagesQuery = useMessagesQuery(accountId, conversationId);
+ const sendMessageMutation = useSendMessageMutation(accountId, conversationId);
useEffect(() => {
if (conversationQuery.isSuccess) {
- const conversation = Conversation.from(props.accountId, conversationQuery.data);
+ const conversation = Conversation.from(accountId, conversationQuery.data);
setConversation(conversation);
}
- }, [conversationQuery.data]);
+ }, [accountId, conversationQuery.isSuccess, conversationQuery.data]);
useEffect(() => {
if (messagesQuery.isSuccess) {
const sortedMessages = sortMessages(messagesQuery.data);
setMessages(sortedMessages);
}
- }, [messagesQuery.data]);
+ }, [messagesQuery.isSuccess, messagesQuery.data]);
useEffect(() => {
setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading);
@@ -46,19 +46,19 @@
useEffect(() => {
if (!conversation) return;
- console.log(`io set conversation ${props.conversationId} ` + socket);
- if (socket) socket.emit('conversation', { accountId: props.accountId, conversationId: props.conversationId });
+ console.log(`io set conversation ${conversationId} ` + socket);
+ if (socket) socket.emit('conversation', { accountId, conversationId });
socket.off('newMessage');
socket.on('newMessage', (data) => {
console.log('newMessage');
setMessages((messages) => addMessage(messages, data));
});
- }, [socket, setMessages]);
+ }, [accountId, conversation, conversationId, socket]);
if (isLoading) {
return <LoadingPage />;
} else if (error) {
- return <div>Error loading {props.conversationId}</div>;
+ return <div>Error loading {conversationId}</div>;
}
return (
@@ -72,7 +72,7 @@
{conversation?.getDisplayName()}
</Typography>
<Typography className="subtitle" variant="subtitle1">
- {props.conversationId}
+ {conversationId}
</Typography>
</Box>
</Stack>
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 8acaf52..095e3d7 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -7,7 +7,10 @@
export default function ConversationsOverviewCard(props) {
const navigate = useNavigate();
- const accountId = props.accountId || useParams().accountId;
+ let accountId = useParams().accountId;
+ if (props.accountId) {
+ accountId = props.accountId;
+ }
const [loaded, setLoaded] = useState(false);
const [conversations, setConversations] = useState([]);
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index d020503..fb7bbc4 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -14,7 +14,7 @@
console.log('LIST ITEM LINK: ', account, itemProps);
return <RouterLink to={to} ref={ref} {...itemProps} state={account} />;
}),
- [to]
+ [account, to]
);
return (
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index 0278d0b..e36b0da 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -14,7 +14,7 @@
dayjs.extend(isYesterday);
export const MessageCall = (props) => {
- return <Stack alignItems="center">"Appel"</Stack>;
+ return <Stack alignItems="center">"Appel"</Stack>;
};
export const MessageInitial = (props) => {
@@ -30,7 +30,7 @@
isFirstOfGroup={props.isFirstOfGroup}
isLastOfGroup={props.isLastOfGroup}
>
- "data-transfer"
+ "data-transfer"
</MessageBubble>
);
};
@@ -50,7 +50,7 @@
};
export const MessageMerge = (props) => {
- return <Stack alignItems="center">"merge"</Stack>;
+ return <Stack alignItems="center">"merge"</Stack>;
};
export const MessageText = (props) => {
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 57fa242..c1678b5 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -7,7 +7,7 @@
const isInputValid = (input) => input && input.length > 2;
-export default function UsernameChooser(props) {
+export default function UsernameChooser({ setName, ...props }) {
const [query, setQuery] = useState('');
const { isLoading, data, error } = usePromise(
@@ -23,10 +23,10 @@
useEffect(() => {
if (!isLoading) {
- if (error === 404) props.setName(query);
- else props.setName('');
+ if (error === 404) setName(query);
+ else setName('');
}
- }, [query, isLoading, data, error]);
+ }, [setName, query, isLoading, data, error]);
const handleChange = (event) => setQuery(event.target.value);
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 0f7666e..7d80ec8 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -205,7 +205,7 @@
width: '20px',
}));
-export const SelectEmojiButton = (props) => {
+export const SelectEmojiButton = ({ onEmojiSelected, ...props }) => {
const [anchorEl, setAnchorEl] = useState(null);
const handleOpenEmojiPicker = useCallback((e) => setAnchorEl(anchorEl ? null : e.currentTarget), [anchorEl]);
@@ -214,10 +214,10 @@
const onEmojiClick = useCallback(
(e, emojiObject) => {
- props.onEmojiSelected(emojiObject.emoji);
+ onEmojiSelected(emojiObject.emoji);
handleClose();
},
- [handleClose, props.onEmojiSelected]
+ [handleClose, onEmojiSelected]
);
const open = Boolean(anchorEl);
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index a607a31..cbcb951 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -19,7 +19,7 @@
const StyledPersonIconLight = styled(PersonIcon)({ height: iconsHeight, color: '#03B9E9' });
const StyledLockIcon = styled(LockIcon)({ height: iconsHeight, color: '#03B9E9' });
-export const UsernameInput = ({ infoButtonProps, ...props }) => {
+export const UsernameInput = ({ infoButtonProps, onChange: _onChange, ...props }) => {
const [isSelected, setIsSelected] = useState(false);
const [input, setInput] = useState(props.defaultValue);
const [startAdornment, setStartAdornment] = useState();
@@ -27,9 +27,9 @@
const onChange = useCallback(
(event) => {
setInput(event.target.value);
- props.onChange?.(event);
+ _onChange?.(event);
},
- [props.onChange]
+ [_onChange]
);
useEffect(() => {
@@ -63,7 +63,7 @@
);
};
-export const PasswordInput = ({ infoButtonProps, ...props }) => {
+export const PasswordInput = ({ infoButtonProps, onChange: _onChange, ...props }) => {
const [showPassword, setShowPassword] = useState(false);
const [isSelected, setIsSelected] = useState(false);
const [input, setInput] = useState(props.defaultValue);
@@ -76,9 +76,9 @@
const onChange = useCallback(
(event) => {
setInput(event.target.value);
- props.onChange?.(event);
+ _onChange?.(event);
},
- [props.onChange]
+ [_onChange]
);
useEffect(() => {
@@ -119,7 +119,7 @@
);
};
-export const NickNameInput = (props) => {
+export const NickNameInput = ({ onChange: _onChange, ...props }) => {
const [isSelected, setIsSelected] = useState(false);
const [input, setInput] = useState(props.defaultValue);
const [startAdornmentVisibility, setStartAdornmentVisibility] = useState();
@@ -127,9 +127,9 @@
const onChange = useCallback(
(event) => {
setInput(event.target.value);
- props.onChange?.(event);
+ _onChange?.(event);
},
- [props.onChange]
+ [_onChange]
);
useEffect(() => {
@@ -152,7 +152,7 @@
);
};
-export const RegularInput = (props) => {
+export const RegularInput = ({ onChange: _onChange, ...props }) => {
const [isSelected, setIsSelected] = useState(false);
const [input, setInput] = useState(props.defaultValue);
const [startAdornmentVisibility, setStartAdornmentVisibility] = useState();
@@ -161,9 +161,9 @@
const onChange = useCallback(
(event) => {
setInput(event.target.value);
- props.onChange?.(event);
+ _onChange?.(event);
},
- [props.onChange]
+ [_onChange]
);
useEffect(() => {