Edit cards and mock

src/components/Seasons/SeasonCard.tsx

+import { UserSeasonState } from 'enum/userSeason.enum'
+import { UserSeason } from 'models'
 import React from 'react'
+import SeasonCardBoss from './SeasonCardBoss'
+import SeasonCardDone from './SeasonCardDone'
+import SeasonCardLocked from './SeasonCardLocked'
+import SeasonCardOnGoing from './SeasonCardOnGoing'
 import SeasonCardUnlocked from './SeasonCardUnlocked'
 import './_Seasons.scss'
-interface Season {
-  saison: number
-  name: string
-}
+
 interface SeasonCardProps {
-  season: Season
+  season: UserSeason
+  indexSlider: number
   index: number
 }
-const SeasonCard = ({ season, index }: SeasonCardProps) => {
+const SeasonCard = ({ season, indexSlider, index }: SeasonCardProps) => {
+  const renderCard = () => {
+    if (season.state) {
+      switch (season.state) {
+        // case UserSeasonState.LOCKED:
+        //   return <SeasonCardLocked season={season} />
+        case UserSeasonState.UNLOCKED:
+          return <SeasonCardUnlocked season={season} />
+        case UserSeasonState.DONE:
+          return <SeasonCardDone season={season} />
+        case UserSeasonState.ONGOING:
+          return <SeasonCardOnGoing season={season} />
+        case UserSeasonState.BOSS:
+          return <SeasonCardBoss season={season} />
+        default:
+          return <SeasonCardLocked season={season} />
+      }
+    }
+  }
   return (
-    <div className={index === season.saison ? 'slide active' : 'slide'}>
-      <SeasonCardUnlocked season={season} />
+    <div className={indexSlider === index ? 'slide active' : 'slide'}>
+      {renderCard()}
     </div>
   )
 }

src/components/Seasons/SeasonCardBoss.tsx

+import { UserSeason } from 'models'
+import React from 'react'
+import './_Seasons.scss'
+
+interface SeasonCardBossProps {
+  season: UserSeason
+}
+const SeasonCardBoss = ({ season }: SeasonCardBossProps) => {
+  return <></>
+}
+
+export default SeasonCardBoss

src/components/Seasons/SeasonCardDone.tsx

+import { UserSeason } from 'models'
+import React from 'react'
+import './_Seasons.scss'
+
+interface SeasonCardDoneProps {
+  season: UserSeason
+}
+
+const SeasonCardDone = ({ season }: SeasonCardDoneProps) => {
+  return <></>
+}
+
+export default SeasonCardDone

src/components/Seasons/SeasonCardLocked.tsx

+import { UserSeason } from 'models'
 import React from 'react'
 import './_Seasons.scss'
 
-const SeasonCardLocked: React.FC = () => {
+interface SeasonCardLockedProps {
+  season: UserSeason
+}
+const SeasonCardLocked = ({ season }: SeasonCardLockedProps) => {
   return <></>
 }
 

src/components/Seasons/SeasonCardOnGoing.tsx

+import { UserSeason } from 'models'
 import React from 'react'
 import './_Seasons.scss'
 
-const SeasonCardOnGoing: React.FC = () => {
+interface SeasonCardOnGoingProps {
+  season: UserSeason
+}
+const SeasonCardOnGoing = ({ season }: SeasonCardOnGoingProps) => {
   return <></>
 }
 

src/components/Seasons/SeasonCardUnlocked.tsx

+import { UserSeason } from 'models'
 import React from 'react'
 import './_Seasons.scss'
 
-interface Season {
-  saison: number
-  name: string
-}
 interface SeasonCardUnlockedProps {
-  season: Season
+  season: UserSeason
 }
 const SeasonCardUnlocked = ({ season }: SeasonCardUnlockedProps) => {
   return (
     <div className="cardContent">
       <p className="title">Saison</p>
-      <span className="seasonTitle">{season.name}</span>
+      {/* <span className="seasonTitle">{season.title}</span> */}
     </div>
   )
 }

src/components/Seasons/SeasonView.tsx

@@ -7,8 +7,11 @@ import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import './_Seasons.scss'
+import { UserSeason } from 'models'
+import { userSeasonMock } from '../../../test/__mocks__/userSeasonData.mock'
 
 const SeasonView: React.FC = () => {
+  //TODO automat cardwidth definition in order to fit all mobile devices
   const cardWitdh = 285
   const marginPx = 16
   const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -18,23 +21,13 @@ const SeasonView: React.FC = () => {
   const [containerTranslation, setcontainerTranslation] = useState<number>(
     marginPx
   )
-
   const defineHeaderHeight = (height: number) => {
     setHeaderHeight(height)
   }
-  interface Season {
-    saison: number
-    name: string
-  }
 
-  const [seasonList, setseasonList] = useState<Season[]>([
-    { saison: 0, name: 'saison0' },
-    { saison: 1, name: 'saison1' },
-    { saison: 2, name: 'saison2' },
-    { saison: 3, name: 'saison3' },
-    { saison: 4, name: 'saison4' },
-    { saison: 5, name: 'saison5' },
-  ])
+  const [userSeasonList, setUserSeasonList] = useState<UserSeason[]>(
+    userSeasonMock
+  )
   const resetValues = () => {
     //Method used to cancel a swipe on a simple click
     setTouchEnd(0)
@@ -42,7 +35,7 @@ const SeasonView: React.FC = () => {
   }
 
   const moveSliderRight = () => {
-    if (index < seasonList.length - 1) {
+    if (index < userSeasonList.length - 1) {
       if (index === 0)
         setcontainerTranslation(
           (prev: number) => prev - cardWitdh - marginPx * 1.2
@@ -117,8 +110,13 @@ const SeasonView: React.FC = () => {
               transform: `translateX(${containerTranslation}px)`,
             }}
           >
-            {seasonList.map(season => (
-              <SeasonCard key={season.saison} season={season} index={index} />
+            {userSeasonList.map((season, i) => (
+              <SeasonCard
+                key={i}
+                season={season}
+                indexSlider={index}
+                index={i}
+              />
             ))}
           </div>
         </div>

src/store/season/season.reducer.ts

@@ -5,6 +5,7 @@ import {
   SeasonActionTypes,
 } from './season.actions'
 import { SeasonState } from 'models'
+import { UserSeasonState } from 'enum/userSeason.enum'
 
 const initialState: SeasonState = {
   userSeasonList: [],
@@ -19,7 +20,7 @@ export const seasonReducer: Reducer<SeasonState> = (
     case SET_USER_SEASON_LIST:
       if (action.payload != undefined) {
         const filteredCurrentSeason = action.payload.filter(
-          season => season.state === 2
+          season => season.state === UserSeasonState.ONGOING
         )
         const currentSeason = filteredCurrentSeason[0]
           ? filteredCurrentSeason[0]
@@ -35,7 +36,10 @@ export const seasonReducer: Reducer<SeasonState> = (
     case UPDATE_USER_SEASON_LIST:
       if (action.payload !== undefined) {
         const id = action.payload.id
-        const currentSeason = action.payload.state === 2 ? action.payload : null
+        const currentSeason =
+          action.payload.state === UserSeasonState.ONGOING
+            ? action.payload
+            : null
         const updatedList = [...state.userSeasonList]
         const findIndex = updatedList.findIndex(season => season.id === id)
         updatedList[findIndex] = action.payload

test/__mocks__/userSeasonData.mock.ts

+import { UserSeasonState, UserSeasonSuccess } from 'enum/userSeason.enum'
+import { Duration } from 'luxon'
 import { UserSeason } from 'models'
 
 export const userSeasonMock: UserSeason[] = [
@@ -6,12 +8,12 @@ export const userSeasonMock: UserSeason[] = [
     title: 'Nicolas Hublot',
     icon: 'ee',
     description: 'foobar',
-    state: 1,
-    duration: null,
+    state: UserSeasonState.ONGOING,
+    duration: Duration.fromObject({ days: 30 }),
     target: 40,
     progress: 0,
     boss: [],
-    success: 0,
+    success: UserSeasonSuccess.ONGOING,
     startDate: null,
     endingDate: null,
     quiz: null,
@@ -21,12 +23,12 @@ export const userSeasonMock: UserSeason[] = [
     title: 'Tata',
     icon: 'ee',
     description: 'foobar',
-    state: 0,
-    duration: null,
+    state: UserSeasonState.LOCKED,
+    duration: Duration.fromObject({ days: 30 }),
     target: 40,
     progress: 0,
     boss: [],
-    success: 0,
+    success: UserSeasonSuccess.ONGOING,
     startDate: null,
     endingDate: null,
     quiz: null,
@@ -36,12 +38,12 @@ export const userSeasonMock: UserSeason[] = [
     title: 'Toto',
     icon: 'ee',
     description: 'foobar',
-    state: 1,
-    duration: null,
+    state: UserSeasonState.LOCKED,
+    duration: Duration.fromObject({ days: 30 }),
     target: 40,
     progress: 0,
     boss: [],
-    success: 0,
+    success: UserSeasonSuccess.ONGOING,
     startDate: null,
     endingDate: null,
     quiz: null,