Added format Date object using custom format with localization

GGO-web · Sep 24, 2023 · 83c8210 · 83c8210
1 parent 48386f5
commit 83c8210
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,9 +1,6 @@
 import { ICarouselItem } from './types/constants';
 import { v4 } from 'uuid';
 import { getImageUrl } from '@helpers/getImageUrl';
-import dayjs from 'dayjs';
-
-const currentDate = dayjs();
 
 export const carouselItems: ICarouselItem[] = [
   {
@@ -380,35 +377,34 @@ export const DESCRIPTION_ANIME = {
     'Між живим і мертвим світом дуже тонка грань. Нерідко породження пекла порушують цю межу. Вони проникають в тіла в чоловіків, жінок і навіть дітей, починаючи творити щось жахливе. Окультист і мисливець за усілякою нечистю Джон Костянтин не зовсім звичайна людина. На ньому лежить жахлива печать самогубці. Джон побував на тому світі і зміг повернутися в нормальне життя. Тепер за сюжетом мультсеріалу "Костянтин" він володіє древніми знаннями, які допомагають йому відправляти демонів назад у пекло. Людям він допомагає позбутися від темної сутності, проводячи необхідні обряди екзорцизму.\n Звичайно у Джона є маса недоліків. Він багато курить, що негативно позначається на його здоров\'ї. Однак безвідмовний дробовик завжди з ним. Темні сили природно бажають з ним розправитися. Вони придумують різні витончені способи знищити Костянтина. У цій боротьбі мисливцеві допомагає гострий розум і чудове знання свого супротивника. Часто доводиться діяти одному, оскільки навіть кохана дівчина не зовсім розуміє Джона.'
 };
 
-export const LIST_RELEASE_SCHEDULE = [
+export interface SeriesReleaseScheduleItem {
+  id: string;
+  season: number;
+  series: number;
+  episode: number;
+  date: Date;
+}
+
+export const LIST_RELEASE_SCHEDULE: SeriesReleaseScheduleItem[] = [
   {
     id: v4(),
     season: 1,
     series: 5,
     episode: 5,
-    day: currentDate.date(),
-    month: currentDate.format('MMMM'),
-    year: currentDate.year(),
-    dayWeek: currentDate.format('dddd')
+    date: new Date()
   },
   {
     id: v4(),
     season: 1,
     series: 4,
     episode: 4,
-    day: currentDate.date(),
-    month: currentDate.format('MMMM'),
-    year: currentDate.year(),
-    dayWeek: currentDate.format('dddd')
+    date: new Date()
   },
   {
     id: v4(),
     season: 1,
     series: 3,
     episode: 3,
-    day: currentDate.date(),
-    month: currentDate.format('MMMM'),
-    year: currentDate.year(),
-    dayWeek: currentDate.format('dddd')
+    date: new Date()
   }
 ];
diff --git a/src/helpers/formatDate.ts b/src/helpers/formatDate.ts
@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import uaLocale from 'dayjs/locale/uk';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+
+dayjs.extend(advancedFormat);
+dayjs.locale(uaLocale);
+
+export const formatDate = (date: Date, format = 'D MMM YYYY, dd') => {
+  return dayjs(date).format(format);
+};
diff --git a/src/hooks/useDynamicSvgImport.ts b/src/hooks/useDynamicSvgImport.ts
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export function useDynamicSvgImport(iconName: string) {
   const importedIconRef = useRef<React.FC<React.SVGProps<SVGElement>>>();
@@ -24,5 +24,5 @@ export function useDynamicSvgImport(iconName: string) {
     importSvgIcon();
   }, [iconName]);
 
-  return {error, loading, SvgIcon: importedIconRef.current};
+  return { error, loading, SvgIcon: importedIconRef.current };
 }
diff --git a/src/pages/Title/components/SeriesReleaseSchedule/SeriesReleaseSchedule.tsx b/src/pages/Title/components/SeriesReleaseSchedule/SeriesReleaseSchedule.tsx
@@ -1,45 +1,27 @@
 import { Heading } from '@components/Heading/Heading';
 
 import React from 'react';
-import { LENGTH_CHARS_3 } from '../../../../constants';
+import { SeriesReleaseScheduleItem } from '../../../../constants';
+import { formatDate } from '@helpers/formatDate';
 
-interface SeriesReleaseScheduleProps {
-  listSeries: {
-    id: string;
-    season: number;
-    series: number;
-    episode: number;
-    day: number;
-    month: string;
-    year: number;
-    dayWeek: string;
-  }[];
-}
-
-export const SeriesReleaseSchedule: React.FC<SeriesReleaseScheduleProps> = ({
-  listSeries
-}) => {
+export const SeriesReleaseSchedule: React.FC<{
+  listSeries: SeriesReleaseScheduleItem[];
+}> = ({ listSeries }) => {
   return (
     <div className="series-release-schedule">
       <Heading className="text-xl mb-5">Графік виходу серій:</Heading>
       <div className="series-release-schedule__list">
-        {listSeries.map(
-          ({ id, season, series, day, episode, year, month, dayWeek }) => {
-            const shortenedMonth = month.slice(0, LENGTH_CHARS_3);
-
-            return (
-              <div key={id} className="series-release-schedule__item">
-                <p>
-                  {season} сезон {series} серія
-                </p>
-                <p>Episode {episode}</p>
-                <p>
-                  {day} {shortenedMonth} {year} {dayWeek}
-                </p>
-              </div>
-            );
-          }
-        )}
+        {listSeries.map(({ id, season, series, episode, date }) => {
+          return (
+            <div key={id} className="series-release-schedule__item">
+              <p>
+                {season} сезон {series} серія
+              </p>
+              <p>Episode {episode}</p>
+              <p>{formatDate(date)}</p>
+            </div>
+          );
+        })}
       </div>
     </div>
   );