From 5a8a3a46392a968cd184401d5328697c1c310e0d Mon Sep 17 00:00:00 2001
From: Zabilsya <kvcherniko@mts.ru>
Date: Fri, 17 Jan 2025 15:59:42 +0600
Subject: [PATCH] [DOP-22993] fix after review

---
 .../components/DynamicSelect/index.tsx        | 18 +++++++----
 .../ui/CronSelect/hooks/useCron/useCron.ts    |  2 +-
 src/shared/ui/CronSelect/styles.module.less   |  6 ++++
 src/shared/utils/getOrdinalNumber/index.ts    | 32 ++++++++++++-------
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/shared/ui/CronSelect/components/DynamicSelect/index.tsx b/src/shared/ui/CronSelect/components/DynamicSelect/index.tsx
index 2a3abe74..9010e84a 100644
--- a/src/shared/ui/CronSelect/components/DynamicSelect/index.tsx
+++ b/src/shared/ui/CronSelect/components/DynamicSelect/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Period } from '@shared/services';
 import { Select } from 'antd';
+import { getOrdinalNumber } from '@shared/utils';
 
 import classes from '../../styles.module.less';
 import { DAYS_OF_MONTH_SELECT_OPTIONS, DAYS_OF_WEEK_SELECT_OPTIONS } from '../../constants';
@@ -27,13 +28,16 @@ export const DynamicSelect = ({
       );
     case Period.MONTH:
       return (
-        <Select
-          className={classes.date}
-          size="large"
-          onChange={onChangeMonthDay}
-          options={DAYS_OF_MONTH_SELECT_OPTIONS}
-          value={monthDay}
-        />
+        <div className={classes.month}>
+          <Select
+            className={classes.date}
+            size="large"
+            onChange={onChangeMonthDay}
+            options={DAYS_OF_MONTH_SELECT_OPTIONS}
+            value={monthDay}
+          />
+          <span>{getOrdinalNumber(monthDay!, true)}</span>
+        </div>
       );
     default:
       return null;
diff --git a/src/shared/ui/CronSelect/hooks/useCron/useCron.ts b/src/shared/ui/CronSelect/hooks/useCron/useCron.ts
index ac00c4d0..e51c7880 100644
--- a/src/shared/ui/CronSelect/hooks/useCron/useCron.ts
+++ b/src/shared/ui/CronSelect/hooks/useCron/useCron.ts
@@ -22,7 +22,7 @@ export const useCron = ({ value, onChange = () => undefined }: UseCronProps) =>
         cronService.setMonthDay(dayjs().date());
         break;
     }
-    onChange(cronService.toString());
+    handleChange();
   };
 
   const handleChangeWeekDay = (weekDay: CronSegmentValue) => {
diff --git a/src/shared/ui/CronSelect/styles.module.less b/src/shared/ui/CronSelect/styles.module.less
index 4b788d66..ca6ed030 100644
--- a/src/shared/ui/CronSelect/styles.module.less
+++ b/src/shared/ui/CronSelect/styles.module.less
@@ -8,6 +8,12 @@
     align-items: center;
     gap: 8px;
 
+    .month {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
     .period {
       width: 100px;
     }
diff --git a/src/shared/utils/getOrdinalNumber/index.ts b/src/shared/utils/getOrdinalNumber/index.ts
index 4bd2bd36..dc84571d 100644
--- a/src/shared/utils/getOrdinalNumber/index.ts
+++ b/src/shared/utils/getOrdinalNumber/index.ts
@@ -1,21 +1,29 @@
 /**
  * Util for getting number with its ordinal postfix
  *
- * @param value - number.
+ * @param value - number
+ * @param onlyPostfix - flag for returning only postfix without number
  *
  * @returns - ordinal number
  */
-export const getOrdinalNumber = (value: number): string => {
-  const currentValue = value.toString();
-  const valueLastChar = Number(currentValue[currentValue.length - 1]);
-  if (valueLastChar === 1) {
-    return `${value}st`;
+export const getOrdinalNumber = (value: number, onlyPostfix = false): string => {
+  const lastDigit = value % 10;
+  const twoLastDigits = value % 100;
+  let postfix = '';
+
+  if (lastDigit === 1 && twoLastDigits !== 11) {
+    postfix = 'st';
+  } else if (lastDigit === 2 && twoLastDigits !== 12) {
+    postfix = 'nd';
+  } else if (lastDigit === 3 && twoLastDigits !== 13) {
+    postfix = 'rd';
+  } else {
+    postfix = 'th';
   }
-  if (valueLastChar === 2) {
-    return `${value}nd`;
+
+  if (onlyPostfix) {
+    return postfix;
   }
-  if (valueLastChar === 3) {
-    return `${value}rd`;
-  }
-  return `${value}th`;
+
+  return `${value}${postfix}`;
 };