Feature: Counter

src/i18n/en/translation.json

@@ -92,6 +92,12 @@
       "emailCannotBeEmpty": "Please enter your email address.",
       "invalidEmail": "Please enter a valid email address."
     },
-    "letsGetStarted": "Let’s get started"
+    "letsGetStarted": "Let’s get started",
+    "experimentalFeatures": "Experimental features",
+    "counters": "Counters",
+    "yourCounters": "Your Counters",
+    "createCounter": "Create Counter",
+    "counterCreated": "Counter created!",
+    "incrementCounter": "Increment counter"
   }
 }

src/i18n/ru/translation.json

@@ -92,6 +92,12 @@
       "emailCannotBeEmpty": "Пожалуйста, введите адрес электронной почты.",
       "invalidEmail": "Пожалуйста, введите корректный адрес электронной почты."
     },
-    "letsGetStarted": "Давайте начнем"
+    "letsGetStarted": "Давайте начнем",
+    "experimentalFeatures": "Экспериментальные функции",
+    "counters": "Счетчики",
+    "yourCounters": "Ваши счетчики",
+    "createCounter": "Создать счетчик",
+    "counterCreated": "Счетчик создан!",
+    "incrementCounter": "Увеличить счетчик"
   }
 }

src/pages/index.tsx

@@ -8,6 +8,10 @@ import { LoginPage } from './LoginPage'
 import ProtectedRoute from '~/feature/ProtectedRoute'
 import { SettingsPage } from '~/pages/SettingsPage.tsx'
 import { Routes } from '~/shared/constants'
+import { Counters } from '~/widget/Counters'
+import { AddNewCounter } from '~/widget/Counters/AddNewCounter.tsx'
+import { Counter } from '~/widget/Counters/Counter.tsx'
+import { ExperimentalFeatures } from '~/widget/ExperimentalFeatures'
 import { FastLoginSetting } from '~/widget/FastLoginSetting'
 import { AddNewDevice } from '~/widget/FastLoginSetting/AddNewDevice.tsx'
 import { LanguageSetting } from '~/widget/LanguageSetting'
@@ -41,6 +45,22 @@ const router = createBrowserRouter([
             path: Routes.SETTINGS_LANGUAGE,
             element: <LanguageSetting />,
           },
+          {
+            path: Routes.SETTINGS_EXPERIMENTAL_FEATURES,
+            element: <ExperimentalFeatures />,
+          },
+          {
+            path: Routes.COUNTERS,
+            element: <Counters />,
+          },
+          {
+            path: Routes.COUNTERS_CREATE,
+            element: <AddNewCounter />,
+          },
+          {
+            path: Routes.COUNTER.path,
+            element: <Counter />,
+          },
           {
             path: Routes.SETTINGS_FAST_LOGIN,
             children: [

src/shared/api/counters.service.ts

@@ -0,0 +1,42 @@
+import { api } from '~/shared/api/api.ts'
+import { SuccessResponse } from '~/shared/api/types.ts'
+
+interface CreateCounterPayload {
+  name: string
+  counter: number
+}
+
+interface CounterDTO {
+  id: string
+  name: string
+  counter: number
+}
+
+interface CountersDTO {
+  data: Array<CounterDTO>
+}
+
+interface SuccessCounterDTO {
+  counter: CounterDTO
+}
+
+function createCounterService() {
+  return {
+    getCounters: () => {
+      return api.get<SuccessResponse<CountersDTO>>('/protected/counter')
+    },
+    createCounter: (payload: CreateCounterPayload) => {
+      return api.post('/protected/counter/create', payload)
+    },
+    incrementCounter: (counterId: string) => {
+      return api.post(`/protected/counter/increment/${counterId}`)
+    },
+    getCounterById: (counterId: string) => {
+      return api.get<SuccessResponse<SuccessCounterDTO>>(
+        `/protected/counter/${counterId}`,
+      )
+    },
+  }
+}
+
+export const counterService = createCounterService()

src/shared/constants/routes.ts

@@ -5,6 +5,14 @@ export const Routes = {
   SETTINGS_LANGUAGE: '/settings/language',
   SETTINGS_FAST_LOGIN: '/settings/fast-login',
   SETTINGS_FAST_LOGIN_CREATE: '/settings/fast-login/create',
+  SETTINGS_EXPERIMENTAL_FEATURES: '/settings/experimental-features',
+  COUNTERS: '/settings/experimental-features/counters',
+  COUNTER: {
+    path: '/settings/experimental-features/counters/:counterId',
+    navigateTo: (counterId: string) =>
+      `/settings/experimental-features/counters/${counterId}`,
+  },
+  COUNTERS_CREATE: '/settings/experimental-features/counters/create',
   CHALLENGE: {
     path: '/challenge/:challengeId',
     navigateTo: (id: string, type: string) => `/challenge/${id}?type=${type}`,

src/widget/Counters/AddNewCounter.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+
+import { useMutation } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+
+import { queryClient } from '~/app/App.tsx'
+import { useCustomTranslation } from '~/feature/translation'
+import { counterService } from '~/shared/api/counters.service.ts'
+import { Routes } from '~/shared/constants'
+import { useToast } from '~/shared/hooks'
+import { Button, Typography } from '~/shared/ui'
+
+export const AddNewCounter = () => {
+  const { t } = useCustomTranslation()
+  const navigate = useNavigate()
+  const { showSuccessToast } = useToast()
+
+  const [counterName, setCounterName] = useState<string>('')
+
+  const createCounterMut = useMutation({
+    mutationFn: counterService.createCounter,
+    onSuccess: () => {
+      console.info('[CreateCounter:onSuccess]')
+      showSuccessToast(t('counterCreated'))
+      queryClient.invalidateQueries({
+        queryKey: ['counter'],
+      })
+      navigate(Routes.COUNTERS, { replace: true })
+    },
+    onError: (err) => {
+      console.info(`[CreateCounter:onError]: ${JSON.stringify(err)}`)
+    },
+  })
+
+  const createCounter = async () => {
+    createCounterMut.mutate({ name: counterName, counter: 0 })
+  }
+
+  const isLoading = createCounterMut.isPending
+
+  return (
+    <div className="flex flex-1">
+      <div className="flex flex-1 flex-col items-center gap-3">
+        <input
+          type="text"
+          name="counterName"
+          id="counterName"
+          placeholder="Counter Name"
+          autoComplete="CounterName"
+          className="bg-transparent focus:outline-none duration-300 h-[40px] placeholder-black/50 border-b-2 border-black hover:border-black/20 focus:border-black/50 w-[300px]"
+          onChange={(e) => setCounterName(e.target.value)}
+        />
+
+        <div className="w-[300px] h-[45px]">
+          <Button
+            onClick={createCounter}
+            classNames="bg-transparent border-black"
+            isLoading={isLoading}
+            isDisabled={isLoading}
+          >
+            <Typography
+              text={t('createCounter')}
+              classNames="font-semibold text-M italic"
+            />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/widget/Counters/Counter.tsx

@@ -0,0 +1,59 @@
+import { useMutation } from '@tanstack/react-query'
+import { useParams } from 'react-router-dom'
+
+import { queryClient } from '~/app/App.tsx'
+import { useCustomTranslation } from '~/feature/translation'
+import { counterService } from '~/shared/api/counters.service.ts'
+import { Button, PageLoader, Typography } from '~/shared/ui'
+import { useCounterQuery } from '~/widget/Counters/lib/useCounterQuery.ts'
+
+export const Counter = () => {
+  const { counterId } = useParams()
+  const { t } = useCustomTranslation()
+
+  const counterQuery = useCounterQuery(counterId ?? 'undefined')
+
+  const counterMut = useMutation({
+    mutationFn: () => counterService.incrementCounter(counterId ?? 'undefined'),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['counter', counterId],
+      })
+    },
+  })
+
+  const incrementCounter = () => {
+    counterMut.mutate()
+  }
+
+  const counterData = counterQuery.data?.data.details.counter
+
+  if (counterQuery.isPending) {
+    return <PageLoader />
+  }
+
+  return (
+    <div className="flex flex-1">
+      <div className="flex flex-1 flex-col items-center gap-3">
+        <Typography
+          text={`${counterData?.name} - ${counterData?.counter}`}
+          classNames="font-semibold text-M italic text-center"
+        />
+
+        <div className="w-[300px] h-[45px]">
+          <Button
+            onClick={incrementCounter}
+            classNames="bg-transparent border-black"
+            isLoading={counterMut.isPending}
+            isDisabled={counterMut.isPending}
+          >
+            <Typography
+              text={t('incrementCounter')}
+              classNames="font-semibold text-M italic"
+            />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/widget/Counters/CounterListItem.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '~/shared/ui'
+
+type Props = {
+  label: string
+  onClick: () => void
+}
+
+export const CounterListItem = ({ label, onClick }: Props) => {
+  return (
+    <div
+      onClick={onClick}
+      className={`flex flex-shrink-0 w-[325px] h-[50px] px-[4px] py-[4px] bg-pink25 rounded-3xl transition-all duration-300 ease-in-out relative hover:bg-pink cursor-pointer`}
+    >
+      <div className={`flex-1 flex items-center justify-center`}>
+        <div className="flex-1">
+          <Typography
+            text={label}
+            classNames={`font-semibold text-M text-center`}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/widget/Counters/index.tsx

@@ -0,0 +1,72 @@
+import { useNavigate } from 'react-router-dom'
+
+import { useCustomTranslation } from '~/feature/translation'
+import { Routes } from '~/shared/constants'
+import { PlusIcon } from '~/shared/icon'
+import { PageLoader, Typography } from '~/shared/ui'
+import { CounterListItem } from '~/widget/Counters/CounterListItem.tsx'
+import { useCountersQuery } from '~/widget/Counters/lib/useCountersQuery.ts'
+
+export const Counters = () => {
+  const { t } = useCustomTranslation()
+  const navigate = useNavigate()
+
+  const counterQuery = useCountersQuery()
+
+  const counters = counterQuery.data?.data.details.data ?? []
+
+  if (counterQuery.isPending) {
+    return <PageLoader />
+  }
+
+  return (
+    <div className="flex flex-1">
+      <div className="flex flex-1 flex-col items-center gap-3">
+        <button
+          type="button"
+          onClick={() => navigate(Routes.COUNTERS_CREATE)}
+          className={`flex flex-1 w-[225px] h-[50px] px-4 py-4 items-center justify-center gap-S bg-violet20 hover:bg-violet50  rounded-3xl transition-all duration-300 ease-in-out relative cursor-pointer`}
+        >
+          <span className="h-[28px] w-[28px]">
+            <PlusIcon classNames="stroke-pink" />
+          </span>
+          <Typography
+            text={t('createCounter')}
+            classNames="font-semibold text-M italic"
+          />
+        </button>
+
+        <div className="flex flex-1 flex-col items-center mt-16">
+          <Typography
+            text={t('yourCounters')}
+            classNames="font-semibold text-M italic text-center"
+          />
+
+          <div className="flex flex-1 flex-col justify-center mt-24">
+            {counters.length === 0 && (
+              <Typography
+                text={t('noDevicesYet')}
+                classNames="font-semibold text-S italic text-black/50 mt-32"
+              />
+            )}
+
+            <div className="flex flex-col px-16 gap-S h-[350px] transition-all duration-300 ease-in-out overflow-y-scroll custom-scrollbar custom-scrollbar-always">
+              {counters?.length > 0 &&
+                counters.map((el) => {
+                  return (
+                    <CounterListItem
+                      key={el.id}
+                      label={el.name}
+                      onClick={() => {
+                        return navigate(Routes.COUNTER.navigateTo(el.id))
+                      }}
+                    />
+                  )
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/widget/Counters/lib/useCounterQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { counterService } from '~/shared/api/counters.service.ts'
+
+export const useCounterQuery = (counterId: string) => {
+  return useQuery({
+    queryKey: ['counter', counterId],
+    queryFn: () => counterService.getCounterById(counterId),
+  })
+}

src/widget/Counters/lib/useCountersQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { counterService } from '~/shared/api/counters.service.ts'
+
+export const useCountersQuery = () => {
+  return useQuery({
+    queryKey: ['counter'],
+    queryFn: counterService.getCounters,
+  })
+}

src/widget/ExperimentalFeatures/index.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom'
+
+import { useCustomTranslation } from '~/feature/translation'
+import { Routes } from '~/shared/constants'
+import { SettingItem } from '~/widget/SettingList/SettingItem.tsx'
+
+export const ExperimentalFeatures = () => {
+  const { t } = useCustomTranslation()
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex flex-1">
+      <div className="flex flex-1 flex-col items-center gap-3">
+        <SettingItem
+          label={t('counters')}
+          onClick={() => navigate(Routes.COUNTERS)}
+          isDisabled={false}
+        />
+      </div>
+    </div>
+  )
+}