Update - Bringing #770 with merge conflicts solved

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 (

frontend/src/components/events/EventHeroImage/index.js

@@ -110,37 +110,6 @@ 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}

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 }
+}

frontend/src/pages/_dashboard/renderDashboard/organiser/edit/default/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Grid, Box, Typography } from '@material-ui/core'
 import { FastField } from 'formik'
 
@@ -9,14 +9,15 @@ 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 Timeline from '../timeline'
+import EventPageCustomizationPreviewModal from 'pages/_events/EventPageCustomizationPreviewModal'
 
 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'
 
 const themeFields = [
     {
@@ -69,7 +70,14 @@ const themeFields = [
 export default () => {
     const event = useSelector(OrganiserSelectors.event)
     const [organizations] = useAllOrganizations()
-    const dispatch = useDispatch()
+    const { getQuery, setQuery } = useQuery()
+    const isPreviewOpen = getQuery('preview') === 'true'
+
+    // 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}>
@@ -382,12 +390,7 @@ export default () => {
                         </Grid>
                     ))}
                     <Grid item xs={12}>
-                        <Button
-                            variant="contained"
-                            onClick={() =>
-                                dispatch(push('/events/' + event.slug))
-                            }
-                        >
+                        <Button variant="contained" onClick={handlePreviewOpen}>
                             Preview
                         </Button>
                         <FastField name="theme">
@@ -407,6 +410,11 @@ export default () => {
                     </Grid>
                 </Grid>
             </Grid>
+            <EventPageCustomizationPreviewModal
+                open={isPreviewOpen}
+                onClose={handlePreviewClose}
+                eventSlug={event.slug}
+            />
         </Grid>
     )
 }

frontend/src/pages/_events/EventPageCustomizationPreviewModal.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+} from '@material-ui/core'
+import Button from 'components/generic/Button'
+
+export default ({ 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>
+            <DialogActions
+                style={{ display: 'flex', justifyContent: 'center' }}
+            >
+                <Button onClick={onClose} color="primary" variant="contained">
+                    Close
+                </Button>
+            </DialogActions>
+            <DialogContent>
+                <iframe
+                    src={`/events/${eventSlug}?preview=true`}
+                    style={{ width: '100%', height: '80vh', border: 'none' }}
+                    title="Event Preview"
+                />
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/src/pages/_events/slug/default/EventButtons/index.js

@@ -50,7 +50,9 @@ export default ({ event, registration }) => {
                                 <Button
                                     onClick={() =>
                                         dispatch(
-                                            push(`/dashboard/event/${event.slug}`),
+                                            push(
+                                                `/dashboard/event/${event.slug}`,
+                                            ),
                                         )
                                     }
                                     variant="applicationsClosed"

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 (

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'
@@ -67,6 +66,7 @@ const useStyles = makeStyles({
 })
 
 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)
@@ -177,7 +177,10 @@ export default () => {
                                     <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>

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,42 @@ 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}`}
+                            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} />
+                        }
+                        <Redirect to={`${match.url}`} />
+                    </Switch>
+                </AnimatePresence>
+            )}
         />
     )
 }
@@ -63,4 +62,4 @@ export default () => {
             <EventDetailRouter />
         </EventDetailProvider>
     )
-}
+}