finally fixed the reloading issue

CodeforLeipzig · Jul 18, 2024 · 08c39ac · 08c39ac
1 parent 1e3d17f
commit 08c39ac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -1,11 +1,14 @@
 import React, { FC } from 'react';
+import { useHistory } from 'react-router';
 
 import SidebarTitle from '../SidebarTitle/';
 import ExpandablePanel from '../../ExpandablePanel';
 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>
       ))}
     </>