fix requests page timezone mismatch on different views

Helicone · Sep 18, 2024 · 5647aea · 5647aea
1 parent 58ffa2b
commit 5647aea
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 46 deletions.
diff --git a/web/components/shared/themed/table/requestRow.tsx b/web/components/shared/themed/table/requestRow.tsx
@@ -6,6 +6,7 @@ import { formatNumber } from "../../../templates/users/initialColumns";
 import { clsx } from "../../clsx";
 import { useState } from "react";
 import CostPill from "../../../templates/requestsV2/costPill";
+import { getLocalDateFormat, getUSDateFromString } from "../../utils/utils";
 
 interface RequestRowProps {
   index: number;
@@ -42,7 +43,7 @@ const RequestRow = (props: RequestRowProps) => {
     >
       <div className="flex flex-row space-x-4 items-center ">
         <p className="text-sm font-semibold">
-          {new Date(row.createdAt).toLocaleString()}
+          {getUSDateFromString(getLocalDateFormat(row.createdAt))}
         </p>
         <StatusBadge
           statusType={row.status.statusType}

diff --git a/web/components/shared/utils/utils.tsx b/web/components/shared/utils/utils.tsx
@@ -67,6 +67,27 @@ const getUSDateMin = (value: string) => {
     .slice(-2)}`;
 };
 
+const getLocalDateFormat = (date: string) => {
+  const dateObj = new Date(date);
+  const tzOffset = dateObj.getTimezoneOffset() * 60000;
+
+  const localDateObj = new Date(dateObj.getTime() - tzOffset);
+  const formattedDate =
+    [
+      ("0" + (localDateObj.getMonth() + 1)).slice(-2),
+      ("0" + localDateObj.getDate()).slice(-2),
+      localDateObj.getFullYear(),
+    ].join("/") +
+    " " +
+    [
+      ("0" + localDateObj.getHours()).slice(-2),
+      ("0" + localDateObj.getMinutes()).slice(-2),
+      ("0" + localDateObj.getSeconds()).slice(-2),
+    ].join(":");
+
+  return formattedDate;
+};
+
 const capitalizeWords = (str: string) => {
   // replace underscores with spaces
   const strWithSpaces = str.replace(/_/g, " ");
@@ -89,6 +110,7 @@ function removeLeadingWhitespace(str: string | null): string {
 }
 
 export {
+  getLocalDateFormat,
   getUSDateFromString,
   getUSDate,
   getUSDateShort,

diff --git a/web/components/templates/requestsV2/initialColumns.tsx b/web/components/templates/requestsV2/initialColumns.tsx
@@ -1,5 +1,8 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { getUSDateFromString } from "../../shared/utils/utils";
+import {
+  getLocalDateFormat,
+  getUSDateFromString,
+} from "../../shared/utils/utils";
 import { NormalizedRequest } from "./builder/abstractRequestBuilder";
 import ModelPill from "./modelPill";
 import StatusBadge from "./statusBadge";
@@ -25,27 +28,6 @@ function formatNumber(num: number) {
   }
 }
 
-const convertToUSDateFormat = (date: string) => {
-  const dateObj = new Date(date);
-  const tzOffset = dateObj.getTimezoneOffset() * 60000;
-
-  const localDateObj = new Date(dateObj.getTime() - tzOffset);
-  const formattedDate =
-    [
-      ("0" + (localDateObj.getMonth() + 1)).slice(-2),
-      ("0" + localDateObj.getDate()).slice(-2),
-      localDateObj.getFullYear(),
-    ].join("/") +
-    " " +
-    [
-      ("0" + localDateObj.getHours()).slice(-2),
-      ("0" + localDateObj.getMinutes()).slice(-2),
-      ("0" + localDateObj.getSeconds()).slice(-2),
-    ].join(":");
-
-  return formattedDate;
-};
-
 export const getInitialColumns: (
   isCached?: boolean
 ) => ColumnDef<NormalizedRequest>[] = (isCached = false) => [
@@ -55,7 +37,7 @@ export const getInitialColumns: (
     header: "Created At",
     cell: (info) => (
       <span className="text-gray-900 dark:text-gray-100 font-medium">
-        {getUSDateFromString(convertToUSDateFormat(info.getValue() as string))}
+        {getUSDateFromString(getLocalDateFormat(info.getValue() as string))}
       </span>
     ),
     meta: {

diff --git a/web/components/templates/requestsV2/requestCard.tsx b/web/components/templates/requestsV2/requestCard.tsx
@@ -8,6 +8,10 @@ import CostPill from "./costPill";
 import { CustomProperties } from "./customProperties";
 import ModelPill from "./modelPill";
 import StatusBadge from "./statusBadge";
+import {
+  getLocalDateFormat,
+  getUSDateFromString,
+} from "@/components/shared/utils/utils";
 
 interface RequestCardProps {
   request: NormalizedRequest;
@@ -53,7 +57,7 @@ const RequestCard = (props: RequestCardProps) => {
         <div className=" flex flex-row justify-between items-center w-full border-b border-gray-100 dark:border-gray-900 py-2">
           <div className="flex flex-row items-center gap-2">
             <p className="font-semibold text-xl">
-              {new Date(request.createdAt).toLocaleString()}
+              {getUSDateFromString(getLocalDateFormat(request.createdAt))}
             </p>
             <StatusBadge
               statusType={request.status.statusType}

diff --git a/web/components/templates/requestsV2/requestRow.tsx b/web/components/templates/requestsV2/requestRow.tsx
@@ -20,6 +20,10 @@ import ModelPill from "./modelPill";
 import StatusBadge from "./statusBadge";
 import ThemedModal from "../../shared/themed/themedModal";
 import NewDataset from "../datasets/NewDataset";
+import {
+  getLocalDateFormat,
+  getUSDateFromString,
+} from "@/components/shared/utils/utils";
 
 function getPathName(url: string) {
   try {
@@ -28,26 +32,6 @@ function getPathName(url: string) {
     return url;
   }
 }
-const convertToUSDateFormat = (date: string) => {
-  const dateObj = new Date(date);
-  const tzOffset = dateObj.getTimezoneOffset() * 60000;
-
-  const localDateObj = new Date(dateObj.getTime() - tzOffset);
-  const formattedDate =
-    [
-      ("0" + (localDateObj.getMonth() + 1)).slice(-2),
-      ("0" + localDateObj.getDate()).slice(-2),
-      localDateObj.getFullYear(),
-    ].join("/") +
-    " " +
-    [
-      ("0" + localDateObj.getHours()).slice(-2),
-      ("0" + localDateObj.getMinutes()).slice(-2),
-      ("0" + localDateObj.getSeconds()).slice(-2),
-    ].join(":");
-
-  return formattedDate;
-};
 
 const RequestRow = (props: {
   request: NormalizedRequest;
@@ -234,7 +218,7 @@ const RequestRow = (props: {
               Created At
             </p>
             <p className="text-gray-700 dark:text-gray-300 truncate">
-              {convertToUSDateFormat(request.createdAt)}
+              {getUSDateFromString(getLocalDateFormat(request.createdAt))}
             </p>
           </li>
           <li className="flex flex-row justify-between items-center py-2 gap-4">