feat: adding calendar and game links

Author: felipebrsk

src/Routes.tsx

@@ -28,9 +28,11 @@ export const Routes = () => {
   const GameDetails = L(lazy(() => import('./pages/Game/Details')))
   const GameCrackers = L(lazy(() => import('./pages/Game/Crackers')))
   const GamePlatforms = L(lazy(() => import('./pages/Game/Platforms')))
+  const GameCondition = L(lazy(() => import('./pages/Game/Condition')))
   const GamePublishers = L(lazy(() => import('./pages/Game/Publishers')))
   const GameCategories = L(lazy(() => import('./pages/Game/Categories')))
   const GameDevelopers = L(lazy(() => import('./pages/Game/Developers')))
+  const GameProtections = L(lazy(() => import('./pages/Game/Protections')))
 
   return useRoutes([
     { path: '/login', element: <Login /> },
@@ -54,26 +56,42 @@ export const Routes = () => {
             },
             {
               path: '/games',
-              children: [{ index: true, element: <>Games</> }],
+              children: [
+                { index: true, element: <>Games</> },
+                { path: 'tags/:tag', element: <GameTags /> },
+                { path: 'genres/:genre', element: <GameGenres /> },
+                { path: 'cracks/:crack', element: <GameCracks /> },
+                { path: 'crackers/:cracker', element: <GameCrackers /> },
+                {
+                  path: 'platforms/:platform',
+                  element: <GamePlatforms />,
+                },
+                {
+                  path: 'categories/:category',
+                  element: <GameCategories />,
+                },
+                {
+                  path: 'developers/:developer',
+                  element: <GameDevelopers />,
+                },
+                {
+                  path: 'publishers/:publisher',
+                  element: <GamePublishers />,
+                },
+                {
+                  path: 'protections/:protection',
+                  element: <GameProtections />,
+                },
+                {
+                  path: 'condition/:condition',
+                  element: <GameCondition />,
+                },
+              ],
             },
             {
               path: 'news',
               children: [{ index: true, element: <News /> }],
             },
-            { path: '/tags/:tag', element: <GameTags /> },
-            { path: '/genres/:genre', element: <GameGenres /> },
-            { path: '/cracks/:crack', element: <GameCracks /> },
-            { path: '/crackers/:cracker', element: <GameCrackers /> },
-            { path: '/platforms/:platform', element: <GamePlatforms /> },
-            { path: '/categories/:category', element: <GameCategories /> },
-            {
-              path: '/developers/:developer',
-              element: <GameDevelopers />,
-            },
-            {
-              path: '/publishers/:publisher',
-              element: <GamePublishers />,
-            },
           ],
         },
       ],

src/components/GameCard/GameCard.test.tsx

@@ -78,7 +78,7 @@ describe('GameCard Component', () => {
         name: genre.name,
       })
 
-      expect(genreLink).toHaveAttribute('href', `/genres/${genre.slug}`)
+      expect(genreLink).toHaveAttribute('href', `/games/genres/${genre.slug}`)
     })
   })
 
@@ -100,7 +100,7 @@ describe('GameCard Component', () => {
 
       expect(platformLink).toHaveAttribute(
         'href',
-        `/platforms/${platform.slug}`,
+        `/games/platforms/${platform.slug}`,
       )
     })
   })

src/components/GameCard/GameCard.tsx

@@ -74,7 +74,7 @@ function GameCard(props: GameCardProps) {
               <Link href={`/games/${game.slug}`}>
                 <Typography
                   variant="h6"
-                  className="text-lg font-bold text-white hover:text-theme-red-900 transition duration-500">
+                  className="text-lg font-bold text-white transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-white hover:to-red-600 hover:bg-clip-text hover:text-transparent">
                   {game.title}
                 </Typography>
               </Link>
@@ -122,7 +122,7 @@ function GameCard(props: GameCardProps) {
             <Box className="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-2 grid-cols-1 items-center my-2 sm:gap-1 gap-2 w-full">
               {game.platforms.map((platform) => (
                 <Link
-                  href={`/platforms/${platform.slug}`}
+                  href={`/games/platforms/${platform.slug}`}
                   className="dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-400 bg-gray-300 dark:text-white text-black px-3 py-1 rounded-full sm:w-auto w-full text-center transition-colors duration-300"
                   key={platform.id}>
                   <Typography
@@ -138,7 +138,7 @@ function GameCard(props: GameCardProps) {
 
           <Box className="flex flex-wrap gap-2 my-2 w-full mt-auto">
             {game.genres.map((genre) => (
-              <Link href={`/genres/${genre.slug}`} key={genre.id}>
+              <Link href={`/games/genres/${genre.slug}`} key={genre.id}>
                 <Chip
                   className="font-bold border border-theme-red-900 dark:text-gray-300 text-gray-700 sm:w-auto w-full hover:bg-theme-red-900 hover:text-white hover:border-none hover:outline-none"
                   label={genre.name}
@@ -163,8 +163,13 @@ function GameCard(props: GameCardProps) {
                     </Typography>
                     <Typography
                       variant="body2"
-                      className="font-bold dark:text-white text-gray-800 hover:text-theme-red-900 transition-all duration-300">
-                      {game.crack.by.name}
+                      className="font-bold dark:text-white text-gray-800">
+                      <Link
+                        href={`/crackers/${game.crack.by.slug}`}
+                        className="hover:text-theme-red-900 transition-colors duration-300"
+                        target="_blank">
+                        {game.crack.by.name}
+                      </Link>
                     </Typography>
                   </Box>
                 )}
@@ -178,8 +183,13 @@ function GameCard(props: GameCardProps) {
                   </Typography>
                   <Typography
                     variant="body2"
-                    className="font-bold dark:text-white text-gray-800 hover:text-theme-red-900 transition-all duration-300">
-                    {game.crack.protection.name}
+                    className="font-bold dark:text-white text-gray-800">
+                    <Link
+                      href={`/games/protections/${game.crack.protection.slug}`}
+                      className="hover:text-theme-red-900 transition-colors duration-300"
+                      target="_blank">
+                      {game.crack.protection.name}
+                    </Link>
                   </Typography>
                 </Box>
               )}

src/components/Header/modules/HeaderCarousel.tsx

@@ -68,7 +68,7 @@ function HeaderCarousel(props: HeaderCarouselProps) {
                       component="span"
                       className="bg-gray-800 px-3 py-1 rounded-full text-sm"
                       key={id}>
-                      <Link href={`/platforms/${slug}`}>{name}</Link>
+                      <Link href={`/games/platforms/${slug}`}>{name}</Link>
                     </Box>
                   ))}
                 </Box>
@@ -78,7 +78,7 @@ function HeaderCarousel(props: HeaderCarouselProps) {
                       component="span"
                       className="bg-gray-700 px-3 py-1 rounded-full text-sm"
                       key={id}>
-                      <Link href={`/genres/${slug}`}>{name}</Link>
+                      <Link href={`/games/genres/${slug}`}>{name}</Link>
                     </Box>
                   ))}
                 </Box>

src/components/HeartButton/HeartButton.tsx

@@ -82,7 +82,9 @@ function HeartButton(props: HeartButtonProps) {
       <IoHeartOutline
         size={size}
         className={
-          hearted ? 'text-theme-red-900 animate-pulse' : 'text-white'
+          hearted
+            ? 'text-theme-red-900 animate-pulse'
+            : 'dark:text-white text-black'
         }
       />
     </IconButton>

src/hooks/useGames.ts

@@ -23,6 +23,7 @@ function useGames(params: {
   developer?: string
   publisher?: string
   crack?: string
+  protection?: string
 }) {
   const [trigger, { games, isLoading }] = useLazyFindGamesByQuery({
     selectFromResult: ({ data = [], isLoading, isFetching }) => ({
@@ -48,7 +49,7 @@ function useGames(params: {
   )
 
   const fetchGames = async () => {
-    const sortedGames = displayedGames.sort((a, b) => {
+    const sortedGames = [...displayedGames].sort((a, b) => {
       const aValue = a[sort.field]
       const bValue = b[sort.field]
 
@@ -93,6 +94,7 @@ function useGames(params: {
         { by: 'categories', filterable: memoizedParams.category },
         { by: 'developers', filterable: memoizedParams.developer },
         { by: 'publishers', filterable: memoizedParams.publisher },
+        { by: 'protections', filterable: memoizedParams.protection },
       ]
 
       filters.forEach((filter) => {

src/pages/Calendar/Calendar.tsx

@@ -1,15 +1,17 @@
 import {
   Box,
   Chip,
+  CircularProgress,
   Tooltip,
   Typography,
   useMediaQuery,
 } from '@mui/material'
 import { format, isSameDay, parseISO } from 'date-fns'
 import { useNavigate } from 'react-router-dom'
 
+import { Icon } from '@/components'
 import { useTheme } from '@/hooks'
-import { MOCK_UPCOMING_GAMES } from '@/mocks'
+import { useCalendarGamesQuery } from '@/services/api'
 
 import { StyledCalendar, StyledCalendarLight } from './Calendar.styles'
 import { UpcomingList } from './modules'
@@ -23,10 +25,15 @@ interface CalendarTileProperties {
 }
 
 function Calendar() {
-  const games = MOCK_UPCOMING_GAMES
   const mode = useTheme()
   const go = useNavigate()
   const isMobile = useMediaQuery('(max-width: 490px)')
+  const { games, isLoading } = useCalendarGamesQuery(undefined, {
+    selectFromResult: ({ data = [], isLoading, isFetching }) => ({
+      games: data,
+      isLoading: isLoading || isFetching,
+    }),
+  })
 
   const getTileContent = ({ date, view }: CalendarTileProperties) => {
     const appointment = games.filter((game) =>
@@ -44,6 +51,7 @@ function Calendar() {
             disableInteractive
             key={item.id}>
             <Chip
+              className="group"
               onClick={() => go(`/games/${item.slug}`)}
               sx={{
                 width: 'auto',
@@ -55,15 +63,40 @@ function Calendar() {
                   color: ({ palette }) => palette.primary.contrastText,
                 },
               }}
-              label={item.title}
+              label={
+                <Box className="flex items-center gap-1">
+                  {item.title}
+                  {item.crack &&
+                    ['cracked', 'cracked-oneday'].includes(
+                      item.crack.status,
+                    ) && (
+                      <Tooltip title="Crack is available" arrow>
+                        <span>
+                          <Icon
+                            name="IoCheckmarkCircleOutline"
+                            className="group-hover:text-green-600 text-green-400 mb-0.5"
+                            size={14}
+                          />
+                        </span>
+                      </Tooltip>
+                    )}
+                </Box>
+              }
             />
           </Tooltip>
         ))}
       </Box>
     )
   }
 
-  return (
+  return isLoading ? (
+    <Box className="py-24">
+      <CircularProgress
+        color="error"
+        className="m-auto flex justify-center"
+      />
+    </Box>
+  ) : (
     <Box className={!isMobile ? 'p-12' : 'p-8'}>
       {!isMobile ? (
         mode === 'dark' ? (

src/pages/Game/Categories.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { LoadingScreen } from '@/components'
 import { useGames } from '@/hooks'
 
 import ModuledFilters from './ModuledFilters'
@@ -17,7 +16,6 @@ function Categories() {
     currentPage,
     pageSize,
     sort,
-    isLoading,
     handlePageChange,
     handleSortChange,
     handlePageSizeChange,
@@ -33,9 +31,7 @@ function Categories() {
     }, 500)
   }
 
-  return isLoading ? (
-    <LoadingScreen />
-  ) : (
+  return (
     <ModuledFilters
       games={games}
       totalGames={totalGames}