navigation between rating and result pages

Tschonti · Dec 23, 2024 · 9bb24c6 · 9bb24c6
1 parent 56bec96
commit 9bb24c6
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 25 deletions.
diff --git a/packages/client/src/components/commons/EventRatingStateBadge.tsx b/packages/client/src/components/commons/EventRatingStateBadge.tsx
@@ -4,7 +4,7 @@ import { eventStateColor, translateEventState } from 'src/util/enumHelpers'
 
 export const EventRatingStateBadge = ({ state }: { state: EventState }) => {
   return (
-    <Badge colorScheme={eventStateColor[state]} variant="solid" fontSize="1rem">
+    <Badge bg={eventStateColor[state]} variant="solid" fontSize="1rem">
       {translateEventState[state]}
     </Badge>
   )

diff --git a/packages/client/src/pages/events/EventDetails.page.tsx b/packages/client/src/pages/events/EventDetails.page.tsx
@@ -1,8 +1,8 @@
-import { Button, Heading, HStack, Link as ChakraLink, Stack, Text, useToast, VStack } from '@chakra-ui/react'
+import { 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 } from 'react-icons/fa'
-import { Link, useParams } from 'react-router-dom'
+import { FaArrowLeft, FaDatabase, FaMedal } from 'react-icons/fa'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import { useRatingContext } from 'src/api/contexts/useRatingContext'
 import { useStartRatingMutation } from 'src/api/hooks/ratingHooks'
 import { EventRatingStateBadge } from 'src/components/commons/EventRatingStateBadge'
@@ -21,6 +21,7 @@ import { StageListItem } from './components/StageListItem'
 
 export const EventDetailsPage = () => {
   const { eventId } = useParams()
+  const nav = useNavigate()
   const dbQuery = useFetchEvent(+eventId!)
   const { isLoggedIn } = useAuthContext()
   const toast = useToast()
@@ -81,14 +82,29 @@ export const EventDetailsPage = () => {
     <VStack alignItems="flex-start" spacing={3}>
       <HelmetTitle title={`Pontoz-O | ${event.name}`} />
       <Heading>{event.name} értékelése</Heading>
-      <EventRatingStateBadge state={event.state} />
-      <Heading size="md">{formatDateRange(event.startDate, event.endDate)}</Heading>
+      <HStack w="100%">
+        <Heading size="md">{formatDateRange(event.startDate, event.endDate)}</Heading>
+        <EventRatingStateBadge state={event.state} />
+      </HStack>
       <Text>
         <b>Rendező{event.organisers.length > 1 && 'k'}:</b> {event.organisers.map((o) => o.shortName).join(', ')}
       </Text>
-      <ChakraLink color="brand.500" fontWeight="bold" href={`http://adatbank.mtfsz.hu/esemeny/show/esemeny_id/${event.id}`} target="_blank">
-        MTFSZ Adatbank esemény
-      </ChakraLink>
+      <HStack flexWrap="wrap">
+        {event.state === EventState.RESULTS_READY && (
+          <Button onClick={() => nav(`${PATHS.RESULTS}/${eventId}`)} leftIcon={<FaMedal />} colorScheme="brand">
+            Értékelés eredményei
+          </Button>
+        )}
+
+        <Button
+          leftIcon={<FaDatabase />}
+          onClick={() => window.open(`http://adatbank.mtfsz.hu/esemeny/show/esemeny_id/${event.id}`, '_blank', 'noopener,noreferrer')}
+          colorScheme="red"
+          bg="mtfszRed"
+        >
+          MTFSZ Adatbank
+        </Button>
+      </HStack>
       <Heading size="md" mt={3}>
         Szerepkör
       </Heading>

diff --git a/packages/client/src/pages/events/components/EventRankBadge.tsx b/packages/client/src/pages/events/components/EventRankBadge.tsx
@@ -10,7 +10,7 @@ type Props = {
 export const EventRankBadge = ({ event, stage, fontSize }: Props) => {
   const realRank = (event?.highestRank as Rank) || (stage?.rank as Rank) || Rank.REGIONAL
   return (
-    <Badge variant="solid" colorScheme={rankColor[realRank]} fontSize={fontSize}>
+    <Badge variant="solid" bg={rankColor[realRank]} fontSize={fontSize}>
       {translateRank[realRank]}
     </Badge>
   )

diff --git a/packages/client/src/pages/results/ResultDetails.page.tsx b/packages/client/src/pages/results/ResultDetails.page.tsx
@@ -1,7 +1,8 @@
-import { Box, FormLabel, Heading, HStack, Link as ChakraLink, Select, Stack, Text, VStack } from '@chakra-ui/react'
+import { Box, Button, FormLabel, Heading, HStack, Select, Stack, Text, VStack } from '@chakra-ui/react'
 import { ALL_ROLES, PublicEventMessage } from '@pontozo/common'
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { FaDatabase, FaStar } from 'react-icons/fa'
+import { useNavigate, useParams } from 'react-router-dom'
 import { useResultTableContext } from 'src/api/contexts/useResultTableContext'
 import { useFetchEventMessages, useFetchEventResults } from 'src/api/hooks/resultHooks'
 import { HelmetTitle } from 'src/components/commons/HelmetTitle'
@@ -18,6 +19,7 @@ import { RatingMessage } from './components/RatingMessage'
 
 export const ResultDetailsPage = () => {
   const { eventId } = useParams()
+  const nav = useNavigate()
   const { data: event, isLoading, error } = useFetchEventResults(+eventId!)
   const { data: messageData, isLoading: messagesLoading, error: messagesError, refetch } = useFetchEventMessages(+eventId!)
   const [filteredMessages, setFilteredMessages] = useState<PublicEventMessage[]>([])
@@ -80,9 +82,19 @@ export const ResultDetailsPage = () => {
           </Text>
         )}
       </Box>
-      <ChakraLink color="brand.500" fontWeight="bold" href={`http://adatbank.mtfsz.hu/esemeny/show/esemeny_id/${event.id}`} target="_blank">
-        MTFSZ Adatbank esemény
-      </ChakraLink>
+      <HStack flexWrap="wrap">
+        <Button onClick={() => nav(`${PATHS.EVENTS}/${eventId}`)} leftIcon={<FaStar />} colorScheme="brand">
+          Értékelési oldal
+        </Button>
+        <Button
+          leftIcon={<FaDatabase />}
+          onClick={() => window.open(`http://adatbank.mtfsz.hu/esemeny/show/esemeny_id/${event.id}`, '_blank', 'noopener,noreferrer')}
+          colorScheme="red"
+          bg="mtfszRed"
+        >
+          MTFSZ Adatbank
+        </Button>
+      </HStack>
       <Stack direction={['column', 'column', 'row']} gap={2} w="100%">
         <AgeGroupRoleSelector />
       </Stack>

diff --git a/packages/client/src/pages/results/components/RatingMessage.tsx b/packages/client/src/pages/results/components/RatingMessage.tsx
@@ -57,11 +57,11 @@ export const RatingMessage = ({ ratingWithMessage: pem, refetchMessages }: Props
               <VStack alignItems="flex-start" gap={1}>
                 <Text fontWeight="bold">Névtelen felhasználó</Text>
                 <HStack>
-                  <Badge colorScheme={ratingRoleColor[pem.role]} variant="solid">
+                  <Badge bg={ratingRoleColor[pem.role]} variant="solid">
                     {translateRole[pem.role]}
                   </Badge>
                   {pem.role === RatingRole.COMPETITOR && (
-                    <Badge colorScheme={ageGroupColor[pem.ageGroup]} variant="solid">
+                    <Badge bg={ageGroupColor[pem.ageGroup]} variant="solid">
                       {translateAgeGroup[pem.ageGroup]}
                     </Badge>
                   )}

diff --git a/packages/client/src/util/enumHelpers.ts b/packages/client/src/util/enumHelpers.ts
@@ -17,9 +17,9 @@ export const translateRole: RoleDict = {
 
 export const ratingRoleColor: RoleDict = {
   [RatingRole.COACH]: 'blue',
-  [RatingRole.COMPETITOR]: 'brand',
+  [RatingRole.COMPETITOR]: 'brand.500',
   [RatingRole.JURY]: 'orange',
-  [RatingRole.ORGANISER]: 'red',
+  [RatingRole.ORGANISER]: 'mtfszRed',
 }
 
 export const getRoleDescription: RoleDict = {
@@ -58,8 +58,8 @@ export const translateAgeGroup: AgeGroupDictionary = {
 
 export const ageGroupColor: AgeGroupDictionary = {
   [AgeGroup.YOUTH]: 'purple',
-  [AgeGroup.ELITE]: 'red',
-  [AgeGroup.MASTER]: 'brand',
+  [AgeGroup.ELITE]: 'mtfszRed',
+  [AgeGroup.MASTER]: 'brand.500',
 }
 
 export const translateUR: UserRoleDictionary = {
@@ -69,7 +69,7 @@ export const translateUR: UserRoleDictionary = {
 }
 
 export const urColor: UserRoleDictionary = {
-  [UserRole.COACH]: 'brand',
+  [UserRole.COACH]: 'brand.500',
   [UserRole.SITE_ADMIN]: 'purple',
   [UserRole.JURY]: 'orange',
 }
@@ -98,9 +98,9 @@ export const translateRank: RankDict = {
 }
 
 export const rankColor: RankDict = {
-  [EventRank.REGIONAL]: 'brand',
+  [EventRank.REGIONAL]: 'brand.500',
   [EventRank.NATIONAL]: 'orange',
-  [EventRank.FEATURED]: 'red',
+  [EventRank.FEATURED]: 'mtfszRed',
   [EventRank.NONE]: 'gray',
 }
 
@@ -127,7 +127,7 @@ export const translateEventState: EventStateDict = {
 }
 
 export const eventStateColor: EventStateDict = {
-  [EventState.RATEABLE]: 'brand',
+  [EventState.RATEABLE]: 'brand.500',
   [EventState.VALIDATING]: 'gray',
   [EventState.ACCUMULATING]: 'gray',
   [EventState.RESULTS_READY]: 'orange',