fix: 日付表示がタイムゾーンを無視している問題

app/ListItem.tsx

@@ -52,18 +52,16 @@ export const ListItem = (props: {
   onSelect: () => void;
 }) => {
   const { entry } = props;
+  const text = entry.text.replaceAll(/\n/g, ' ');
   const summary = props.searchQuery?.keyword
-    ? generateSummaryEntity(entry.text, props.searchQuery.keyword, {
+    ? generateSummaryEntity(text, props.searchQuery.keyword, {
         maxLength: 120,
         beforeLength: 50,
       })
     : undefined;
+
   const SummaryComponent = () =>
-    summary ? (
-      <SearchSummary summary={summary} />
-    ) : (
-      <Summary text={entry.text} />
-    );
+    summary ? <SearchSummary summary={summary} /> : <Summary text={text} />;
 
   return (
     <button
@@ -84,7 +82,7 @@ export const ListItem = (props: {
       <div className="mb-2" />
       <div className="mt-auto flex flex-row items-center justify-start space-x-3">
         <p className="text-gray-600 dark:text-gray-400">
-          {dayjs(entry.createdAt).format('YYYY-MM-DD')}
+          {dayjs(entry.createdAt).tz().format('YYYY-MM-DD')}
         </p>
         {props.entry.starred && (
           <StarIcon className="w-5 text-yellow-400 dark:text-yellow-500" />

app/[uuid]/ArticleHeader.tsx

@@ -7,11 +7,11 @@ import {
   TrashIcon,
   StarIcon,
 } from '@heroicons/react/24/solid';
+import dayjs from 'dayjs';
 import { useRouter } from 'next/navigation';
 import { experimental_useFormStatus as useFormStatus } from 'react-dom';
 import { useForm, useWatch } from 'react-hook-form';
 import { Entry } from '../../domain/Entry';
-import dayjs from '../../infra/dayjs';
 import { Button } from '../_components/Button';
 import { IconButton } from '../_components/IconButton';
 import { IconCheckbox } from '../_components/IconCheckbox';
@@ -74,15 +74,11 @@ export const ArticleHeader = ({
         aria-label="Update Entry"
         disabled={pending || !updateAction}
         formAction={() =>
-          handleSubmit((formData: Form) =>
+          handleSubmit((formData: Form) => {
             updateAction?.({
-              entry: {
-                ...entry,
-                ...formData,
-                createdAt: dayjs(formData.createdAt).tz().format(),
-              },
-            })
-          )()
+              entry: { ...entry, ...formData },
+            });
+          })()
         }
       >
         {pending ? <Spinner /> : <CheckIcon />}

domain/Entry.ts

@@ -6,7 +6,7 @@ export type Entry = {
   starred: boolean;
   uuid: string;
   tags: string[]; // [] if empty
-  createdAt: string; // ISO8601 without fraction seconds
+  createdAt: string;
   modifiedAt: string;
 };
 
@@ -23,8 +23,8 @@ export const newEntry = (props: {
     starred: props.starred ?? false,
     uuid: props.uuid ?? crypto.randomUUID().replace(/-/g, '').toUpperCase(),
     tags: props.tags ?? [],
-    createdAt: dayjs(props.createdAt).format(), // current time if empty
-    modifiedAt: dayjs(props.modifiedAt).format(),
+    createdAt: dayjs(props.createdAt).format('YYYY-MM-DDTHH:mm:ss'),
+    modifiedAt: dayjs(props.modifiedAt).format('YYYY-MM-DDTHH:mm:ss'),
   };
 };
 
@@ -33,7 +33,7 @@ export const extractTagHistory = (posts: Entry[]): string[] => [
 ]; // uniq
 
 // 基準になる日時
-const baseDate = dayjs('2023-06-23T02:25:00+09:00');
+const baseDate = dayjs('2023-06-23T02:25:00');
 
 export const sampleEntries: Entry[] = [
   newEntry({

infra/entryRepository.ts

@@ -2,6 +2,7 @@ import { Prisma } from '@prisma/client';
 import { Entry as PrismaEntry, Tag, PrismaPromise } from '@prisma/client';
 import { Entry, newEntry, extractTagHistory } from '../domain/Entry';
 import { entriesTagToABs } from '../domain/Tag';
+import dayjs from './dayjs';
 import { prisma } from './prisma';
 
 const toEntry = (row: PrismaEntry & { tags: Tag[] }): Entry =>
@@ -10,8 +11,8 @@ const toEntry = (row: PrismaEntry & { tags: Tag[] }): Entry =>
     starred: row.starred,
     uuid: row.uuid,
     tags: row.tags?.map((tag) => tag.name),
-    createdAt: row.created_at,
-    modifiedAt: row.modified_at,
+    createdAt: dayjs.utc(row.created_at).tz(),
+    modifiedAt: dayjs.utc(row.modified_at).tz(),
   });
 
 /**
@@ -32,8 +33,8 @@ export const readMany = async (props: {
       ...(props.since || props.until
         ? {
             created_at: {
-              ...(props.since ? { gte: props.since } : {}),
-              ...(props.until ? { lt: props.until } : {}),
+              ...(props.since ? { gte: dayjs.tz(props.since).toDate() } : {}),
+              ...(props.until ? { lt: dayjs.tz(props.until).toDate() } : {}),
             },
           }
         : {}),
@@ -69,8 +70,8 @@ export const createOne = async (props: { entry: Entry }): Promise<Entry> => {
   const row = await prisma.entry.create({
     data: {
       ...rest,
-      created_at: createdAt,
-      modified_at: modifiedAt,
+      created_at: dayjs.tz(createdAt).toDate(),
+      modified_at: dayjs.tz(modifiedAt).toDate(),
       tags: {
         connectOrCreate: tags.map((tag) => ({
           where: { name: tag },
@@ -95,8 +96,8 @@ export const createMany = async (props: {
     data: props.entries.map(
       ({ createdAt, modifiedAt, tags: _tags, ...rest }) => ({
         ...rest,
-        created_at: createdAt,
-        modified_at: modifiedAt,
+        created_at: dayjs.utc(createdAt).toDate(),
+        modified_at: dayjs.utc(modifiedAt).toDate(),
       })
     ),
   });
@@ -134,8 +135,8 @@ export const updateOne = async (props: { entry: Entry }): Promise<Entry> => {
     where: { uuid: props.entry.uuid.toUpperCase() },
     data: {
       ...rest,
-      created_at: createdAt,
-      modified_at: modifiedAt,
+      created_at: dayjs.tz(createdAt).toDate(),
+      modified_at: dayjs.tz(modifiedAt).toDate(),
       tags: {
         connectOrCreate: tags.map((tag) => ({
           where: { name: tag },

sandbox.config.json

@@ -0,0 +1,4 @@
+{
+  "port": 3000,
+  "node": "18"
+}