diff --git a/client/src/components/Nav/Nav.test.jsx b/client/src/components/Nav/Nav.test.jsx
index c1ecd54..d96d6c0 100644
--- a/client/src/components/Nav/Nav.test.jsx
+++ b/client/src/components/Nav/Nav.test.jsx
@@ -99,8 +99,7 @@ test('Nav component is displaying with another configuration and can rerender',
/>,
);
- expect(mock$).toHaveBeenCalledWith('.me-icon-wrap');
- expect(mock$).toHaveBeenLastCalledWith('.owner-icon-wrap');
+ expect(asFragment()).toMatchSnapshot();
});
test('Can copy room url', async () => {
@@ -127,13 +126,13 @@ test('Can copy room url', async () => {
fireEvent.click(getByText(`/testRoom`));
expect(document.execCommand).toHaveBeenLastCalledWith('copy');
- expect(mock$).toHaveBeenCalledTimes(15);
+ expect(mock$).toHaveBeenCalledTimes(12);
expect(mockTooltip).toHaveBeenLastCalledWith('show');
// Wait tooltip closing
vi.runAllTimers();
- expect(mock$).toHaveBeenCalledTimes(18);
+ expect(mock$).toHaveBeenCalledTimes(15);
expect(mockTooltip).toHaveBeenLastCalledWith('hide');
});
diff --git a/client/src/components/Nav/__snapshots__/Nav.test.jsx.snap b/client/src/components/Nav/__snapshots__/Nav.test.jsx.snap
index 1ca2904..000d2a9 100644
--- a/client/src/components/Nav/__snapshots__/Nav.test.jsx.snap
+++ b/client/src/components/Nav/__snapshots__/Nav.test.jsx.snap
@@ -529,3 +529,291 @@ exports[`Nav component is displaying with another configuration and can rerender
`;
+
+exports[`Nav component is displaying with another configuration and can rerender 2`] = `
+
+
+
+`;
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 18f3eb9..c9288be 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import { nanoid } from 'nanoid';
import { Info, Settings, PlusCircle, User, Users, Lock, Unlock, Star } from 'react-feather';
@@ -9,8 +9,8 @@ import $ from 'jquery';
import logoImg from '@/img/logo.png';
import Username from '@/components/Username';
-class Nav extends Component {
- componentDidMount() {
+const Nav = ({ members, roomId, userId, roomLocked, toggleLockRoom, openModal, iAmOwner, translations }) => {
+ React.useEffect(() => {
const clip = new Clipboard('.clipboard-trigger');
clip.on('success', () => {
@@ -28,133 +28,124 @@ class Nav extends Component {
trigger: 'manual',
});
});
- }
+ }, []);
- componentDidUpdate() {
- $(() => {
- $('.me-icon-wrap').tooltip();
- $('.owner-icon-wrap').tooltip();
- });
- }
-
- newRoom() {
+ const newRoom = () => {
$('.navbar-collapse').collapse('hide');
window.open(`/${nanoid()}`);
- }
+ };
- handleSettingsClick() {
+ const handleSettingsClick = () => {
$('.navbar-collapse').collapse('hide');
- this.props.openModal('Settings');
- }
+ openModal('Settings');
+ };
- handleAboutClick() {
+ const handleAboutClick = () => {
$('.navbar-collapse').collapse('hide');
- this.props.openModal('About');
- }
+ openModal('About');
+ };
- handleToggleLock() {
- if (!this.props.iAmOwner) {
+ const handleToggleLock = () => {
+ if (!iAmOwner) {
$('.lock-room').tooltip('show');
setTimeout(() => $('.lock-room').tooltip('hide'), 3000);
return;
}
- this.props.toggleLockRoom();
- }
+ toggleLockRoom();
+ };
- render() {
- return (
-