From c9fa5599b4a832930b53570d595cbc37e8827367 Mon Sep 17 00:00:00 2001
From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com>
Date: Thu, 15 Dec 2022 22:42:21 +0100
Subject: [PATCH] Refactor Nav component
---
client/src/components/Nav/Nav.test.jsx | 7 +-
.../Nav/__snapshots__/Nav.test.jsx.snap | 288 ++++++++++++++++++
client/src/components/Nav/index.jsx | 217 +++++++------
3 files changed, 395 insertions(+), 117 deletions(-)
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 (
-