Feature: Challenge Single Page and Challenge List Page redesign

.prettierrc

@@ -6,7 +6,7 @@
   "jsxSingleQuote": false,
   "trailingComma": "all",
   "semi": false,
-  "printWidth": 100,
+  "printWidth": 80,
   "tabWidth": 2,
   "useTabs": false,
   "endOfLine": "lf"

package.json

@@ -22,6 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.1.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.27.0",
     "react-toastify": "^10.0.6",
     "react-transition-group": "^4.4.5",

src/entity/challenge/index.ts

@@ -0,0 +1 @@
+export * from './lib/constants'

src/entity/challenge/lib/constants.ts

@@ -0,0 +1,11 @@
+export type ChallengeType =
+  (typeof ChallengeTypeValues)[keyof typeof ChallengeTypeValues]
+
+export const ChallengeTypeValues = {
+  Sport: 'SPORT',
+  Language: 'LANGUAGE',
+  Sugar: 'SUGAR',
+  Water: 'WATER',
+  Sleep: 'SLEEP',
+  Other: 'OTHER',
+} as const

src/pages/ChallengePage.tsx

@@ -1,16 +1,21 @@
-import { useParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 
+import { ChallengeType } from '~/entity/challenge'
 import { useCustomTranslation } from '~/feature/translation'
 import { Routes } from '~/shared/constants'
 import { Page, PageContent } from '~/shared/ui'
 import { ChallengeWidget } from '~/widget/Challenge'
+import { getBackgroundColor } from '~/widget/Challenge/lib/theme-manager.ts'
 import { Header } from '~/widget/Header'
 
 const ChallengePage = () => {
   const { challengeId } = useParams()
+  const [searchParams] = useSearchParams()
   const { t } = useCustomTranslation()
 
-  if (!challengeId) {
+  const challengeType = searchParams.get('type') as ChallengeType
+
+  if (!challengeId || !challengeType) {
     return (
       <Page>
         <Header
@@ -25,9 +30,12 @@ const ChallengePage = () => {
   }
 
   return (
-    <Page>
+    <Page bgBackground={getBackgroundColor(challengeType)}>
       <PageContent>
-        <ChallengeWidget challengeId={challengeId} />
+        <ChallengeWidget
+          challengeId={challengeId}
+          challengeType={challengeType}
+        />
       </PageContent>
     </Page>
   )

src/pages/index.tsx

@@ -57,7 +57,7 @@ const router = createBrowserRouter([
         ],
       },
       {
-        path: Routes.CHALLENGE,
+        path: Routes.CHALLENGE.path,
         element: <ChallengePage />,
       },
       {

src/shared/api/challenge.service.ts

@@ -12,6 +12,18 @@ export type ChallengeDTO = {
   createdAt: string // "2024-10-01T21:16:47.497Z"
   updatedAt: string // "2024-10-01T21:16:47.497Z"
   progress: Array<ProgressDTO>
+  status: 'ACTIVE' | 'COMPLETED'
+}
+
+export type ChallengeListDTO = {
+  data: Array<ChallengeDTO>
+  meta: {
+    currentPage: number
+    nextPage: number | null
+    prevPage: number | null
+    totalPages: number
+    totalRecords: number
+  }
 }
 
 export type ProgressDTO = {
@@ -28,18 +40,25 @@ type CreateChallengePayload = {
   duration: number // 30
   description: string | null
   type: string
+  status: 'ACTIVE'
 }
 
 type CheckinPayload = {
   checkpointDate: string // "2024-09-01"
   userChallengeId: string
 }
 
+export type ChallengeListQueryParams = {
+  status: 'ACTIVE' | 'COMPLETED'
+  page: number
+  limit: number
+}
+
 function createChallengeService() {
   return {
-    getChallengeList() {
-      return api.get<SuccessResponse<Record<'challenges', Array<ChallengeDTO>>>>(
-        '/protected/challenge/',
+    getChallengeList(params: ChallengeListQueryParams) {
+      return api.get<SuccessResponse<ChallengeListDTO>>(
+        `/protected/challenge?status=${params.status}&page=${params.page}&limit=${params.limit}`,
       )
     },
     getChallengeById(challengeId: string) {

src/shared/constants/routes.ts

@@ -5,6 +5,9 @@ export const Routes = {
   SETTINGS_LANGUAGE: '/settings/language',
   SETTINGS_FAST_LOGIN: '/settings/fast-login',
   SETTINGS_FAST_LOGIN_CREATE: '/settings/fast-login/create',
-  CHALLENGE: '/challenge/:challengeId',
+  CHALLENGE: {
+    path: '/challenge/:challengeId',
+    navigateTo: (id: string, type: string) => `/challenge/${id}?type=${type}`,
+  },
   CREATE_CHALLENGE: '/create-challenge',
 }

src/shared/ui/InfiniteScrollContainer/index.tsx

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react'
+
+import InfiniteScroll from 'react-infinite-scroll-component'
+
+type Props = PropsWithChildren<{
+  dataLength: number
+  hasMore: boolean
+  loader: React.ReactNode
+  next: () => void
+  scrollParentClassname?: string
+  scrollChildClassname?: string
+}>
+
+export const InfiniteScrollContainer = ({
+  children,
+  hasMore,
+  loader,
+  next,
+  dataLength,
+  scrollParentClassname,
+  scrollChildClassname,
+}: Props) => {
+  return (
+    <div id="scrollableDiv" className={scrollParentClassname}>
+      <InfiniteScroll
+        scrollableTarget="scrollableDiv"
+        next={next}
+        hasMore={hasMore}
+        loader={loader}
+        dataLength={dataLength}
+        className={scrollChildClassname}
+      >
+        {children}
+      </InfiniteScroll>
+    </div>
+  )
+}

src/shared/ui/Page/Page.tsx

@@ -1,11 +1,18 @@
 import { PropsWithChildren } from 'react'
 
-type Props = PropsWithChildren<unknown>
+type Props = PropsWithChildren<{
+  bgBackground?: string
+}>
 
-export const Page = ({ children }: Props) => {
+export const Page = ({ children, bgBackground }: Props) => {
   return (
-    <div id="page-component" className="w-screen h-dvh bg-background">
-      <div className="h-full w-full flex flex-col overflow-hidden">{children}</div>
+    <div
+      id="page-component"
+      className={`w-screen h-dvh ${bgBackground ? bgBackground : 'bg-background'}`}
+    >
+      <div className="h-full w-full flex flex-col overflow-hidden">
+        {children}
+      </div>
     </div>
   )
 }

src/shared/ui/index.ts

@@ -5,3 +5,4 @@ export * from './Button'
 export * from './PageLoader'
 export * from './Loader'
 export * from './ListItem'
+export * from './InfiniteScrollContainer'

src/widget/Challenge/ChallengeHeader.tsx

@@ -1,9 +1,15 @@
 import { useNavigate } from 'react-router-dom'
 
+import { ChallengeType } from '~/entity/challenge'
 import { Routes } from '~/shared/constants'
 import { BackArrowIcon } from '~/shared/icon'
+import { getNavigationButtonColor } from '~/widget/Challenge/lib/theme-manager.ts'
 
-export const ChallengeHeader = () => {
+type Props = {
+  challengeType: ChallengeType
+}
+
+export const ChallengeHeader = ({ challengeType }: Props) => {
   const navigate = useNavigate()
 
   return (
@@ -19,7 +25,9 @@ export const ChallengeHeader = () => {
           onClick={() => navigate(Routes.HOME)}
         >
           <div className="w-[29px] h-[29px]">
-            <BackArrowIcon />
+            <BackArrowIcon
+              classNames={`${getNavigationButtonColor(challengeType)}`}
+            />
           </div>
         </button>
       </div>

src/widget/Challenge/getMonthFromStartedAtDate.ts

@@ -0,0 +1,3 @@
+export const getMonthFromStartedAtDate = (date: string, lang: string) => {
+  return new Date(date).toLocaleString(lang, { month: 'long' })
+}

src/widget/Challenge/lib/theme-manager.ts

@@ -0,0 +1,151 @@
+import { ChallengeType } from '~/entity/challenge'
+
+export const getBackgroundColor = (type: ChallengeType) => {
+  switch (type) {
+    case 'SPORT':
+      return 'bg-sport-background'
+
+    case 'SUGAR':
+      return 'bg-sugar-background'
+
+    case 'SLEEP':
+      return 'bg-sleep-background'
+
+    case 'WATER':
+      return 'bg-water-background'
+
+    case 'LANGUAGE':
+      return 'bg-language-background'
+
+    case 'OTHER':
+      return 'bg-other-background'
+
+    default:
+      return 'bg-other-background'
+  }
+}
+
+export const getHeaderTextColor = (type: ChallengeType) => {
+  switch (type) {
+    case 'SPORT':
+      return 'text-sport-headerText'
+
+    case 'SUGAR':
+      return 'text-sugar-headerText'
+
+    case 'SLEEP':
+      return 'text-sleep-headerText'
+
+    case 'WATER':
+      return 'text-water-headerText'
+
+    case 'LANGUAGE':
+      return 'text-language-headerText'
+
+    case 'OTHER':
+      return 'text-other-headerText'
+
+    default:
+      return 'text-other-headerText'
+  }
+}
+
+export const getTextColor = (type: ChallengeType) => {
+  switch (type) {
+    case 'SPORT':
+      return 'text-sport-defaultText'
+
+    case 'SUGAR':
+      return 'text-sugar-defaultText'
+
+    case 'SLEEP':
+      return 'text-sleep-defaultText'
+
+    case 'WATER':
+      return 'text-water-defaultText'
+
+    case 'LANGUAGE':
+      return 'text-language-defaultText'
+
+    case 'OTHER':
+      return 'text-other-defaultText'
+
+    default:
+      return 'text-other-daysLeftText'
+  }
+}
+
+export const getCircleColor = (type: ChallengeType) => {
+  switch (type) {
+    case 'SPORT':
+      return 'stroke-sport-dayCircles'
+
+    case 'SUGAR':
+      return 'stroke-sugar-dayCircles'
+
+    case 'SLEEP':
+      return 'stroke-sleep-dayCircles'
+
+    case 'WATER':
+      return 'stroke-water-dayCircles'
+
+    case 'LANGUAGE':
+      return 'stroke-language-dayCircles'
+
+    case 'OTHER':
+      return 'stroke-other-dayCircles'
+
+    default:
+      return 'stroke-other-dayCircles'
+  }
+}
+
+export const getMonthTextColor = (type: ChallengeType) => {
+  switch (type) {
+    case 'SPORT':
+      return 'text-sport-monthText'
+
+    case 'SUGAR':
+      return 'text-sugar-monthText'
+
+    case 'SLEEP':
+      return 'text-sleep-monthText'
+
+    case 'WATER':
+      return 'text-water-monthText'
+
+    case 'LANGUAGE':
+      return 'text-language-monthText'
+
+    case 'OTHER':
+      return 'text-other-monthText'
+
+    default:
+      return 'text-other-monthText'
+  }
+}
+
+export const getNavigationButtonColor = (type: ChallengeType) => {
+  switch (type) {
+    case 'SPORT':
+      return 'stroke-sport-navigationButton'
+
+    case 'SUGAR':
+      return 'stroke-sugar-navigationButton'
+
+    case 'SLEEP':
+      return 'stroke-sleep-navigationButton'
+
+    case 'WATER':
+      return 'stroke-water-navigationButton'
+
+    case 'LANGUAGE':
+      return 'stroke-language-navigationButton'
+
+    case 'OTHER':
+      return 'stroke-other-navigationButton'
+
+    default:
+      return 'stroke-other-navigationButton'
+  }
+}