From 34b51cabc91886662cc842faf892dc26b0308a90 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Fri, 23 Feb 2024 02:26:50 +0200
Subject: [PATCH 01/27] Create new modal for displaying preview of Event Page
 Customization

---
 .../slug/edit/default/EventPageCustomizationPreviewModal.js       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js

diff --git a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
new file mode 100644
index 000000000..e69de29bb

From 3fae76aec6465869b769a946b46ea9c20d862f61 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 00:54:17 +0200
Subject: [PATCH 02/27] Add state for controlling preview modal open state

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 01bf8ca0e..019144719 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { useDispatch, useSelector } from 'react-redux'
 import { Grid, Box, Typography, TextField } from '@material-ui/core'
@@ -69,6 +69,7 @@ const themeFields = [
 export default () => {
     const event = useSelector(OrganiserSelectors.event)
     const [organizations] = useAllOrganizations()
+    const [previewOpen, setPreviewOpen] = useState(false)
     const dispatch = useDispatch()
 
     return (

From 2439bb3f4bbef6a341349ea8ab0fbdc3254b5471 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 01:59:17 +0200
Subject: [PATCH 03/27] Add initial code for the structure of the
 EventPageCustomizationPreviewModal component to show preview of customized
 event page

---
 .../EventPageCustomizationPreviewModal.js     | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
index e69de29bb..ae2b90691 100644
--- a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Dialog, DialogTitle, DialogContent, Button } from '@material-ui/core'
+
+export default function PreviewModal({ open, onClose, eventSlug }) {
+    return (
+        <Dialog
+            fullWidth
+            maxWidth="lg"
+            open={open}
+            onClose={onClose}
+            aria-labelledby="preview-modal-title"
+        >
+            <DialogTitle id="preview-modal-title">Event Preview</DialogTitle>
+            <DialogContent>
+                {/* Embedding the event page preview here. We could use an iframe or any other component that renders the preview */}
+                <iframe
+                    // src={`/events/${eventSlug}`}
+                    style={{ width: '100%', height: '500px', border: 'none' }}
+                    title="Event Preview"
+                />
+            </DialogContent>
+            <Button onClick={onClose} color="primary" variant="contained">
+                Close
+            </Button>
+        </Dialog>
+    )
+}

From ed6f2ce8f44c79425b12bdbd6c2b5f1d44adbfd5 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 02:32:38 +0200
Subject: [PATCH 04/27] Modify PreviewOpen state variable name to correctly
 reflect it's boolean state

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 019144719..5aa68be46 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -69,7 +69,7 @@ const themeFields = [
 export default () => {
     const event = useSelector(OrganiserSelectors.event)
     const [organizations] = useAllOrganizations()
-    const [previewOpen, setPreviewOpen] = useState(false)
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false)
     const dispatch = useDispatch()
 
     return (

From 07f30b6269b2db184b78e219d1f72ad0ae1ca18b Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 02:39:54 +0200
Subject: [PATCH 05/27] Modify EventPageCustomizationPreviewModal to arrow
 function

---
 .../slug/edit/default/EventPageCustomizationPreviewModal.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
index ae2b90691..f63013bd5 100644
--- a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Dialog, DialogTitle, DialogContent, Button } from '@material-ui/core'
 
-export default function PreviewModal({ open, onClose, eventSlug }) {
+export default ({ open, onClose, eventSlug }) => {
     return (
         <Dialog
             fullWidth

From a8a76a9022cba2abab7787c4b44519fe21b78bf3 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 02:45:49 +0200
Subject: [PATCH 06/27] Import and add EventPageCustomizationPreviewModal to
 preview event page customizations

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 5aa68be46..fc5ac72b2 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -9,6 +9,7 @@ import FormControl from 'components/inputs/FormControl'
 import TextInput from 'components/inputs/TextInput'
 import ImageUpload from 'components/inputs/ImageUpload'
 import Select from 'components/inputs/Select'
+import EventPageCustomizationPreviewModal from './EventPageCustomizationPreviewModal'
 
 import * as OrganiserSelectors from 'redux/organiser/selectors'
 import { useAllOrganizations } from 'graphql/queries/organization'
@@ -388,7 +389,8 @@ export default () => {
                         <Button
                             variant="contained"
                             onClick={() =>
-                                dispatch(push('/events/' + event.slug))
+                                // dispatch(push('/events/' + event.slug))
+                                setIsPreviewOpen(true)
                             }
                         >
                             Preview
@@ -411,6 +413,11 @@ export default () => {
                     </Grid>
                 </Grid>
             </Grid>
+            <EventPageCustomizationPreviewModal
+                open={isPreviewOpen}
+                onClose={() => setIsPreviewOpen(false)}
+                eventSlug={event.slug}
+            />
         </Grid>
     )
 }

From a8dc883ff25f83963e7a2e59fad4220921cfb614 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 04:29:36 +0200
Subject: [PATCH 07/27] Move EventPageCustomizationPreviewModal to _events
 directory

---
 .../default => _events}/EventPageCustomizationPreviewModal.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/pages/{_organise/slug/edit/default => _events}/EventPageCustomizationPreviewModal.js (94%)

diff --git a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
similarity index 94%
rename from frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
rename to frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
index f63013bd5..b7f46102e 100644
--- a/frontend/src/pages/_organise/slug/edit/default/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
@@ -14,7 +14,7 @@ export default ({ open, onClose, eventSlug }) => {
             <DialogContent>
                 {/* Embedding the event page preview here. We could use an iframe or any other component that renders the preview */}
                 <iframe
-                    // src={`/events/${eventSlug}`}
+                    src={`/events/${eventSlug}`}
                     style={{ width: '100%', height: '500px', border: 'none' }}
                     title="Event Preview"
                 />

From 40f798f9c367c05db19d80f7be9ddf49c0b42dac Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 04:30:07 +0200
Subject: [PATCH 08/27] Move EventPageCustomizationPreviewModal to _events
 directory

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index fc5ac72b2..8f4924e2b 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -9,7 +9,7 @@ import FormControl from 'components/inputs/FormControl'
 import TextInput from 'components/inputs/TextInput'
 import ImageUpload from 'components/inputs/ImageUpload'
 import Select from 'components/inputs/Select'
-import EventPageCustomizationPreviewModal from './EventPageCustomizationPreviewModal'
+import EventPageCustomizationPreviewModal from '../../../../_events/EventPageCustomizationPreviewModal'
 
 import * as OrganiserSelectors from 'redux/organiser/selectors'
 import { useAllOrganizations } from 'graphql/queries/organization'

From 16f2314c728ff61ea47ae2759ca44c177898f602 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 14:25:55 +0200
Subject: [PATCH 09/27] Populate EventPagePreview component with default code
 from _events/slug/index page, subject to modification for preview only
 purposes

---
 .../src/pages/_events/EventPagePreview.js     | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 frontend/src/pages/_events/EventPagePreview.js

diff --git a/frontend/src/pages/_events/EventPagePreview.js b/frontend/src/pages/_events/EventPagePreview.js
new file mode 100644
index 000000000..0738b6811
--- /dev/null
+++ b/frontend/src/pages/_events/EventPagePreview.js
@@ -0,0 +1,66 @@
+import React, { useContext } from 'react'
+
+import { Route, Switch, Redirect } from 'react-router-dom'
+import { AnimatePresence } from 'framer-motion'
+import { useRouteMatch, useLocation } from 'react-router'
+
+import PageWrapper from 'components/layouts/PageWrapper'
+import GlobalNavBar from 'components/navbars/GlobalNavBar'
+import EventFooter from 'components/layouts/EventFooter'
+
+import EventDetail from './slug/default'
+import EventRegister from './slug/register'
+import FinalistVoting from './slug/voteWithToken'
+import EventDetailContext, { EventDetailProvider } from './slug/context'
+
+const EventDetailRouter = () => {
+    const match = useRouteMatch()
+    const location = useLocation()
+    const { eventLoading, eventError, isRegistrationOpen } =
+        useContext(EventDetailContext)
+    // TODO FIX errortext and desc to be from eventErro
+    return (
+        <PageWrapper
+            loading={eventLoading}
+            error={!!eventError}
+            errorText={`Oops, something went wrong`}
+            errorDesc={`Please refresh the page to try again.`}
+            header={() => <GlobalNavBar />}
+            footer={() => <EventFooter />}
+            render={() => {
+                return (
+                    <AnimatePresence>
+                        <Switch location={location} key={location.pathname}>
+                            <Route
+                                exact
+                                path={`${match.url}`}
+                                component={EventDetail}
+                            />
+                            {isRegistrationOpen && (
+                                <Route
+                                    exact
+                                    path={`${match.url}/register`}
+                                    component={EventRegister}
+                                />
+                            )}
+                            <Route
+                                exact
+                                path={`${match.url}/finalist-voting`}
+                                component={FinalistVoting}
+                            />
+                            <Redirect to={`${match.url}`} />
+                        </Switch>
+                    </AnimatePresence>
+                )
+            }}
+        />
+    )
+}
+
+export default () => {
+    return (
+        <EventDetailProvider>
+            <EventDetailRouter />
+        </EventDetailProvider>
+    )
+}

From d85d20373c1d0ed63e04c309885378d833c6a348 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 14:33:18 +0200
Subject: [PATCH 10/27] Replace event slug with new EventPagePreview component
 as a prop for EventPageCustomizationPreviewModal inside
 _organize/slug/edit/default component

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 8f4924e2b..ec99bd046 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -18,6 +18,7 @@ import Button from 'components/generic/Button'
 import { push } from 'connected-react-router'
 import { defaultEventStyles } from './const'
 import Timeline from '../timeline'
+import EventPagePreview from 'pages/_events/EventPagePreview'
 
 const themeFields = [
     {
@@ -416,7 +417,7 @@ export default () => {
             <EventPageCustomizationPreviewModal
                 open={isPreviewOpen}
                 onClose={() => setIsPreviewOpen(false)}
-                eventSlug={event.slug}
+                event={EventPagePreview}
             />
         </Grid>
     )

From c28dc82803cbe053613fdfa90cc6b90ebf4d4861 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sat, 24 Feb 2024 14:45:34 +0200
Subject: [PATCH 11/27] Remove EventPagePreview prop from
 EventPageCustomizationPreviewModal inside _organize/slug/edit/default
 component as the EventPagePreview component will be directly rendered in the
 modal

---
 .../pages/_events/EventPageCustomizationPreviewModal.js   | 8 +++++---
 frontend/src/pages/_organise/slug/edit/default/index.js   | 1 -
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
index b7f46102e..83bf999e8 100644
--- a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { Dialog, DialogTitle, DialogContent, Button } from '@material-ui/core'
+import EventPagePreview from './EventPagePreview'
 
-export default ({ open, onClose, eventSlug }) => {
+export default ({ open, onClose }) => {
     return (
         <Dialog
             fullWidth
@@ -13,11 +14,12 @@ export default ({ open, onClose, eventSlug }) => {
             <DialogTitle id="preview-modal-title">Event Preview</DialogTitle>
             <DialogContent>
                 {/* Embedding the event page preview here. We could use an iframe or any other component that renders the preview */}
-                <iframe
+                {/* <iframe
                     src={`/events/${eventSlug}`}
                     style={{ width: '100%', height: '500px', border: 'none' }}
                     title="Event Preview"
-                />
+                /> */}
+                <EventPagePreview />
             </DialogContent>
             <Button onClick={onClose} color="primary" variant="contained">
                 Close
diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index ec99bd046..789c20e88 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -417,7 +417,6 @@ export default () => {
             <EventPageCustomizationPreviewModal
                 open={isPreviewOpen}
                 onClose={() => setIsPreviewOpen(false)}
-                event={EventPagePreview}
             />
         </Grid>
     )

From 012534c29f11426567c883864d961573d5515aab Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:34:59 +0200
Subject: [PATCH 12/27] Create a custom useQuery hook to allow to read and
 update query parameters to read and set Preview mode

---
 frontend/src/hooks/useQuery.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 frontend/src/hooks/useQuery.js

diff --git a/frontend/src/hooks/useQuery.js b/frontend/src/hooks/useQuery.js
new file mode 100644
index 000000000..eae464b7b
--- /dev/null
+++ b/frontend/src/hooks/useQuery.js
@@ -0,0 +1,19 @@
+import { useLocation, useHistory } from 'react-router-dom'
+
+export function useQuery() {
+    const { search } = useLocation()
+    const history = useHistory()
+
+    function getQuery(key) {
+        const params = new URLSearchParams(search)
+        return params.get(key)
+    }
+
+    function setQuery(key, value) {
+        const params = new URLSearchParams(search)
+        params.set(key, value)
+        history.push({ search: params.toString() })
+    }
+
+    return { getQuery, setQuery }
+}

From 28c066eef602b30966bd9e234602f72b97952fc6 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:36:21 +0200
Subject: [PATCH 13/27] Conditionally render globalnavbar and footer for event
 detail preview

---
 frontend/src/pages/_events/slug/index.js | 62 +++++++++++-------------
 1 file changed, 27 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/_events/slug/index.js b/frontend/src/pages/_events/slug/index.js
index 23e2cd08e..cc3f48a18 100644
--- a/frontend/src/pages/_events/slug/index.js
+++ b/frontend/src/pages/_events/slug/index.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import { Route, Switch, Redirect } from 'react-router-dom'
 import { AnimatePresence } from 'framer-motion'
@@ -16,43 +16,35 @@ import EventDetailContext, { EventDetailProvider } from './context'
 const EventDetailRouter = () => {
     const match = useRouteMatch()
     const location = useLocation()
-    const { eventLoading, eventError, isRegistrationOpen } =
-        useContext(EventDetailContext)
-    // TODO FIX errortext and desc to be from eventErro
+    const [isPreview, setIsPreview] = useState(false)
+    const { eventLoading, eventError, isRegistrationOpen } = useContext(EventDetailContext)
+
+    // Monitor changes to the preview query parameter and update state accordingly
+    useEffect(() => {
+        const searchParams = new URLSearchParams(location.search)
+        setIsPreview(searchParams.get('preview') === 'true')
+    }, [location.search])
+
+    // Conditional rendering for preview or non-preview mode
     return (
         <PageWrapper
             loading={eventLoading}
             error={!!eventError}
-            errorText={`Oops, something went wrong`}
-            errorDesc={`Please refresh the page to try again.`}
-            header={() => <GlobalNavBar />}
-            footer={() => <EventFooter />}
-            render={() => {
-                return (
-                    <AnimatePresence>
-                        <Switch location={location} key={location.pathname}>
-                            <Route
-                                exact
-                                path={`${match.url}`}
-                                component={EventDetail}
-                            />
-                            {isRegistrationOpen && (
-                                <Route
-                                    exact
-                                    path={`${match.url}/register`}
-                                    component={EventRegister}
-                                />
-                            )}
-                            <Route
-                                exact
-                                path={`${match.url}/finalist-voting`}
-                                component={FinalistVoting}
-                            />
-                            <Redirect to={`${match.url}`} />
-                        </Switch>
-                    </AnimatePresence>
-                )
-            }}
+            errorText="Oops, something went wrong"
+            errorDesc="Please refresh the page to try again."
+            header={!isPreview ? () => <GlobalNavBar /> : undefined}
+            footer={!isPreview ? () => <EventFooter /> : undefined}
+            render={() => (
+                <AnimatePresence>
+                    <Switch location={location} key={location.pathname}>
+                        <Route exact path={`${match.url}`} component={EventDetail} />
+                        {isRegistrationOpen && !isPreview && <Route exact path={`${match.url}/register`} component={EventRegister} />
+                        }
+                        {!isPreview && <Route exact path={`${match.url}/finalist-voting`} component={FinalistVoting} />}
+                        <Redirect to={`${match.url}`} />
+                    </Switch>
+                </AnimatePresence>
+            )}
         />
     )
 }
@@ -63,4 +55,4 @@ export default () => {
             <EventDetailRouter />
         </EventDetailProvider>
     )
-}
+}
\ No newline at end of file

From d0db508d8a7c8481c89a24e9b65b3b04e748b235 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:37:59 +0200
Subject: [PATCH 14/27] Reintroduce the use of a  prop and iframe for the
 content of the event deatil preview modal

---
 .../_events/EventPageCustomizationPreviewModal.js   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
index 83bf999e8..b9d29670f 100644
--- a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { Dialog, DialogTitle, DialogContent, Button } from '@material-ui/core'
-import EventPagePreview from './EventPagePreview'
 
-export default ({ open, onClose }) => {
+export default ({ open, onClose, eventSlug }) => {
     return (
         <Dialog
             fullWidth
@@ -13,17 +12,15 @@ export default ({ open, onClose }) => {
         >
             <DialogTitle id="preview-modal-title">Event Preview</DialogTitle>
             <DialogContent>
-                {/* Embedding the event page preview here. We could use an iframe or any other component that renders the preview */}
-                {/* <iframe
-                    src={`/events/${eventSlug}`}
+                <iframe
+                    src={`/events/${eventSlug}?preview=true`}
                     style={{ width: '100%', height: '500px', border: 'none' }}
                     title="Event Preview"
-                /> */}
-                <EventPagePreview />
+                />
             </DialogContent>
             <Button onClick={onClose} color="primary" variant="contained">
                 Close
             </Button>
         </Dialog>
     )
-}
+}
\ No newline at end of file

From dd281a4c24312db8d495fed6cd4165a1eea89ae5 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:39:57 +0200
Subject: [PATCH 15/27] Reintroduce the  prop for the

---
 .../_organise/slug/edit/default/index.js      | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 789c20e88..101d9904d 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -18,7 +18,7 @@ import Button from 'components/generic/Button'
 import { push } from 'connected-react-router'
 import { defaultEventStyles } from './const'
 import Timeline from '../timeline'
-import EventPagePreview from 'pages/_events/EventPagePreview'
+import { useQuery } from '../../../../../hooks/useQuery'
 
 const themeFields = [
     {
@@ -71,9 +71,16 @@ const themeFields = [
 export default () => {
     const event = useSelector(OrganiserSelectors.event)
     const [organizations] = useAllOrganizations()
-    const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+    const { getQuery, setQuery } = useQuery()
+    const isPreviewOpen = getQuery('preview') === 'true'
     const dispatch = useDispatch()
 
+    // Open the preview modal by setting the preview mode in URL
+    const handlePreviewOpen = () => setQuery('preview', 'true')
+
+    // Close the preview modal by removing the preview mode from URL
+    const handlePreviewClose = () => setQuery('preview', 'false')
+
     return (
         <Grid container spacing={3}>
             <Grid item xs={12}>
@@ -389,10 +396,7 @@ export default () => {
                     <Grid item xs={12}>
                         <Button
                             variant="contained"
-                            onClick={() =>
-                                // dispatch(push('/events/' + event.slug))
-                                setIsPreviewOpen(true)
-                            }
+                            onClick={handlePreviewOpen}
                         >
                             Preview
                         </Button>
@@ -416,7 +420,8 @@ export default () => {
             </Grid>
             <EventPageCustomizationPreviewModal
                 open={isPreviewOpen}
-                onClose={() => setIsPreviewOpen(false)}
+                onClose={handlePreviewClose}
+                eventSlug={event.slug}
             />
         </Grid>
     )

From 743d0d33ed250d547a05200d9e59f31893c55c62 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:42:33 +0200
Subject: [PATCH 16/27] Undo changes made in App.js as they're no mode needed

---
 frontend/src/App.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index a5a3cc502..a1d1e089b 100755
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -33,7 +33,7 @@ export default ({ history, location }) => {
     }, [location, history])
 
     useEffect(() => {
-        
+
         if (isAuthenticated) {
             if (isSessionExpired) {
                 setLoading(true)
@@ -41,9 +41,9 @@ export default ({ history, location }) => {
                 dispatch(AuthActions.renewSession()).then(() => {
                     setLoading(false)
                 })
-             } else {
-                 setLoading(false)
-             }
+            } else {
+                setLoading(false)
+            }
         } else {
             setLoading(false)
         }

From 6f78285c832eab5e698f3210744a8ab5507c4bdb Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:45:47 +0200
Subject: [PATCH 17/27] Remove unused imports

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 101d9904d..2553b8e61 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Grid, Box, Typography, TextField } from '@material-ui/core'
 import { FastField } from 'formik'
 
@@ -15,7 +15,7 @@ import * as OrganiserSelectors from 'redux/organiser/selectors'
 import { useAllOrganizations } from 'graphql/queries/organization'
 import ColorSelect from 'components/inputs/Color'
 import Button from 'components/generic/Button'
-import { push } from 'connected-react-router'
+// import { push } from 'connected-react-router'
 import { defaultEventStyles } from './const'
 import Timeline from '../timeline'
 import { useQuery } from '../../../../../hooks/useQuery'
@@ -73,7 +73,6 @@ export default () => {
     const [organizations] = useAllOrganizations()
     const { getQuery, setQuery } = useQuery()
     const isPreviewOpen = getQuery('preview') === 'true'
-    const dispatch = useDispatch()
 
     // Open the preview modal by setting the preview mode in URL
     const handlePreviewOpen = () => setQuery('preview', 'true')

From 26e2412cdd2cc14add14795189f64941a31c8be7 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 20:46:41 +0200
Subject: [PATCH 18/27] Remove unused imports

---
 frontend/src/pages/_organise/slug/edit/default/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 2553b8e61..9a24e49d5 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { useSelector } from 'react-redux'
 import { Grid, Box, Typography, TextField } from '@material-ui/core'

From e5c6c546e0f8efb546e2e35a73870510c96327ff Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 21:26:04 +0200
Subject: [PATCH 19/27] Add isPreview prop to  component and conditionally
 render its back button based on  state

---
 frontend/src/components/events/EventHeroImage/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/events/EventHeroImage/index.js b/frontend/src/components/events/EventHeroImage/index.js
index 00174d338..6dca4c55a 100644
--- a/frontend/src/components/events/EventHeroImage/index.js
+++ b/frontend/src/components/events/EventHeroImage/index.js
@@ -83,6 +83,7 @@ export default ({
     onBack,
     backgroundColor,
     alignRight,
+    isPreview = false,
 }) => {
     const dispatch = useDispatch()
     const classes = useStyles({ backgroundColor })
@@ -145,7 +146,7 @@ export default ({
                 wrapperClass={classes.backButtonWrapper}
                 className={classes.buttonInner}
             >
-                <Button
+                {!isPreview && (<Button
                     onClick={
                         typeof onBack === 'function'
                             ? onBack
@@ -157,7 +158,8 @@ export default ({
                         Back
                     </Typography>
                 </Button>
+                )}
             </Container>
-        </Box>
+        </Box >
     )
 }

From fc6d01e786d9cfa6c2af695e1423152821ee9362 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 21:27:10 +0200
Subject: [PATCH 20/27] Add isPreview prop to  component and conditionally
 disable its buttons based on  state

---
 .../src/pages/_events/slug/default/EventButtons/index.js  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/_events/slug/default/EventButtons/index.js b/frontend/src/pages/_events/slug/default/EventButtons/index.js
index 8257c37cc..dbe7a9bd8 100644
--- a/frontend/src/pages/_events/slug/default/EventButtons/index.js
+++ b/frontend/src/pages/_events/slug/default/EventButtons/index.js
@@ -10,7 +10,7 @@ import Button from 'components/generic/Button'
 import * as AuthSelectors from 'redux/auth/selectors'
 import { useTranslation } from 'react-i18next'
 
-export default ({ event, registration }) => {
+export default ({ event, registration, isPreview = false }) => {
     const { t } = useTranslation()
     const dispatch = useDispatch()
     const match = useRouteMatch()
@@ -37,6 +37,7 @@ export default ({ event, registration }) => {
                         <Grid container spacing={1}>
                             <Grid item xs={12}>
                                 <Button
+                                    disabled={isPreview}
                                     onClick={() =>
                                         dispatch(push(`${match.url}/register`))
                                     }
@@ -48,6 +49,7 @@ export default ({ event, registration }) => {
                             </Grid>
                             <Grid item xs={12}>
                                 <Button
+                                    disabled={isPreview}
                                     onClick={() =>
                                         dispatch(
                                             push(`/dashboard/${event.slug}`),
@@ -64,6 +66,7 @@ export default ({ event, registration }) => {
                 } else {
                     return (
                         <Button
+                            disabled={isPreview}
                             onClick={() =>
                                 dispatch(push(`${match.url}/register`))
                             }
@@ -77,6 +80,7 @@ export default ({ event, registration }) => {
             } else {
                 return (
                     <Button
+                        disabled={isPreview}
                         onClick={() =>
                             dispatch(
                                 push(`/login`, {
@@ -97,6 +101,7 @@ export default ({ event, registration }) => {
                 if (hasRegistration) {
                     return (
                         <Button
+                            disabled={isPreview}
                             onClick={() =>
                                 dispatch(push(`/dashboard/${event.slug}`))
                             }
@@ -116,6 +121,7 @@ export default ({ event, registration }) => {
             } else {
                 return (
                     <Button
+                        disabled={isPreview}
                         onClick={() =>
                             dispatch(push('/login', { nextRoute: match.url }))
                         }

From 01e4a6a9aa518c2006a9042fe34584c3912dbd53 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 21:30:06 +0200
Subject: [PATCH 21/27] Optionally pass  prop to  component and its  and 
 children components

---
 frontend/src/pages/_events/slug/default/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/_events/slug/default/index.js b/frontend/src/pages/_events/slug/default/index.js
index ca9f2275f..377f69675 100644
--- a/frontend/src/pages/_events/slug/default/index.js
+++ b/frontend/src/pages/_events/slug/default/index.js
@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     },
 })
 
-export default () => {
+export default ({ isPreview = false }) => { // isPreview determines if the page is being previewed in the Preview modal
     const dispatch = useDispatch()
     const { slug, event, registration } = useContext(EventDetailContext)
     const classes = useStyles(event.theme)
@@ -127,6 +127,7 @@ export default () => {
                 onBack={() => dispatch(push('/'))}
                 alignRight
                 backgroundColor={event.theme.headerBackgroundColor}
+                isPreview={isPreview}
             />
             <FadeInWrapper>
                 <StaggeredList>
@@ -203,6 +204,7 @@ export default () => {
                         <EventButtons
                             event={event}
                             registration={registration}
+                            isPreview={isPreview}
                         />
                     </Box>
                 </StaggeredList>

From 93bb5e4056aafea087a151957121e95b3a22b2e6 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 21:34:06 +0200
Subject: [PATCH 22/27] Pass  state prop to  component inside 's Route
 component

---
 frontend/src/pages/_events/slug/index.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/_events/slug/index.js b/frontend/src/pages/_events/slug/index.js
index cc3f48a18..14f76b824 100644
--- a/frontend/src/pages/_events/slug/index.js
+++ b/frontend/src/pages/_events/slug/index.js
@@ -37,10 +37,17 @@ const EventDetailRouter = () => {
             render={() => (
                 <AnimatePresence>
                     <Switch location={location} key={location.pathname}>
-                        <Route exact path={`${match.url}`} component={EventDetail} />
-                        {isRegistrationOpen && !isPreview && <Route exact path={`${match.url}/register`} component={EventRegister} />
+                        <Route
+                            exact
+                            path={`${match.url}`}
+                            render={(props) => <EventDetail {...props} isPreview={isPreview} />}
+                        />
+                        {isRegistrationOpen && !isPreview &&
+                            <Route exact path={`${match.url}/register`} component={EventRegister} />
+                        }
+                        {!isPreview &&
+                            <Route exact path={`${match.url}/finalist-voting`} component={FinalistVoting} />
                         }
-                        {!isPreview && <Route exact path={`${match.url}/finalist-voting`} component={FinalistVoting} />}
                         <Redirect to={`${match.url}`} />
                     </Switch>
                 </AnimatePresence>

From da6d498e271cfb328a4910c0c5800140a6a412a7 Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 21:35:33 +0200
Subject: [PATCH 23/27] Delete  component file as it is no more needed

---
 .../src/pages/_events/EventPagePreview.js     | 66 -------------------
 1 file changed, 66 deletions(-)
 delete mode 100644 frontend/src/pages/_events/EventPagePreview.js

diff --git a/frontend/src/pages/_events/EventPagePreview.js b/frontend/src/pages/_events/EventPagePreview.js
deleted file mode 100644
index 0738b6811..000000000
--- a/frontend/src/pages/_events/EventPagePreview.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useContext } from 'react'
-
-import { Route, Switch, Redirect } from 'react-router-dom'
-import { AnimatePresence } from 'framer-motion'
-import { useRouteMatch, useLocation } from 'react-router'
-
-import PageWrapper from 'components/layouts/PageWrapper'
-import GlobalNavBar from 'components/navbars/GlobalNavBar'
-import EventFooter from 'components/layouts/EventFooter'
-
-import EventDetail from './slug/default'
-import EventRegister from './slug/register'
-import FinalistVoting from './slug/voteWithToken'
-import EventDetailContext, { EventDetailProvider } from './slug/context'
-
-const EventDetailRouter = () => {
-    const match = useRouteMatch()
-    const location = useLocation()
-    const { eventLoading, eventError, isRegistrationOpen } =
-        useContext(EventDetailContext)
-    // TODO FIX errortext and desc to be from eventErro
-    return (
-        <PageWrapper
-            loading={eventLoading}
-            error={!!eventError}
-            errorText={`Oops, something went wrong`}
-            errorDesc={`Please refresh the page to try again.`}
-            header={() => <GlobalNavBar />}
-            footer={() => <EventFooter />}
-            render={() => {
-                return (
-                    <AnimatePresence>
-                        <Switch location={location} key={location.pathname}>
-                            <Route
-                                exact
-                                path={`${match.url}`}
-                                component={EventDetail}
-                            />
-                            {isRegistrationOpen && (
-                                <Route
-                                    exact
-                                    path={`${match.url}/register`}
-                                    component={EventRegister}
-                                />
-                            )}
-                            <Route
-                                exact
-                                path={`${match.url}/finalist-voting`}
-                                component={FinalistVoting}
-                            />
-                            <Redirect to={`${match.url}`} />
-                        </Switch>
-                    </AnimatePresence>
-                )
-            }}
-        />
-    )
-}
-
-export default () => {
-    return (
-        <EventDetailProvider>
-            <EventDetailRouter />
-        </EventDetailProvider>
-    )
-}

From 4cd40937bb0dfbb3346f31d244d00697f433cbfa Mon Sep 17 00:00:00 2001
From: David Amebley <davameb@gmail.com>
Date: Sun, 25 Feb 2024 22:16:22 +0200
Subject: [PATCH 24/27] Adjust the size of the preview modal and the position
 and size of it's Close button

---
 .../_events/EventPageCustomizationPreviewModal.js   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
index b9d29670f..1798f0927 100644
--- a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Dialog, DialogTitle, DialogContent, Button } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core'
+import Button from 'components/generic/Button'
 
 export default ({ open, onClose, eventSlug }) => {
     return (
@@ -14,13 +15,15 @@ export default ({ open, onClose, eventSlug }) => {
             <DialogContent>
                 <iframe
                     src={`/events/${eventSlug}?preview=true`}
-                    style={{ width: '100%', height: '500px', border: 'none' }}
+                    style={{ width: '100%', height: '80vh', border: 'none' }}
                     title="Event Preview"
                 />
             </DialogContent>
-            <Button onClick={onClose} color="primary" variant="contained">
-                Close
-            </Button>
+            <DialogActions style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button onClick={onClose} color="primary" variant="contained">
+                    Close
+                </Button>
+            </DialogActions>
         </Dialog>
     )
 }
\ No newline at end of file

From 9caf87939278e50246f10636a4ca42f387a236be Mon Sep 17 00:00:00 2001
From: Javier <javidx@gmail.com>
Date: Thu, 11 Apr 2024 16:04:35 +0300
Subject: [PATCH 25/27] Removed unused packages and commented code Reorganized
 useEffect auth verification setLoading structure

---
 frontend/src/App.js                           | 20 ++++++-------------
 .../organiser/edit/default/index.js           |  1 -
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 20a9c5560..3d0c40a18 100755
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, Suspense } from 'react'
 
-import { ConnectedRouter, push } from 'connected-react-router'
+import { ConnectedRouter } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
 import { ApolloProvider } from '@apollo/client'
 
@@ -38,21 +38,13 @@ export default ({ history, location }) => {
             if (isSessionExpired) {
                 setLoading(true)
                 console.log('renewing session now')
-                dispatch(AuthActions.renewSession())
-                    .then(() => {
-                        setLoading(false)
-                    })
-                    .catch(err => {
-                        console.log(err)
-                        dispatch(SnackbarActions.error('Please, log in again'))
-                    })
-                    .finally(() => setLoading(false))
-            } else {
-                setLoading(false)
+                dispatch(AuthActions.renewSession()).catch(err => {
+                    console.log(err)
+                    dispatch(SnackbarActions.error('Please, log in again'))
+                })
             }
-        } else {
-            setLoading(false)
         }
+        setLoading(false)
     }, [dispatch, isAuthenticated, isSessionExpired])
 
     return (
diff --git a/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js b/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js
index 0b60280d7..1bb9404f5 100644
--- a/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js
+++ b/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js
@@ -15,7 +15,6 @@ import * as OrganiserSelectors from 'redux/organiser/selectors'
 import { useAllOrganizations } from 'graphql/queries/organization'
 import ColorSelect from 'components/inputs/Color'
 import Button from 'components/generic/Button'
-// import { push } from 'connected-react-router'
 import { defaultEventStyles } from './const'
 import Timeline from '../timeline'
 import { useQuery } from 'hooks/useQuery'

From 384d8e7a7b1ed97e42e30d6e553201387df41729 Mon Sep 17 00:00:00 2001
From: Javier <javidx@gmail.com>
Date: Thu, 11 Apr 2024 16:35:15 +0300
Subject: [PATCH 26/27] Removed non-working props Rearranged modal event
 preview closing button Removed unused package

---
 .../components/events/EventHeroImage/index.js | 37 +--------------
 .../EventPageCustomizationPreviewModal.js     | 21 ++++++---
 .../slug/default/EventButtons/index.js        | 12 ++---
 .../slug/default/EventTimeline/index.js       | 47 +++++++++----------
 .../src/pages/_events/slug/default/index.js   | 11 +++--
 5 files changed, 49 insertions(+), 79 deletions(-)

diff --git a/frontend/src/components/events/EventHeroImage/index.js b/frontend/src/components/events/EventHeroImage/index.js
index 6dca4c55a..6a1876375 100644
--- a/frontend/src/components/events/EventHeroImage/index.js
+++ b/frontend/src/components/events/EventHeroImage/index.js
@@ -83,7 +83,6 @@ export default ({
     onBack,
     backgroundColor,
     alignRight,
-    isPreview = false,
 }) => {
     const dispatch = useDispatch()
     const classes = useStyles({ backgroundColor })
@@ -111,42 +110,11 @@ export default ({
                 </Grid>
             </Container>
 
-            {/* <Box className={classes.logoWrapper}>
-                <FadeInWrapper enterDelay={0.3} verticalOffset={50}>
-                    <Box
-                        p={3}
-                        display="flex"
-                        flexDirection="column"
-                        alignItems="center"
-                        justifyContent="center"
-                    >
-                        <Typography
-                            className={classes.overline}
-                            variant="button"
-                        >
-                            {event?._eventTimeFormatted}
-                        </Typography>
-                        <Typography className={classes.title} variant="h3">
-                            {title ?? event?.name}
-                        </Typography>
-                        <Typography className={classes.title} variant="h4">
-                            {subheading}
-                        </Typography>
-
-                        <Typography
-                            className={classes.overline}
-                            variant="button"
-                        >
-                            {event?._eventLocationFormatted}
-                        </Typography>
-                    </Box>
-                </FadeInWrapper>
-            </Box> */}
             <Container
                 wrapperClass={classes.backButtonWrapper}
                 className={classes.buttonInner}
             >
-                {!isPreview && (<Button
+                <Button
                     onClick={
                         typeof onBack === 'function'
                             ? onBack
@@ -158,8 +126,7 @@ export default ({
                         Back
                     </Typography>
                 </Button>
-                )}
             </Container>
-        </Box >
+        </Box>
     )
 }
diff --git a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
index 1798f0927..b4e9521bc 100644
--- a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
+++ b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core'
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+} from '@material-ui/core'
 import Button from 'components/generic/Button'
 
 export default ({ open, onClose, eventSlug }) => {
@@ -12,6 +17,13 @@ export default ({ open, onClose, eventSlug }) => {
             aria-labelledby="preview-modal-title"
         >
             <DialogTitle id="preview-modal-title">Event Preview</DialogTitle>
+            <DialogActions
+                style={{ display: 'flex', justifyContent: 'center' }}
+            >
+                <Button onClick={onClose} color="primary" variant="contained">
+                    Close
+                </Button>
+            </DialogActions>
             <DialogContent>
                 <iframe
                     src={`/events/${eventSlug}?preview=true`}
@@ -19,11 +31,6 @@ export default ({ open, onClose, eventSlug }) => {
                     title="Event Preview"
                 />
             </DialogContent>
-            <DialogActions style={{ display: 'flex', justifyContent: 'center' }}>
-                <Button onClick={onClose} color="primary" variant="contained">
-                    Close
-                </Button>
-            </DialogActions>
         </Dialog>
     )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/_events/slug/default/EventButtons/index.js b/frontend/src/pages/_events/slug/default/EventButtons/index.js
index fd3bfce41..b84ac121f 100644
--- a/frontend/src/pages/_events/slug/default/EventButtons/index.js
+++ b/frontend/src/pages/_events/slug/default/EventButtons/index.js
@@ -10,7 +10,7 @@ import Button from 'components/generic/Button'
 import * as AuthSelectors from 'redux/auth/selectors'
 import { useTranslation } from 'react-i18next'
 
-export default ({ event, registration, isPreview = false }) => {
+export default ({ event, registration }) => {
     const { t } = useTranslation()
     const dispatch = useDispatch()
     const match = useRouteMatch()
@@ -37,7 +37,6 @@ export default ({ event, registration, isPreview = false }) => {
                         <Grid container spacing={1}>
                             <Grid item xs={12}>
                                 <Button
-                                    disabled={isPreview}
                                     onClick={() =>
                                         dispatch(push(`${match.url}/register`))
                                     }
@@ -49,10 +48,11 @@ export default ({ event, registration, isPreview = false }) => {
                             </Grid>
                             <Grid item xs={12}>
                                 <Button
-                                    disabled={isPreview}
                                     onClick={() =>
                                         dispatch(
-                                            push(`/dashboard/event/${event.slug}`),
+                                            push(
+                                                `/dashboard/event/${event.slug}`,
+                                            ),
                                         )
                                     }
                                     variant="applicationsClosed"
@@ -66,7 +66,6 @@ export default ({ event, registration, isPreview = false }) => {
                 } else {
                     return (
                         <Button
-                            disabled={isPreview}
                             onClick={() =>
                                 dispatch(push(`${match.url}/register`))
                             }
@@ -80,7 +79,6 @@ export default ({ event, registration, isPreview = false }) => {
             } else {
                 return (
                     <Button
-                        disabled={isPreview}
                         onClick={() =>
                             dispatch(
                                 push(`/login`, {
@@ -101,7 +99,6 @@ export default ({ event, registration, isPreview = false }) => {
                 if (hasRegistration) {
                     return (
                         <Button
-                            disabled={isPreview}
                             onClick={() =>
                                 dispatch(push(`/dashboard/event/${event.slug}`))
                             }
@@ -121,7 +118,6 @@ export default ({ event, registration, isPreview = false }) => {
             } else {
                 return (
                     <Button
-                        disabled={isPreview}
                         onClick={() =>
                             dispatch(push('/login', { nextRoute: match.url }))
                         }
diff --git a/frontend/src/pages/_events/slug/default/EventTimeline/index.js b/frontend/src/pages/_events/slug/default/EventTimeline/index.js
index 7502bd81e..cf1066912 100644
--- a/frontend/src/pages/_events/slug/default/EventTimeline/index.js
+++ b/frontend/src/pages/_events/slug/default/EventTimeline/index.js
@@ -10,7 +10,6 @@ import {
 } from '@material-ui/core'
 import { sortBy } from 'lodash-es'
 import moment from 'moment'
-import MiscUtils from 'utils/misc'
 import TimelineDot from 'components/generic/TimelineDot'
 import StepConnector from '@material-ui/core/StepConnector'
 
@@ -105,29 +104,29 @@ const EventTimeline = ({ event, textColor, accentColor = undefined }) => {
             realItems.length > 0
                 ? realItems
                 : [
-                    {
-                        date: moment(event.registrationStartTime).format(
-                            dateString,
-                        ),
-                        dateValue: moment(event.registrationStartTime).unix(),
-                        completed: moment(
-                            event.registrationStartTime,
-                        ).isBefore(),
-                        title: 'Application period begins',
-                        active: true,
-                    },
-                    {
-                        date: moment(event.registrationEndTime).format(
-                            dateString,
-                        ),
-                        dateValue: moment(event.registrationEndTime).unix(),
-                        completed: moment(
-                            event.registrationEndTime,
-                        ).isBefore(),
-                        title: 'Application period ends',
-                        active: true,
-                    },
-                ]
+                      {
+                          date: moment(event.registrationStartTime).format(
+                              dateString,
+                          ),
+                          dateValue: moment(event.registrationStartTime).unix(),
+                          completed: moment(
+                              event.registrationStartTime,
+                          ).isBefore(),
+                          title: 'Application period begins',
+                          active: true,
+                      },
+                      {
+                          date: moment(event.registrationEndTime).format(
+                              dateString,
+                          ),
+                          dateValue: moment(event.registrationEndTime).unix(),
+                          completed: moment(
+                              event.registrationEndTime,
+                          ).isBefore(),
+                          title: 'Application period ends',
+                          active: true,
+                      },
+                  ]
 
         if (realItems.length < 1) {
             if (
diff --git a/frontend/src/pages/_events/slug/default/index.js b/frontend/src/pages/_events/slug/default/index.js
index 2dc704d58..00ee5651e 100644
--- a/frontend/src/pages/_events/slug/default/index.js
+++ b/frontend/src/pages/_events/slug/default/index.js
@@ -7,7 +7,6 @@ import EventHeroImage from 'components/events/EventHeroImage'
 import Markdown from 'components/generic/Markdown'
 import AnalyticsService from 'services/analytics'
 
-
 import EventTimeline from './EventTimeline'
 import BannerCarousel from 'components/generic/BannerCarousel'
 import GradientBox from 'components/generic/GradientBox'
@@ -66,7 +65,8 @@ const useStyles = makeStyles({
     },
 })
 
-export default ({ isPreview = false }) => { // isPreview determines if the page is being previewed in the Preview modal
+export default () => {
+    // isPreview determines if the page is being previewed in the Preview modal
     const dispatch = useDispatch()
     const { slug, event, registration } = useContext(EventDetailContext)
     const classes = useStyles(event.theme)
@@ -129,7 +129,6 @@ export default ({ isPreview = false }) => { // isPreview determines if the page
                 onBack={() => dispatch(push('/home'))}
                 alignRight
                 backgroundColor={event.theme.headerBackgroundColor}
-                isPreview={isPreview}
             />
             <FadeInWrapper>
                 <StaggeredList>
@@ -178,7 +177,10 @@ export default ({ isPreview = false }) => { // isPreview determines if the page
                                     <StaggeredListItem>
                                         <Box mt={3} />
                                         <GradientBox color="theme_white" p={3}>
-                                            <Typography variant="button" gutterBottom>
+                                            <Typography
+                                                variant="button"
+                                                gutterBottom
+                                            >
                                                 Event Timeline
                                             </Typography>
                                             <hr className="tw-h-px  tw-bg-gray-500 tw-border-0 tw-dark:bg-gray-900"></hr>
@@ -212,7 +214,6 @@ export default ({ isPreview = false }) => { // isPreview determines if the page
                         <EventButtons
                             event={event}
                             registration={registration}
-                            isPreview={isPreview}
                         />
                     </Box>
                 </StaggeredList>

From aa9c823770dfe33cbe4112f305697b9ef786fe7b Mon Sep 17 00:00:00 2001
From: Javier <javidx@gmail.com>
Date: Thu, 11 Apr 2024 16:40:13 +0300
Subject: [PATCH 27/27] removed unnused package

---
 .../_dashboard/renderDashboard/organiser/edit/default/index.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js b/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js
index 1bb9404f5..d21b7ea7f 100644
--- a/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js
+++ b/frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { useSelector } from 'react-redux'
-import { Grid, Box, Typography, TextField } from '@material-ui/core'
+import { Grid, Box, Typography } from '@material-ui/core'
 import { FastField } from 'formik'
 
 import MarkdownInput from 'components/inputs/MarkdownInput'