From 08c39ac4b64f8fedb504e982c92b2b9233c4dcff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Reichert?=
 <joergreichert@users.noreply.github.com>
Date: Thu, 18 Jul 2024 23:41:11 +0200
Subject: [PATCH] finally fixed the reloading issue

---
 src/components/Overlay/OverlayTop/index.tsx    | 7 ++++---
 src/components/Sidebar/SidebarEvents/index.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Overlay/OverlayTop/index.tsx b/src/components/Overlay/OverlayTop/index.tsx
index b931d34a4..6d398dbab 100644
--- a/src/components/Overlay/OverlayTop/index.tsx
+++ b/src/components/Overlay/OverlayTop/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
 import { isMobile } from 'react-device-detect';
-import { Link } from "react-router-dom";
+import { useHistory } from 'react-router';
 
 import OverlayTitle from '../OverlayTitle/';
 import OverlayEvent from '../OverlayEvent/';
@@ -49,6 +49,7 @@ const StyledWrapper = styled.div`
 `;
 
 const OverlayTop: FC = () => {
+  const history = useHistory();
   const { closeOverlay } = useActions();
   const { intro, eventNote, whatsNew } = content;
 
@@ -60,12 +61,12 @@ const OverlayTop: FC = () => {
         <OverlayTitle size='xxl' title={title} />
         <img style={{ height: 160 }} src='images/leipzig-giesst-logo.png' />
         {!isMobile && (<div style={{ width: '60%', fontSize: '16pt', fontStyle: 'bold', color: 'blue' }}>
-          Kommender Termin: <Link to={"/event/20240722_umweltminister"}>Am Montag, den 22. Juli, 16:00, kommt uns der sächsische Umweltminister im Hildegarten besuchen.</Link><br /><br />Alle Gießevents findet ihr ab sofort <Link to="/events">links in der Seitenleiste</Link> und auf der Karte.
+          Kommender Termin: <a style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => { history.push("/event/20240722_umweltminister")}}>Am Montag, den 22. Juli, 16:00, kommt uns der sächsische Umweltminister im Hildegarten besuchen.</a><br /><br />Alle Gießevents findet ihr ab sofort <a style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => { history.push("/events")}}>links in der Seitenleiste</a> und auf der Karte.
         </div>)}
       </Wrapper>
       <OverlayTitle size='small' title={""} />
       {isMobile && (<div style={{ paddingLeft: '40px', paddingBottom: '20px', width: '60%', fontSize: '16pt', fontStyle: 'bold', color: 'blue' }}>
-        Kommender Termin: <Link to={"/event/20240722_umweltminister"}>Am Montag, den 22. Juli, 16:00, kommt uns der sächsische Umweltminister im Hildegarten besuchen.</Link><br /><br />Alle Gießevents findet ihr ab sofort <Link to="/events">links in der Seitenleiste</Link> und auf der Karte.
+        Kommender Termin: <a style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => { history.push("/event/20240722_umweltminister")}}>Am Montag, den 22. Juli, 16:00, kommt uns der sächsische Umweltminister im Hildegarten besuchen.</a><br /><br />Alle Gießevents findet ihr ab sofort <a style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => { history.push("/events")}}>links in der Seitenleiste</a> und auf der Karte.
         </div>)}
       <OverlayTitle size='xxl' title={subline} />
       {isMobile && <OverlayTitle size='medium' title={disclaimer} />}
diff --git a/src/components/Sidebar/SidebarEvents/index.tsx b/src/components/Sidebar/SidebarEvents/index.tsx
index 2db1ac73a..b12443533 100644
--- a/src/components/Sidebar/SidebarEvents/index.tsx
+++ b/src/components/Sidebar/SidebarEvents/index.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useHistory } from 'react-router';
 
 import SidebarTitle from '../SidebarTitle/';
 import ExpandablePanel from '../../ExpandablePanel';
@@ -6,6 +7,8 @@ import SmallParagraph from '../../SmallParagraph';
 import { useEventsGeoJson } from '../../../utils/hooks/useEventsGeoJson';
 
 const SidebarEvents: FC = () => {
+  const history = useHistory();
+
   const { isLoading: isLoadingEventsGeojson, data: eventsGeoJson } = useEventsGeoJson();
   if (isLoadingEventsGeojson) {
     return (<div>Laden...</div>)
@@ -20,7 +23,7 @@ const SidebarEvents: FC = () => {
         <ExpandablePanel isExpanded title={feature.properties.name} key={feature.properties.id}>
           <SmallParagraph>{new Date(feature.properties.date).toLocaleDateString()}{feature.properties.start ? ', ' + feature.properties.start : ''}{feature.properties.end ? ' - ' + feature.properties.end : ''}</SmallParagraph>
           <SmallParagraph>{feature.properties.address ? feature.properties.address : ''}</SmallParagraph>
-          <SmallParagraph><a style={{ cursor: 'pointer' }} href={"/event/" + feature.properties.id}>Zum Event</a></SmallParagraph>
+          <SmallParagraph><div style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => { history.push("/event/" + feature.properties.id)}}>Zum Event</div></SmallParagraph>
         </ExpandablePanel>
       ))}
     </>