refactor(utils): implement splittedBy for convert from unixtime to …

…localed
yoshinorin · Jan 30, 2024 · 9195095 · 9195095
1 parent b188a3a
commit 9195095
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 28 deletions.
diff --git a/__tests__/unit/utils/time.test.ts b/__tests__/unit/utils/time.test.ts
@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest'
 import {
+  splittedBy,
   toDate,
   toISODateSrting,
-  toJaJpDottedDateString
 } from '../../../src/utils/time';
 
 test('Unixtime should be convert to Date', () => {
@@ -15,12 +15,7 @@ test('Unixtime should be convert to ISODateTime', () => {
   .toEqual("2022-02-05T15:33:26.000Z")
 })
 
-/*
-This test seems lazy no-need.
-
-// https://stackoverflow.com/questions/56261381/how-do-i-set-a-timezone-in-my-jest-config
-test('Date should be convert to dotted date string (ja-Jp)', () => {
-  expect(toJaJpDottedDateString(toDate(1644075206)))
-  .toEqual("2022.2.6")
-})
-*/
+test('splittedBy', () => {
+  expect(splittedBy(1644075206, 'ja-JP', "/"))
+  .toEqual(['2022', '02', '06'])
+});
diff --git a/src/components/archives.tsx b/src/components/archives.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Archive, ArchiveFormatedDate } from '../models/models';
-import { toDate } from '../utils/time';
+import { splittedBy } from '../utils/time';
 import styles from '../styles/archives.module.scss';
 import containerStyles from '../styles/components/container.module.scss';
 import {
@@ -16,14 +16,7 @@ export const ArchivesComponent: React.FunctionComponent<{ archives: Array<Archiv
   // TODO: clean up
   let years: string[] = [];
   const allArticles = archives.map((a) => {
-    // TODO: move somewhere
-    const d = toDate(a.publishedAt).toLocaleDateString('ja-JP', {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-    })
-    .split("/");
-
+    const d = splittedBy(a.publishedAt, 'ja-JP', "/");
     years.push(d[0].toString());
 
     return {

diff --git a/src/components/articles.tsx b/src/components/articles.tsx
@@ -6,7 +6,7 @@ import homeStyles from '../styles/home.module.scss';
 import flexStyles from '../styles/components/flex.module.scss';
 import containerStyles from '../styles/components/container.module.scss';
 import buttonStyles from '../styles/components/button.module.scss';
-import { toDate, toJaJpDottedDateString } from '../utils/time';
+import { splittedBy } from '../utils/time';
 
 export const ArticlesComponent: React.FunctionComponent<{ articles: Array<Article> }> = ({ articles }) => {
   return (
@@ -16,7 +16,7 @@ export const ArticlesComponent: React.FunctionComponent<{ articles: Array<Articl
           <article className={styles['article']} key={idx}>
             <div className={styles['wrap']}>
               <time dateTime={`${article.publishedAt}`} className={`${styles['time']}`}>
-                {`${toJaJpDottedDateString(toDate(article.publishedAt))}`}
+                {`${splittedBy(article.publishedAt, 'ja-JP', "/").join(',').replaceAll(',', '.')}`}
               </time>
               <Link href={`${article.path}`} prefetch={false} className='unstyled' >
                 <h2 className={`${styles['header']} ${styles['title']}`}>
@@ -83,7 +83,7 @@ const ArticlesSection: React.FunctionComponent<{ articles: Array<Article> }> = (
             <div className={articlesInSection['wrap']}>
               <div className={articlesInSection['title']}>
                 <time dateTime={`${article.publishedAt}`} className={articlesInSection['time']}>
-                  {`${toJaJpDottedDateString(toDate(article.publishedAt))}`} - &nbsp;
+                  {`${splittedBy(article.publishedAt, 'ja-JP', "/").join(',').replaceAll(',', '.')}`} - &nbsp;
                 </time>
                 <Link href={`${article.path}`} prefetch={false} className='unstyled'>
                   {`${article.title}`}

diff --git a/src/components/searchResult.tsx b/src/components/searchResult.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import styles from '../styles/articles.module.scss';
-import { toDate, toJaJpDottedDateString } from '../utils/time';
+import { splittedBy } from '../utils/time';
 import { SearchResponse } from '../models/models';
 
 export const SearchResultComponent: React.FunctionComponent<{
@@ -21,7 +21,7 @@ export const SearchResultComponent: React.FunctionComponent<{
             <div className={styles['wrap']}>
               <div className={styles['header']}>
                 <time dateTime={`${content.publishedAt}`} className={styles['time']}>
-                  {`${toJaJpDottedDateString(toDate(content.publishedAt))}`}
+                  {`${splittedBy(content.publishedAt, 'ja-JP', "/").join(',').replaceAll(',', '.')}`}
                 </time>
                 <Link href={`${content.path}`} prefetch={false} className='unstyled' target="_blank">
                   <h3 className={styles['title']}>

diff --git a/src/utils/time.ts b/src/utils/time.ts
@@ -22,8 +22,11 @@ export function toISODateSrting(unixTime: number): string {
   }
 }
 
-// TODO: refactor naming
-// 2022/2/8 22:59:10 -> 2022.2.8
-export function toJaJpDottedDateString(date: Date): string {
-  return date.toLocaleString('ja-JP').split(' ')[0].replace(/\//g,".");
+export function splittedBy(unixTime: number, locale: string, delimiter: string): Array<string> {
+  return toDate(unixTime).toLocaleDateString(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  })
+  .split(delimiter);
 }