event redirect page, event details for unauthorized users

Author: Tschonti

packages/client/src/App.tsx

@@ -6,6 +6,7 @@ import { PLayout } from './components/commons/PLayout'
 import { AuthorizedPage } from './pages/authorized/Authorized.page'
 import { ErrorPage } from './pages/error/error.page'
 import { EventDetailsPage } from './pages/events/EventDetails.page'
+import { EventRedirectPage } from './pages/events/EventRedirect.page'
 import { IndexPage } from './pages/events/Index.page'
 import { FAQPage } from './pages/faq/FAQ.page'
 import { LoginPage } from './pages/Login.page'
@@ -80,6 +81,11 @@ export const App = () => {
                 <Route index element={<EventDetailsPage />} />
               </Route>
             </Route>
+            <Route path={PATHS.EVENT_REDIRECT}>
+              <Route path=":eventId">
+                <Route index element={<EventRedirectPage />} />
+              </Route>
+            </Route>
             <Route path={PATHS.RATINGS}>
               <Route path=":ratingId" element={<RatingPage />} />
             </Route>

packages/client/src/components/commons/NavigateWithError.tsx

@@ -15,5 +15,5 @@ export const NavigateWithError = ({ error, to }: Props) => {
     toast({ title: error.message, status: 'error' })
   }, [toast, error])
 
-  return <Navigate to={to} />
+  return <Navigate replace to={to} />
 }

packages/client/src/pages/events/EventDetails.page.tsx

@@ -1,4 +1,4 @@
-import { Button, Heading, HStack, Stack, Text, useToast, VStack } from '@chakra-ui/react'
+import { Alert, AlertIcon, AlertTitle, Button, Heading, HStack, Stack, Text, useToast, VStack } from '@chakra-ui/react'
 import { EventState, RatingRole, ratingRoleArray } from '@pontozo/common'
 import { useEffect, useState } from 'react'
 import { FaArrowLeft, FaDatabase, FaMedal } from 'react-icons/fa'
@@ -7,7 +7,6 @@ import { useRatingContext } from 'src/api/contexts/useRatingContext'
 import { useStartRatingMutation } from 'src/api/hooks/ratingHooks'
 import { EventRatingStateBadge } from 'src/components/commons/EventRatingStateBadge'
 import { HelmetTitle } from 'src/components/commons/HelmetTitle'
-import { LoginNavigate } from 'src/components/commons/LoginNavigate'
 import { NavigateWithError } from 'src/components/commons/NavigateWithError'
 import { formatDateRange, getRatingEndDate, getRatingResultPublishedDate } from 'src/util/dateHelpers'
 import { onError } from 'src/util/onError'
@@ -61,10 +60,6 @@ export const EventDetailsPage = () => {
     }
   }
 
-  if (!isLoggedIn) {
-    return <LoginNavigate />
-  }
-
   if (dbQuery.isLoading) {
     return <LoadingSpinner />
   }
@@ -113,6 +108,12 @@ export const EventDetailsPage = () => {
           MTFSZ Adatbank
         </Button>
       </HStack>
+      {!isLoggedIn && (
+        <Alert status="warning">
+          <AlertIcon />
+          <AlertTitle>A verseny értékeléséhez először jelentkezz be!</AlertTitle>
+        </Alert>
+      )}
       <Heading size="md" mt={3}>
         Szerepkör
       </Heading>
@@ -126,7 +127,7 @@ export const EventDetailsPage = () => {
           role={r}
           onSelected={() => setRole(r)}
           selected={role === r}
-          disabled={!!userRating || event.state !== EventState.RATEABLE}
+          disabled={!!userRating || event.state !== EventState.RATEABLE || !isLoggedIn}
         />
       ))}
       <Heading size="md" mt={3}>
@@ -142,7 +143,7 @@ export const EventDetailsPage = () => {
           <StageListItem
             stage={s}
             key={s.id}
-            disabled={!!userRating || event.state !== EventState.RATEABLE}
+            disabled={!!userRating || event.state !== EventState.RATEABLE || !isLoggedIn}
             onChecked={(c) => onItemChecked(c, s.id)}
             checked={stageIds.includes(s.id)}
           />
@@ -155,7 +156,7 @@ export const EventDetailsPage = () => {
           isLoading={startRating.isLoading || dbQuery.isLoading}
           eventWithRating={dbQuery.data}
           onStartClick={onStartClick}
-          startDisabled={!role || !stageIds.length}
+          startDisabled={!role || !stageIds.length || !isLoggedIn}
           continueDisabled={event.state !== EventState.RATEABLE}
         />
       </HStack>

packages/client/src/pages/events/EventRedirect.page.tsx

@@ -0,0 +1,15 @@
+import { EventState } from '@pontozo/common'
+import { Navigate, useParams } from 'react-router-dom'
+import { useFetchEvent } from 'src/api/hooks/eventQueryHooks'
+import { LoadingSpinner } from 'src/components/commons/LoadingSpinner'
+import { NavigateWithError } from 'src/components/commons/NavigateWithError'
+import { PATHS } from 'src/util/paths'
+
+export const EventRedirectPage = () => {
+  const { eventId } = useParams()
+  const { data, isLoading, error } = useFetchEvent(+eventId!)
+  if (error) return <NavigateWithError error={error} to={PATHS.INDEX} />
+  if (isLoading || !data) return <LoadingSpinner />
+  if (data.event.state === EventState.RESULTS_READY) return <Navigate replace to={`${PATHS.RESULTS}/${eventId}`} />
+  return <Navigate replace to={`${PATHS.EVENTS}/${eventId}`} />
+}

packages/client/src/util/paths.ts

@@ -7,6 +7,7 @@ export enum PATHS {
   SEASONS = '/admin/seasons',
   USERS = '/admin/users',
   EVENTS = '/events',
+  EVENT_REDIRECT = '/event-redirect',
   RATINGS = '/ratings',
   AUTHORIZED = '/authorized',
   PROFILE = '/profile',

packages/functions/src/functions/events/getOne.ts

@@ -1,6 +1,6 @@
 import { app, HttpRequest, InvocationContext } from '@azure/functions'
 import { EventWithRating, PontozoException } from '@pontozo/common'
-import { getUserFromHeader } from '../../service/auth.service'
+import { getUserFromHeaderIfPresent } from '../../service/auth.service'
 import Event from '../../typeorm/entities/Event'
 import EventRating from '../../typeorm/entities/EventRating'
 import { getAppDataSource } from '../../typeorm/getConfig'
@@ -15,13 +15,13 @@ export const getOneEvent = async (req: HttpRequest, context: InvocationContext):
   try {
     const eventId = validateId(req)
 
-    const user = getUserFromHeader(req)
+    const user = getUserFromHeaderIfPresent(req)
     const ads = await getAppDataSource(context)
     const eventQuery = ads.getRepository(Event).findOne({ where: { id: eventId }, relations: { organisers: true, stages: true } })
     const userRatingQuery = ads
       .getRepository(EventRating)
-      .findOne({ where: { eventId: eventId, userId: user.szemely_id }, relations: { stages: true } })
-    const [event, userRating] = await Promise.all([eventQuery, userRatingQuery])
+      .findOne({ where: { eventId: eventId, userId: user?.szemely_id }, relations: { stages: true } })
+    const [event, userRating] = await Promise.all([eventQuery, user ? userRatingQuery : Promise.resolve(undefined)])
 
     if (!event) {
       throw new PontozoException('A verseny nem található!', 404)

packages/functions/src/service/auth.service.ts

@@ -19,6 +19,14 @@ export const getUserFromHeader = (req: HttpRequest): DbUser => {
   }
 }
 
+export const getUserFromHeaderIfPresent = (req: HttpRequest): DbUser | undefined => {
+  const authHeader = req.headers.get('Authorization')
+  if (!authHeader) {
+    return
+  }
+  return getUserFromHeader(req)
+}
+
 export const getUserFromHeaderAndAssertAdmin = async (req: HttpRequest, context: InvocationContext): Promise<DbUser> => {
   const user = getUserFromHeader(req)
   context.log(`User #${user.szemely_id} attempting to access entity reserved for admins`)