Merge pull request #146 from Program-AR/prevNextButtons

Botones desafio anterior y siguiente

locales/en-us/others.json

@@ -0,0 +1,4 @@
+{
+    "previousChallenge": "Previous challenge",
+    "nextChallenge": "Next challenge"
+}

locales/es-ar/others.json

@@ -0,0 +1,4 @@
+{
+    "previousChallenge": "Desafío anterior",
+    "nextChallenge": "Desafío siguiente"
+}

locales/pt-br/others.json

@@ -0,0 +1,4 @@
+{
+    "previousChallenge": "Desafio anterior",
+    "nextChallenge": "Próximo desafio"
+}

src/components/ChallengeView.tsx

@@ -1,22 +1,30 @@
-import { Typography, useMediaQuery } from "@mui/material";
+import { Stack, Typography, useMediaQuery } from "@mui/material";
 import { Link, useParams, useSearchParams } from "react-router-dom";
 import { Challenge, getChallengeWithName, getPathToChallenge, PathToChallenge } from "../staticData/challenges";
 import { EmberView } from "./emberView/EmberView";
 import HomeIcon from '@mui/icons-material/Home';
 import { Header } from "./header/Header";
 import { useTranslation } from "react-i18next";
 import { PBreadcrumbs } from "./PBreadcrumbs";
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import { IconButtonTooltip } from "./creator/Editor/SceneEdition/IconButtonTooltip";
+import { useThemeContext } from "../theme/ThemeContext";
+
 
 const ChallengeBreadcrumb = (path: PathToChallenge) => {
 
-    const { t } = useTranslation(["books", "challenges", "chapters", "groups"])
+    const { t } = useTranslation(["books", "challenges", "chapters", "groups", "others"])
+    const {theme} = useThemeContext()
     const isSmallScreen: boolean = useMediaQuery('(max-width:1100px)');
     const isVerySmallScreen: boolean = useMediaQuery('(max-width:700px)');
 
     const shouldShowGroup = path.book.id === 1 && !isVerySmallScreen
     const shouldShowChapter = !isSmallScreen
+    const hasPrevChallenge = path.group.previousChallenge(path.challenge) 
+    const hasNextChallenge = path.group.nextChallenge(path.challenge) 
 
-    return <>
+    return <Stack direction="row" alignItems="center">
         <PBreadcrumbs>
 
             <Link to="/">
@@ -39,10 +47,21 @@ const ChallengeBreadcrumb = (path: PathToChallenge) => {
             <Typography>{t(`${path.challenge.id}.title`, { ns: "challenges" })}</Typography>
 
         </PBreadcrumbs>
-    </>
+        <Stack marginLeft={theme.spacing(5)} direction='row'>
+            {hasPrevChallenge && 
+                <Link to={`/desafio/${hasPrevChallenge!.id}`}>
+                    <IconButtonTooltip icon={<KeyboardDoubleArrowLeftIcon />} tooltip={t('previousChallenge', { ns: "others" })} />
+                </Link>
+            }
+            {hasNextChallenge && 
+                <Link to={`/desafio/${hasNextChallenge!.id}`}>
+                    <IconButtonTooltip icon={<KeyboardDoubleArrowRightIcon />} tooltip={t('nextChallenge', { ns: "others" })} />
+                </Link>
+            }
+        </Stack>
+    </Stack>
 }
 
-
 type ChallengeViewProps = {
     challengeId: number
 }

src/staticData/groups.ts

@@ -20,6 +20,20 @@ export class Group {
     return this.challenges.length === 1
   }
 
+  indexInGroup(challenge: Challenge) {
+    return this.challenges.findIndex(findChallenge => findChallenge.id === challenge.id)
+  }
+
+  nextChallenge(challenge: Challenge) {
+    const index = this.indexInGroup(challenge)
+    return (index === this.challenges.length - 1 ? undefined : this.challenges[index + 1])
+  }
+
+  previousChallenge(challenge: Challenge) {
+    const index = this.indexInGroup(challenge)
+    return (index === 0 ? undefined : this.challenges[index - 1])
+  }
+
   includes(challenge: Challenge) {
     return this.challenges.some(otherChallenge => otherChallenge.id === challenge.id)
   }