From 99df6dbcb3e95a7a72a300370dcacb8686697244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 13 Mar 2023 12:20:45 +0000 Subject: [PATCH] [web] Allow defining Sidebar contents via children prop That way, the use of React.useMemo to avoid re-rendering them in each visibility change is not longer needed. It simplifies things a lot. --- web/src/components/core/Sidebar.jsx | 46 ++---------------------- web/src/components/core/Sidebar.test.jsx | 42 +++++++++++++--------- web/src/components/layout/Layout.jsx | 18 ++++++++-- web/src/test-utils.js | 3 +- 4 files changed, 45 insertions(+), 64 deletions(-) diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx index 4a71188626..85d9b6884f 100644 --- a/web/src/components/core/Sidebar.jsx +++ b/web/src/components/core/Sidebar.jsx @@ -20,51 +20,12 @@ */ import React, { useEffect, useRef, useState } from "react"; -import { Icon, PageActions, PageOptionsSlot } from "~/components/layout"; -import { About, Disclosure, LogsButton, ShowLogButton, ShowTerminalButton } from "~/components/core"; - -/** - * Internal and memoized component for rendering links only once - * - * The reason of this is to avoid re-rendering those links each time - * the sidebar visibility is changed. It does not make sense to re-trigger - * their logic (which might be complicated or not) just because the - * "expanded"/"visible" state of the Sidebar has changed. - * - * The issue can be fixed in other ways, but there is a reason for discarded - * them at this moment. Namely, - * - * - Use a stateless Sidebar, handling the visibility with pure CSS - * - * That would be great, but it's (almost?) not possible to make it - * completely accessible using just CSS. - * - * - Move these children outside, placing them in the same location the - * is used. - * - * It will not work when using the function as child component pattern, - * which is the case of the PageOptions content, which we will use for - * teleporting a Page options to the Sidebar by now. - * - * To know more about how children and parent re-renders behavior, have a look to - * https://www.developerway.com/posts/react-elements-children-parents - */ -const FixedLinks = React.memo(() => ( -
-

Other options

- - - - - - -
-), () => true); +import { Icon, PageActions } from "~/components/layout"; /** * D-Installer sidebar navigation */ -export default function Sidebar() { +export default function Sidebar({ children }) { const [isOpen, setIsOpen] = useState(false); const closeButtonRef = useRef(null); @@ -125,8 +86,7 @@ export default function Sidebar() {
- - + { children }