From 7fd5699befc6e372c3f41601451c30713f89b64a Mon Sep 17 00:00:00 2001 From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com> Date: Sun, 18 Dec 2022 22:03:18 +0100 Subject: [PATCH] Remove react-simple-dropdown --- client/package.json | 2 +- client/src/components/Home/ActivityList.jsx | 46 +-- .../Home/__snapshots__/index.test.jsx.snap | 118 ++----- .../Nav/__snapshots__/Nav.test.jsx.snap | 327 ++++++------------ client/src/components/Nav/index.jsx | 54 ++- .../src/components/Username/Username.test.jsx | 1 - client/src/main.tsx | 1 - client/src/stylesheets/nav.sass | 17 +- client/yarn.lock | 24 +- 9 files changed, 202 insertions(+), 388 deletions(-) diff --git a/client/package.json b/client/package.json index a4664a9..307d5e7 100644 --- a/client/package.json +++ b/client/package.json @@ -13,6 +13,7 @@ ], "license": "MIT", "dependencies": { + "@react-hookz/web": "^20.0.2", "bootstrap": "^4.6.2", "classnames": "^2.3.2", "jquery": "3", @@ -27,7 +28,6 @@ "react-redux": "^8.0.5", "react-router": "^6.4.4", "react-router-dom": "^6.4.4", - "react-simple-dropdown": "^3.2.3", "react-tooltip": "^5.2.0", "redux": "^4.2.0", "redux-thunk": "^2.4.2", diff --git a/client/src/components/Home/ActivityList.jsx b/client/src/components/Home/ActivityList.jsx index b1bef1f..fcbe6e2 100644 --- a/client/src/components/Home/ActivityList.jsx +++ b/client/src/components/Home/ActivityList.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defer } from 'lodash'; +import { useSafeState, useEventListener } from '@react-hookz/web/esnext'; import ChatInput from '@/components/Chat'; import T from '@/components/T'; @@ -10,39 +11,28 @@ import styles from './styles.module.scss'; const ActivityList = ({ activities, openModal }) => { const [focusChat, setFocusChat] = React.useState(false); - const [scrolledToBottom, setScrolledToBottom] = React.useState(true); + const [scrolledToBottom, setScrolledToBottom] = useSafeState(true); const messageStream = React.useRef(null); const activitiesList = React.useRef(null); - React.useEffect(() => { - const currentMessageStream = messageStream.current; + useEventListener(messageStream, 'scroll', () => { + const messageStreamHeight = messageStream.current.clientHeight; + const activitiesListHeight = activitiesList.current.clientHeight; - // Update scrolledToBottom state if we scroll the activity stream - const onScroll = () => { - const messageStreamHeight = messageStream.current.clientHeight; - const activitiesListHeight = activitiesList.current.clientHeight; + const bodyRect = document.body.getBoundingClientRect(); + const elemRect = activitiesList.current.getBoundingClientRect(); + const offset = elemRect.top - bodyRect.top; + const activitiesListYPos = offset; - const bodyRect = document.body.getBoundingClientRect(); - const elemRect = activitiesList.current.getBoundingClientRect(); - const offset = elemRect.top - bodyRect.top; - const activitiesListYPos = offset; - - const newScrolledToBottom = activitiesListHeight + (activitiesListYPos - 60) <= messageStreamHeight; - if (newScrolledToBottom) { - if (!scrolledToBottom) { - setScrolledToBottom(true); - } - } else if (scrolledToBottom) { - setScrolledToBottom(false); + const newScrolledToBottom = activitiesListHeight + (activitiesListYPos - 60) <= messageStreamHeight; + if (newScrolledToBottom) { + if (!scrolledToBottom) { + setScrolledToBottom(true); } - }; - - currentMessageStream.addEventListener('scroll', onScroll); - return () => { - // Unbind event if component unmounted - currentMessageStream.removeEventListener('scroll', onScroll); - }; - }, [scrolledToBottom]); + } else if (scrolledToBottom) { + setScrolledToBottom(false); + } + }); const scrollToBottomIfShould = React.useCallback(() => { if (scrolledToBottom) { @@ -57,7 +47,7 @@ const ActivityList = ({ activities, openModal }) => { const scrollToBottom = React.useCallback(() => { messageStream.current.scrollTop = messageStream.current.scrollHeight; setScrolledToBottom(true); - }, []); + }, [setScrolledToBottom]); const handleChatClick = () => { setFocusChat(true); diff --git a/client/src/components/Home/__snapshots__/index.test.jsx.snap b/client/src/components/Home/__snapshots__/index.test.jsx.snap index 3762e12..85cb9e8 100644 --- a/client/src/components/Home/__snapshots__/index.test.jsx.snap +++ b/client/src/components/Home/__snapshots__/index.test.jsx.snap @@ -101,93 +101,43 @@ exports[`Connected Home component > should display 1`] = `
- - - - 1 - - -
- -
+ + + + + + + + 1 +
- - 0 - - -
-
+ + + + + + + + 0 + - - 2 - - -
-
    -
  • - - alan - - - - - - - - -
    • -
  • - - dan - - -
    • -
-
+ + + + + + + + 2 + - - 2 - - -
-
    -
  • - - alan - - - - - - - - -
    • -
  • - - dan - - -
    • -
-
+ + + + + + + + 2 + + {members.length} - - - - {members.length} - - -
    + {showMemberList && ( +
      {members.map((member, index) => (
    • @@ -129,8 +125,8 @@ const Nav = ({ members, roomId, userId, roomLocked, toggleLockRoom, openModal, i
      • ))}
    - - + )} +