From 81840ed57465066a35333af6772f4d52b16ead20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 27 Sep 2024 13:11:25 +0100
Subject: [PATCH] fix: event timeline should unmount when hidden and be closed
 by default (#8294)

Fixes 2 bugs:

- The initial state of the event timeline should have `open: false`, not
`true` - Closed by default, unless opened
- The event timeline should unmount when hidden - It should not emit
requests when closed
---
 .../events/EventTimeline/useEventTimeline.ts  |  2 +-
 .../MainLayout/MainLayoutEventTimeline.tsx    | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/events/EventTimeline/useEventTimeline.ts b/frontend/src/component/events/EventTimeline/useEventTimeline.ts
index 31467d988689..66367ea2ab06 100644
--- a/frontend/src/component/events/EventTimeline/useEventTimeline.ts
+++ b/frontend/src/component/events/EventTimeline/useEventTimeline.ts
@@ -64,7 +64,7 @@ type EventTimelineState = {
 };
 
 const defaultState: EventTimelineState = {
-    open: true,
+    open: false,
     timeSpan: timeSpanOptions[0],
 };
 
diff --git a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
index f3e0da38e9a2..4272deccfc11 100644
--- a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
@@ -1,4 +1,5 @@
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EventTimeline } from 'component/events/EventTimeline/EventTimeline';
 import { useEffect, useState } from 'react';
 
@@ -6,6 +7,12 @@ interface IMainLayoutEventTimelineProps {
     open: boolean;
 }
 
+const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    height: '105px',
+    overflow: 'hidden',
+}));
+
 export const MainLayoutEventTimeline = ({
     open,
 }: IMainLayoutEventTimelineProps) => {
@@ -16,9 +23,8 @@ export const MainLayoutEventTimeline = ({
     }, []);
 
     return (
-        <Box
+        <StyledEventTimelineWrapper
             sx={{
-                overflow: 'hidden',
                 transition: isInitialLoad
                     ? 'none'
                     : 'max-height 0.3s ease-in-out',
@@ -31,8 +37,11 @@ export const MainLayoutEventTimeline = ({
                     backgroundColor: theme.palette.background.paper,
                 })}
             >
-                <EventTimeline />
+                <ConditionallyRender
+                    condition={open}
+                    show={<EventTimeline />}
+                />
             </Box>
-        </Box>
+        </StyledEventTimelineWrapper>
     );
 };