Fix Timezone Issue in Leave Request (#118)

* initial commit for Fix Timezone Issue in Leave Request

* fixed timezone issue

app/frontend/components/date_field/date_field.tsx

@@ -3,6 +3,7 @@ import React, { ReactNode } from 'react';
 import { Text } from '../text/text';
 import { FormField, useInputId } from '../form_field/form_field';
 import classnames from 'classnames';
+import { isoDate } from '../../util/date';
 
 interface Props extends FormField<Date | null> {
   label?: ReactNode;
@@ -56,7 +57,7 @@ export function DateField({
               name={name}
               className={classnames('textfield__input')}
               readOnly={readOnly}
-              value={value?.toJSON().slice(0, 10) ?? ''}
+              value={value ? isoDate(value) : ''}
               type="date"
               onChange={(event) => {
                 if (readOnly) {

app/frontend/util/date.ts

@@ -0,0 +1,11 @@
+export function isoDate(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+export function sameDay(date1: Date, date2: Date): boolean {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}

app/frontend/util/formatter.ts

@@ -1,3 +1,4 @@
+import { sameDay } from './date';
 import type { Locale } from './i18n';
 
 export class Formatter {
@@ -107,6 +108,9 @@ export class Formatter {
     if (!startDate || !endDate) {
       return null;
     }
+    if (sameDay(startDate, endDate)) {
+      return this.date(startDate);
+    }
     if (startDate.getFullYear() === endDate.getFullYear()) {
       return `${this.dateWithoutYear(startDate)} - ${this.date(endDate)}`;
     } else {

app/views/leaves/new.tsx

@@ -14,6 +14,7 @@ import { Form } from '../../frontend/components/form/form';
 import { handleError } from '../../frontend/util/errors';
 import { Box } from '../../frontend/components/box/box';
 import { Stack } from '../../frontend/components/stack/stack';
+import { isoDate } from '../../frontend/util/date';
 
 interface Form {
   userId: string;
@@ -43,10 +44,16 @@ export default function ({
       type: 'required',
     },
     onSubmit: async ({ model }) => {
+      const params = {
+        leave: {
+          ...model,
+          days: model.days.map(isoDate),
+        },
+      };
       await reaction.call({
         path: '/leaves',
         method: 'POST',
-        params: { leave: model },
+        params,
         refresh: true,
       });
       modal.close();